Solved

div style display

Posted on 2002-05-01
11
304 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
Comment Utility
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
Comment Utility
is the code for netscape:

obj.visibility = "visible"

or

obj.style.visibility = "visible"

thanks,

paul
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
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
 

Author Comment

by:houmerlin
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:houmerlin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
i dont know anyone still using ns4 though, but thanks for your help anyway.  
0
 

Expert Comment

by:PadmaP
Comment Utility
houmerlin,

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

Thanks
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now