Only load an iframe after class appears in container div (no jquery) - javascript

I have a unique issue where I am loading a lot of iframes on a page and it significantly reduces performance.
Since they are all inside of popup modals, I want to trigger the iframe to load after someone clicks on the modal.
When the modal loads using JS, a class is added called '.in' and this data attribute is changed from true to false "aria-hidden="false".
Here is a sample of the DIV as the trigger:
<div id="ModalPopUp-data-integration-service" class="modal hide fade in" data-
backdrop="true" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
Here is the iframe I want to load:
<iframe src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>

This is what you could use. Don't set src attribute by default for iframe, but e.g data-src one:
<iframe data-src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>
Then once needed, set the relevant src attribute depending data one. You could use transitionend event for that:
document.addEventListener('transitionend', function(e) {
var iframe = e.target.id === "ModalPopUp-third-party-content" && e.target.querySelector('iframe');
if (iframe && !iframe.src) {
iframe.src = iframe.dataset.src;
}
}, false);
That's said, you'd have better to use relevant modal event onshown, check doc. BUT your site is really really buggy and gives headhache to debug. I really don't want to be rude. It would need serious refactorization like said in other answer.
I'm even not sure why you use iframes when i guess a single form, setting on each opening event modal relevant info would be enough.

Related

How to display an image on an iFrame?

I have a div which contains an iFrame:
<div class="embed-responsive embed-responsive-16by9" id="camera_view_div">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="camera_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
I have an image url from my server and I am trying to set the iFrame's src to the image url. But it starts a download of the image url on update.
cameraView.src = event.info.data['image_url'];
How to set an image url on an iFrame and display it?
as scrappedcola said, this is an odd usage of iframes, but I'll assume you have a powerful argument for it.
I can think of two possible solutions:
The headers of the image being sent by the server are not adecuate
for it to be displayed in the iframe, the browser might just
interpret it as a binary file to download. Check if you can adjust them.
https://jsfiddle.net/0ftobver/2/ << check the headers of the placeholder image
Use srcdoc or injection of html in the iframe, something like:
cameraView.srcdoc = '<!html doctype><style>*{padding:0;margin:0}</style><img src="https://via.placeholder.com/350x150">'
https://jsfiddle.net/q3rvd418/2/
Injection would be similar but accesing the contentDocument property of the iframe.

Add div containing any iframe, wordpress

I am using this function to make Youtube videos responsive. This adds a div surrounding Youtube embed codes.
add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;
function custom_oembed_filter($html, $url, $attr, $post_ID) {
$return = '<div class="video-container">'.$html.'</div>';
return $return;
}
It works great, but I just copied it from someone's tutorial, so I don't understand exactly what it's doing. I want to modify it so that it also adds the same div surrounding a libsyn iframe.
This is what the Youtube iframe code looks like, and the function above adds an enveloping div as it should.
<iframe src="//www.youtube.com/embed/MKif3vEhgdg" frameborder="0" allowfullscreen="allowfullscreen" style="width: 690px; height: 388.125px;"></iframe>
This is the Libsyn iframe, and the current function does not add a div.
<iframe style="border: none;" src="//html5-player.libsyn.com/embed/episode/id/4016467/height/360/width/640/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" width="640" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
How can I modify the function to add the same div to both iframes?
Since libsyn is probably not a default oembed provider, you could try to register it using this code in your functions.php file:
function custom_oembed_provider() {
wp_oembed_add_provider( '//html5-player.libsyn.com/*', '', false );
}
add_action( 'init', 'custom_oembed_provider' );
or you could use jQuery:
jQuery(document).ready(function() {
jQuery('iframe[src*="html5-player.libsyn.com"]').wrap('<div class="video-container" />');
});
otherwise, just use plain HTML:
<div class="video-container"><iframe style="border: none;" src="//html5-player.libsyn.com/embed/episode/id/4016467/height/360/width/640/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" width="640" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
The filter tag you are using 'embed_oembed_html' only matches websites from a whitelist as mentioned here http://codex.wordpress.org/Embeds#In_A_Nutshell
This list contains youtube (so it works) but not libsyn.
You need to add support for libsyn by either calling wp_oembed_add_provider() if it has oEmbed enabled (docs), or wp_embed_register_handler() if not (docs).

embeded custom google map wont display without refresh

I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>
So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.

jQuery .each() function shows always last link in iframe

I have some links on my page and everyone is linked to a popup which should load an iframe with a dynamic source attribute. The iframe has a div called 'pholder' in which the iframe should be loaded. So on every link should be another iframe. But it isn't. It's always the same. To be exactly, it's always the last link and I don't know why. Here you can see the HTML of the popup:
<div id="toPopup3">
<div id="videoContainer">
<div id="activeVideo">
<div class="pholder"></div>
</div>
</div>
</div> <!--toPopup3 end-->
I have to say that my links all have the class toPopup3 link + e. e is the maximum of Videos (0-23). So I use this code to add the iframe:
var videoLink;
var split;
$('[class^="topopup3 link"]').each(function(){
videoLink = $(this).attr('href');
split = videoLink.split("/");
});
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
So it always shows the last source in the iframe and I don't get rid of it. Can someone help me?
Here is a link to the live version of the page: Live Page. The problem occurs at 'film production'. I also put console.log(split[3]); in the code to see the order of the links.
Edit: given a little more insight into your goal, I think it would be better to accomplish this with a clickhandler:
$('[class^="topopup3 link"]').on('click', function(){
var videoLink = $(this).attr('href');
split = videoLink.split("/");
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
// may need to show the iframe modal or whatever here
});
Your not doing anything with the split variable until you are done looping, therefore the value will be the last one. If you are wanting to use each value, you need to move your subsequent $('.pholder')... code into your each block

DIV swap onclick

I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?
this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.

Categories