Forums → Dock →

added center option

Subscribe to added center option 0 post(s), 1 voice

 
Dec 21, 2007 7:24pm
Avatar John Carlson 18 post(s)

Hey everyone.. not sure if this will be useful to anyone but I added a bit of code to dock.js and prototype-ui.js to get my dock to center to the center of the window.. also I added a z-index of 999 to it so that it would stay above my windows and other content. Here it is.. :)

find this: // Property: labelsSelector // CSS3 selector to select labels element, default is ”.label”. labelsSelector: ’.label’

and change it to this: // Property: labelsSelector // CSS3 selector to select labels element, default is ”.label”. labelsSelector: ’.label’,

// Property: center
// a boolean, if set to true the dock is centered in the window
center: true

then find this:

redrawItems: function(){
  var itemSize  = this.options.itemSize,
      maxSize   = this.options.maxItemSize,
      totalSize = 0;
this.items.each(function(item) {
  var size = itemSize + this.scale * (item.size - itemSize),
      image = item.image;
  image.setAttribute('width', size);
  image.setAttribute('height', size);
  image.style.marginTop = maxSize - size + 'px';
  if (item.label)
    item.label.style.width = size + 'px';
  totalSize += size;
}, this);
this.element.style.width = totalSize + 'px';
}

and change it to this:

redrawItems: function(){
  var itemSize  = this.options.itemSize,
      maxSize   = this.options.maxItemSize,
      totalSize = 0;
this.items.each(function(item) {
  var size = itemSize + this.scale * (item.size - itemSize),
      image = item.image;
  image.setAttribute('width', size);
  image.setAttribute('height', size);
  image.style.marginTop = maxSize - size + 'px';
  if (item.label)
    item.label.style.width = size + 'px';
  totalSize += size;
}, this);
this.element.style.width = totalSize + 'px';
this.element.style.zIndex = 999;
// added by john carlson to center the dock in the window
if(this.options.center){
  myWidth = 0;
  myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  } // end if
}
// end centered add
var nleft = (myWidth/2) - (totalSize/2)
this.element.style.left=nleft+"px";
}

notice the part that is commented

to use the center function just do this.

dock = new UI.Dock(‘dock’,{center: true});

and there you go..

Here is another trick..

if you want to recenter it when the window is resized just do this:
<body onresize="dock.redrawItems();">

Tested in FireFox!!!!!!!!!!

Hope this helps some people

John
Forums → Dock →