I'm trying to pull a YouTube video id from an img and then pass it into an iframe to play an embedded video. My iframe is inside a div which is invisible until the img is clicked:
<div id="testimonialbackground" style="display:none;">
Click here to close the video
<iframe id="testimonialframe" src="" frameborder="0" allowfullscreen></iframe>
</div>
<img src="http://img.youtube.com/vi/x-ROeKGEYSk/1.jpg" onclick="toggledisplay(this);" />
And here's the JavaScript. It works fine until this line elem.setAttribute('src', newsrc);, at which point my page freezes up:
function toggledisplay(obj) {
var div = document.getElementById('testimonialbackground');
var elem = document.getElementById('testimonialframe');
if (div.style.display == "block") {
div.style.display = "none";
elem.setAttribute('src', "");
}
else {
div.style.display = "block";
var explosion = obj.src.split("/");
var newsrc = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";
elem.setAttribute('src', newsrc); // <---- BROKEN LINE RIGHT HERE
elem.contentWindow.location.reload(); //to refresh the iframe
}
}
Thanks for any help!
src is an attribute you can access directly so instead of your line elem.setAttribute('src', newsrc); just use this:
elem.src = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";
Once you set the src there is no need to refresh the iframe, as setting the src will do that automatically. See What's the best way to reload / refresh an iframe using JavaScript?
for more info on reloading iframes. (Basically it points out that you can set the src of an iframe to itself to refresh the iframe).
Related
I'm trying to get CKEditor up and running with Inline Editing, and I want to allow users to only edit single dom elements like h1, h2, p, ect. and it's working fine - but I can't get it to work for html img element:
<img src="img/myimage.jpg" contenteditable="true" />
Images are working fine if I allow CKEditor to insert images into eg. a div element, but is there a way to only allow the content editor to update the src for img tag?
UPDATE
I have solved this with simple jQuery:
$(document).ready(function () {
$('img[contenteditable]').click(function (event) {
var view = $(event.target);
var uniqueIdforCurrentElement = randomString(32).trim();
if (view.attr('id') === undefined || view.attr('id') === '') {
view.attr('id', uniqueIdforCurrentElement);
} else {
uniqueIdforCurrentElement = view.attr('id');
}
window.open('mySelectImageUrl' +
'?mode=jquery" +
'&CKEditorFuncNum=' + uniqueIdforCurrentElement,
'imageWindow',
'width=800, height=600');
});
});
and in imageWindow:
var element = window.opener.document.getElementById('<%:Model.Callback%>');
element.src = fileUrl;
i got some idea that to load a fake image on a div before original image finishies loading and that to be after winodws load.i got some code but cant understand in which part i have to put src image for fake image and original image.do help me out in this code .
my html part is
<div class="myimage"><img src="myimage.jpg" /></div>
note:Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.
$(function(){
$.each(document.images, function(){
var this_image = this;
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
//this_image.src = options.loading; // show loading........
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
var img = new Image();
img.src = lsrc;
$(img).load(function() {
this_image.src = this.src;
});
}
}
});
});
You can use data attribute to do it:
<div class="myimage"><img data-orig="original.jpg" src="fake.jpg" /></div>
$(window).load(function(){
$('.myimage img').attr("src", $(this).data('orig')).removeAttr('data-orig');
});
You can add your images url to a custom data-url attribute and make your image url a base64 1x1 gif. And then when the page loads completely you can get your url from it. Basically it will be like this.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="original-image.png" />
$(window).load(function() {
$("img").each(function() {
$(this).attr("src", $(this).attr("data-src"));
});
});
I have an iframe in my site that must reload every second (it's just reloading simple HTML for data analysis). This causes a really annoying white flash each time it reloads.
I have put hours of research into trying to remove this flash. Here's what I have (which doesn't work), which creates a new iframe, adds it to the DOM, and then removes the old one, effectively reloading the page. It still flashes white though:
$( document ).ready(function() {
setInterval(function() {
var container = document.getElementById('bottom-frame-container');
var source = container.getElementsByTagName('iframe')[0];
var newFrame = document.createElement('iframe');
for (i = 0; i < source.attributes.length; i++) {
var attr = source.attributes[i];
newFrame.setAttribute(attr.name, attr.value);
}
newFrame.style.visibility = 'hidden';
newFrame.id = 'bottom-frame';
container.appendChild(newFrame);
newFrame.style.visibility = 'visible';
container.removeChild(container.getElementsByTagName('iframe')[0]);
}, 1000);
});
The iframe code is simply:
<div id="bottom-frame-container">
<iframe id="bottom-frame" width="100%" height="60%" frameborder="0" allowTransparency="true" src="http://10.62.0.15/haproxy?stats">
</div>
I'm completely open to any suggestions or alternative approaches here, I'm getting a bit desperate!
Here's how i would handle this issue : have one 'load' div on top of the iframe to prevent the blinking from being seen.
Then before loading you fadein the warning --> when fadein is finished you trigger load --> when load is finished you fadeout the warning.
fiddle is here :
http://jsfiddle.net/bZgFL/2/
html is :
<iframe
width=500px
height=300px
id = 'myFrame'
style='position:absolute;top:0;'
src = 'http://jsfiddle.net/'
>
</iframe>
<div id = 'myLoad'
style='float:top;top:0;
position:absolute;
background-color:#CCC;
min-width:500px;
min-height:300px;
'>
<div style='position:absolute;top:130px;left:200px;'>
<b> Loading... </b>
</div>
</div>
</div>
code is (using jQuery)
var ifr = document.getElementById('myFrame');
setFrame();
setInterval(setFrame, 3000);
function setFrame() {
$('#myLoad').fadeIn(200, setAdress);
}
function setAdress() {
ifr.onload=function() { $('#myLoad').fadeOut(200) ;}
ifr.src = 'http://jsfiddle.net/';
}
Obviously it needs fine tuning for the look, and if you want the user to be able to click the iframe, you'll have to disable pointer on top div, but it should get you going.
Can you put the two iFrames on the page and hide show them with CSS. This much less of an impact on the page than removing and inserting elements into the DOM.
Then add an onload event to both of them that triggers the current iFrame to hide and reload, while the new on shows? Use RequestAninationFrame to help reduce flicker. Code would look something like this.
var currentIFrame = 1;
$('iframe').on('load',function(){
$(this).show()
$('#iframe'+(currentIFrame=1-currentIFrame)).hide().delay(1000).reload();
})
This way you only do the switch once your sure the content has fully loaded.
I know this is an old question but I'm really not sure why someone didn't post this obvious solution....
Just paste this javascript code into any page that has an iframe.
<script>
// Preventing whiteflash in loading iframes.
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
</script>
It will simply renfer any iframe visibility:hidden until which time the iframe is loaded and then make it visible.
I have an iframe page within a DIV and I only want the DIV to display once the iframe page is loaded/available. If the iframe page does not load/not available, do not show that DIV at all.
I wrote some JS however it doesn't work as I expected it to, the DIV still display regardless if the iframe page is available or not.
Code:
<div class="ad-container" style="display:none">
<iframe src="//oonagi.org" border="0" scrolling="no" allowtransparency="true" width="500" height="300"></iframe>
</div>
var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
// only show ad once iframe page is loaded
adContainer.find('iframe').load(function() {
adContainer.css('display', 'block');
});
}
you should change iframe src at document.ready inorder to make it fire your iframe load's event.you can try this:
$(document).ready(function() {
$('#frame').bind('load', function() { //binds the event
$('#ad-container').show();
});
var newSrc = $('#frame').attr('src') + '?c=' + Math.random(); //force new URL
$('#frame').attr('src', newSrc); //changing the src triggers the load event
});
I have an <iframe> that is added and removed from the stage as needed. Each time I add it, it needs to load a new page.
I need to get it to remove the previous contents so the frame is empty while the new page is loading.
Here is the code involved:
HTML:
<div id='overlay' class='overlay'></div>
<div id="overlay_displayer_wrapper" class="overlay_displayer_wrapper">
<div id='overlay_displayer' class='overlayDisplayer'>
<iframe id='i_displayer' class='i_displayer'></iframe>
</div>
</div>
This is the code that 'launches' the overlay and iframe above:
function launchDisplayer(img_src, base_directory, session_pics){
showDisplayer(true);
document.getElementById( 'i_displayer' ).setAttribute( 'src', '' );
document.getElementById("i_displayer").src="feeder.php?call=main&curr=" + img_src + "&dir=" + base_directory + "&pics=" + session_pics;
}
This is the function showDisplayer():
function showDisplayer(show){
var overlay = document.getElementById("overlay");
var overlay_displayer = document.getElementById("overlay_displayer_wrapper");
if (show){
overlay.style.display = "block";
overlay_displayer.style.display = "block";
}else{
overlay.style.display = "none";
overlay_displayer.style.display = "none";
}
}
That's all the code involved in this action.
Just clear the src.
Demo: http://jsfiddle.net/ThinkingStiff/9ZrMZ/
HTML:
<iframe id="myframe" src="http://thinkingstiff.com"></iframe>
Script:
document.getElementById( 'myframe' ).setAttribute( 'src', '' );