Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Rollover Menu works in IE6 but not IE7

Status
Not open for further replies.
tchaplin

tchaplin

Programmer
Jul 18, 2003
58
NZ
I don’t really know jscript very well however am asked to give it a go !!!
I’m aware that the problem only occurs on the sub menus using IE7. The menu also uses CSS however I don’t think this is the problem.
If someone could just point me in the right direction - hopefully I can solve the problem

Thanks for having a look

<html>
<head>
<title></title>
<script language="JScript">
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6){
var currmenuobj=0
var currsubmenuobj=0
}

var arrSlideStyles = new Array();
arrSlideStyles = ['HIDE','PUSH','SWAP'];
var iIndexCount = 0;
var bToggle = 0;

function checkbrowseragent()
{
var browseragent = navigator.userAgent.toLowerCase();
if(browseragent.indexOf("firefox")+1)
window.location = site_URL + "/Firefox/Index.html";
}

function Lite(BTN)
{
document.getElementById(BTN).style.backgroundColor = "#2888D8";
document.getElementById(BTN).style.borderTopColor = "#2888D8";
document.getElementById(BTN).style.borderBottomColor = "#2888D8";
document.getElementById(BTN).style.borderLeftColor = "#1864D0";
document.getElementById(BTN).style.borderRightColor = "#58A4E0";
}

function Dim(BTN)
{
document.getElementById(BTN).style.backgroundColor = "#2878C0";
document.getElementById(BTN).style.borderTopColor = "#2878C0";
document.getElementById(BTN).style.borderBottomColor = "#2878C0";
document.getElementById(BTN).style.borderLeftColor = "#1858B8";
document.getElementById(BTN).style.borderRightColor = "#508CC0";
}

function showmenu(BTN,name)
{
if(currmenuobj!=0){
currmenuobj.style.visibility="hidden"
}
var button = document.getElementById(BTN)
currmenuobj=document.getElementById(name)
currmenuobj.style.left = button.currentStyle.left
currmenuobj.style.top = parseInt(button.currentStyle.top) + parseInt(button.currentStyle.height);
currmenuobj.style.visibility="visible"
return false
}

function hidemenu(e)
{
currmenuobj.style.visibility="hidden"
}

function highlight(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
firingobj.style.backgroundColor="#2888D8"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlight(e)
{
if(currsubmenuobj!=0 && e.toElement!=currmenuobj && e.toElement!=currsubmenuobj)
currsubmenuobj.style.visibility="hidden"
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
if(e.toElement.className!="menuitems" && e.toElement.className!="menu")
hidemenu(event);
}

function jumpto(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}

function showsubmenu(e,MENU)
{

var menu=document.getElementById(MENU)
var menuitem=e.srcElement
currsubmenuobj=document.getElementById(menuitem.id+"-"+menu.id)
currsubmenuobj.style.left = parseInt(menu.currentStyle.left)+parseInt(e.toElement.offsetLeft)+parseInt(menu.currentStyle.width)
currsubmenuobj.style.top = parseInt(e.toElement.offsetTop)+parseInt(menu.style.top)
currsubmenuobj.style.visibility="visible"
return false
}

function lowlightsub(e,MENU)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
if(e.toElement.className!="menuitems" && e.toElement.className!="menu")
hidesubmenu(event,MENU);
}

function hidesubmenu(e,MENU)
{
currsubmenuobj.style.visibility="hidden"
var callerobj=document.getElementById(MENU)
callerobj.style.visibility="hidden"
}

</script>

<style type="text/css">
.menu
{
position:absolute;
width:125px;
height:auto;
border-style:ridge;
border-width:1;
background-color:Transparent;
border-style:none;
font-family:MS Sans Serif;
line-height:20px;
cursor:default;
font-size:11px;
z-index:100;
cursor:pointer;
background-color:#2878C0;
visibility:hidden;
}

.menuitems
{
padding-left:10px;
padding-right:10px;

}


.homebutton,
.copiersbutton,
.printersbutton,
.faxesbutton,
.idprintersbutton,
.pbutton,
.lcdbutton,
.projectorbutton,
.contactusbutton,
.aboutusbutton,
.CopyRightlabel,
.specialsbutton,

{
font-family:MS Sans Serif;
font-size:10px;
text-align:center;
color:#FFFFFF;
width:125px;
height:26px;
position:absolute;
background-color:#2878C0;
border-top-style:ridge;
border-top-color:#2878C0;
border-top-width:1px;
border-bottom-style:ridge;
border-bottom-color:#2878C0;
border-bottom-width:1px;
border-left-style:ridge;
border-left-color:#1858B8;
border-left-width:1px;
border-right-style:ridge;
border-right-color:#508CC0;
border-right-width:1px;


}
.homebutton
{
left: 0px;
top: 115px;
width: 50px;
cursor:pointer;

}

.specialsbutton
{
left: 40%;
top: 110px;
width: 50px;
cursor:pointer;

}



/* About Us Button*/
.aboutusbutton
{
left: 50px;
top: 115px;
cursor:pointer;
width:55;

}
/* Printers Button*/
.printersbutton
{
left: 105px;
top: 115px;
width: 45px;
}


/* Mulit function Button*/
.copiersbutton
{
left: 150px;
top: 115px;
width: 125px;
}

/* Faxes Button*/

.faxesbutton
{
left: 275px;
top: 115px;
width: 50px;
}


/* ID Card Readers*/
.idprintersbutton
{
left: 325px;
top: 115px;
width: 95px;
}

/* P Touch Label Machines*/
.pbutton
{
left: 420px;
top: 115px;
width: 135px;
}

/* LCD Monitors*/
.lcdbutton
{
left: 555px;
top: 115px;
width:80;
}

/* Projectors */
.projectorbutton
{
left:635;
top: 115px;
width:65;
cursor:pointer;
}

/* Contact Us Button */
.contactusbutton
{
left: 700;
top: 115px;
cursor:pointer;
width:60;
}


</style>





</head>
<body bgcolor="#287895" class="pagebody" onload="checkbrowseragent();">
<form name="HomePage" method="post" action="" id="homepage">

<div id="pagepanel" class="sitepanel">
<div id="MFC" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Brother" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Brother &gt;
</div>
<div class="menuitems" id="Konica Minolta" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Konica Minolta &gt;
</div>
<div class="menuitems" id="OKI" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">OKI &gt;
</div>
<div class="menuitems" id="Sharp" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Sharp &gt;
</div>
</div>
<div id="Printer" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Brother" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Brother &gt;
</div>
<div class="menuitems" id="Konica Minolta" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Konica Minolta &gt;
</div>
<div class="menuitems" id="OKI" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">OKI &gt;
</div>

</div>
<div id="Fax" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" url="" id="Brother" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Brother &gt;
</div>
<div class="menuitems" url="" id="OKI" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">OKI &gt;
</div>
<div class="menuitems" url="" id="Sharp" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Sharp &gt;
</div>
</div>
<div id="ID Card Printer" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" url="" id="Zebra" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Zebra &gt;
</div>
</div>
<div id="Label Machine" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Brother" url="" onclick="resultpage(this.parentElement.id,this.id)">Brother</div>
<div class="menuitems" id="Godex" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Godex &gt;
</div>
</div>
<div id="LCD Monitor" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Panels" url="" onclick="resultpagesub('NEC-LCD Panel','None')">Panels</div>
<div class="menuitems" id="Monitors" url="" onclick="resultpagesub('NEC-LCD Monitor','None')">Monitors</div>
<div class="menuitems" id="Televisions" url="" onclick="resultpagesub('NEC-LCD TV','None')">Televisions</div>
</div>
<div id="Brother-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
<div class="menuitems" id="Inkjet Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Inkjet
Colour</div>
</div>
<div id="Konica Minolta-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="OKI-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="Sharp-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
</div>
<div id="Brother-Printer" class="menu" name="printersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="Konica Minolta-Printer" class="menu" name="printersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="OKI-Printer" class="menu" name="printersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
<div class="menuitems" id="Dot Matrix" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Dot
Matrix</div>
</div>

<div id="Brother-Fax" class="menu" name="faxesMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser</div>
<div class="menuitems" id="Thermal Ribbon" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Thermal
Ribbon</div>
</div>
<div id="OKI-Fax" class="menu" name="faxesMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser</div>
</div>
<div id="Sharp-Fax" class="menu" name="faxesMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser</div>
<div class="menuitems" id="Transfer Ribbon" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Transfer
Ribbon</div>
</div>
<div id="Zebra-ID Card Printer" class="menu" name="idprintersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Single Sided" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Single
Sided</div>
<div class="menuitems" id="Double Sided" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Double
Sided</div>
</div>
<div id="Godex-Label Machine" class="menu" name="plblMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Thermal Ribbon" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Thermal
Label</div>
</div>
<input id="btnHome" type="button" class="homebutton" onMouseOver="Lite(this.id)" onMouseOut="Dim(this.id)"
onclick="gotohomepage()" value="Home"> <input name="MFC" id="copiers" type="button" class="copiersbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="Multi Function Centres"> <input name="Printer" id="printers" type="button" class="printersbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="Printers"> <input name="Fax" id="faxes" type="button" class="faxesbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="Faxes"> <input name="ID Card Printer" id="idprinters" type="button" class="idprintersbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="ID Card Printers"> <input name="Label Machine" id="plbl" type="button" class="pbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="P-Touch/Label Machines"> <input id="btnLCDMonitors" name="LCD Monitor" type="button" class="lcdbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="LCD Monitors"> <input id="btnProjectors" name="Projector" type="button" class="projectorbutton" onMouseOver="Lite(this.id)"
onMouseOut="Dim(this.id)" onclick="resultpagesub('NEC-Projector','None')" value="Projectors">
<input id="btnContactUs" type="button" class="contactusbutton" onMouseOver="Lite(this.id)"
onMouseOut="Dim(this.id)" onclick="gotocontactuspage()" value="Contact Us" NAME="btnContactUs">
<input id="btnAboutUs" type="button" class="aboutusbutton" onMouseOver="Lite(this.id)"
onMouseOut="Dim(this.id)" onclick="gotoaboutuspage()" value="About Us" NAME="btnAboutUs">


</form>
</body>
</html>
 
Sort by date Sort by votes
your main problem is the fact that the code is using antiquated "browser sniffing" to determine which browser a user is utilizing:

Code: 
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6){
    var currmenuobj=0
    var currsubmenuobj=0
}

no offense, but this is the worst possible development idea, for just this reason. new browsers are developed, and suddenly your code doesn't know what to do.

even worse, in my opinion, is that you're sending users to a different page if they use firefox!

you might try, as a quick fix, changing this:

[tt]var ie5=document.all&&document.getElementById[/tt]

to this:

[tt]var ie5 = true[/tt]

but, keep in mind that i haven't read through all of your code, as there is a ton of it. best method is to avoid the browser sniffing altogether.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
your main problem is the fact that the code is using antiquated "browser sniffing" to determine which browser a user is utilizing:

Code: 
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6){
    var currmenuobj=0
    var currsubmenuobj=0
}

no offense, but this is the worst possible development idea, for just this reason. new browsers are developed, and suddenly your code doesn't know what to do.

even worse, in my opinion, is that you're sending users to a different page if they use firefox!

you might try, as a quick fix, changing this:

[tt]var ie5=document.all&&document.getElementById[/tt]

to this:

[tt]var ie5 = true[/tt]

but, keep in mind that i haven't read through all of your code, as there is a ton of it. best method is to avoid the browser sniffing altogether.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
275
trevil620
trevil620
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
221
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top