SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how can i make the page scroll to the top when a video is clicked?

    Hello all,

    I am working on a page with a large number of videos. when each video is clicked it loads in a large player near the top of the page.
    Is there a script i can use to make the page scroll back up to the top when one of the videos is clicked?

    the page is at liveoutloudproductions.com/demoreel

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do this with plain HTML like this, but it will jump to that spot with no animation and might be confusing to users.
    Code:
    <a class="small-video" href="#large-video">small video here</a>
    Or you could make it have a smooth animation with JS like this.
    Code:
    $('.small-video').click(function(){
      $('#large-video').animate({scrollTop: 0}, 'slow');
    });

  3. #3
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well considering the fact that you cant really put an anchor inside an anchor, i think ill use the JS version.

    Sorry for stupid questions, im still a newb with JS.

    What am i not doing?
    plug-and-play of this script didnt work.

    i plugged the script into the head of the doc, changed class and id names accordingly, assigned classes where necessary and its not scrolling when i click on something.

    I also tried putting the script inside the body of the doc and that didnt work either.

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure. The header of that page or a separate javascript file would be fine.

    Quote Originally Posted by tim@getdim View Post
    Well considering the fact that you cant really put an anchor inside an anchor...
    Not sure what you mean by that. I don't see why not.

    It could be that you're using an old version of jQuery 1.4.2. Maybe try updating to 1.7.2 and see if that works.

  5. #5
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mnicki_mouse View Post

    "Well considering the fact that you cant really put an anchor inside an anchor..."


    Not sure what you mean by that. I don't see why not.
    What i mean by that is it has been my experience that you cant put a link inside of a link.

    example:
    you cannot do this:
    <a href="#"><a href="#">...</a></a>

    they stop working.

    i tried this when i was originally building the page i mentioned above.

    Either way the script is not working.

    what i did was:

    put this script in the head of my doc:

    Code:
    <!-- auto scroll the page when video loads in large player -->
    <script type="text/javascript">
    $('.not-here').click(function(){
      $('#videoPlayback').animate({scrollTop: 1}, 'slow');
    });
    </script>
    <!-- end scroll -->
    assigned the ".not-here" class to my links.
    to my knowledge that is all i should have had to do.

    so what am i missing?

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is true. I thought you meant that you couldn't put video tags or images inside of a link. I didn't realize that your small video images on that page were links already.

    You could simply change the href of each of those links to point to the id of the large video and/or add the JS animation. If you have a link with a href value, it's going to do that instead of the JS. So removing the href with JS should allow the animation to work.

    Code:
    <a href="#large-video"><img src="images/australia.png" /></a>
    Code:
    $('.small-video').click(function(){
      $(this).removeAttr('href');
      $('#large-video').animate({scrollTop: 0}, 'slow');
    });

  7. #7
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    it still is not working.

    so this script is in the head of the doc:

    Code:
    <!-- auto scroll the page when video loads in large player -->
    <script type="text/javascript">
    $('.not-here').click(function(){
      $(this).removeAttr('href');
      $('#videoPlayback').animate({scrollTop: 0}, 'slow');
    });
    </script>
    <!-- end scroll -->

    now for the video player functionality we have this div:

    Code:
    <div id='videoPlayback' style='width: 560px; height:315px; background-color: #000000;'><iframe src="http://player.vimeo.com/video/36788063?autoplay=1" width="560" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    which is controlled by this script:
    Code:
    <script type="text/javascript">
    function playVideo(sourceId, targetId) {
       if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
       if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
       targetId.innerHTML=sourceId.innerHTML;
       return false;
    }
    </script>
    now to set which videos load in this div:

    Code:
    <div id='selectDemo1' class="not-here" style='display: none'>
    	<iframe src="http://player.vimeo.com/video/30886424?" width="560" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div> 
    
    <div id='selectDemo2' class="not-here" style='display: none'>
    	<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/b7_Hvgzyr2o?version=3&autoplay=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b7_Hvgzyr2o?version=3&autoplay=1&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    </div>
    there are more but you get the idea.

    now to select the video to be watched currently in the playback div we use anchors:

    Code:
    <a href="#videoPlayback" class="not-here" onclick='return playVideo("selectDemo5","videoPlayback")'><img src="images/australia.png" width="240" height="135" /></a>
    My assumption is that something is interfering with the script for scrolling.

    but my inexperienced eyes cant see what that might be.

  8. #8
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you're right. The onclick is interfering with the animation click function. Instead of having a separate click function for the animation, try putting that inside the playVideo function, like this:

    Code:
    function playVideo(sourceId, targetId) {
       $(this).removeAttr('href');
       $('#videoPlayback').animate({scrollTop: 0}, 'slow');
       if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
       if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
       targetId.innerHTML=sourceId.innerHTML;
       return false;
    }
    Now does it work?

  9. #9
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still not working. i tried manually removing the href attribute from the anchors, but that didnt work either

  10. #10
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Try changing this line
    Code:
    $('#videoPlayback').animate({scrollTop: 0}, 'slow');
    to this:
    Code:
    $('html').animate({scrollTop: $("#videoPlayback").offset().top}, 'slow');

  11. #11
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still nothing. leaving the office. will continue in the morning.

  12. #12
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so a new day dawns and i still have no idea how to make this page scroll. rather than post the entire source code and take up annoying amounts of space, its at http://liveoutloudproductions.com/demoreel.html.
    there is a video that auto plays when page loads so youll prolly want to pause that before viewing the source.

    the css is at /style.css and /layout.css
    i upgraded to jquery 1.7.2 (which did nothing)

    any other info you need let me know.

  13. #13
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just took a look at this again. I'm not sure why that wouldn't work. I would put all the JS in it's own file, since you already have a lot on this page. It would be easier to debug because you could see it all in the same place. Plus, you'd be able to use the same scripts on multiple parts of your site. Maybe doing that will help you see why it isn't working.

  14. #14
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Quote Originally Posted by mnicki_mouse View Post
    Just took a look at this again. I'm not sure why that wouldn't work. I would put all the JS in it's own file, since you already have a lot on this page. It would be easier to debug because you could see it all in the same place. Plus, you'd be able to use the same scripts on multiple parts of your site. Maybe doing that will help you see why it isn't working.
    SO it appears that the scrolling script

    Code:
     $(this).removeAttr('href');
       $('html').animate({scrollTop: $("#videoPlayback").offset().top}, 'slow');
    is causing the video playback script not to work at all.
    i tested one line, then the other and it is definitely both lines.

    the scrolling script on its own works - it doesnt really scroll but it pops the page up to the #videoPlayback div, so at least it does something.

    i have also separated each script into its own separate JS file.
    i then tried putting the scrolling script in the html doc with the playback in a separate js file.
    the playback worked but the scrolling didnt.

    it would seem that the scripts are mutually exclusive.

    that being said, if i converted the page to php rather than html, is there a php script to cause scrolling?
    i want to see if that interferes as well.

    or should i post a separate question in the PHP section?

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    The answer is actually really straight forward, to scroll to the top of the page all you need to do is this
    Code javascript:
    window.scrollTo(0,0);

    The reason that the other script wasn't working could be because the link to jQuery is 404'ing
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <html><head>
    <title>404 Not Found</title>
    </head><body>
    <h1>Not Found</h1>
    <p>The requested URL /js/jquery-1.4.2.js was not found on this server.</p>
    <p>Additionally, a 403 Forbidden
    error was encountered while trying to use an ErrorDocument to handle the request.</p>
    <hr>
    <address>Apache Server at liveoutloudproductions.com Port 80</address>
    </body></html>
    It's also a really old version, upgrade to 1.8 http://jquery.com/


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •