mtb007
asked on
** URGENT DHTML DIV in net 4.7 **
I have a dropdown menu that uses a DIV tag in DHTML. I need it to work in both netscape 4.7 and IE 5.0. It works in IE, but not in Newtscape. Here is the code, can somebody please tell me whay this dosent work in netscape?
If there is another way to get this to work, i dont care, as long as it works... maybe Show/Hide?
Thanks
Mtb007
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- this is the code sorce that tells the rollovers to work-->
<script src="changeimage.js"></scr ipt>
<!-- this is where you name you different rollover files-->
<script src="nav.js"></script>
<!-- this is the code sorce that tells the rollovers to work-->
<script type="text/javascript">
<!-- All of this code below is so that Netscape can view the DIV tag-->
<!--
function toggle(theDiv){
var elem = document.getElementById(th eDiv);
elem.style.display = (elem.style.display == "none")? "" : "none";
}
// -->
</script>
<style type="text/css">
<!--
img{
border: 0px;
}
-->
</style>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(p arseInt(ap pVersion)= =4)) {
document.MM_pgW=innerWidth ; document.MM_pgH=innerHeigh t; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_p gW || innerHeight!=document.MM_p gH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body>
<!-- This code below HERE is what controls to position of the dropdown.
The position should be fairly close to where you need to place it.
You will probably nee to adjust it, and play with the numbers to get it exactaly where you need it.
To do that adjust the "left:____" & "top:____" numbers. the numbers are setting the top left corner of the dropdown menu. -->
<div id="Layer1" style="position:absolute; left:504px; top:173px; width:265px; height:277px; z-index:1"><span id="menuItems" style="width: 265px; display: none;">
<!-- This code HERE is that drop down menu with the rollovers -->
<a href="http://yoursite.com" onMouseOver="changeImages( 'sales', 'sales_on')" onMouseOut="changeImages(' sales', 'sales_off')"onClick="togg le('menuIt ems');"><i mg name="sales" src="sales_off.gif" width="265" height="37" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'borrower' , 'borrower_on')" onMouseOut="changeImages(' borrower', 'borrower_off')"onClick="t oggle('men uItems');" ><img name="borrower" src="borrower_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'agency', 'agency_on')" onMouseOut="changeImages(' agency', 'agency_off')"onClick="tog gle('menuI tems');">< img name="agency" src="agency_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'agencyinf o', 'agencyinfo_on')" onMouseOut="changeImages(' agencyinfo ', 'agencyinfo_off')"onClick= "toggle('m enuItems') ;"><img name="agencyinfo" src="agencyinfo_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'billingin fo', 'billinginfo_on')" onMouseOut="changeImages(' billinginf o', 'billinginfo_off')"onClick ="toggle(' menuItems' );"><img name="billinginfo" src="billinginfo_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'entity', 'entity_on')" onMouseOut="changeImages(' entity', 'entity_off')"onClick="tog gle('menuI tems');">< img name="entity" src="entity_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'pf', 'pf_on')" onMouseOut="changeImages(' pf', 'pf_off')"onClick="toggle( 'menuItems ');"><img name="pf" src="pf_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'salesrefe rence', 'salesreference_on')" onMouseOut="changeImages(' salesrefer ence', 'salesreference_off')"onCl ick="toggl e('menuIte ms');"><im g name="salesreference" src="salesreference_off.gi f" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'spc', 'spc_on')" onMouseOut="changeImages(' spc', 'spc_off')"onClick="toggle ('menuItem s');"><img name="spc" src="spc_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'salesterr itory', 'salesterritory_on')" onMouseOut="changeImages(' salesterri tory', 'salesterritory_off')"onCl ick="toggl e('menuIte ms');"><im g name="salesterritory" src="salesterritory_off.gi f" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'underwrit ing', 'underwriting_on')" onMouseOut="changeImages(' underwriti ng', 'underwriting_off')"onClic k="toggle( 'menuItems ');"><img name="underwriting" src="underwriting_off.gif" width="265" height="37" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages( 'parameter ', 'parameter_on')" onMouseOut="changeImages(' parameter' , 'parameter_off')"onClick=" toggle('me nuItems'); "><img name="parameter" src="parameter_off.gif" width="265" height="37" border="0"></a><br/>
</span>
<div style="width: 265px; height: 28px;" ><a href="#" onClick="toggle('menuItems ');return false;"><img src="admin_nav.gif" width="265" height="28" border="0"></a></div>
</div>
This is where you start building the rest of the site.
</body>
</html>
If there is another way to get this to work, i dont care, as long as it works... maybe Show/Hide?
Thanks
Mtb007
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- this is the code sorce that tells the rollovers to work-->
<script src="changeimage.js"></scr
<!-- this is where you name you different rollover files-->
<script src="nav.js"></script>
<!-- this is the code sorce that tells the rollovers to work-->
<script type="text/javascript">
<!-- All of this code below is so that Netscape can view the DIV tag-->
<!--
function toggle(theDiv){
var elem = document.getElementById(th
elem.style.display = (elem.style.display == "none")? "" : "none";
}
// -->
</script>
<style type="text/css">
<!--
img{
border: 0px;
}
-->
</style>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(p
document.MM_pgW=innerWidth
else if (innerWidth!=document.MM_p
}
MM_reloadPage(true);
// -->
</script>
</head>
<body>
<!-- This code below HERE is what controls to position of the dropdown.
The position should be fairly close to where you need to place it.
You will probably nee to adjust it, and play with the numbers to get it exactaly where you need it.
To do that adjust the "left:____" & "top:____" numbers. the numbers are setting the top left corner of the dropdown menu. -->
<div id="Layer1" style="position:absolute; left:504px; top:173px; width:265px; height:277px; z-index:1"><span id="menuItems" style="width: 265px; display: none;">
<!-- This code HERE is that drop down menu with the rollovers -->
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
<a href="http://yoursite.com" onMouseOver="changeImages(
</span>
<div style="width: 265px; height: 28px;" ><a href="#" onClick="toggle('menuItems
</div>
This is where you start building the rest of the site.
</body>
</html>
i believe netscape didn't support dhtml until version 6.0.
ASKER
is there any way to do it in 4.7?
not that I'm aware of. if you're writing asp or coldfusion or something like that, you could test for browser and use different verisons of the html depending on the browser accessing the file.
i do not know what the 2 *.js files do so i cannot help with them, but you can show hide div in 4.7
its a matter of testing for document.all,document.laye rs,documen t.getEleme ntById
and also in NS4 you will have to ABSOLUTE position the div's
its a matter of testing for document.all,document.laye
and also in NS4 you will have to ABSOLUTE position the div's
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This
>>>function toggle(theDiv){
var elem = document.getElementById(th eDiv);
elem.style.display = (elem.style.display == "none")? "" : "none";
}
<<<
Which looks like what i wrote, will work in NS6+ and IE5+
>>>function toggle(theDiv){
var elem = document.getElementById(th
elem.style.display = (elem.style.display == "none")? "" : "none";
}
<<<
Which looks like what i wrote, will work in NS6+ and IE5+
ASKER
The 2 *.js files are for the rollovers. I have the DIV position set to ABSOLUTE. Can you explain further about the document.all ... etc..? i dont understand..
document.all = IE4
document.layers = NS4
document.getElementById = NS6+/IE5+/D O M
If you want this to work in NS4(which not alot of people use) then it can be done, you need to post your full source so we can then fix it the first time(hopefully).
In the upper code i do not see any div/layer name menuItems
document.layers = NS4
document.getElementById = NS6+/IE5+/D O M
If you want this to work in NS4(which not alot of people use) then it can be done, you need to post your full source so we can then fix it the first time(hopefully).
In the upper code i do not see any div/layer name menuItems
ASKER
What i pasted above was everything, except the js files. the only thing that they do is give the *.gif ID names to reference for the rollover.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.