#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    37
    Rep Power
    11

    Can i offset 'scrollIntoView' by x amount of pixels?


    Code:
      this.setHighlight = function() {
        smUtils.addClass(self.o,'highlight');
       self.o.scrollIntoView (); 
      }
    i'm using the self.o.scrollIntoView () function in the above code to have my highlighting content scroll to the top of a page. the problem is that while this javascript is being executed, it obscures the title/heading above the scrolling content even though the title is in an absolute, fixed, div tag.

    is there a way to offset the scroll by say 80px from the top of the screen so that the static heading is always in view at the top even whilst the content below it is scrolling into view - as it remains so with manual scrolling?
    Last edited by adamay; June 5th, 2008 at 11:45 AM. Reason: cosmetic
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Try using this:
    Code:
    function scrollElmVert(el,num) { // to scroll up use a negative number
      var re=/html$/i;
      while(!re.test(el.tagName) && (1 > el.scrollTop)) el=el.parentNode;
      if(0 < el.scrollTop) el.scrollTop += num;
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    37
    Rep Power
    11

    don't know how to adapt the code


    thanks for the solution Kravvitz.
    i put "-90" as my negative number in place of "num". I'm totatlly unsure if thats what i was supposed to do - i'm a complete newbie.

    Code:
    function scrollElmVert(el, -90) {
      var re=/html$/i;
      while(!re.test(el.tagName) && (1 > el.scrollTop)) el=el.parentNode;
      if(0 < el.scrollTop) el.scrollTop += -90;
    }
    then to call the function, i replaced the commented line as below:

    Code:
    this.setHighlight = function() {
        smUtils.addClass(self.o,'highlight');
      // self.o.scrollIntoView (); 
      self.o.scrollElmVert(el,-90);
      }
    needless to say, my novice guesswork can't get the code to work. instead, i get an error message which reads "expected identifier".

    pls tell me where i'm goin wrong?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Ah. It seems you're very much a beginner. Don't go replacing variables in functions with fixed values until you know what you're doing.

    Use the function that I posted and the following. The purpose of my function is to add an offset to where scrollIntoView() scrolls to, not to replace the call to it.
    Code:
    this.setHighlight = function() {
       smUtils.addClass(self.o,'highlight');
       self.o.scrollIntoView (); 
       scrollElmVert(self.o,-90);
      }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    37
    Rep Power
    11

    thank you


    that works great.

    thanks for the help. much appreciated.

IMN logo majestic logo threadwatch logo seochat tools logo