SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict fesh's Avatar
    Join Date
    Jan 2005
    Location
    Jackson, New Jersey
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Finding where the top of the page view is

    This is sort of a hard question to describe, but here it goes:

    I'm trying to completely center an element on a page (this means both horizontal and vertically). However, what I'm wondering is if there is a way, via the DOM functionality to make it so if, say, you've scrolled X-distance down the page it centers it in the current view of the page, not to the original view of the page.

    Like I said, I'm not sure how to describe this very well, hope I conveyed my information.
    Fesh
    imagine what it's going to be like

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a function that I wrote to find the coordinates of the center of the page.
    Code:
    function findVisiblePageCenter() {
    var x1,y1,x2,y2,d=document,coords={};
    
      // function by Dynamic Site Solutions -- http://www.dynamicsitesolutions.com/
      // much of the code in this function came from
      // http://www.quirksmode.org/viewport/compatibility.html
    
      if(self.innerHeight) { // all except Explorer
        x1 = self.innerWidth;
        y1 = self.innerHeight;
      }
      else if(d.documentElement && d.documentElement.clientHeight) {
        // Explorer 6 Strict Mode
        x1 = d.documentElement.clientWidth;
        y1 = d.documentElement.clientHeight;
      }
      else if(d.body) { // other Explorers
        x1 = d.body.clientWidth;
        y1 = d.body.clientHeight;
      }
    
      if(self.pageYOffset) { // all except Explorer
        x2 = self.pageXOffset;
        y2 = self.pageYOffset;
      }
      else if(d.documentElement && d.documentElement.scrollTop) {
        // Explorer 6 Strict
        x2 = d.documentElement.scrollLeft;
        y2 = d.documentElement.scrollTop;
      }
      else if(d.body) { // all other Explorers
        x2 = d.body.scrollLeft;
        y2 = d.body.scrollTop;
      }
    
      if(!isNaN(y2) && !isNaN(x2)) {
        coords.x = Math.floor(x1/2 + x2);
        coords.y = Math.floor(y1/2 + y2);
      } else {
        coords.x = Math.floor(x1/2);
        coords.y = Math.floor(y1/2);
      }
    
      return coords;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I remember that Mike had something like this in his CBE-libary
    http://www.cross-browser.com/cbe/

    You have to add an
    window.cbe.addEventListener('scroll', scrollListener,false);

    function scrollListener(e) {
    var st = document.cbe.scrollTop();
    myContainer.moveTo(document.cbe.width()/2, document.cbe.height()/2+st);

    }

    But perhaps there something in his new libary.
    I wasn't very busy during the last time.

  4. #4
    SitePoint Addict fesh's Avatar
    Join Date
    Jan 2005
    Location
    Jackson, New Jersey
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz. Thank you very much, that helped a ton (I hope you don't mind me using the code in my page, cited of course?).
    Fesh
    imagine what it's going to be like

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    I wouldn't have posted it if I didn't want other people to use it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •