?
Solved

** URGENT DHTML DIV in net 4.7 **

Posted on 2003-11-25
10
Medium Priority
?
355 Views
Last Modified: 2010-04-09
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"></script>
<!-- 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(theDiv);
      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")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) 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="toggle('menuItems');"><img 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="toggle('menuItems');"><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="toggle('menuItems');"><img name="agency" src="agency_off.gif" width="265" height="22" border="0"></a><br/>
      <a href="http://yoursite.com" onMouseOver="changeImages('agencyinfo', 'agencyinfo_on')" onMouseOut="changeImages('agencyinfo', 'agencyinfo_off')"onClick="toggle('menuItems');"><img name="agencyinfo" src="agencyinfo_off.gif" width="265" height="22" border="0"></a><br/>
      <a href="http://yoursite.com" onMouseOver="changeImages('billinginfo', 'billinginfo_on')" onMouseOut="changeImages('billinginfo', '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="toggle('menuItems');"><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('salesreference', 'salesreference_on')" onMouseOut="changeImages('salesreference', 'salesreference_off')"onClick="toggle('menuItems');"><img name="salesreference" src="salesreference_off.gif" 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('menuItems');"><img name="spc" src="spc_off.gif" width="265" height="22" border="0"></a><br/>
      <a href="http://yoursite.com" onMouseOver="changeImages('salesterritory', 'salesterritory_on')" onMouseOut="changeImages('salesterritory', 'salesterritory_off')"onClick="toggle('menuItems');"><img name="salesterritory" src="salesterritory_off.gif" width="265" height="22" border="0"></a><br/>
<a href="http://yoursite.com" onMouseOver="changeImages('underwriting', 'underwriting_on')" onMouseOut="changeImages('underwriting', 'underwriting_off')"onClick="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('menuItems');"><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>
0
Comment
Question by:mtb007
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 

Expert Comment

by:tatlady
ID: 9820475
i believe netscape didn't support dhtml until version 6.0.
0
 
LVL 1

Author Comment

by:mtb007
ID: 9820483
is there any way to do it in 4.7?
0
 

Expert Comment

by:tatlady
ID: 9820628
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.
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9820633
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.layers,document.getElementById

and also in NS4 you will have to ABSOLUTE position the div's
0
 
LVL 16

Accepted Solution

by:
jaysolomon earned 300 total points
ID: 9820647
here is an example of toggling divs in all browsers

<html>
<head>
<script type="text/javascript">
<!--
function switchDiv(divID,showIt)
{
 var divObj = (document.layers) ? document.layers[divID] :
(document.all) ?  document.all[divID] :  
document.getElementById(divID);

 if (arguments.length > 2)
 {
    if (document.layers)
    {
      divObj.document.open();
      divObj.document.write(arguments[2]);
      divObj.document.close();
    }
    else divObj.innerHTML = arguments[2];
 }
 var divStyle = (document.layers) ? divObj : divObj.style ;
 divStyle.visibility = (showIt) ? "visible" : "hidden" ;
}



//-->
</script>
</head>
<BODY onload="switchDiv('divFirst',true);switchDiv('divSecond',false);">
<a href="#" onClick="switchDiv('divFirst',1);switchDiv('divSecond',0);return false;">Section 1</a><br>
<a href="#" onClick="switchDiv('divFirst',0);switchDiv('divSecond',1);return false;">Section 2</a><br>
<form>
<input type="text" name='t'>
<input type="button" value="change div text" onclick="switchDiv('divFirst',true, this.form.t.value)">
</form><br>

<div id=divFirst style="position:absolute">
<p>This is my first div area</p>
</div>
<div id=divSecond style="position:absolute">
<p>This is my second div area</p>
</div>

</body>
</html>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9820653
This

>>>function toggle(theDiv){
    var elem = document.getElementById(theDiv);
    elem.style.display = (elem.style.display == "none")? "" : "none";
}
<<<

Which looks like what i wrote, will work in NS6+ and IE5+
0
 
LVL 1

Author Comment

by:mtb007
ID: 9820654
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..
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9820718
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
0
 
LVL 1

Author Comment

by:mtb007
ID: 9820742
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.  
0
 
LVL 15

Assisted Solution

by:VincentPuglia
VincentPuglia earned 200 total points
ID: 9821327
Hi,

 1) NN4 does not recognize the display property, so you must use visibility for it.
 2) by using 'visibility', a space will be held for the div; this means that your layout may be affected.
  3) regarding the code jay posted:

  var divObj = (document.layers) ? document.layers[divID] :
(document.all) ?  document.all[divID] :  
document.getElementById(divID);

  it is essentially saying the same as:

  if (document.layers)  // netscape 4.+
    var divObj =  document.layers[divID] ;
  else if (document.all) // IE4+ compatible browsers (IE5,IE6,AOL, etc)
    var divObj =  document.all[divID] :  
  else  // all other version 5+ browsers
     var divObj = document.getElementById(divID);

4) if the toggle function is the only one you are using, the following is how you would change it -- but note my final comment first:

function toggle(theDiv)
{
    var divObj = (document.layers) ? document.layers[divID] :
(document.all) ?  document.all[divID] :  document.getElementById(divID);

    var divStyle = (document.layers) ? divObj : divObj.style;

     if (document.layers)
        divStyle.visibility = (divStyle.visibility == 'hidden') ? 'visible' : 'hidden';
     else
        divStyle.display = (divStyle.display == "none")? "" : "none";
}

 5) Insofar as the dropdown menu itself:  You cannot have it.  NN4.7 chokes when it comes across the display:none and throws out all of the information between the span tags.  The only real way you can do it would be to write the divs/spans based upon the browser --

<script type='text/javascript' >
if (document.layers)
document.write("<span id='menuItems' style='....visibility:hidden; position:absolute'>")
else
document.write("<span id='menuItems' style='....display:none'>")
</script>
<a href.......
.......
<script type='text/javascript' >
document.write("</span>")
</script>

Or, you can redirect the user to a separate page.

In addition, because you have a span within a div, the code will actually look something like:

document.layers['Layer1'].document.layers['menuItems']....

this is because each layer within NN4 is a document within itself.

Vinny

0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question