Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
 Discussion Forums
 HTML, XML, JavaScript...
 Software Reviews
 Editors,Others...
 Top100
 JavaScript Tutorials, ...
 Tutorials
 ASP, CSS, Databases...
 Discussion List
 FAQ, Roundup, Configure ...
 Authoring
 HTML, JavaScript, CSS...
 Design
 Layout, Navigation,...
 Graphics
 Tools, Colors, Images...
 Software
 Browsers, Editors, XML...
 Internet
 Domains, E-Commerce, ...
 WDVL Resources
  Intermdiate, Tutorials,...
 WDVL
 Discussion Lists, Top 100,...
 Technology Jobs


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Top 10 Articles
  1. Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
  2. JavaScript Tutorial for Programmers
  3. Design
  4. JavaScript Tutorial for Programmers - Objects
  5. JavaScript Tutorial for Programmers - JavaScript Grammar
  6. JavaScript Tutorial for Programmers - Versions of JavaScript
  7. Cascading Style Sheets
  8. JavaScript Tutorial for Programmers - Embedding JavaScript
  9. JavaScript Tutorial for Programmers - Functions
  10. Authoring JavaScript
Domain Name Lookup
Search to find the availability of a domain name. Just enter the complete domain name with extension (.com, .net, .edu)

Setting up the menu's layers

January 19, 1999

Setting up a menu's constituent layers in vertical alignment, like preparing a chess board for play.
function setup(topic)
{ 
  
  var objName="['"+topic+"']";
  innerDivs=eval(obj+objName+innerLayersLength);
  totalHeight=0;
  
  //Netscape: arrange items
  if (!document.all){ 
  eval(obj+objName+innerLayer+"[0]"+
  posWidth+"=window.innerWidth");
  for (j=1;j<innerDivs;j++)
   { layerIdx="["+j+"]";
     prevIdx="["+(j-1)+"]";
     thisLayer="obj+objName+innerLayer+layerIdx";
	 prevLayer="obj+objName+innerLayer+prevIdx";
	 thisLayer=(eval(thisLayer));
	 prevLayer=(eval(prevLayer));
	 if (j==1) {gap=2} else {gap=0}
	 totalHeight+=eval(prevLayer+posHeight2)+gap;
	  eval(thisLayer+posTop+"="+prevLayer+
	  posTop+"+"+prevLayer+posHeight2+"+gap");
	  eval(prevLayer+posWidth+"=window.innerWidth");
	  eval(thisLayer+posWidth+"=window.innerWidth") 
	}
   }
	
  //MSIE: arrange items
  if (document.all){ 
  divsArray=new Array();
  divCount=0;
  tag=".tagName";
  for (j=0;j<innerDivs;j++)
   { childIdx="["+j+"]";
     thisChild=eval(obj+objName+innerLayer+childIdx+tag);
	 if (thisChild.toLowerCase()=="div")
	  { divsArray[divCount]=j;
	    divCount++
	  }
	}
	
   for (j=1;j<divsArray.length;j++)
    { layerIdx="["+divsArray[j]+"]";
      prevIdx="["+divsArray[j-1]+"]";
      thisLayer="obj+objName+innerLayer+layerIdx";
	  prevLayer="obj+objName+innerLayer+prevIdx";
	  thisLayer=(eval(thisLayer));
	  prevLayer=(eval(prevLayer));
	  if (j==1) {gap=2} else {gap=0}
	  totalHeight+=eval(prevLayer+posHeight2)+gap;
	  eval(thisLayer+posTop+"="+prevLayer+
	  posTop+"+"+prevLayer+posHeight2+"+gap");
     }    
	    	
   }
   totalHeight+=eval(thisLayer+posHeight2); 
   eval(obj+objName+posHeight+"="+totalHeight);
   //eval(obj+"['backdrop']"+posHeight+"="+totalHeight);
}

The setup() function is long but its purpose is straightforward: like settings up the pieces on a chessboard, this function vertically aligns the items within a menu. That's all it does, in fact, although it does so using two separate sections of code -- one for each browser. This function relies heavily on the eval() trick demonstrated earlier to shuffle around the layers which make up each menu into vertical alignment. And although eval() was supposed to allow us to avoid writing separate code for each browser in this case we had no choice for reasons explained momentarily.

Internet Explorer 4 mouse events
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
The menu revealed


Up to => Home / Authoring / DHTML / Menus




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers