Javascript weblog

ScrollIntoView (15 October 2005)

There are a number of problem's with IE's scrollIntoView method. Not all browsers support it (Safari 2.0 doesn't support it, but it's already implemented in WebKit in July 2005. The second problem is the binarity of all: you see it or you don't. I would like to apply a margin: if the element is for example 100 pixels or less from the border, scroll it.

There's no support for vertical scrolling, because I don't need it (a note here: vertical scrolling is bad. You don't need it and it is not good. Don't use it, don't argue). Another issue: no support for scrolling of overflow elements yet.

Updated: The code has been tested and is working in: Safari 2.0, IE/Win 6.0, IE/Mac 5, Opera/Mac 8, FireFox/Mac 1.5 beta 2 and FireFox/Win 1.0.7 (all both quirks and compliant-mode).

Updated: I used this function for my gmail checkbox keyboard navigator clone.

function InView(element,margin) {
  if(!margin) margin=0;
  var Top=GetTop(element), ScrollTop=GetScrollTop();
  return !(Top<ScrollTop+margin||
    Top>ScrollTop+GetWindowHeight()-element.offsetHeight-margin);
}
function ScrollIntoView(element,bAlignTop,margin) {
  if(!margin) margin=0;
  var posY=GetTop(element);
  if(bAlignTop) posY-=margin;
  else posY+=element.offsetHeight+margin-GetWindowHeight();
  window.scrollTo(0, posY);
}
function GetWindowHeight() {
  return window.innerHeight||
    document.documentElement&&document.documentElement.clientHeight||
    document.body.clientHeight||0;
}
function GetScrollTop() {
  return window.pageYOffset||
    document.documentElement&&document.documentElement.scrollTop||
    document.body.scrollTop||0;
}
function GetTop(element) {
  var pos=0;
  do pos+=element.offsetTop
  while(element=element.offsetParent);
  return pos;
}

Using functions with String.replace (29 May 2005)

Introduced in Javascript 1.3 (NN 4.06+, including FF) and JScript 5.5 (IE5.5+/Win). Not in: Safari 1.3. NOTE: still doesn't work in IE5.2/Mac (RegExp.$0), no submatches?

You can test the code: TestPcFormat().

var PcFormat=/^\d{4} ?[a-z]{2}$/i;
function FormatPc(match) {
  return match.replace(/\s+/,'').toUpperCase();
}
FormatPc.toString=function() {
  return FormatPc(RegExp.$0);
}
//--| Test function |---------------------------------------
function TestPcFormat() {
  var s=prompt("Please supply a Dutch postcode","9711 pl");
  if(s) {
    if(PcFormat.test(s)) {
      s=s.replace(PcFormat,FormatPc);
      alert("The postcode is: "+s);
    }
    else { 
      alert("Wrong format. Use 4 digits and two letters, \
optionally seperated by a space");
    }
  }
}

Week number (15 April 2005)

Grouping events per week can be very handy, so I wrote a javascript method to do so. I followed the ISO-8601 standard (see more here). Test todays week number: alert(new Date().getWeekNr()+1).

//Like valueOf(), only resolution in days, not ms.
Date.prototype.valueInDays=function() {
  return parseInt(new Date(this.getFullYear(),
    this.getMonth(),
    this.getDate()).valueOf()/(24*60*60*1000));
}
//Day of week, zero-based (monday=0, sunday=6)
Date.prototype.getWeekDay=function() {
  return this.getDay()==0 ? 6 : this.getDay()-1;
}
//Week number according to ISO-8601, zero-based (1 is 2nd week).
Date.prototype.getWeekNr=function() {
  var x = new Date(this.getFullYear(),0,1); 
  x.setDate([0,0,0,0,3,2,1][x.getWeekDay()]+x.getDate());
  if(this.valueInDays() < x.valueInDays()) 
    return new Date(this.getFullYear()-1,12-1,31).getWeekNr();
  else 
    return parseInt((this.valueInDays()-x.valueInDays()+x.getWeekDay())/7,10);
}

Archived (22 October 2005)

The topics from 2004 and older have been archived here.