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?
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.
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.
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.
<!-- 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:
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;
}
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)
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.
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>