Solved

div style display

Posted on 2002-05-01
11
307 Views
Last Modified: 2008-02-01
i have created a "pseudo" treeview page.  i know that with IE div blocks can be set to visible or hidden using the style.display = "none" or style.display = "block".  i am having troubles finding the code to hide the div block in netscape.  any help would be greatly appreciated.  

here is a copy of the code.  

<html>
<head>
<title></title>

<script language='javascript'>

function ToggleDisplay(oButton, oItems) {

      if ((oItems.style.display == "") || (oItems.style.display == "none")) {
            oItems.style.display = "block";
            oButton.src = "./images/minus.gif";
      }      else {
            oItems.style.display = "none";
            oButton.src = "./images/plus.gif";
      }

      return false;

}

function HideDisplay(oItems) {

      oItems.style.display = "none";

}

function ShowDisplay(oItems) {

      oItems.style.display = "block";

}

</script>

</head>



<body bgColor=slateblue>

<TABLE width=350px style="FONT-size:12px">
<TR><TD>
<%
'***********************************************************************************************
'(TreeName,ItemID,ItemName,Level,IsParent,UseCheckBox,MyLink,IsOpn,newTarget)
'above is the variables passed to the WriteHead function which will create each tree view
'menu selection.
'***********************************************************************************************
WriteHead "MyTreeView1",100,"HOME",0,True,False,"./Welcome.asp",False, 1,"Welcome Home"

      WriteHead "MyTreeView1",101,"EMPLOYEE ANNIVERSARIES",1,False,False,"./General/Emp_Anniv.asp",False, 1,""
      WriteFoot
      WriteHead "MyTreeView1",102,"EMPLOYEE BIRTHDAYS",1,False,False,"./General/Emp_Bday.asp",False, 1,""
      WriteFoot
      WriteHead "MyTreeView1",103,"NEW WEB SITE INTRO",1,False,False,"./UnderConst/IntroMovie/index.html",False, 0,""
      WriteFoot
WriteFoot

WriteHead "TreeView2",200,"GENERAL ANALYSIS",0,True,False,"",False, 1,"General Analysis Information"
      WriteHead "TreeView2",213,"PROJECTED CLOSINGS",1,False,False,"./SalesAnalysis/PrjCls_Anal.asp ",False,1,""
      WriteFoot
      
      WriteHead "TreeView2",220,"WEEKLY FORECAST",1,False,False,"./General/Forecast_Chooser.asp",False,1,""
      WriteFoot
      
      WriteHead "TreeView2",214,"MONTHLY STATS",1,False,False,"./General/ms_info.asp ",False,1,""
      WriteFoot
            
      WriteHead "TreeView2", 215,"EXCEPTION ANALYSIS",1,True,False,"",False, 1,""
            WriteHead "TreeView2",216,"COMPLETION DATE MISSING",2,False,False,"./General/Exception/MissingComplete.asp",False,0,""
            WriteFoot
      WriteFoot      
Writefoot

WriteHead "TreeView3",300,"FINANCE",0,True,False,"",false, 1,"Financial Information"
      WriteHead "TreeView3",301,"ACCOUNTING",1,True,False,"",False, 1,"Accounting Information"
            WriteHead "TreeView3",328,"EARNEST MONEY ANALYSIS",2,False,False,"./SalesAnalysis/earnest_anal.asp ",False,0,""
            WriteFoot      
            WriteHead "TreeView3",302,"ACTIVITY ANALYSIS",2,False,False,"./Finance/Acctng/DetailCrit.asp",False, 1,""
            WriteFoot                                    
            WriteHead "TreeView3",303,"VENDOR 1099",2,False,False,"./Finance/Acctng/Vendor1099_Crit.asp",False, 1,""
            WriteFoot      
            WriteHead "TreeView3",304,"KEY DATE/COST CODE",2,False,False,"./Finance/Acctng/KeyDateCstcde_Crit.asp",False, 1,""
            WriteFoot      
            WriteHead "TreeView3",331,"LOT COST ANALYSIS",2,False,False,"./Finance/Acctng/JobsLotCost_Crit.asp",False, 1,""
            WriteFoot                                                            
      WriteFoot
WriteFoot


Sub WriteHead(TreeName,ItemID,ItemName,Level,IsParent,UseCheckBox,MyLink,IsOpn,newTarget,statusDisplay)

      Dim IsIE 'as boolean
      
      IsIE = (InStr(request.servervariables("HTTP_USER_AGENT"), "MSIE") > 0)

      'Spacing depends on what level you're at
      Select Case Level
            Case 1 : Response.Write "<IMG SRC='./images/dot1.gif' BORDER=0 ALT=''>"
            Case 2 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=15 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 3 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=30 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 4 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=45 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 5 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=60 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 6 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=75 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 7 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=90 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 8 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=105 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 9 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=120 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
            Case 10 : Response.Write "<IMG SRC='./images/t_dot.gif' WIDTH=135 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
      End Select

      'If IsParent then put a plus sign else put a blank space
      If IsParent then
            'JsCode only if isIE
            If isIE then
                  If IsOpn then
                        Response.Write "<IMG style=cursor:hand SRC='./images/minus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ONCLICK='javascript:ToggleDisplay(" & TreeName & ItemID & "Btn, " & TreeName & ItemID & "chlds);' ALT BORDER='0'>"
                  Else
                        Response.Write "<IMG style=cursor:hand SRC='./images/plus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ONCLICK='javascript:ToggleDisplay(" & TreeName & ItemID & "Btn, " & TreeName & ItemID & "chlds);' ALT BORDER='0'>"
                  End If
            Else
                  If IsOpn then
                        Response.Write "<IMG style=cursor:hand SRC='./images/minus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ALT BORDER='0'>"
                  Else
                        Response.Write "<IMG style=cursor:hand SRC='./images/plus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ALT BORDER='0'>"
                  End if
            End If      
      Else
            If Level = 0 then
                  Response.Write "<IMG SRC='./images/nosign2.gif' WIDTH=12 HEIGHT=10 ALT BORDER='0'>"
            Else
                  Response.Write "<IMG SRC='./images/nosign.gif' WIDTH=12 HEIGHT=10 ALT BORDER='0'>"
            End If
      End if
      
      'If UseCheckBox then show a checkbox else add space
      If UseCheckBox then
            Response.Write "<img src='./images/t_dot.gif' WIDTH=4 HEIGHT=18 BORDER=0 ALT=''>"
      Else
            Response.Write "<img src='./images/t_dot.gif' WIDTH=4 HEIGHT=18 BORDER=0 ALT=''>"
      End If
            
      Response.Write "<font face='Arial,Helvetica' size='1'>"' color='ffee44'>"
      
      'If MyLink = "" then do not use link      
      if MyLink <> "" then
            'If first Level, use bold
            
            if newtarget = 0 then
            
                  'If Level = 0 then
                  if isparent then
                        Response.Write "<b><a href=" & MyLink & " target='new'>" & ItemName & "</a></b>"
                  else
                        Response.Write "<a href=" & MyLink & " target='new'>" & ItemName & "</a>"
                  end if
            
            else
            
                  'If Level = 0 then
                  if isparent then
                        'Response.Write "<b><a onMouseOut='clearStatus()' onMouseOver='describe(" & chr(34) & statusDisplay &  chr(34) &  "); return true;' href=" & MyLink & " target='frmMain'>" & ItemName & "</a></b>"
                        Response.Write "<b><a href=" & MyLink & " target='frmMain'>" & ItemName & "</a></b>"
                  else
                        'Response.Write "<a onMouseOut='clearStatus()' onMouseOver='describe(" & chr(34) & statusDisplay &  chr(34) &  "); return true;' href=" & MyLink & " target='frmMain'>" & ItemName & "</a>"
                        Response.Write "<a href=" & MyLink & " target='frmMain'>" & ItemName & "</a>"                                    
                  end if
            
            end if
            
      else
      
            If isparent then Response.Write "<b><a>" & ItemName & "</a></b>" else Response.Write ItemName
            
      End If

      Response.Write "</font>"
      Response.Write "<br>"
      
      'Always add DIV because WriteFoot() will close it
      Response.Write "<div ID='" & TreeName & ItemID & "chlds'>"
      
      'JsCode only if IsIE and if the section is not open
      If IsIE then
            If IsOpn then
                  Response.Write "<script language='javascript'>ShowDisplay(" & TreeName & ItemID & "chlds);</script>"
            Else
                  Response.Write "<script language='javascript'>HideDisplay(" & TreeName & ItemID & "chlds);</script>"
            End If
      End If

End Sub

Sub WriteFoot()

      Response.Write "</div>"

End Sub
0
Comment
Question by:houmerlin
11 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 6983979
well, instead of
display: block -to- display: none
you should use
visibility:visible -to- visibility: hidden

Just an advise, NOT THE SOLUTION.
0
 

Author Comment

by:houmerlin
ID: 6984007
is the code for netscape:

obj.visibility = "visible"

or

obj.style.visibility = "visible"

thanks,

paul
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6984492
Also...
Don't put any of the divs inside tables, or inside other divs.
All divs must be set as position:absolute and given a location to be scriptable. They will also need to have an ID so you can refer to them.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:houmerlin
ID: 6984521
there currently are no tables on the page.  and the divs are assigned an id.  the script and everything works in internet explorer, but it is not operating in netscape.  what happens is every div is visible as though they were all expanded.  i was just curious if there is a method similar to style.display = "none"/style.display = "block" which will allow the stacked layers to hide or unhide when the div is clicked.  
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6985239
Your code is totally and completely IE. You'd have to completely rewrite it, and even then it's not going to work without completely rethinking how you've got it constructed.

You can't write to a completed HTML page in Netscape.
You can't use onclick with an image.
You can't use cursor:hand -- you can't use cursor at all.
You can't do anything if you don't have the div set as position:absolute, and have defined the ID style.

You haven't done any of that. The ONLY way you'd get this to work in Netscape would be to create a separate and distinct div for EACH item/table, position it, hide what you don't want to show up by default, and move ALL the divs based on what you want to show/hide. You'd also have to calculate how far to move them, how much space each div would be, and you'd also have to have everything ELSE in a div, because otherwise it's just all going to pile on top of itself.

You really want to do that?
0
 

Author Comment

by:houmerlin
ID: 6986031
i am aware of creating multiple divs but it is just a tremendous amount of javascript to manipulate the multiple divs once they are created.  i know the cursor:hand is not available in netscape, but it is still feasible IE.  fyi, you CAN use an ONCLICK on an img.  HOWEVER, you cant use ONCLICK in tables (<tr> and <td>) in netscape where you can use them in IE.  and to clarify the divs are working perfectly in IE, dont believe me?  test the code.  so the mandatory position:absolute you keep referring to is not needed.  
0
 

Author Comment

by:houmerlin
ID: 6986039
let me rephrase that, i am aware creating each div its own multiple div, but that would take a lot of javascript code.  
0
 
LVL 23

Accepted Solution

by:
b1xml2 earned 50 total points
ID: 6986680
houmerlin,
I have written menu trees that are compatible with both Netscape 4.7, MSIE4+ and Netscape 6.

These are my observations:
1. Use layer tags for Netscape 4.x, Use absolute positioning and nested layers with the height and width being calculated in advance. A big pain but it gets the job done. Be careful of that resizing which throws a bug spanner into the styling. I had borrowed some concepts from developer.netscape.com and found that generating the code via XML and XSLT to a static HTML (the transformation outputs a file) is the fastest way to go to get the syntax right.

2. Netscape 6 will support the syntax used by MSIE4+.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6987494
I don't doubt it works in IE, but you wanted it to work in Netscape, correct? Then you'll have to use position:absolute, divs for everything, and onclick does NOT work with an img tag in NN4.

It will work with the DIV if it's been set as position:absolute, but not the IMG.
0
 

Author Comment

by:houmerlin
ID: 6987505
i dont know anyone still using ns4 though, but thanks for your help anyway.  
0
 

Expert Comment

by:PadmaP
ID: 7580441
houmerlin,

Could you please share your ideas how you were able to get it working with Netscape.

Thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 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