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

Hide/Show Div

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
Gary
Asked:
Gary
  • 17
  • 11
  • 7
  • +2
1 Solution
 
David H.H.LeeCommented:
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
 
GaryAuthor Commented:
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
 
David H.H.LeeCommented:
GaryC123 ,
It's your problems related with browser compatiable problems or the code itself can't display as what you thought?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
GaryAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
GaryAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
GaryAuthor Commented:
Sorry no go
0
 
David H.H.LeeCommented:
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
 
GaryAuthor Commented:
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
 
David H.H.LeeCommented:
GaryC123 ,
Can you put back your original code?I want to see what happend if i browse with IE.
0
 
GaryAuthor Commented:
0
 
David H.H.LeeCommented:
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
 
GaryAuthor Commented:
Hmmm that is the original code thats up there now, if you test it in IE you will see how it works
0
 
David H.H.LeeCommented:
GaryC123, work like a charm in IE.
0
 
GaryAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
sybeCommented:
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
 
GaryAuthor Commented:
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
 
GaryAuthor Commented:
Increasing points to 10,000 (ok 500 then)
0
 
David H.H.LeeCommented:
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
 
VincentPugliaCommented:
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
 
GaryAuthor Commented:
A space holder is no use since it messes the display up, I would just be happy for IE and NS 7.*
0
 
David H.H.LeeCommented:
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
 
VincentPugliaCommented:
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
 
GaryAuthor Commented:
I get an error with that - cannot get display properties, invalid argument
0
 
VincentPugliaCommented:
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
 
GaryAuthor Commented:
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
 
GaryAuthor Commented:
0
 
VincentPugliaCommented:
>>you've hit the nail on the head!
I knew that sledge hammer I had lying around was useful for something :)

Vinny
0
 
James RodgersWeb Applications DeveloperCommented:
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
 
VincentPugliaCommented:
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
 
GaryAuthor Commented:
Yep I'm more than happy with compatibility with NS 7, NS6 was too buggy to bother catering for it.
0
 
VincentPugliaCommented:
Hi Gary,

  That code should work with everyone but NN4

Vinny
0
 
GaryAuthor Commented:
Well I can't test at the mo with any other version but I'm not bothered
0
 
GaryAuthor Commented:
Just tested in Safari on the Mac and IE for Mac and it works fine :o)
0
 
VincentPugliaCommented:
:D

Vinny
0

Featured Post

Independent Software Vendors: 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!

  • 17
  • 11
  • 7
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now