javascript - how to split content on one page while first one displays first and other is hidden? -



javascript - how to split content on one page while first one displays first and other is hidden? -

i'm trying display content on 1 page there 2 parts of first content display in total page while other 1 hidden first content time out after 2 minutes , after 2 minutes other part of content display below sample of code help appreciated.

<div id="top"> *video play in total screen on total page using javascript time out after 2 mininutes , hide video , show the "bottom" text * <iframe width="100%" height="100%" src="//www.youtube.com/embed/lam6hufut5k?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div id="bottom">*after 2 mins text content display on total page </div>

css

body { width: 100% ; height: 100% ; margin: 0px ;}

solution 100% working without jquery : ( can see working here : http://jsfiddle.net/akmozo/ws24yd9j/ )

of course, should maintain in mind hidding iframe does not stop playing video if it's playing. easy response looking do, it's working should ameliorate things better.

html code:

<html><head> <style> body{ width: 100%; height: 100%; margin: 0px; } #top { position:absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10; } #bottom { position:absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9; } </style> <script> function load_timeout(){ var timeout = settimeout(function(){ document.getelementbyid('top').style.display = 'none'; document.getelementbyid('bottom').style.display = 'block'; }, 2000*60); } </script> </head> <body onload='load_timeout()'> <div id='top'> <iframe width='100%' height='100%' src='http://www.youtube.com/embed/lam6hufut5k' frameborder='0' allowfullscreen></iframe> </div> <div id='bottom'>*after 2 mins text content display on total page </div> </body> </html>

javascript html css

Comments

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -