SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Page "jumping" back to top... how do I stop it?

    Hello,

    I have a piece of javascript running about mid-section on a webpage. It's doing exactly what I want it to do, but when it runs it also "jumps" the page back to the top. That is, if I have my scroll bar half way down the page, when I click on the link and run this code it jumps me back to the top as if I'm visiting for the first time.

    Any ideas on how to keep it on the same spot on the page while still executing the code?

    Here is my code:
    Code:
    function changeOrderDetail(changeTo) {
    	if (changeTo == "guys") {
    		document.getElementById('orderDetail').style.backgroundImage = "url(images/subpage_odguysbg.jpg)";
    	} else {
    		document.getElementById('orderDetail').style.backgroundImage = "url(images/subpage_odgalsbg.jpg)";
    	}
    }
    Ryan Price
    Subscribe to my blog for regular tips and tricks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tested this IE & Moz FF seems ok
    sure there is not an event on a parent node?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function changeOrderDetail(changeTo) {
    	if (changeTo == "guys") {
    		document.getElementById('orderDetail').style.backgroundImage = "url(http://www.vicsjavascripts.org.uk/StdImages/One.gif)";
    	} else {
    		document.getElementById('orderDetail').style.backgroundImage = "url(http://www.vicsjavascripts.org.uk/StdImages/One.gif)";
    	}
    }
    //-->
    </script></head>
    
    <body>
    <div   style="width:200px;height:1200px;background-color:blue;" ></div>
    <div id="orderDetail"  style="width:200px;height:200px;background-color:red;" onclick="changeOrderDetail('changeTo');"></div>
    </body>
    
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeanco
    Hello,
    Any ideas on how to keep it on the same spot on the page while still executing the code?
    The problem is likely in how you call the code. If you are doing it in a link's onclick event you have to suppress the link's normal function.

    Try doing something like this:

    Code:
    <a href="#" onclick="changeOrderDetail('guys'); return false">link</a>
    Or make changeOrderDetail return false and then just use:

    Code:
    <a href="#" onclick="return changeOrderDetail('guys')">link</a>

  4. #4
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ega1, that did the trick. I never knew what the significance was of that return value.

    Is there anything else I should know about it?

    Thanks again!
    Ryan Price
    Subscribe to my blog for regular tips and tricks

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeanco
    Is there anything else I should know about it?
    The same thing is true for onclick events for submit buttons and reset buttons - returning false causes the normal operation to be suppressed.

  6. #6
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks a bunch.
    Ryan Price
    Subscribe to my blog for regular tips and tricks

  7. #7
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I had the same problem, and I was only using mouseover and mouseout. But you can add onclick="return false" to the code and it fixes the problem.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why use an <a> tag if you don't want it to link to something. The last browser to limit you to using mouse events on spans was Netscape 4 and just about no one uses that any more. In all browsers more modern than Netscape 4 the following are equivalent just the second is shorter and more syntactically correct since the content isn't a link.

    <a href="#" onclick="return changeOrderDetail('guys'); return false">link</a>
    <span onclick="return changeOrderDetail('guys')">link</span>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I am new enough in Java, I didn't know.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.


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
  •