Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Menu Issues

0 views
Skip to first unread message

Matthew Hagston

unread,
Oct 26, 2004, 4:22:28 PM10/26/04
to
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

[code]
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'>&#0040;</font>(800) 356-3289" + Delim;
sNews += "&#9788; Same Day Shipping Avalible!" + Delim;
sNews += "&#9788; Outstanding Customer Service!" + Delim;
sNews += "&#9788; 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"
}
}
[/code]
[css]
A {
text-decoration: none;
}
.mnuForeTextNorm {
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;
}
.mnuBackTextNorm {
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;
}
.mnuForeTextDisab {
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;
}
.mnuBackTextDisab {
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;
}
.mnuForeTextNormMsOvr {
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;
}
.mnuForeTextDisabMsOvr {
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;
}
.mnuForeTextNormItmMsOvr {
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;
}
.mnuForeTextDisabItmMsOvr {
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
matthew...@hungates.com ........ http://www.hungates.com


Fred Oz

unread,
Oct 27, 2004, 5:21:16 AM10/27/04
to
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.setAttribute("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.setAttribute("id", "divMaster");

Note extra set of double quotes.

Fred.

Michael Winter

unread,
Oct 27, 2004, 6:12:25 AM10/27/04
to
On Wed, 27 Oct 2004 19:21:16 +1000, Fred Oz <ozf...@iinet.net.auau> wrote:

> Matthew Hagston wrote:
>
>> ceDiv.setAttribute("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.setAttribute("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.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';

These would also be better written as:

ceDiv.className = divMaster;
ceDiv.style.top = '0px';
ceDiv.style.left = '0px';
ceDiv.style.height = '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

unread,
Oct 27, 2004, 7:48:44 AM10/27/04
to
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):Undefined value" errors in Safari.


Cheers, Fred.

Michael Winter

unread,
Oct 27, 2004, 8:25:51 AM10/27/04
to
On Wed, 27 Oct 2004 21:48:44 +1000, Fred Oz <ozf...@iinet.net.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):Undefined 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...".

Matthew Hagston

unread,
Oct 27, 2004, 9:14:27 AM10/27/04
to
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" <ozf...@iinet.net.auau> wrote in message
news:417f676b$0$13769$5a62...@per-qv1-newsreader-01.iinet.net.au...

Matthew Hagston

unread,
Oct 27, 2004, 9:31:24 AM10/27/04
to
"Michael Winter" <M.Wi...@blueyonder.co.invalid> wrote in message
news:opsgi3i8zgx13kvk@atlantis...

...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.

Michael Winter

unread,
Oct 27, 2004, 10:07:47 AM10/27/04
to
On Wed, 27 Oct 2004 13:31:24 GMT, Matthew Hagston <ot...@earthlink.net>
wrote:

> "Michael Winter" <M.Wi...@blueyonder.co.invalid> wrote in message
> news:opsgi3i8zgx13kvk@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.

Matthew Hagston

unread,
Oct 27, 2004, 10:13:17 AM10/27/04
to
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
matthew...@hungates.com ........ http://www.hungates.com

"Michael Winter" <M.Wi...@blueyonder.co.invalid> wrote in message

news:opsgi78eemx13kvk@atlantis...

Michael Winter

unread,
Oct 27, 2004, 10:38:44 AM10/27/04
to
On Wed, 27 Oct 2004 14:13:17 GMT, Matthew Hagston <ot...@earthlink.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.com/faq/faq_notes/not_browser_detect.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.className = '...';

should work fine for any dynamic browser. However, using

elementRef.setAttribute(...);

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.

Matthew Hagston

unread,
Oct 27, 2004, 12:28:39 PM10/27/04
to
Hehehe, sorry bout that top-postin thang. ;-)

probably right about just pulling it all into one site. shouldn't be a
problem to make a non-script version. Oh, and the biggest reason for that
marquee tag thing (don't really like it either), is it hides the top-menu,
and it hides the animated gif. if hide/unhide a gif, seems to stop
animating. simply move it behind something, keeps animating. not of much use
beyond just looks, but one of the few scripts that's working right now. lol

removed those 'class' attributes, and netscape then won't display the menu
correctly (jumbles them all up at the top). starting to look better
logically though. if i can get this class thing working for ie & ns, will
finish removing all of those setAttribute things, from what i read in some
netscape documentation thought was a requirement to set them that way.
typing ceDiv.id = "bla", much easier.

--
Matthew Hagston
Hungates Creative Toys and Hobbies
matthew...@hungates.com ........ http://www.hungates.com
"Michael Winter" <M.Wi...@blueyonder.co.invalid> wrote in message

news:opsgi9obt8x13kvk@atlantis...

Matthew Hagston

unread,
Oct 27, 2004, 1:59:28 PM10/27/04
to
Ok, well. made the recommended changes to the script. looks nice and pretty.
still no dice for opera

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

[snip]


Fred Oz

unread,
Oct 28, 2004, 10:05:31 AM10/28/04
to
Matthew Hagston wrote:
> Ok, well. made the recommended changes to the script. looks nice and pretty.
> still no dice for opera
>

Still no dice for Safari. The menus look better and seem to work, but
selecting an option causes Safari to crash (I'm using 1.03, which is not
the latest version).

The main content in the middle of you page still does not display.

Cheers, Fred.

Matthew Hagston

unread,
Oct 28, 2004, 1:47:34 PM10/28/04
to
Hrm, that's a menu that i didn't write, got it from dynamic drive. Kinda
gave up on getting that last pos I was working on. I'm just going to have to
get to the local school and hop on a Mac there. Spending too much time
getting it to work. thanks for the efforts though.

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

"Fred Oz" <ozf...@iinet.net.auau> wrote in message
news:4180fb89$0$13742$5a62...@per-qv1-newsreader-01.iinet.net.au...

0 new messages