I have written fullcalendar code in one HTML file and want to use it in other HTML file in div tag, I did this by calling javascript function in which I set the innerHTML of div tag to object tag like:
document.getElementById("content").innerHTML = '<object class="preventScroll" id="calObj" type="text/html" data="Calendar.html" height="100%" width="100%" align="left"></object>';
It is rendering the calendar in div with id "content" but the dayclick and eventclick are not working
i guess you should try and add it as an dependent object rather than rendering it as html.
e.g:
document.getElementById("content").appendChild(calendarObject)
You loose the event binding because you are rendering an html and not "live" object
Related
Is it possible to embed an html5 version of a youtube video without using an iframe?
Here is a example of embedding without an iFrame:
<div style="width: 560px; height: 315px; float: none; clear: both; margin: 2px auto;">
<embed
src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1"
wmode="transparent"
type="video/mp4"
width="100%" height="100%"
allow="autoplay; encrypted-media; picture-in-picture"
allowfullscreen
title="Keyboard Cat"
>
</div>
compare to regular iframe "embed" code from YouTube:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/J---aiyznGQ?autoplay=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
and as far as HTML5 goes, use <object> tag like so (corrected):
<object
style="width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;"
data="http://www.youtube.com/embed/J---aiyznGQ?autoplay=1">
</object>
Yes. Youtube API is the best resource for this.
There are 3 way to embed a video:
IFrame embeds using <iframe> tags
IFrame embeds using the IFrame Player API
AS3 (and AS2*) object embeds DEPRECATED
I think you are looking for the second one of them:
IFrame embeds using the IFrame Player API
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>
Here are some instructions where you may take a look when starting using the API.
An embed example without using iframe is to use <object> tag:
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
(replace yt-video-id with your video id)
JSFIDDLE
Because of the GDPR it makes no sense to use the iframe, you should rather use the object tag with the embed tag and also use the embed link.
<object width="100%" height="333">
<param name="movie" value="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw">
<embed src="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw" width="100%" height="333">
</object>
You should also activate the extended data protection mode function to receive the no cookie url.
type="application/x-shockwave-flash"
flash does not have to be used
Nocookie, however, means that data is still being transmitted, namely the thumbnail that is loaded from YouTube. But at least data is no longer passed on to advertising networks (as example DoubleClick). And no user data is stored on your website by youtube.
Yes, but it depends on what you mean by 'embed'; as far as I can tell after reading through the docs, it seems like you have a couple of options if you want to get around using the iframe API. You can use the javascript and flash API's (https://developers.google.com/youtube/player_parameters) to embed a player, but that involves creating Flash objects in your code (something I personally avoid, but not necessarily something that you have to). Below are some helpful sections from the dev docs for the Youtube API.
If you really want to get around all these methods and include video without any sort of iframe, then your best bet might be creating an HTML5 video player/app that can connect to the Youtube Data API (https://developers.google.com/youtube/v3/). I'm not sure what the extent of your needs are, but this would be the way to go if you really want to get around using any iframes or flash objects.
Hope this helps!
Useful:
(https://developers.google.com/youtube/player_parameters)
IFrame embeds using the IFrame Player API
Follow the IFrame Player API instructions to insert a video player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
...
IFrame embeds using tags
Define an tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The tag's height and width parameters specify the dimensions of the player.
If you are creating the element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:
...
AS3 object embeds
Object embeds use an tag to specify the player's dimensions and parameters. The sample code below demonstrates how to use an object embed to load an AS3 player that automatically plays the same video as the previous two examples.
Use the object tag:
<object data="http://iamawesome.com" type="text/html" width="200" height="200">
access the page directly
</object>
Ref: http://debug.ga/embedding-external-pages-without-iframes/
I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.
I'm performing a F:AJAX call where I receive a byte Stream output whose content type is application PDF. I want this bytestream to be loaded in a JSF equivalent tag which should make me specify the content type as "Application/PDF" during tag declaration. Also, f:View fails saying content type not supported. Any JSF specific tags to cater this. Thanks.
Use iframe tag. This line shows how to use it:
<iframe src="foo.pdf" width="600" height="400" scrolling="no"></iframe>
If you also want to hide the (default) border, add frameBorder="0".
There is also pdf.js library that allows to browse pdf in browser. https://blog.oio.de/2014/04/11/integrating-pdf-js-pdf-viewer-web-application/
The answer is no there isn't such a tag.
To be honest there's no need to change it, since using HTML for this is fine and really the simplest way. You can use IFRAME (like Jay Smith shows you) or OBJECT.
The same way is presented on PrimeFaces's showcase:
<h3>PDF</h3>
<object type="application/pdf"
data="/showcase/resources/demo/media/guide.pdf?pfdrid_c=true"
height="300px" width="100%" internalinstanceid="3">
Your browser can't display pdf,
click
to download pdf instead.
</object>
having some problems with developing custom components in JSF. I am building a component which wraps some javascript generated charts (javascript appends SVG elements to specified div). They have some animations by the time they render. When some part of chart is changed, there is made modification for only part of the chart by calling some .js scripts (whole chart is not rendered again). So, the rendered component looks some like this:
<div> <--- master container
<span id="clientId" />
<script> .js script for chart generation </script>
<div id="chart">
<svg>...</svg> <--- generated by script
</div>
</div>
When is ajax render invoked with ID of this component, there is only span updated (so chart won't rerender). I catch the call, generate some modification script and return them to the client. Everything is ok.
The problem: when is updated some other component or container which holds this component with chart, the div "chart" is rerendered. Is there any server side way, how to exclude component to be updated?
Thanks
i load a svg file like this
var draw=SVG('container');
var rawSVG=$('rawSVG').get('html'); //get content of invisible div with mootools
draw.svg(rawSVG);
in rawSVG DIV i can see the link tags. But in container, everything inside of the link tags is dropped and i get empty tags
in import.svg.js the only thing related to xlink:href i could found is related to image
element = context.image(attr['xlink:href'])
the links are created by svg.js and saved by export.svg.js correctly but on importing the next time the get dropped.
edit:
i want to load a svg graphic into an cms and than be able to modify the graphic.
it is working fine but on next import the text within the link tag get dropped.
edit 2
ok, now i loose the xlink element but the child elements are kept
what i want is to change a svg node in an external svg file
i include in a hidden div called rawSVG
in witch i see
...//more svg
<a xlink:href="test/" id="lktest">
<text y="86.83333396911621" x="100" font-family="Muli" id="txtest">
<tspan dy="1.8em" x="0" id="tstest">test</tspan>
</text>
</a>
...//more svg
than i grab the content of that div with mootools
var rawSVG=$('rawSVG').get('html');
and than i do
draw.svg(rawSVG);
to make it editable in svg.js
but in my container div i see
... //more svg
<text y="86.83333396911621" x="100" font-family="Muli" id="txtest">
<tspan dy="1.8em" x="0" id="tstest">test</tspan>
</text>
... //more svg
the ink was created and exported with svg.js and works. this behavior happens after reload
i have the xmlns:xlink="http://www.w3.org/1999/xlink" in my svg node
I tried html 5 and html 4 strict
i tried svg with doctype and without
I also tried images and they get dropped aswell
it's like the xml link namespace is not recognized
i tried to set the namespace of xlink like in the comment of the answer to this cuestion:
xmlserializer strips xlink from xlink:html svg image tag
but nothing changed
any suggestion what I'm doing wrong?