DHTMLCentral.com - Dynamic HTML Tutorial - Upgrading to CoolMenus 4

Login

Save Password - Forgot Pass?

Not a member?
Become a DC
member now!

Upgrading to CoolMenus 4
Written 01/25/2002 by Thomas Brattli. Last updated 01/26/2002. Print-friendly version. Back to regular version.

Intro

I am really sorry to say that I had to change most property/variable names when making the new script. I needed a more stable naming convention for the properties so they are a little different. Shouldn't really be to hard to update it though, but you DO have to go step by step through the script and change some stuff.

I this tutorial I will actually update the old example 1 from the coolMenus 3 examples step by step while writing.

Remember that this version does not yet support frames so if you're using coolMenus3 with frames you CAN NOT update yet! The first thing you have to do is update your browsercheck. Remove the entire thing from your page and just use the one in the new JS file (If you site is in a frame and you get problems with NS4 saying "bw is not defined" then move it from the JS file and into your HTML file again.

Menu properties

We'll start with the menu properties. The first line of the menu creation script looked like this before:

var mDebugging=2

Just delete that line. The old menu creation line was like this:

oCMenu=new makeCoolMenu("oCMenu")

Change that to:

oCMenu=new makeCM("oCMenu")

These:

oCMenu.useframes=0
oCMenu.frame=""
oCMenu.useclick=0

can be deleted since this version does not yet support frames or click activation. You can also delete these lines (if you have them):

oCMenu.useNS4links=1  
oCMenu.NS4padding=2

Netscape 4 will now use the same classes as Explorer.

This one:

oCMenu.checkselect=0

Is no longer part of the core script. If you where using this feature you have to get the add-in.js (see the coolMenus documention for more info). So this line can be deleted as well.

oCMenu.offlineUrl="file:///C|/Inetpub/wwwroot/dhtmlcentral/"
oCMenu.onlineUrl="http://www.dhtmlcentral.com/coolmenus/examples/"

The onlineUrl and offlineUrl are replaced with onlineRoot and offlineRoot.

This is basically done because of all the problems the offlineUrl and onlineUrl caused ppl in version 3. Please note that this means you might have to change all your urls :(

These:

oCMenu.pagecheck=1
oCMenu.checkscroll=1

Can also be deleted as they are also part of the add-in.js now.

oCMenu.resizecheck=1

Is the same exept that it's now called:

oCMenu.resizeCheck=1 //Note the UPPER-CASE "C"

The wait property:

oCMenu.wait=1000

Is the same.

The fromleft, fromtop, pxbetween and menuplacement variables are still the same, only they have changed to upper-case on the second part of their names (all properties have changed this way):

oCMenu.fromLeft=20 
oCMenu.fromTop=0 
oCMenu.pxBetween=30
oCMenu.menuPlacement="center"

The oCMenu.rows is still the same.

There are two new main properties, fillImg and zIndex. I don't care about the zIndex for my examples as it's not important. The fillImg have to be set though, you have to get the cm_fill.gif from the zip file and upload it with the script. The value of the property should be the path to the image from the ROOT of your web:

oM.fillImg="images/cm_fill.gif"
oM.zIndex=0

More info about the menu properties can be found here.

Background-bar properties

The usebar, barx, bary, barwidth and barheight properties are the same as before except now they are called:

oCMenu.useBar=1
oCMenu.barWidth="100%" 
oCMenu.barHeight
oCMenu.barX=0
oCMenu.barY="menu"

Be sure to change the "B","W", "H", "X" and "Y" to upper-case letters.

The old barcolor variable is replaced with barClass:

oM.barClass="clBar"

So we have to make a style sheet with a class with settings for the background-bar. See "CSS help" in the documentation for more info about how to make the stylesheet. If I had this before:

oCMenu.barcolor="Navy"

My class will look like this:

.clBar{position:absolute; width:10; height:10; background-color:Navy;
 layer-background-color:Navy; visibility:hidden}

Note that we have to add layer-background-color for NS4 and that the layer needs a width and height for it to be displayed in Opera. Remember to place the class in a stylesheet.

.barinheritborder is replaced with 3 new properties called barBorderClass, barBorderX and barBorderY. In my example I am not using border for the background-bar so I'll just set them like this:

oM.barBorderX=0
oM.barBorderY=0
oM.barBorderClass=0

More info about the background-bar properties can be found here.

Level properties

There are two main changes in the level properties:

1. The levels now inherit from the last level no matter what.

2. The levels creation code is different:
Before:

oCMenu.level[0]=new Array()

Now:

oCMenu.level[0]=new cm_makeLevel()

I also added another way to create levels for advanced users, See here for more info.

width and height are still the same.

The old .bgcoloroff, .bgcoloron, .textcolor, .hovercolor and .style are replaced by regClass and overClass which now points to CSS classes that holds the styles for the items in the current level.

In my example it looked like this:

oCMenu.level[0].bgcoloroff="Navy" 
oCMenu.level[0].bgcoloron="#336699" 
oCMenu.level[0].textcolor="White" 
oCMenu.level[0].hovercolor="Yellow"
oCMenu.level[0].style=""

So I make two styles in my stylesheet (see CSS help for more info on making the stylesheet):

.clLevel0{
  position:absolute; 
  background-color:Navy; 
  layer-background-color:Navy; 
  color:white; 
  padding:2px; 
  font-family:tahoma,arial,helvetica; 
  font-size:12px; 
  font-weight:bold
}
.clLevel0over{  
  position:absolute; 
  background-color:#336699; 
  layer-background-color:#336699;
  color:Yellow; 
  padding:2px; 
  font-family:tahoma,arial,helvetica; 
  font-size:12px; 
  font-weight:bold
  cursor:pointer; /* Note the cursor for NS6 */
  cursor:hand /* Cursor for IE */
}

And set the variables to:

oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"

Actually, I would make the CSS classes like this to save space:

.clLevel0,.clLevel0over{position:absolute; padding:2px; 
font-family:tahoma,arial,helvetica; font-size:12px; font-weight:bold}
.clLevel0{background-color:Navy; layer-background-color:Navy;color:white;}
.clLevel0over{background-color:#336699; color:Yellow; 
layer-background-color:#336699; cursor:pointer; cursor:hand; }

Anyway, moving on the border and bordercolor are replaced by borderX borderY and borderClass . You can now control the vertical and horizontal borders of the items separately. And you control the look of the border with a CSS class. So before I had:

oCMenu.level[0].border=1
oCMenu.level[0].bordercolor=":#006699"

I have to make another CSS class:

.clLevel1border{position:absolute; visibility:hidden; 
background-color:#006699; layer-background-color:#006699}

and set the variables to:

oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass="clLevel0border"

The old .offsetX and .offsetY are the same.

These:

oCMenu.level[0].NS4font="tahoma,arial,helvetica"
oCMenu.level[0].NS4fontSize

Can be removed. NS4 now uses the same classes as the other browsers.

Next is the align variable. It works the same as before only I have added a couple of possible values.

If you where using filters, clip or slide you have to add the add-in.js file to get those properties on the levels again, if now just remove them.

There are four new variables for the levels. They are rows arrow arrowWidth and arrowHeight. Click on them for more information. In my example I don't need those, and I want all subitems in a column so I'll add:

oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0

in level 0.

Remember to do all these changes for ALL levels that you have any of these values specified.

More info about the level properties can be found here.

Item properties

Most of the item properties are still the same. My old items that looked like this:

oCMenu.makeMenu('top0',','�News','/news/','frmMain2')
 oCMenu.makeMenu('sub00','top0','Newest news','/news/index.asp')
  oCMenu.makeMenu('sub001','sub00','- New DHTML API released',',',160,0)
   oCMenu.makeMenu('sub002','sub00','- Explorer 7 is out',',',160,0)
   oCMenu.makeMenu('sub003','sub00','- Opera 6 supports innerHTML',',',160,0)
 oCMenu.makeMenu('sub01','top0','News archive','/news/archive.asp')

Will still work just fine. The only thing to notice is the links.

With the new onlineRoot and offlineRoot all links now have to be relative to the root of your web. Which means that if you have a file in mypages/myotherpages/myfile.html you have to place in the ENTIRE path like that. This also goes for the image variables; regImage and overImage (before called img1 and img2), if you where using images for the menus.

Other changed variables:
bgcolor, bgcoloron, textcolor and hovercolor are replaces with regClass and overClass (see the level part for more information)

New variables:
rows - You can override the level rows here. align - You can override the level align here. nolink - Used to make a item that doesn't link.

The onclick, onmouseover and onmouseout are the same.

It now looks like this:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, 
height, regImage, overImage, regClass, overClass , align, rows, 
nolink, onclick, onmouseover, onmouseout)

In my example I also had to edit 2 menus that had a onclick event defined, because the adding of the arguments to the function have made the events become one "more to the left". So I had to add an extra "empty" space in there.

More info about the item properties can be found here.

Finishing

Now remove the line:

oCMenu.makeStyle()

We no longer need this one because the script doesn't make the styles anymore. Leave the oCMenu.construct() code though. Then after going through the code I got a file like this: menu1.html.

UPDATED: Remember to add the NEEDED styles to the stylesheet:

/* CoolMenus 4 - default styles - do not edit */
.clCMEvent{position:absolute; width:99%; height:99%; 
clip:rect(0,100%,100%,0); left:0; top:0;}
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */

That's about it. If this didn't help let me know in the new CoolMenus 4 forum. And if this helped or you fixed it yourself please come back to the forums and help others do the same. Good luck!

This is a test div!