Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts

    Have a problem with page refresh and scrollto

    Hi,

    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.

    Code:
    CSS
    	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;
    	}
    
    Javascript
    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";
    	vidWin.appendChild(vidSrc);
    	document.getElementById('bkg').style.opacity = 0.5;
    	document.body.appendChild(vidWin);
    	window.scrollTo(xPosOff, yPosOff);
    // tried this, it didn't work
    //	location.reload(false);
    }
    
    HTML
    <body>
    <div id='bkg'>
    <img src="images/pic1.jpg" />
    <p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
    </div>
    </body>
    It's OK to pee against the wind if your standing in a lake.

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts

    Update: new developements

    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
    Code:
    <!-- 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.
    It's OK to pee against the wind if your standing in a lake.

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    The reason the scrollTo function did not work correctly is because of this:
    Code:
    href="#"
    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:
    Code:
    <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:
    (css)
    PHP Code:
    cursor:pointer;
    cursor:hand
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • Users who have thanked tfburges for this post:

    Budreaux (07-19-2011)

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts
    Thanks tfb, I figured it was something simple that I was missing.
    It's OK to pee against the wind if your standing in a lake.


  •  

    Posting Permissions

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