SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Center div

  1. #1
    SitePoint Addict
    Join Date
    Sep 2003
    0 Post(s)
    0 Thread(s)

    Center div

    Hi all,

    I have page where I'm displaying thumbnail images which when clicked open the larger image in a previously hidden div which is made viewable by changing it's visibility and "floated" using the z-index property.

    The div position is "fixed" at the top of the page when the page loads because it's placed right after the body tag. This page may have many thumbnails going down, so based on this and other content of the page there may be a scroll bar of indeterminable length.

    What I am currently doing is displaying the div at a position relative to the thumbnail being clicked, but this does not work very nicely.

    What I want to do is position the div in the center of the section of the page currently being viewed.

    Any ideas how I would achieve this?

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    South Dakota
    1 Post(s)
    0 Thread(s)
    hmmm... ever thought of making the div follow the mouse?

    something similer to this:

    but put an image there insted of text?

    but if not...
    if you had the image element as a variable you could do something like:

    var tmpImg = ImgE
    var bottom = tmpImg.offsetTop+tmpImg.offsetHeight;
    while(tmpImg = tmpImg.parentNode){
    bottom += tmpImg.offsetTop+tmpImg.offsetHeight;
    that will make "bottom" the bottom of the image on the entire page so just change the height of the div containing the big image to there. and ofcorse you can do a similer thing with left of the image just dont add the width to it.

    hope that helps,
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site


Posting Permissions

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