Menu Issues

[Matthew Hagston]

Trying to do some updating and beyond frustrations with making it
compatibal with Mac's I am primarily done. Biggest problem I am having now
is with Opera not displaying the menu. works fine in IE, NS, and Firefox.
Due to the problem of having to have it target an iframe to update had to
write my own menu. Do not get any errors, simply will not display at all.
code of the menu and the css file is below. location of the html file is:
http://www.otts.com/index_beta.html

var g_build_totOffset = 0;    // Begining offset (from left) + counter for
horizontal menus
var g_sub_vis = "";
var divMaster = "divMaster";
var ie = document.all;
var totTop = 0;
var vertical = 1;
var maxWidth = 165;
var lastVisible = "";
var visStack = new Array();
// Initialize area
 
function mnu_init() {
if (!document.getElementById("divMaster")) {
var ceDiv = document.createElement('DIV');
ceDiv.setAttribute("id", divMaster);
document.getElementById("mnuLocation").appendChild(ceDiv);
document.getElementById("divMaster").className = divMaster;
document.getElementById("divMaster").style.top = 0+'px';
document.getElementById("divMaster").style.left = 0+'px';
document.getElementById("divMaster").style.height = 22+'px';
}
document.body.onclick = hideall;
document.body.id = 'body';
addMenu("Adhesives & Tapes", "AdhesivesTapes",0,"AdhesivesNTapes");
addMenu("Airbrushes", "Airbrushes",0 ,"Airbrushes");
addItem("Books", "Airbrushes", "Airbrush_Books",0 ,"", "AirbrushBooks");
addItem("Paint", "Airbrushes", "Airbrush_Paint",0 ,"", "AirbrushPaint");
addItem("Supplies", "Airbrushes", "Airbrush_Supplies",0 ,"",
"AirbrushSupplies");
addItem("Compressors", "Airbrushes", "Compressors",0 ,"", "Compressors");
addItem("Parts", "Airbrushes", "Parts",0 ,"", "Parts");
addMenu("Art Accessories", "ArtAccessories",0 , "Art_Accessories");
addMenu("Books", "Books", 0, "Books");
addMenu("Brushes", "Brushes", 0, "Brushes");
addItem("Accessories", "Brushes", "Brushes_Accessories",0 ,""
,"BrushAccessories");
addItem("Sets", "Brushes", "Brushes_Sets",0 ,"", "BrushSets");
addMenu("Canvas", "Canvas", 0, "Canvas");
addItem("Tools", "Canvas", "Canvas_CanvasTools",0 ,"", "CanvasTools");
addItem("Panels", "Canvas", "Canvas_Panels",0 ,"", "Panels");
addItem("Stretched", "Canvas", "Canvas_Stretched",0 ,"", "Stretched");
addMenu("Clay", "Clay", 0, "Clay");
addItem("Modelling Tools", "Clay", "Clay_Tools", 0, "", "ModellingTools");
addMenu("Drafting", "Drafting", 0, "Drafting");
addMenu("Easels", "Easels", 0, "Easels");
addMenu("Lighting & Projectors", "LightingNProjectors", 0,
"LightingNProjectors");
addItem("Lightboxes", "LightingNProjectors", "LightingNProjectors_Tools",
0, "", "Lightboxes");
addMenu("Mat Cutters", "MatCutters", 0, "MatCutters");
addMenu("Palettes & Accessories", "PalettesNAccessories", 0,
"PalettesNAccessories");
addItem("Mixing Trays", "PalettesNAccessories",
"PalettesNAccessories_MixingTrays", 0, "", "MixingTrays");
addItem("Pallette Knives", "PalettesNAccessories",
"PalettesNAccessories_PalletteKnives", 0, "", "PalletteKnives");
addMenu("Painting", "Painting", 0, "");
addItem("Acrylic", "Painting", "PaintingAcrylic", 0, "", "Acrylic");
addItem("Accessories", "Painting_PaintingAcrylic", "AcrylicAccessories",
1, "", "AcrylicAccessories");
addItem("Books", "Painting_PaintingAcrylic", "AcrylicBooks", 0, "",
"AcrylicBooks");
addItem("Mediums", "Painting_PaintingAcrylic", "AcrylicMediums", 0, "",
"AcrylicMediums");
addItem("Paint-Basics", "Painting_PaintingAcrylic", "AcrylicPaintBasics",
0, "", "Basics");
addItem("Paint-Concentrated", "Painting_PaintingAcrylic",
"AcrylicPaintConcentrated", 0, "", "Concentrated");
addItem("Paint-Glossies", "Painting_PaintingAcrylic",
"AcrylicPaintGlossies", 0, "", "Glossies");
addItem("Acrylic_Sets", "Painting_PaintingAcrylic", "AcrylicSets", 0, "",
"AcrylicSets");
addItem("Oil", "Painting", "PaintingOil", 0, "", "Oil");
addItem("Accessories", "Painting_PaintingOil", "Oil_Accessories", 0, "",
"OilAccessories");
addItem("Books", "Painting_PaintingOil", "Oil_Books", 0, "", "OilBooks");
addItem("Mediums", "Painting_PaintingOil", "Oil_Mediums", 0, "",
"OilMediums");
addItem("Sets", "Painting_PaintingOil", "Oil_Sets", 0, "", "OilSets");
addItem("Paint", "Painting_PaintingOil", "Oil_Paint", 0, "", "OilPaint");
addItem("Watercolor", "Painting", "PaintingWatercolor", 0, "",
"Watercolor");
addItem("Accessories", "Painting_PaintingWatercolor",
"Watercolor_WatercolorAccessories", 0, "", "WatercolorAccessories");
addItem("Books", "Painting_PaintingWatercolor",
"Watercolor_WatercolorBooks", 0, "", "WatercolorBooks");
addItem("Mediums", "Painting_PaintingWatercolor",
"Watercolor_WatercolorMediums", 0, "", "WatercolorMediums");
addItem("Sets", "Painting_PaintingWatercolor",
"Watercolor_WatercolorSets", 0, "", "WatercolorSets");
addItem("Paint", "Painting_PaintingWatercolor",
"Watercolor_WatercolorPaint", 0, "", "WatercolorPaint");
addItem("Method Painting", "Painting", "MethodPainting", 0, "",
"MethodPainting");
addItem("Art Kits", "Painting", "ArtKits", 0, "", "ArtKits");
addMenu("Paper", "Paper", 0, "Paper");
addItem("Bristol", "Paper", "Paper_Bristol", 0, "", "Bristol");
addItem("Charcoal Media", "Paper", "Paper_CharcoalMedia", 0, "",
"CharcoalMedia");
addItem("Illustration", "Paper", "Paper_Illustration", 0, "",
"Illustration");
addItem("Mylar", "Paper", "Paper_Mylar", 0, "", "Mylar");
addItem("Newsprint", "Paper", "Paper_Newsprint", 0, "", "Newsprint");
addItem("Origami", "Paper", "Paper_Origami", 0, "", "Origami");
addItem("Pastel Media", "Paper", "Paper_PastelMedia", 0, "",
"PastelMedia");
addItem("Sketching", "Paper", "Paper_Sketching", 0, "", "Sketching");
addItem("Tracing", "Paper", "Paper_Tracing", 0, "", "Tracing");
addItem("Watercolor Media", "Paper", "Paper_WatercolorMedia", 0, "",
"WatercolorMedia");
addItem("Drawing", "Paper", "Paper_Drawing", 0, "", "Drawing");
addMenu("Storage & Presentation", "StorageNPresentation", 0,
"StorageNPresentation");
addItem("Storage Boxes", "StorageNPresentation",
"StorageNPresentation_StorageBoxes", 0, "", "StorageBoxes");
addItem("Portfolios", "StorageNPresentation",
"StorageNPresentation_Portfolios", 0, "", "Portfolios");
addMenu("Tools", "Tools", 0, "Tools");
addItem("X-acto", "Tools", "Tools_acto", 0, "", "Xacto");
addMenu("Writing", "Writing", 0, "Writing");
addItem("Calligraphy", "Writing", "Writing_Calligraphy", 0, "",
"Calligraphy");
addItem("Charcoal", "Writing", "Writing_Charcoal", 0, "", "Charcoal");
addItem("Erasers", "Writing", "Writing_Erasers", 0, "", "Erasers");
addItem("Ink", "Writing", "Writing_Ink", 0, "", "Ink");
addItem("Markers", "Writing", "Writing_Markers", 0, "", "Markers");
addItem("Pastels", "Writing", "Writing_Pastels", 0, "", "Pastels");
addItem("Pencils", "Writing", "Writing_Pencils", 0, "", "Pencils");
addItem("Pens", "Writing", "Writing_Pens", 0, "", "Pens");
addItem("Writing Accessories", "Writing", "Writing_WritingAccessories", 0,
"", "WritingAccessories");
addItem("Block Printing", "Writing", "Writing_BlockPrinting", 0, "",
"BlockPrinting");
}
 
function docmd(cmd){
if (cmd!=null) { eval(cmd); return true; } else { return false;}
}
 
function load() {
document.getElementById('divError').innerHTML = "document loaded";
}
 
function hideall() {
for (n=0; n<=visStack.length; n++) {
tmpStr = visStack.pop();
if (tmpStr) {
document.getElementById(tmpStr).style.visibility = 'hidden';
}
}
}
 
function addMenu(mnuText, strMenuTxt, bDisabled, CiD) {
this.mnuBarObj = "mnu" + strMenuTxt;
this.strMenuTxt = strMenuTxt;
 
var ceDiv = document.createElement('DIV');
var ceA = document.createElement('a');
var ceFONT1 = document.createElement('FONT');
var ceFONT2 = document.createElement('FONT');
 
objRef = strMenuTxt;
mnuBarObj = "mnu" + strMenuTxt;
mnuAObj = "mnuA" + strMenuTxt;
divObj = "div" + strMenuTxt;
tmpStr = "";
 
sT1 = document.createTextNode(mnuText);
sT2 = document.createTextNode(mnuText);
ceFONT1.appendChild(sT1);
ceFONT1.setAttribute("id", mnuBarObj + "B");
ceFONT1.setAttribute("class", "mnuBackTextNorm");
ceFONT1.setAttribute("size", 2);
ceFONT2.appendChild(sT2);
ceFONT2.setAttribute("id", mnuBarObj);
ceFONT2.setAttribute("class", "mnuForeTextNorm");
ceFONT2.setAttribute("size", 2);
ceA.appendChild(ceFONT1); ceA.appendChild(ceFONT2);
ceA.setAttribute("id", mnuAObj);
ceA.setAttribute("itmSub", "0");
ceA.setAttribute("CiD", CiD);
ceDiv.appendChild(ceA);
ceDiv.setAttribute("id", divObj);
ceDiv.setAttribute("class", "mnuDiv");
ceDiv.setAttribute("align", "left");
ceDiv.setAttribute("itmSub", "0");
ceDiv.setAttribute("CiD", CiD);
 
document.getElementById(divMaster).appendChild(ceDiv);
document.getElementById(mnuBarObj + "B").className = "mnuBackTextNorm";
document.getElementById(mnuBarObj).className = "mnuForeTextNorm";
document.getElementById(mnuBarObj).bDisabled = 0;
document.getElementById(divObj).CiD = CiD;
if (bDisabled) {
document.getElementById(mnuBarObj + "B").className = "mnuBackTextDisab";
document.getElementById(mnuBarObj).className = "mnuForeTextDisab";
document.getElementById(mnuBarObj).bDisabled = 1;
}
if (ie) {
document.getElementById(mnuBarObj).style.left = g_build_totOffset;
document.getElementById(mnuBarObj + "B").style.left = g_build_totOffset;
} else {
document.getElementById(divObj).style.left = g_build_totOffset;
}
if (vertical) {
if (ie) { // vertical
document.getElementById(mnuBarObj).style.left = 0;
document.getElementById(mnuBarObj + "B").style.left = 0;
document.getElementById(mnuBarObj).style.top = totTop;
document.getElementById('divMaster').style.height = totTop + 18;
document.getElementById('divMaster').style.width = maxWidth;
} else {
document.getElementById(divObj).style.left = 0;
document.getElementById(mnuBarObj + "B").style.left = 0;
document.getElementById(divObj).style.top = totTop;
document.getElementById('divMaster').style.height = totTop + 18;
document.getElementById('divMaster').style.width = maxWidth;
}
} else { // horizontal (untested)
if (ie) {
document.getElementById(mnuBarObj).style.left = g_build_totOffset;
document.getElementById(mnuBarObj + "B").style.left = g_build_totOffset;
document.getElementById(mnuBarObj).style.top = totTop;
} else {
document.getElementById(divObj).style.top = 0;
document.getElementById(divObj).style.left = g_build_totOffset;
}
}
document.getElementById(mnuAObj).onmouseover = mnuMouseOver;
document.getElementById(mnuAObj).onmouseout = mnuMouseOut;
document.getElementById(mnuAObj).onmousedown = mnuSelect;
document.getElementById(mnuAObj).onclick = mnuClick;
g_build_totOffset += document.getElementById(mnuBarObj).offsetWidth;
totTop += parseInt(document.getElementById(mnuBarObj).offsetHeight);
}
 
function addItem(mnuText, mnu, itm, bDisabled, itmDo, CiD) {
var subMnu = "sub" + mnu;
var mnuItm = "mnu"+mnu+"_"+itm;
var mnuAObj = "mnA"+mnu+"_"+itm;
var divItm = "div"+mnu+"_"+itm;
if (!(!document.getElementById("sub" + mnu))) {
var refMnu = "sub" + mnu;
} else {
var refMnu = "mnu" + mnu;
var refSub = "sub" + mnu;
var refDiv = "div" + mnu;
}
tst01 = 1;
if (!document.getElementById(subMnu)) {
tst01 = 0;
var ceDiv = document.createElement('DIV');
ceDiv.setAttribute("id", subMnu);
ceDiv.setAttribute("class", "subDiv");
ceDiv.setAttribute("align", "left");
document.body.appendChild(ceDiv);
document.getElementById(subMnu).className = "subDiv";
document.getElementById(refMnu).itmSub = "1";
document.getElementById(refMnu).subName = subMnu;
document.getElementById(refMnu).CiD = CiD;
document.getElementById(refMnu).parrentName = refMnu;
var re = /_/i;            //Create regular expression pattern.
var widthadd = 0;
var topadd = 0;
if (subMnu.search(re)>0) {
t = subMnu.search(re)
widthadd = parseInt(document.getElementById(subMnu).offsetWidth);
if (ie) {
topadd =  document.getElementById(subMnu.substr(0, t)).offsetTop  +
document.getElementById(subMnu.substr(0, t)).offsetHeight - 15;
} else {
topadd =  document.getElementById(subMnu.substr(0, t)).offsetTop  +
document.getElementById(subMnu.substr(0, t)).offsetHeight - 15;
}
}
if (vertical) {  // Vertical
if (topadd) {
document.getElementById(subMnu).style.top = topadd;
} else {
if (ie) {
document.getElementById(subMnu).style.top =
parseInt(document.getElementById(refMnu).offsetTop) +
parseInt(document.getElementById("divMaster").offsetTop);
} else {
document.getElementById(subMnu).style.top =
parseInt(document.getElementById(refDiv).offsetTop) +
parseInt(document.getElementById("divMaster").offsetTop);
}
}
document.getElementById(subMnu).style.left = widthadd +
parseInt(document.getElementById("divMaster").offsetWidth)+parseInt(document
..getElementById(refMnu).offsetLeft)+parseInt(document.getElementById("divMas
ter").offsetLeft)+'px';
document.getElementById(subMnu).style.height = 0+'px';
} else { // Horizontal (untested)
document.getElementById(subMnu).style.top =
parseInt(document.getElementById("divMaster").style.height)+parseInt(documen
t.getElementById("divMaster").offsetTop)+'px';
document.getElementById(subMnu).style.left =
parseInt(document.getElementById(refMnu).offsetLeft)+parseInt(document.getEl
ementById("divMaster").offsetLeft)+'px';
document.getElementById(subMnu).style.height = 0+'px';
}
}
var ceA = document.createElement('a');
var ceFONT1 = document.createElement('FONT');
var ceFONT2 = document.createElement('FONT');
var ceDiv = document.createElement('DIV');
sT1 = document.createTextNode(mnuText);
sT2 = document.createTextNode(mnuText);
ceFONT1.appendChild(sT1);
ceFONT1.setAttribute("id", mnuItm + "B");
ceFONT2.appendChild(sT2);
ceFONT2.setAttribute("id", mnuItm);
ceFONT2.setAttribute("class", "mnuForeTextNorm");
ceA.appendChild(ceFONT1); ceA.appendChild(ceFONT2);
ceA.setAttribute("id", mnuAObj);
ceA.setAttribute("itmDo", itmDo);
ceA.setAttribute("itmSub", "0");
ceDiv.setAttribute("id", divItm);
ceDiv.setAttribute("className", "itmDiv");
ceDiv.appendChild(ceA);
document.getElementById(subMnu).appendChild(ceDiv);
document.getElementById(mnuAObj).itmDo = itmDo;
document.getElementById(divItm).className = "itmDiv";
document.getElementById(mnuItm + "B").className = "mnuBackTextNorm";
document.getElementById(mnuItm).className = "mnuForeTextNorm";
document.getElementById(mnuItm).bDisabled = 0;
document.getElementById(mnuItm).CiD = CiD;
document.getElementById(subMnu).style.height =
(parseInt(document.getElementById(mnuItm).offsetHeight) - 0) +
parseInt(document.getElementById(subMnu).style.height) + 'px';
if (bDisabled) {
document.getElementById(mnuItm + "B").className = "mnuBackTextDisab";
document.getElementById(mnuItm).className = "mnuForeTextDisab";
document.getElementById(mnuItm).bDisabled = 1;
}
document.getElementById(mnuItm).onmouseover = mnuMouseOver;
document.getElementById(mnuItm).onmouseout = mnuMouseOut;
document.getElementById(mnuItm).onmousedown = mnuSelect;
document.getElementById(mnuItm).onclick = mnuClick;
}
 
function mnuMouseOver(e) {
targid = "";
if (ie) { targid = window.event.toElement.id; } else { targid =
e.target.id; }
if (targid.slice(-1) == "B") { return false; }
var re = /_/i;            //Create regular expression pattern.
 
if (targid.search(re)>0) {              // Item is a submenu
if (document.getElementById(targid).bDisabled) {        // Item is
disabled
if (targid.slice(0, 3) == "mnu") {           // Double check mouse event
ID
document.getElementById(targid).className = "mnuForeTextDisabItmMsOvr";
} else { return false; }            // was not proper ID, throw out.
} else {                 // Item is not disabled
if (targid.slice(0, 3) == "mnu") {           // Double check mouse event
ID
document.getElementById(targid).className = "mnuForeTextNormItmMsOvr";
if (document.getElementById(targid).itmSub == '1') {     // If item has
a sub, open it.
hideall();
pname = targid.substr(0, targid.search(re));      // get parent
pname = "sub" + pname.substr(3);         // refine parent name
 
document.getElementById(document.getElementById(targid).subName).style.visib
ility = 'visible'; // get name of sub.
document.getElementById(pname).style.visibility = 'visible';
visStack.push(pname);
visStack.push(document.getElementById(targid).subName);
lastVisible = document.getElementById(targid).subName;
}
} else { return false; }            // was not proper ID, throw out.
}
} else {
if (document.getElementById(targid).bDisabled) {
if (targid.slice(0, 3) == "mnu") {
document.getElementById(targid).className = "mnuForeTextDisabMsOvr";
document.getElementById('divError').innerHTML =
document.getElementById(targid).itmSub
} else { return false; }
} else {
if (targid.slice(0, 3) == "mnu") {
document.getElementById(targid).className = "mnuForeTextNormMsOvr";
if (document.getElementById(targid).itmSub == '1') {
hideall();
if (lastVisible != "") {
document.getElementById(lastVisible).style.visibility = 'hidden'; }
 
document.getElementById(document.getElementById(targid).subName).style.visib
ility = 'visible';
if (ie) { // menu displaying offscreen if list is too long, correct it
if needed.
tmpInt = parseInt(document.getElementById(targid).offsetTop) +
parseInt(document.getElementById(document.getElementById(targid).subName).st
yle.height)
tmpInt2 = parseInt(document.getElementById('dispMain').offsetHeight)
if (tmpInt > tmpInt2) {
tmpInt3 = tmpInt2 - tmpInt;
tmpInt = parseInt(document.getElementById(targid).offsetTop) +
tmpInt3;
} else {
tmpInt = parseInt(document.getElementById(targid).offsetTop);
}
 
document.getElementById(document.getElementById(targid).subName).style.top =
parseInt(document.getElementById('divMaster').offsetTop) + tmpInt + 'px';
} else {
divId = 'div' + targid.substr(3)
tmpInt = parseInt(document.getElementById(divId).offsetTop) +
parseInt(document.getElementById(document.getElementById(targid).subName).st
yle.height)
tmpInt2 = parseInt(document.getElementById('dispMain').offsetHeight)
if (tmpInt > tmpInt2) {
tmpInt3 = tmpInt2 - tmpInt;
tmpInt = parseInt(document.getElementById(divId).offsetTop) + tmpInt3;
} else {
tmpInt = parseInt(document.getElementById(divId).offsetTop);
}
 
document.getElementById(document.getElementById(targid).subName).style.top =
parseInt(document.getElementById('divMaster').offsetTop) + tmpInt + 'px';
}
visStack.push(document.getElementById(targid).subName);
lastVisible = document.getElementById(targid).subName;
} else { hideall(); }
} else { return false; }
}
}
}
 
function mnuMouseOut(e) {
targid = "";
if (ie) { targid = window.event.fromElement.id; } else { targid =
e.target.id; }
if (targid.slice(-1) == "B") { return false; }
if (document.getElementById(targid).bDisabled) {
if (targid.slice(0, 3) == "mnu") {
document.getElementById(targid).className = "mnuForeTextDisab"
} else { return false; }
} else {
if (targid.slice(0, 3) == "mnu") {
document.getElementById(targid).className = "mnuForeTextNorm"
} else { return false; }
}
}
 
function mnuSelect() { return false; }
 
function mnuClick(e) {
targid = "";
msClick(4);
if (ie) { targid = window.event.srcElement.id; } else { targid =
e.target.id; }  // evaluate for IE or NS
if (targid.slice(-1) == "B") { return false; }          // managed to click
on the 1px behind font, throw out.
if (document.getElementById(targid).bDisabled) { return false; }     //
item disabled, throw out.
var re = /_/i;                   //Create regular expression pattern.
if (targid.search(re)>0) {
mnu = targid.slice(3);
var subMnu = "mnA" + mnu;
var subMnu1 = "mnu" + mnu;
tmpStr = targid.substr(targid.search(re) + 1);
document.getElementById('dispMain').src =
"http://www.otts.com/cid.php?code=" + document.getElementById(subMnu1).CiD;
} else { // Hit main menu
mnu = targid.slice(3);
var subMnu = "sub" + mnu;
var divMnu = "div" + mnu;
document.getElementById('dispMain').src =
"http://www.otts.com/cid.php?code=" + document.getElementById(divMnu).CiD;
}
}
 
function mnuHide(e) {
targid = "";
if (ie) { targid = window.event.srcElement.id; } else { targid =
e.target.id; } // evaluate for IE or NS
if (targid.slice(0, 3) != "mnu") {
if (g_sub_vis != "") {
document.getElementById(g_sub_vis).style.visibility = "hidden";
g_sub_vis = "";
}
}
return true;
}
 
 
//--------------------------------------------------------------------------
---------------------------------------
Delim = "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;";
sNews = "An amazing selection of art supplies at up to 75% off. <font
face='Wingdings'>(</font>[phone]" + Delim;
sNews += "☼ Same Day Shipping Avalible!" + Delim;
sNews += "☼ Outstanding Customer Service!" + Delim;
sNews += "☼ Huge Selection of Products!" + Delim;
sNews += "<font face='webdings'>&#0254</font> Visit our Toys & Hobbies
website: <a href='http://www.hungates.com'>http://www.hungates.com!</a>
<font face='webdings'>&#0253</font>" + Delim;
sNews += "Come back often! We are constantly changing our special offers." +
Delim;
sNews += "Pages are Optimized for Internet Explorer 6.0 or Netscape 7.1.
Minimum recommended screen size: 800x600" + Delim;
sNews +=  Delim;
 
ts = new Array(0, 0, 0, 0, 0, 0, 0);
tmnu = new Array(0, 1, 0, 0, 0, 0, 0);
omnu = new Array("", "mnuHome", "mnuAbout", "mnuSpecials", "mnuStore",
"mnuFAQ", "mnuContact");
smnu = new Array("", "home.html", "about.html", "specials.html", "",
"faq.html", "contact.html");
lastopen = 0; curopen = 1; var msNum = 0;
 
function msOver(num) {
msNum = num;
if (!ts[num]){
document.getElementById("mnuHigh").style.top =
parseInt(document.getElementById(omnu[num]).style.top) + 0 + "px";
document.getElementById("mnuHigh").style.left =
parseInt(document.getElementById(omnu[num]).style.left) + 5 + "px";
}
}
 
function msOut() {
msNum = 0;
document.getElementById("mnuHigh").style.top ="30px";
}
 
function msClick(num) {
num = parseInt(num);
if (tmnu[num]) { return false }   // this menu is already open, opt out.
lastopen = curopen; curopen = num;
tmnu[lastopen] = 0; tmnu[curopen] = 1;
if (ts[curopen] == 0) {
ts[curopen] = window.setTimeout("mvUp('" + omnu[curopen] + "', '" +
curopen + "');", 10);
ts[lastopen] = window.setTimeout("mvDown('" + omnu[lastopen] + "', '" +
lastopen + "');", 10);
document.getElementById('dispMain').src = smnu[curopen];
cartclick('list');
document.getElementById('cart2').checked = "true";
}
}
 
function mvDown(obj, num) {
y = document.getElementById(obj).style.top; y = parseInt(y) + 1;
if (y <= 10) {
document.getElementById(obj).style.top = y + 'px';
if ((msNum) && (msNum==num)) {
document.getElementById("mnuHigh").style.top = y + 'px';
document.getElementById("mnuHigh").style.left =
parseInt(document.getElementById(omnu[num]).style.left) + 5 + "px";
}
ts[num] = window.setTimeout("mvDown('" + obj + "', '" + num + "');", 10)
} else {
ts[num]=0; return true;
}
}
 
function mvUp(obj, num) {
y = document.getElementById(obj).style.top; y = parseInt(y) - 1;
if (y >= 0) {
document.getElementById(obj).style.top = y + 'px';
if ((msNum) && (msNum==num)) {
document.getElementById("mnuHigh").style.top = y + 'px';
document.getElementById("mnuHigh").style.left =
parseInt(document.getElementById(omnu[num]).style.left) + 5 + "px";
}
ts[num] = window.setTimeout("mvUp('" + obj + "', '" + num + "');", 10)
} else {
ts[num]=0; return true;
}
}
 
function init() {
document.getElementById("newsHtm").innerHTML = sNews;
document.getElementById("newsHtm").loop = "-1";
window.setTimeout("popdown1();", 1000);
if (document.all) {
document.getElementById('dispMain').height =
parseInt(document.body.clientHeight) - 57;
document.getElementById('dispBask').style.top =
document.getElementById('dispMain').offsetTop;
document.getElementById('dispBask').style.left =
document.getElementById('dispMain').offsetLeft;
document.getElementById('dispBask').height =
parseInt(document.body.clientHeight) - 57;
document.getElementById('dispBask').style.visibility = "hidden";
} else {
document.getElementById('dispMain').height
=parseInt(document.body.clientHeight) - 57;
document.getElementById('dispBask').style.top =
document.getElementById('dispMain').offsetTop;
document.getElementById('dispBask').style.left =
document.getElementById('dispMain').offsetLeft;
document.getElementById('dispBask').style.height =
parseInt(document.body.clientHeight) - 57;
document.getElementById('dispBask').style.visibility = "hidden";
}
}
 
function doNews() {
document.getElementById("newsHtm").start();
document.getElementById("divTest").innerHTML = "hit!";
}
function normNews() {
document.getElementById("newsHtm").scrollDelay = 10;
document.getElementById("newsHtm").scrollAmount = 3;
}
 
function slowNews() {
document.getElementById("newsHtm").scrollDelay = 50;
document.getElementById("newsHtm").scrollAmount = 1;
}
 
function popdown1() {
window.setTimeout("popdownGo('popdown1', 0, 5, 175)", 50);
}
popagain=1;
function popdownGo(obj, curY, dir, end) {
curY = curY + dir;
if (curY == end) {
document.getElementById(obj).style.clip = "rect(0 230px "+curY+"px 0)";
if (popagain) {
popagain=0;
dir = dir * -1;
window.setTimeout("popdownGo('" + obj + "'," + curY + "," + dir + "," + 0
+ ")", 20000);
}
return false;
} else {
document.getElementById(obj).style.clip = "rect(0 230px "+curY+"px 0)";
window.setTimeout("popdownGo('" + obj + "'," + curY + "," + dir + "," +
end + ")", 50);
}
}
 
function doBasket() {
window.setTimeout('document.getElementById("dispBask").src =
"http://www.otts.com/bask.php"', 2500);
}
 
function cartclick(obj) {
if (obj == 'list') {
document.getElementById("dispMain").style.visibility = 'visible';
document.getElementById("dispBask").style.visibility =  'hidden';
}
if (obj == 'view') {
document.getElementById("dispMain").style.visibility = 'hidden';
document.getElementById("dispBask").style.visibility =  'visible';
document.getElementById("dispBask").src = "http://www.otts.com/bask.php"
}
}
 

[css]
A {
text-decoration: none;
}
..mnuForeTextNo rm {
font-family: sans-serif;
font-strech: normal;
border: #c0c0c0 1px solid;
color: #000000;
position: absolute;
z-index: 1025;
top: 0px;
left: 0px;
height: 18px;
width: 165px;
}
..mnuBackTextNo rm {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
color: #c0c0c0;
POSITION: absolute;
z-index: 1015;
top: 1px;
left: 1px;
height: 18px;
width: 165px;
}
..mnuForeTextDi sab {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
color: #505050;
POSITION: absolute;
top: 0px;
left: 0px;
z-index: 1025;
height: 18px;
width: 165px;
}
..mnuBackTextDi sab {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
color: #FFFFFF;
POSITION: absolute;
z-index: 1015;
top: 1px;
left: 1px;
height: 18px;
width: 165px;
}
..mnuForeTextNo rmMsOvr {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
color: #FFFFFF;
BACKGROUND-COLOR: #003399;
POSITION: absolute;
z-index: 1025;
top: 0px;
left: 0px;
height: 18px;
width: 165px;
cursor: hand;
}
..mnuForeTextDi sabMsOvr {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
color: #505050;
BACKGROUND-COLOR: #003399;
POSITION: absolute;
top: 0px;
left: 0px;
z-index: 1025;
height: 18px;
width: 165px;
cursor: hand;
}
..mnuForeTextNo rmItmMsOvr {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
color: #FFFFFF;
BACKGROUND-COLOR: #003399;
POSITION: absolute;
z-index: 1025;
top: 0px;
left: 0px;
height: 18px;
width: 165px;
cursor: hand;
}
..mnuForeTextDi sabItmMsOvr {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
BORDER: #c0c0c0 1px solid;
COLOR: #505050;
BACKGROUND-COLOR: #003399;
POSITION: absolute;
top: 0px;
left: 0px;
z-index: 1025;
height: 18px;
width: 165px;
cursor: hand;
}

..mnuDiv {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
position: absolute;
background-color: #c0c0c0;
top: 0px;
left: 0px;
width: 165px;
height: 18px;
overflow: hidden;
z-Index: 1011;
}
..mnuDivMsOvr {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
POSITION: absolute;
BACKGROUND-COLOR: #003399;
top: 0px;
left: 0px;
width: 165px;
height: 18px;
overflow: hidden;
z-Index: 1011;
}
..subDiv {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
POSITION: absolute;
BACKGROUND-COLOR: #c0c0c0;
BORDER: 1px #000000 solid;
top: 0px;
left: 0px;
width: 165px;
height: 18px;
overflow: hidden;
visibility: hidden;
z-Index: 10100;
}
..itmDiv {
FONT-FAMILY: sans-serif;
FONT-STRECH: normal;
POSITION: relative;
BACKGROUND-COLOR: #c0c0c0;
BORDER: 0px #000000 solid;
top: 0px;
left: 0px;
width: 165px;
height: 18px;
overflow: hidden;
z-Index: 10100;
}
..divMaster {
position: relative;
width: 175px;
height: 200px;
top: 0px;
left: 0px;
BACKGROUND-COLOR: #C0C0C0;
BORDER: #c0c0c0 1px solid;
z-Index: 1010;
}
[/css]

--
Matthew Hagston
Hungates Creative Toys and Hobbies
ma************@ hungates.com ........ http://www.hungates.com

[Fred Oz]

Matthew Hagston wrote:

Trying to do some updating and beyond frustrations with making it
compatibal with Mac's I am primarily done. Biggest problem I am having now
[snip] ceDiv.setAttrib ute("id", divMaster);

You're right, the centre part doesn't work in Safari. I got as far as
the above line, which should be:

ceDiv.setAttrib ute("id", "divMaster" );

Note extra set of double quotes.

Fred.

[Michael Winter]

On Wed, 27 Oct 2004 19:21:16 +1000, Fred Oz <oz****@iinet.n et.auau> wrote:

Matthew Hagston wrote:

ceDiv.setAttrib ute("id", divMaster);
You're right, the centre part doesn't work in Safari. I got as
far as the above line, which should be:

ceDiv.setAttrib ute("id", "divMaster" );

Really, it should be:

ceDiv.id = divMaster;

(Note to Fred: divMaster is a variable with the value, 'divMaster')

The setAttribute method should be reserved for XML documents. HTML
documents are given properties for convenience, so use them. I also
believe that IE has problems with setAttribute, though I don't know the
specifics.

From the original post:
document.getEle mentById("divMa ster").classNam e = divMaster;
document.getEle mentById("divMa ster").style.to p = 0+'px';
document.getEle mentById("divMa ster").style.le ft = 0+'px';
document.getEle mentById("divMa ster").style.he ight = 22+'px';

These would also be better written as:

ceDiv.className = divMaster;
ceDiv.style.top = '0px';
ceDiv.style.lef t = '0px';
ceDiv.style.hei ght = '22px';

As a parting comment, I'm afraid to say I think that script is horrific.
No feature detection, use of object inference, no possibility of graceful
degradation, the use of FONT in the 21st century, and general inefficiency.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Fred Oz]

Michael Winter wrote:
[snip]

(Note to Fred: divMaster is a variable with the value, 'divMaster')
Yup - I got confused 'cos I was testing code snippets and the OP
switched between the variable divMaster and the string "divMaster" .

I can't see the point of making a variable name identical to the string
it contains - but that's no excuse for my error. Further, why use this
variable maybe three times, and use the identical string 17 times?

[snip] As a parting comment, I'm afraid to say I think that script is
horrific. No feature detection, use of object inference, no possibility
of graceful degradation, the use of FONT in the 21st century, and
general inefficiency.

To which could be added no attempt to isolate the errors and present a
concise example.

Anyhow, I ran the page through the w3c HTML validator. It barfed at
line 69 because of the MARQUEE tag - it is not part of the HTML
specification:

"Task: Do not create scrolling text with the marquee element.

...

The marquee element is not part of the HTML specification. Use
@@EcmaScript if you must have scrolling text."

Also, running a cursor over the dynamic menus pretty quickly fills the
console with "(event handler):Undefi ned value" errors in Safari.
Cheers, Fred.

[Michael Winter]

On Wed, 27 Oct 2004 21:48:44 +1000, Fred Oz <oz****@iinet.n et.auau> wrote:

Michael Winter wrote:

(Note to Fred: divMaster is a variable with the value, 'divMaster')
Yup - I got confused 'cos I was testing code snippets and the OP
switched between the variable divMaster and the string
"divMaster" .

I didn't see it originally, either.
[...] Further, why use this variable maybe three times, and use
the identical string 17 times?
[guess]
Perhaps an (abortive) attempt to make the script reusable by making the
container name variable?
[/guess]

As a parting comment, I'm afraid to say I think that script is
horrific. No feature detection, use of object inference, no possibility
of graceful degradation, the use of FONT in the 21st century, and
general inefficiency.

To the OP: I would like to point out that I didn't enjoying writing that
paragraph.
To which could be added no attempt to isolate the errors and
present a concise example.
True.
[...] the MARQUEE tag
What MARQUEE element?

[snip]
Use @@EcmaScript if you must have scrolling text."
Really, scrolling text should be avoided completely. If it's too fast, the
user has to wait for several repetitions to read the text. Too slow and
the user has to wait just to get through one. Moreover, it's distracting.
It could be worse though: scrolling images. *ack*
Also, running a cursor over the dynamic menus pretty quickly fills
the console with "(event handler):Undefi ned value" errors in
Safari.

I assume you're looking at the OP's web site? As the OP admitted himself,
the menu doesn't work with Opera, so I see nothing but: "Menu is loading
please wait...".

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Matthew Hagston]

Yes, I know about the marquee tag not being liked by w3c, will be
corrected when I get the time to write my own. At the moment it will just
have to do.

The previous version of this menu was a lot cleaner and worked in any
browser I could throw it on. but due to it's use of innerHTML is not
compliant with w3c so decided to give it a re-write with the "new way" of
doing it. Also I do know there is a lot of repetition, more concerned with
getting it working first, then optimizing. I've found that if I try to
optimize as I go that I end up shooting myself in the foot.

The reason this seems over complicated is I want a menu that I can make
changes to in real time. Enable, disable, add to, delete, change colors, add
remove images. so fourth. This is the third total re-write of this silly
attempt of mine and is starting to seem like an exercise in futility. Would
show you an example of the last menu that utilizes .innerHTML but my
wonderfully intelligent webhost I use to work on my non-business related
items for testing, puked on itself and all my work is gone except for the
php items I made backup's of. Anyways, will make the suggested modifications
and see how it goes. Oh, and the reason divMaster = "divMaster" ; was just
for ease of change. So I could re-define the primary div target (where the
menu is to be drawn) easier.

Matthew Hagston...

"Fred Oz" <oz****@iinet.n et.auau> wrote in message
news:41******** *************** @per-qv1-newsreader-01.iinet.net.au ...

Matthew Hagston wrote:

Trying to do some updating and beyond frustrations with making it
compatibal with Mac's I am primarily done. Biggest problem I am having

now
[snip]

ceDiv.setAttrib ute("id", divMaster);

You're right, the centre part doesn't work in Safari. I got as far as
the above line, which should be:

ceDiv.setAttrib ute("id", "divMaster" );

Note extra set of double quotes.

Fred.

[Matthew Hagston]

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opsgi3i8zg x13kvk@atlantis ...

On Wed, 27 Oct 2004 21:48:44 +1000, Fred Oz <oz****@iinet.n et.auau> wrote:

Michael Winter wrote:

(Note to Fred: divMaster is a variable with the value, 'divMaster')
Yup - I got confused 'cos I was testing code snippets and the OP
switched between the variable divMaster and the string
"divMaster" .

I didn't see it originally, either.

[...] Further, why use this variable maybe three times, and use
the identical string 17 times?

[guess]
Perhaps an (abortive) attempt to make the script reusable by making the
container name variable?
[/guess]

As a parting comment, I'm afraid to say I think that script is
horrific. No feature detection, use of object inference, no possibility
of graceful degradation, the use of FONT in the 21st century, and
general inefficiency.

To the OP: I would like to point out that I didn't enjoying writing that
paragraph.

To which could be added no attempt to isolate the errors and
present a concise example.

True.

[...] the MARQUEE tag

What MARQUEE element?

[snip]

Use @@EcmaScript if you must have scrolling text."

Really, scrolling text should be avoided completely. If it's too fast, the
user has to wait for several repetitions to read the text. Too slow and
the user has to wait just to get through one. Moreover, it's distracting.
It could be worse though: scrolling images. *ack*

Also, running a cursor over the dynamic menus pretty quickly fills
the console with "(event handler):Undefi ned value" errors in
Safari.

I assume you're looking at the OP's web site? As the OP admitted himself,
the menu doesn't work with Opera, so I see nothing but: "Menu is loading
please wait...".

....menu is loading please wait???... site this script is on is at:
http://www.otts.com/index_beta.html
was wondering why i couldn't seem to find a few of the references you all
were looking at.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Winter]

On Wed, 27 Oct 2004 13:31:24 GMT, Matthew Hagston <ot***@earthlin k.net>
wrote:

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opsgi3i8zg x13kvk@atlantis ...

[snip]

I assume you're looking at the OP's web site? As the OP admitted
himself, the menu doesn't work with Opera, so I see nothing but: "Menu
is loading please wait...".

...menu is loading please wait???... site this script is on is at:
http://www.otts.com/index_beta.html
was wondering why i couldn't seem to find a few of the references you
all were looking at.

Not that it really matters. Aside from that one instance, my comments have
been based on what's been posted in this thread.

There are a couple of things I will mention, though, now that I've looked
at the correct link.

1) On the About page, rather than making the "Auggie" link,
javascript:void (0), why not link to the picture of the dog? That way, the
link will actually do something useful for users without scripting.
2) Without scripting enabled, your site is completely unnavigable. Not
only will the left-side menu fail to work at all, but neither will the
links at the top of the page. Surely this is not a good idea for a
commercial site.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Matthew Hagston]

hrm, definatly good idea just so that the link is more functional than just
for the popup. There will be an alternate site for no-script or older
browsers though. just haven't put in the detection script yet, keep
forgetting to send it to myself at work. haven't loaded it yet, but removed
the FONT, replaced with div, only needed to add one line in the css file for
font-size, other than that worked fine as div instead of font.

oh, and you all haven't pointed it out yet, but reason that it seems to set
the 'class' or 'className' twice, is netscape see's it one way, ie see's it
another. will have it declare it better when it's working in opera, just
worried about getting it working. hate it when a script just doesn't give an
error. bleh!

--
Matthew Hagston
Hungates Creative Toys and Hobbies
ma************@ hungates.com ........ http://www.hungates.com
"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opsgi78eem x13kvk@atlantis ...

On Wed, 27 Oct 2004 13:31:24 GMT, Matthew Hagston <ot***@earthlin k.net>
wrote:

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opsgi3i8zg x13kvk@atlantis ...

[snip]

I assume you're looking at the OP's web site? As the OP admitted
himself, the menu doesn't work with Opera, so I see nothing but: "Menu
is loading please wait...".

...menu is loading please wait???... site this script is on is at:
http://www.otts.com/index_beta.html
was wondering why i couldn't seem to find a few of the references you
all were looking at.

Not that it really matters. Aside from that one instance, my comments have
been based on what's been posted in this thread.

There are a couple of things I will mention, though, now that I've looked
at the correct link.

1) On the About page, rather than making the "Auggie" link,
javascript:void (0), why not link to the picture of the dog? That way, the
link will actually do something useful for users without scripting.
2) Without scripting enabled, your site is completely unnavigable. Not
only will the left-side menu fail to work at all, but neither will the
links at the top of the page. Surely this is not a good idea for a
commercial site.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Winter]

On Wed, 27 Oct 2004 14:13:17 GMT, Matthew Hagston <ot***@earthlin k.net>
wrote:

[snip]

There will be an alternate site for no-script or older browsers though.
You don't need to make two sites. In fact, that's a terrible idea as
you're giving yourself more work to do. Instead, learn how to make a
feature gracefully degrade. That is, give the document basic content that
will work in any browser, then add extra features to it. If the browser
doesn't support them, it doesn't matter. It will get the basics and,
whilst it might look so nice, it will still work.
just haven't put in the detection script yet,
What kind of detection script? Browser detection, by any method, is flawed
and should be avoided. For more information, see
<URL:http://www.jibbering.c om/faq/faq_notes/not_browser_det ect.html>.

[snip]
oh, and you all haven't pointed it out yet, but reason that it seems to
set the 'class' or 'className' twice, is netscape see's it one way, ie
see's it another.

I sort of did. Using

elementRef.clas sName = '...';

should work fine for any dynamic browser. However, using

elementRef.setA ttribute(...);

isn't very reliable. All standard element attributes have proper accessors
provided for your convenience. Use them.

[snip]

Mike
Please don't top-post. I know you're using OE, and I feel sorry for you in
that regard (:P), but please don't let it make you post incorrectly.

Responses should be made after the relevant points (as I've done above),
and unrelated text should be deleted (preferably marking when you do that).

Signatures should always be the last thing on your reply, and never quoted
unless you're actually commenting on them. In that case, make sure you
remove the "-- " that denotes them.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.