View Full Version : Have a problem with page refresh and scrollto

07-13-2011, 07:20 PM

I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum.

What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma.

I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page).

Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated.

body {
background: black;
text-align: center;
vertical-align: middle;
div#bkg {
position: absolute;
text-align: center;
z-index: 1;
p#day1 {
position: absolute;
top: 800px;
left: 1000px;
font-weight: bold;
width: 50px;
background: white;

function showVid(srcVid) {
// set the proper filename of the vid
srcVid = srcVid + ".ogv";
// create the video tag
var vidWin = document.createElement("video");
vidWin.id = "movie";
vidWin.setAttribute("width", "320");
vidWin.setAttribute("height", "240");
vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
var vpw = window.innerWidth;
var vph = window.innerHeight;
var xPosOff = window.pageXOffset;
var yPosOff = window.pageYOffset;
var leftNum = ((vpw/2) + xPosOff) - 160;
var topNum = ((vph/2) + yPosOff) - 120;
vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
var vidSrc = document.createElement("source");
vidSrc.src = "videos/" + srcVid;
vidSrc.type = "video/ogg";
vidSrc.codecs = "theora, vorbis";
document.getElementById('bkg').style.opacity = 0.5;
window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
// location.reload(false);

<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>

07-13-2011, 11:16 PM
Ok, I discovered a new twist. Searching the web I came across an example of scrollto working. This example used a button to fire the scrollto script. I then changed my html to this to match the example

<!-- changed from this
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
to this below-->

<input type="button" value="Day 1" onClick="showVid('oggtest')" id="day1">

viola, it worked. So now, can anyone explain why using an anchor tag to fire the "onclick" doesn't work but using a button does?

For now I'm just going to make use of buttons to mark my vid links.

07-14-2011, 12:04 AM
The reason the scrollTo function did not work correctly is because of this:


Any time a hash (or pound sign - #) is present in the URL, browsers attempt to scroll immediately to whatever element on the page has the same id as whatever text comes after the hash.

Removing the href attribute from the a element should work.

I would have just done this, however:

<p id="day1" onclick="showVid('oggtest')">Day 1</p>

If you like the cursor mouseover effect that href provides with the a element, just style day1 with:

07-19-2011, 03:55 PM
Thanks tfb, I figured it was something simple that I was missing.