homepage Welcome to WebmasterWorld Guest from 54.166.65.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Delay loading content until jquery slide finishes
matthewamzn




msg:3924938
 5:50 pm on Jun 2, 2009 (gmt 0)

I'm trying to use jquery to slide open a div and then start playing a video. It's working, but the video spills over the div while it's sliding open. How can I delay loading the video?

<script type="text/javascript">
$(document).ready(function(){
$("a.video_show").click(function(){
$("div#video").slideToggle();
});
});
</script>

<div id="video" style="display:none;">
video player code
</div>

<div id="play_video">
<a href="#" class="video_show">
<img src="img/video.png" />
</div>

 

coopster




msg:3925585
 12:21 pm on Jun 3, 2009 (gmt 0)

setTimeout?
https://developer.mozilla.org/en/DOM/window.setTimeout

delboy1978uk




msg:3926530
 2:27 pm on Jun 4, 2009 (gmt 0)

set timeout? hmm. i was about to post a similar question, but this might be what im looking for.

im loading the contents of an html file into a div
but before it changes it fades the old content out
loads the data
and fades back in
only the data loads and replaces during the fade :-s

matthewamzn




msg:3926672
 6:22 pm on Jun 4, 2009 (gmt 0)

I actually did it by adding another div and using a callback function. I'm not sure if this is very readable, but it looks something like this:

<script type="text/javascript">
$(document).ready(function(){
$("a.video_show").click(function(){
$("div#video").slideDown("normal",function(){
$("div#video_player").css("display","block");
});
return false;
});
$("a#hide_video").click(function(){
$("div#video_player").css("display","none");
$("div#video").slideUp();
return false;
});
});
</script>

// the video player
<div id="video" style="display:none;">
<div id="close_video"><a href="#" id="hide_video" class="video_hide">X</a></div>
<div style="height:202px;">
<div id="video_player" style="display:none;">
<?php include("video.php"); ?>
</div>
</div>

// link that initiates the video
<a href="#" class="video_show"><img src="img/video.png" alt="Play Video" />Video</a>
</div>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved