WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 DHTML Menu Contextmenu only 10px width, Micha Schopman, February 12, 2003
     Re:DHTML Menu Contextmenu only 10px width, Micha Schopman, February 13, 2003
         Re:DHTML Menu Contextmenu only 10px width, Micha Schopman, February 13, 2003
             Re:DHTML Menu Contextmenu only 10px width, Micha Schopman, February 13, 2003
                 Fixed!, Micha Schopman, February 13, 2003
                     Re:Fixed!, Erik Arvidsson, February 13, 2003
                         Re:Fixed!, Micha Schopman, February 13, 2003
                             Re:Fixed!, Erik Arvidsson, February 13, 2003

Subject: Fixed! From: Micha Schopman Date: February 13, 2003

The new Menu.prototype.updateSizeCache function. The contextmenu now shows correctly. I don't know where the 10px values come from, maybe body standard margin values :?

 

Menu.prototype.updateSizeCache = function ( bForce ) {
 if ( this.areSizesCached() && !bForce )
  return;
 
 var d = this.getMeasureDocument();
 var body = d.body;
 
 var cs = this._cachedSizes = {}; // reset
 var scrollContainer = d.getElementById( "scroll-container" );
  
 // preferred width
 cs.preferredWidth = d.body.scrollWidth;
 
 falseHeight = null;
 i = 0;
 while (cs.preferredWidth <= 10){
 cs.preferredWidth = d.body.scrollWidth;
 falseHeight = body.firstChild.offsetHeight;
  if(i >= 50){
   break;
  }
  i++
 }
 

 // preferred height
 scrollContainer.style.overflow = "visible";
 cs.preferredHeight = body.firstChild.offsetHeight; //body.scrollHeight;
 
 i = 0;
 while (cs.preferredHeight == falseHeight ){
 cs.preferredHeight = falseHeight+10;
  if(i >= 50){
   break;
  }
  i++
 }
  
 scrollContainer.style.overflow = "hidden";
 
 // inset left
 cs.insetLeft = posLib.getLeft( scrollContainer );

 // inset right
 cs.insetRight = body.scrollWidth - posLib.getLeft( scrollContainer ) -
     scrollContainer.offsetWidth;
 
 // inset top
 var up = d.getElementById( "scroll-up-item" );
 if ( up.currentStyle.display == "none" )
  cs.insetTop = posLib.getTop( scrollContainer );
 else
  cs.insetTop = posLib.getTop( up );
  
 // inset bottom
 var down = d.getElementById( "scroll-down-item" );
 if ( down.currentStyle.display == "none" ) {
  cs.insetBottom = body.scrollHeight - posLib.getTop( scrollContainer ) -
      scrollContainer.offsetHeight;
 }
 else {
  cs.insetBottom = body.scrollHeight - posLib.getTop( down ) -
      down.offsetHeight;
 }
};

From: Micha Schopman
Sent: Feburary 13, 2003
Subject: Re:DHTML Menu Contextmenu only 10px width

For the height I tried something familiar: However the max i value to prevent browser freezes is often exceeded. I guess the browser needs some time to calculate the body.firstChild.offsetHeight value and because it goes to quickly the value is not correct.

 

Probably there has to be done using settimeout to give the browser some ms time to calculate offset values.

The entire updateSizeCache prototype function starting on line: 505. I guessed, when width is not correctly read, the height also would not be correctly read by the browser. So when the width value is wrong, a failedHeight integer value is also set, which I later use to validate if the value, read by the browser for offsetHeight is the correct value:


Menu.prototype.updateSizeCache = function ( bForce ) {
 if ( this.areSizesCached() && !bForce )
  return;
 
 var d = this.getMeasureDocument();
 var body = d.body;
 
 var cs = this._cachedSizes = {}; // reset
 var scrollContainer = d.getElementById( "scroll-container" );
  
 // preferred width
 cs.preferredWidth = d.body.scrollWidth;
 
 falseHeight = null;
 i = 0;
 while (cs.preferredWidth <= 10){
 cs.preferredWidth = d.body.scrollWidth;
 falseHeight = body.firstChild.offsetHeight;
  if(i >= 1000){
   break;
  }
  i++
 }
 

 // preferred height
 scrollContainer.style.overflow = "visible";
 cs.preferredHeight = body.firstChild.offsetHeight; //body.scrollHeight;
 
 i = 0;
 while (cs.preferredHeight == falseHeight || cs.preferredHeight == (falseHeight-10)){
 cs.preferredHeight = body.firstChild.offsetHeight;
  if(i >= 1000){
   break;
  }
  i++
 }
 if(cs.preferredHeight == falseHeight || cs.preferredHeight == (falseHeight-10)){
  alert('cs.preferredHeight:'+cs.preferredHeight+' falseHeight:'+falseHeight+' i:'+i+'');
 }
 
 scrollContainer.style.overflow = "hidden";
 
 // inset left
 cs.insetLeft = posLib.getLeft( scrollContainer );

 // inset right
 cs.insetRight = body.scrollWidth - posLib.getLeft( scrollContainer ) -
     scrollContainer.offsetWidth;
 
 // inset top
 var up = d.getElementById( "scroll-up-item" );
 if ( up.currentStyle.display == "none" )
  cs.insetTop = posLib.getTop( scrollContainer );
 else
  cs.insetTop = posLib.getTop( up );
  
 // inset bottom
 var down = d.getElementById( "scroll-down-item" );
 if ( down.currentStyle.display == "none" ) {
  cs.insetBottom = body.scrollHeight - posLib.getTop( scrollContainer ) -
      scrollContainer.offsetHeight;
 }
 else {
  cs.insetBottom = body.scrollHeight - posLib.getTop( down ) -
      down.offsetHeight;
 }
};





Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX