javascript - Hide iFrame while section not visible/active -


im trying on bootstrapwebsite, make iframe (substitute / better (?) option if possible) loads/displayed when part/section of page active.
page 1 long page sections (single page index.html) each section includes iframe loads entire website.

css sections:

section { padding-top: 50px; / * margin menubar * / height: 100vh; / * 100% of visible field * /  } 

the problem have iframes loads simultaneously , steals focus, , page jumps , down while loading.
, when finished loading have come center or between sections.
looks bad , consumes unnecessary bandwidth.

section 0 - rss (page should start here)
section 1 - router
section 2 - work mail1
section 3 - work mail2
section 4 - nas
section 5 - synology diskstation
section 6 - plex

<! - plex section -> <section id = "plex"> <iframe style = "position: absolute; top: -9999em; visibility: hidden;" onload = "this.style.position = 'static'; this.style.visibility = 'visible'; ' src = "http://plex.tv/web/app" href = "http://plex.tv/web/app" width = "100%" height = "100%"> </ iframe> </ section> <! - end plex section -> 

html5, javascript, jquery, ajax, welcome (exept flash), im on dead end.


i want iframe load local blank page until it´s visible, when click navbar link, page scrolls down achorpoint (section) want sections iframe load.and if scroll section want first iframe unload or load blank page , new sections iframe load it´s content.. iframes have different pages load , on different pages anchor points of page.

[link example jfiddle][1]

[1]: http://jsfiddle.net/9x0m004l 

can explain want do? if want sections loaded continuously top bottom without scrolling:

var urls = ["google.com","google.com","google.com","google.com"]; $(document).on("iframeload", function(){     if(urls.length > 0) {         var newdiv = $('<div class="divwrap"/></div>').appendto(document.body);         $("<div>title</div>").appendto(newdiv);         var newiframe = $('<iframe src="'+urls.shift()+'"></iframe>').appendto(newdiv);         newiframe.load(function(){             $(document).trigger("iframeload");         });     } }); $(document).trigger("iframeload"); 

http://jsfiddle.net/vp96xx3z/


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -