Solved

Hide/Show Div

Posted on 2003-11-24
37
7,622 Views
Last Modified: 2008-02-01
How do I amend this code to show and hide a div thats compatible with NS and IE

   if (document.all['ex'+layername].style.display == "none"){
     document.all['max_'+layername].src="../images/mini.gif"
     document.all['ex'+layername].style.display = "block"}
   else{
     document.all['ex'+layername].style.display = "none"
     document.all['max_'+layername].src="../images/maxi.gif"     }
0
Comment
Question by:Gary
  • 17
  • 11
  • 7
  • +2
37 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809593
GaryC123,
Change to this [work for NS and IE]:
  if (document.getElementById('ex'+layername).style.display == "none"){
    document.getElementById('max_'+layername).src="../images/mini.gif";
    document.getElementById('ex'+layername).style.display = "block";}
  else{
    document.getElementById('ex'+layername).style.display = "none";
    document.getElementById('max_'+layername).src="../images/maxi.gif"  ;   }
-you need to assign an id for each control when you use document.getElementById().This method work in MAC PC as well too.
eg:
<input type="text" id="ex1" name="ex1">

Regards
x_com
0
 
LVL 58

Author Comment

by:Gary
ID: 9809628
No joy :o(
This is the code for the actual div, tried every combination I can think of and still can't get it.  Just to add the div is within a table cell if that makes a difference?

<div style="display:none" name='ex<%=rs("progress_ID")%>' id='ex<%=rs("progress_ID")%>'><%=replace(rs("progress_text"),vbcrlf,"<BR>")%></div>
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809642
GaryC123 ,
It's your problems related with browser compatiable problems or the code itself can't display as what you thought?
0
 
LVL 58

Author Comment

by:Gary
ID: 9809651
Browser compatibility, it works fine in IE, but not in Netscape - it's supposed to hide/show the contents of a cell when clicking the preceding row is clicked.
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809672
GaryC123,
try to use eval() function.
if (eval(document.getElementById('ex'+layername).style.display)== "none"){
   eval(document.getElementById('max_'+layername).src="../images/mini.gif");
   eval(document.getElementById('ex'+layername).style.display = "block");}
 else{
   eval(document.getElementById('ex'+layername).style.display = "none");
   eval(document.getElementById('max_'+layername).src="../images/maxi.gif"); }
-but suppose document.getElementById() had solve the problems because this code is work for both browser as well.
 If you work for <Div> only, you only need assign an id only. Not need assign name of the control.
If that still not solve the problems, maybe cache problems?
0
 
LVL 58

Author Comment

by:Gary
ID: 9809728
No joy and IE doesn't work now.  If you want to see the actual full page here it is if that helps.  When you click a row under Progress Details it should show another row directly underneath containing a comment.

http://www.intouchmedialtd.com/webdesk/admin/ns_test.html
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809764
GaryC123 ,
Try this :

 if ( document.all ) // IE
  {
  if (document.all['ex'+layername].style.display == "none"){
    document.all['max_'+layername].src="../images/mini.gif"
    document.all['ex'+layername].style.display = "block"}
  else{
    document.all['ex'+layername].style.display = "none"
    document.all['max_'+layername].src="../images/maxi.gif"     }
  }
  else if ( document.layers ) // NS
  {
       if (document.layers['ex'+layername].style.display == "none"){
    document.layers['max_'+layername].src="../images/mini.gif"
    document.layers['ex'+layername].style.display = "block"}
  else{
    document.layers['ex'+layername].style.display = "none"
    document.layers['max_'+layername].src="../images/maxi.gif"     }
  }

0
 
LVL 58

Author Comment

by:Gary
ID: 9809775
Sorry no go
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809801
GaryC123 ,
When i click '+' sign, it keep pop-up error message for 'none' is undefined.
Have you try with visibility property instead of display property?
0
 
LVL 58

Author Comment

by:Gary
ID: 9809831
The problem with that is that it will show the table row but just hide the text, which kinda defeats the purpose of it.
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809862
GaryC123 ,
Can you put back your original code?I want to see what happend if i browse with IE.
0
 
LVL 58

Author Comment

by:Gary
ID: 9809874
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809888
GaryC123 ,
No, i mean your original code, not before my code. From the site, i keep see this error
Line 20, Char 1, 'none' is undefined.
I want to see what's happend in IE if use your code :
  if (document.all['ex'+layername].style.display == "none"){
    document.all['max_'+layername].src="../images/mini.gif"
    document.all['ex'+layername].style.display = "block"}
  else{
    document.all['ex'+layername].style.display = "none"
    document.all['max_'+layername].src="../images/maxi.gif"     }
0
 
LVL 58

Author Comment

by:Gary
ID: 9809897
Hmmm that is the original code thats up there now, if you test it in IE you will see how it works
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809920
GaryC123, work like a charm in IE.
0
 
LVL 58

Author Comment

by:Gary
ID: 9809933
Yeah I know, its getting it to work in NS thats the problem.  Guess my first comment is kinda misleading as I meant for it work in IE *and* NS together, I already had it working in IE with no problem.
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9809968
GaryC123,
document.all is not recommend to use in the productions line. Now, you change to document.getElementById() ,see what i can see in NS.
0
 
LVL 28

Expert Comment

by:sybe
ID: 9809972
NS 6+ does neither support "document.layers" nor "document.all", but it does support "document.getElementById".

I'd recommend to use "document.getElementById" when possible, and in other situations use document.all (IE4) or document.layers (NS4, NS5-?-)



0
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!

 
LVL 58

Author Comment

by:Gary
ID: 9810006
Ok changed to this

function showhidelayer(layername){
  if (document.getElementById('ex'+layername).style.display == "none"){
    document.getElementById('max_'+layername).src="../images/mini.gif";
    document.getElementById('ex'+layername).style.display = "block";}
  else{
    document.getElementById('ex'+layername).style.display = "none";
    document.getElementById('max_'+layername).src="../images/maxi.gif"  ;   }
   }


But still it doesn't work in NS with an error 'document.layers has no properties' - this is in NS 7
0
 
LVL 58

Author Comment

by:Gary
ID: 9810009
Increasing points to 10,000 (ok 500 then)
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9810013
sybe ,GaryC123 said it doesn't work although using document.getElementById().
 Maybe others issues? All the code above not work for him...what wrong?
GaryC123,
I use NS4.75 and i saw black background images in your web site?Moreover, i cant see any '+' sign anymore?
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9810031
Hi,

1) you shouldn't be testing by appName.  All 'Netscape' browsers have 'Netscape' as part of their name, but they do not all use 'document.layers'  -- which is what you have as the first 'if' in the function.   You should be testing for the functionality you need -- if document.all/document.getElementById/document.layers

2) NN4 (which uses document.layers) does not recognize 'display:none'  -- so, you either have to exclude it, or make a complete rewrite with 'visibility:hidden' (which leaves a space holder)

the following is untested, but should work:

function showhidelayer(layername)
{

  var divObjEx = (document.all) ? document.all['ex' + layername] : document.getElementById('ex' + layername)
  var divObjMax = (document.all) ? document.all['max' + layername] : document.getElementById('max' + layername)
 
  if (divObjEx.style.display == 'hide')
  {
    divObjMax.src="../images/mini.gif"
    divObjEx.style.display = "show"}
  }
  else
  {
   divObjEx.style.display = "hide"
   divObjMax.src="../images/maxi.gif"     }}
  }
}

Vinny
0
 
LVL 58

Author Comment

by:Gary
ID: 9810048
A space holder is no use since it messes the display up, I would just be happy for IE and NS 7.*
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 9810116
GaryC123,
I'm out of time to continue this thread. I not use NS7 before because i'm totally out of using NS (beside testing some important issues topic only). IE is my main platform.
However, i found some related thread which hope can solve your problems :

http://groups.yahoo.com/group/wdf-dom/message/1764
http://oldlook.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20022631.html
http://oldlook.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20464548.html
http://oldlook.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20346789.html
http://oldlook.experts-exchange.com/Web/Web_Languages/JavaScript/Q_10600982.html
http://oldlook.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20138680.html

But, i'm not sure why document.getElementById() wouldnt work. Hope somebody experts there and continue this thread and give you the exact answer.

Regards
x_com
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9810185
Hi gary,

>>A space holder is no use since it messes the display up, I would just be happy for IE and NS 7.*
  That's what the code I submitted is for browsers that use 'display:none'   Did you test the code I posted?  It should work (if your div's have ids)

Vinny

0
 
LVL 58

Author Comment

by:Gary
ID: 9810265
I get an error with that - cannot get display properties, invalid argument
0
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 500 total points
ID: 9810353
Hi Gary,

1) I had some extra "}" ; fixed.

if (divObjEx.style.display == 'hide')
  {
    divObjMax.src="../images/mini.gif"
    divObjEx.style.display = "show"
  }
  else
  {
   divObjEx.style.display = "hide"
   divObjMax.src="../images/maxi.gif"    
  }

2) you do not have any ids -- 'max76' ; you do have some ids 'max_xx', but none for 'max_76/max76/etc. -- you need to identify the spans with valid ids and call the function with the proper argument.  Consistency.  make them all 'exNum/maxNum' or 'ex_Num/max_Num' -- but not both.

Vinny
0
 
LVL 58

Author Comment

by:Gary
ID: 9810417
Well VincentPuglia you've hit the nail on the head!  The images only had the name tag and not the ID tag, which was fine for ever forgiving IE but caused NS to belch, using my original code and setting ID= instead of NAME= fixed it.
0
 
LVL 58

Author Comment

by:Gary
ID: 9810441
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9810446
>>you've hit the nail on the head!
I knew that sledge hammer I had lying around was useful for something :)

Vinny
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9810683
what browser version of netscape are you using to test teh show/hide code?
according to http://www.blooberry.com/indexdot/html/tagpages/attributes/onclick.htm the onClick fo <tr> is not supported in netscape prior to 6.0, so try moving the onClick from the tr to the aonther tag, <a>,<span>,<div> with the following code

<script language=javascript>function showhidelayer(layername){
         if(document.getElementById('ex'+layername).style.display=='none'){
               document.getElementById('ex'+layername).src='../images/mini.gif';
            document.getElementById('ex'+layername).style.display='block';
         }
         else{
               document.getElementById('ex'+layername).src='../images/maxi.gif';
          document.getElementById('ex'+layername).style.display='none';
      }
}
</script>

0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9810799
Hi Jester,

   More importantly, NN4.x will not work with 'display' -- as I already mentioned, and Gary already expressed a dis for 'visibility'

Vinny
0
 
LVL 58

Author Comment

by:Gary
ID: 9810844
Yep I'm more than happy with compatibility with NS 7, NS6 was too buggy to bother catering for it.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9810917
Hi Gary,

  That code should work with everyone but NN4

Vinny
0
 
LVL 58

Author Comment

by:Gary
ID: 9810959
Well I can't test at the mo with any other version but I'm not bothered
0
 
LVL 58

Author Comment

by:Gary
ID: 9810988
Just tested in Safari on the Mac and IE for Mac and it works fine :o)
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9811006
:D

Vinny
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

705 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

20 Experts available now in Live!

Get 1:1 Help Now