1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Trouble with setTimeout on getElementById function

Discussion in 'JavaScript' started by word5150, Jan 8, 2012.

  1. #1
    I am having trouble setting a delay on a getElementById function. The script uses an anchor tag to designate a YouTube player element. I can then call select videos to be played within the player element with a href tag. The goal is to delay the playing of selected videos by 1 sec. (1000ms) in order to allow time for a scrollToTop animation which is stored in an external file.

    Here is the code:

    The external scroll script:

        $('.video').click(function(){
            $('html, body').animate({scrollTop : 0},800);
        });
    
    
    
    Code (markup):

    The HTML with internal Javascript:

    
    <div class="head"><a id="ytplayer" name="ytplayer"></a>
        <div id="ytplayer_div" style="background: #000">
        </div><!--End ytplayer_div-->
    </div><!--End Head-->
    
    <script type="text/javascript">
    swfobject.embedSWF(
    'http://www.youtube.com/v/0x1vbsSiLKU&amp;autoplay=1&enablejsapi=1&rel=0&fs=1',
    'ytplayer_div',
    '511',
    '294',
    '8',
    null,
    null,
    {
    allowScriptAccess: 'always',
    allowFullScreen: 'true'
    },
    {
    id: 'ytplayer_object'
    }
    );
    </script>
    
    <div id="wdma1">
    
    <script type="text/javascript">
    function ytplayer_loadvideo( id ) {
    var o = document.getElementById( 'ytplayer_object' );
    if( o ) {
    o.loadVideoById( id );
    }
    }
    </script>
    
        <div class="left">
          <div class="left-sub">
            <div class="transbox"><a href="#ytplayer" onclick="ytplayer_loadvideo( 'UXuvPXR8sF4' );"><img alt="" class="video" src="images/avicii.jpg" /></a>
            </div><!--End Transbox-->
          </div><!--End Left-sub-->
    
          <div class="left-sub">
            <div class="transbox"><a href="#ytplayer" onclick="ytplayer_loadvideo( 'v8XnWUmxczs' );"><img alt="" class="video" src="images/skrillex.png" /></a>
            </div><!--End Transbox-->
          </div><!--End Left-sub-->
        </div><!--End Left-->
    </div><!--End WDMA1-->
    
    
    
    HTML:
    I have tried several methods in an effort to achieve the desired effect to no avail. Any help you can offer would be greatly appreciated.

    Thanks,

    M.J.
     
    Solved! View solution.
    word5150, Jan 8, 2012 IP
  2. #2
    First of all, your "#ytplayer" links are triggered before animation. Because img with "video" class is nested.

    I would make it that way:
    Remove this
    
    $('.video').click(function(){
            $('html, body').animate({scrollTop : 0},800);
    });
    
    Code (markup):
    then I would write custom function (for e.g startAnimationAndVideo(id))
    then bind it to your "#ytplayer" links, like this
     "<a href="#ytplayer" onclick="startAnimationAndVideo( 'v8XnWUmxczs' )">....</a>"
    HTML:
    actual function code (not tested):
    
    function startAnimationAndVideo(id)
    {
        //navigate to element
        $('html, body').animate({scrollTop : 0},800);
    
        //wait for 1 sec and then play the video
        setTimeout(fuction () { ytplayer_loadvideo(id); }, 1000);
    }
    
    Code (markup):
    That is NOT tested. But I think you got the idea.
     
    geofox, Jan 10, 2012 IP
  3. word5150

    word5150 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks Geofox! Your script worked with a slight modification to account for the 'o' variable. I had to change your function code to this:

    <script type="text/javascript">
    function startAnimationAndVideo(id)
    {
    var o = document.getElementById( 'ytplayer_object' );
    if( o ) {
    //navigate to element
    $('html, body').animate({scrollTop : 0},800);
    //wait for 1.2 sec and then play the video
    setTimeout(function () { o.loadVideoById(id); }, 1200);
    }
    }
    </script>
    
    Code (markup):
    Thanks for your help. It is much appreciated!

    M.J.
     
    word5150, Jan 10, 2012 IP