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
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.
<a class="small-video" href="#large-video">small video here</a>
Or you could make it have a smooth animation with JS like this.
$('.small-video').click(function(){
$('#large-video').animate({scrollTop: 0}, 'slow');
});
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.
Sure. The header of that page or a separate javascript file would be fine.
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.
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:
<!-- 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?
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.
<a href="#large-video"><img src="images/australia.png" /></a>
$('.small-video').click(function(){
$(this).removeAttr('href');
$('#large-video').animate({scrollTop: 0}, 'slow');
});
so this script is in the head of the doc:
<!-- 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:
<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:
<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:
<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&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&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:
<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.
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:
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?
still not working. i tried manually removing the href attribute from the anchors, but that didnt work either
Ok. Try changing this line
$('#videoPlayback').animate({scrollTop: 0}, 'slow');
to this:
$('html').animate({scrollTop: $("#videoPlayback").offset().top}, 'slow');
still nothing. leaving the office. will continue in the morning.
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.
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
$(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?
The answer is actually really straight forward, to scroll to the top of the page all you need to do is this 
window.scrollTo(0,0);
The reason that the other script wasn’t working could be because the link to jQuery is 404’ing
<!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/