CODEWITHSUNDEEP
javascripthtmlcss
KPO
KPO

Reputation: 880

Can i delay the loading of certain divs using javascript?

Let's say I have a page with 2 divs. In the first div I have a video. After the video plays the 30 second clip THEN i want the second div to show an "about video" text. How can i accomplish this?

Code: 

 <div class="clip"> (This is the first div)
 <video width="560" height="340" controls>
 <source src="media/clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="media/clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
 </video>
 </div>

 <div class="about_video"> (This is the second div)
 Clip by Person.  The clip is about sample..
 </div>

Upvotes: 0

Views: 247

Answers (2)

frictionlesspulley
frictionlesspulley

Reputation: 12368

I have a similar demo here : http://jsfiddle.net/frictionless/NNCRR/

The top bar appears after a delay of 5000 milliseconds or 5 seconds

$(function() {

   $('.headerbar')       
    .delay(5000).slideDown();

});​

Hope this helps

For more check http://api.jquery.com/delay/

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77976

Something like this should work:

HTML (ID's are your friend):

 <div id="div1" class="clip"> (This is the first div)
     <video id="myVideo" width="560" height="340" controls>
         <source src="media/clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
         <source src="media/clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
     </video>
 </div>

 <div id="div2" class="about_video"> (This is the second div)
     Clip by Person.  The clip is about sample..
 </div>

CSS: 

.about_video {
    display: 'none';
}

JS: 

document.getElementById('myVideo').addEventListener('ended', function(e) {
    document.getElementById('div2').style.display = 'block';
});

Upvotes: 3

Related Questions