Imagine that i have a constant animation running, rather it be css, javascript, or in this case for the sake of simplicity a .gif file, and then i append to the DOM a "heavy" element like a youtube iframe and the constant animation get sluggish for a second.
Is there any straightforward or workaround way to achieve such DOM change without staggering the animation?
In the example below notice that if you change the iframe for yet another gif or even one iframe with a fairly simple website the animation runs without staggering or getting sluggish.
Demo/Example: http://codepen.io/anon/pen/xbdewR
stackoverflow is throwing a warning that links to codepen.io must be accompanied with code, it is my first time posting so i hope this is what it is asked for:
$('.button').on('click', function(e) {
// Sluggish
$('.video-container').html('<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" allowfullscreen></iframe>');
// Not Sluggish
//$('.video-container').html('<img src="http://media2.giphy.com/media/e7FOBuKCDtwWI/giphy.gif"/>');
// Not Sluggish
//$('.video-container').html('<iframe width="560" height="315" src="http://html5doctor.com/" frameborder="0" allowfullscreen></iframe>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://media.giphy.com/media/lRBEntSxN87WE/giphy.gif" alt="" />
<div class="video-container">
<a class="button" href='#'>wait for the gif to load completely and press me</a>
</div>
Unfortunately, there is no solution to your problem... It is a matter of web browsers.
This post may help you: Why does my spinner GIF stop while jQuery ajax call is running?
Loading an iframe is going to cause massive delay with loading, layout and DOM changes.
You may be able to decrease some of that impact by making the iframe display: none until it's needed, then rendering it with display: block .. not sure if you have enough control over the iframe video to be able to make it not autoplay even if it's invisible, though.
You can do the following :
write the html code for your iframe with style as display : none
<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" style="display:none;" allowfullscreen></iframe>
and when you click the button then the code js code should be :
$('.button').on('click', function(e){
$('iframe').css('display','block');
});
in this way your gif file won't be sluggish.
Related
I create an iframe with content, the page is displayed without an error. When I refresh the iframe (after 3 seconds), I get an 404. I've tried different approaches like adding a metadata refresh tag, plain JS, jquery,... A 'working' example can be found here; https://jsfiddle.net/RaZoR_BlaZe/ezswtxk7/32/
<div class="second-row">
<iframe name="presentatie" id="presframe" scrolling="no" frameborder="0" src="https://docs.google.com/presentation/d/
13WCxr5uG4Jqw8bPJzB6dIdQ3DP2H4nBFRH8FHxlqK0Q/preview"></iframe>
</div>
setInterval(function() {
$('#presframe').contentWindow.location.reload(true);
}, 3000);
To clarify - I've built a comment system that sanitizes all HTML and displays it as plaintext to prevent trolling, cross-site scripting, etc.
On top of that, I have javascript that runs after the page loads, and detects DIRECT links to Youtube and Imgur content, then builds the appropriate player/frame/tag to display that content.
Here is my example code:
<div class="video imgur">
https://i.imgur.com/Ym7MypF.jpg
https://www.youtube.com/watch?v=t-ZRX8984sc
</div>
And script:
$('.video').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});
$('.imgur').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:i\.)?(?:imgur\.com|)\/(.+)/g, '<img src="https://i.imgur.com/$1">');
});
I can get one to work without the other - however - running both on the same page invariably produces broken tags and links like this, depending on the order:
<iframe width="420" height="345" src="https:<img src=" https:="" i.imgur.com="" www.youtube.com="" embed="" t-zrx8984sc"="" frameborder="0" allowfullscreen=""></iframe>
Why won't my code differentiate between Imgur and Youtube and handle them separately? I'm new at Regex and cannot tell what I'm doing wrong. If anyone could sort me out I'd be grateful.
Your Imgur regex matches too many URLs, e.g.:
https://example.com
https://www.youtube.com/watch?v=foobar
https://imgur.com/foobar
Try using this regex instead: /(?:https:\/\/)?(?:i\.)?(?:imgur\.com)\/(.+)/g
I was wondering, I have a div in a htm page(1) that open and display another htm file(2). And I have areas on this page(2). When I click on those areas, it open another page in the div.
I was wondering if there is a way in native JS using a MutationObserver to observe this kind of modification and do something everytime it happen?
I Work on IE11 exclusively.
Page 1 :
<div id="one">
<iframe src="index.htm" style="width:100%; height:100%;" alt="" id="fram"> </iframe>
</div>
Index.htm
<img src="../assets/SM2.png" usemap="#Tr" id="draggable" class="dragme" onload="initiate()">
<map name="Tr" style="z-index=1;" id="mapping">
<area title="2" shape="circle" coords="6426,4171,8" href="2/Tr.xml">
...
And the thing would occur when I click on the area in Index.htm.
I couldn't find the solution on internet since this is a very particular question /:
Thanks in advance!
Have a nice evening!
EDIT 1: Is it possible do it in some awful way such as using "OnPropertyChange" and when I click on the area, I call a function that change some properties in my page? :/
Alright, I'll post this as an answer then:
You can simply listen for the load event on your iframe, as it should be fired each time a (new) pages has finished loading:
document.getElementById('fram').addEventListener('load', function()
{
/* this is called on the iframe's first load,
and every time it has finished loading a new page */
});
I am having an issue placing a YouTube video in my Product Image Gallery. Currently, I have a large photo as the main product photo and thumbnails change the main product photo. An example is on my website here. When I try to place a video in the code below, I get a broken image link.
I'd like for the YouTube video to play when the thumbnail is selected. If I could get some assistance with this, that would be great. Being new to coding has limited my ability in solving this problem.
Right now, this is a pure HTML solution and the code is below. I am open to javascript though if that is easier.
I appreciate any and all help with this! Thank you
HTML Main Product Photo
<div class="image"><img name="preview" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt=""/></div>
Thumbnails
<div class="thumbnails">
<img onclick="preview.src=img1.src" name="img1" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt="" /><img onclick="preview.src=img2.src" name="img2" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/end.jpg" alt="" /><img onclick="preview.src=img3.src" name="img3" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/lhsl.png" alt="" /><img onclick="preview.src=img4.src" name="img4" src="https://www.youtube.com/watch?v=TTiEz5j48x4" alt="" />
So here you are: Working Fiddle
(function ($, w) {
w.contentToggle = {
addVideo: function (videoId) {
$('.image').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + videoId +'?rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
},
addImage: function (imageSrc) {
$('.image').html('<img name="preview" src="' + imageSrc + '" alt=""/>');
}
};
})(jQuery, window)
It is just a small script which changes the html content of .image on click of the thumbnails. Because jQuery is already included to your website I used it. Of course you can do things like this with pure JS (vanilla).
Hope you got the basic concept of switching contents with jQuery.
With this js snippet you have a new object (contentToggle) available at the global scope. This object contains two functions addVideo() and addImage().
Have fun improving this approach.
You are inserting a video link in a <img> tag, so it's the reason why doesn't work.
A solution could be insert it in a iframe as:
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
I hope it's helps.
It has to be because of SSL/TLS certification or Copyright issues. Every video on web have a embed code. You have to copy that and paste in your main 'div'.
like I have a embed code for a video:
<iframe width="854" height="480" src="https://www.youtube.com/embed/3R1ysTlxiVY" frameborder="0" allowfullscreen></iframe>
now cut the this specific part,
src="https://www.youtube.com/embed/3R1ysTlxiVY"
and copy to your desired container. Now, this is will not be contained into specific area as it is given any height-width, so you have to set width-height for that. You can attach the whole iframe in that case. if you don't allow full screen just set
allowfullscreen="0"
I hope this might work for you.
I have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>