• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

div style display

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
houmerlin
Asked:
houmerlin
1 Solution
 
lexxwernCommented:
well, instead of
display: block -to- display: none
you should use
visibility:visible -to- visibility: hidden

Just an advise, NOT THE SOLUTION.
0
 
houmerlinAuthor Commented:
is the code for netscape:

obj.visibility = "visible"

or

obj.style.visibility = "visible"

thanks,

paul
0
 
webwomanCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
houmerlinAuthor Commented:
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
 
webwomanCommented:
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
 
houmerlinAuthor Commented:
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
 
houmerlinAuthor Commented:
let me rephrase that, i am aware creating each div its own multiple div, but that would take a lot of javascript code.  
0
 
b1xml2Commented:
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
 
webwomanCommented:
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
 
houmerlinAuthor Commented:
i dont know anyone still using ns4 though, but thanks for your help anyway.  
0
 
PadmaPCommented:
houmerlin,

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

Thanks
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now