SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to stop browser window jumping to top

    I'm playing with a very basic popup function that unhides a div positioned in the middle of the screen. Problem is if i click to open it further down the page, it always forces the browser window to the top. How can i prevent this?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you are doing this:

    <a href="#" onclick="myFunc();">click me</a>

    do this:

    <a href="#" onclick="myFunc();return false;">click me</a>

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks. yes that holds the position in the browser, but opens up another problem for me!

    I'm using this code (from twelvestone .com/forum_thread/view/32871):

    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    #display_overlay_holder {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	display:none;
    }
    #display_overlay_bg {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	width: 100%;
    	height: 100%;
    	background-color:#000000;
    	opacity: 0.85;
    	filter: alpha(opacity=85);
    }
    #display_horizon {
    	position: absolute;
    	top: 45%;
    	left: 0px;
    	width: 100%;
    	height: 1px;
    	overflow: visible;
    }
    #display_content {
    	position: absolute;
    	width: 400px;
    	height: 250px;
    	left: 50%;
    	margin-left: -200px;
    	top: -125px;
    	background-color: #CCCCCC;
    	
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    	function show_the_overlay() {
    		document.getElementById('display_overlay_holder').style.display = 'block';
    	}
    	function hide_the_overlay() {
    		document.getElementById('display_overlay_holder').style.display = 'none';
    	}
    -->
    </script>
    </head>
    
    <body>
    <a href="#" onclick="show_the_overlay();">Gimmie some popup action!</a>
    <div id="display_overlay_holder">
    	<div id="display_overlay_bg" onclick="hide_the_overlay();"></div>
    	<div id="display_horizon">
    		<div id="display_content">
    		Wooo! Content is in here!!!1
    		</div>
    	</div>
    </div>
    </body>
    </html>
    but i have the body section repeated many times down the page, beyond the fold of the browser window (ie so the scrollbar is there)
    Now when i scroll down and (eg) click on a link below the fold, thanks to your little snippet the browser window doesn't jump top, but the popup and black bg are only covering the part of the page above the fold...so nothing below the fold has the bg and the popup isn't central to the position we actually at...

    i guess i need some more javascript to calculate the position according to the scrollbar and set the centre point for the popup and bg that way...? any ideas?

    TIA


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
  •