SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center Div on Page - Follows Scroll

    I'm looking for a method to center a div on screen and follow as the page scrolls. You can use the "popup" on some of Sitepoint's pages as an example of what I mean.

    From what I'm reading I'll need to use offsetHeight and offsetWidth... but I'm not exactly sure how to use them.

    I'm not looking to get a step-by-step instruction manual on this, rather just a push in the right direction.

    Thanks in advance for any tips you can give!

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    1) Determine the width and height of the window
    2) Determine the width and height of the div (if not known already)
    3) Do basic algebra to compute how much top and left margin you need to center the div
    4) Make the div's CSS position property "static" so it doesn't move as you scroll
    5) Set the div's CSS "top" and "left" properties to the margins you computed

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,677
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You could always use css

    Code css:
    #myDiv {
    	border: 1px solid black;
    	position: fixed;
    	width: 300;
    	height: 200;
    	left: 200;
    	top: 100;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •