[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Hide a specific div

Posted on 2008-11-16
8
Medium Priority
?
240 Views
Last Modified: 2012-05-05
A previous question was answered successfully when changing the visibility of a specific div but now I have changed the function so that it hides the div so that the div won't take up space. Unfortunately, now the function does not work.

Any help would be greatly appreciated!
<script type="text/javascript">
 
 var state1 = 'none';
 function showhide1(layer_ref) {
   state1 = document.getElementById(layer_ref).style.display ;
   state1 = state1 ==  'none'; ? 'block' : 'none';
   if (document.getElementById) { // any normal browser nowadays
      document.getElementById(layer_ref).style.display =  state1;
   } else if (document.all) { //IS IE 4 or 5 (or 6 beta)
      eval( "document.all." + layer_ref + ".style.display =  state1");
   } else if (document.layers) { //IS NETSCAPE 4 or below
      document.layers[layer_ref].style.display =  state1;
   }
}
</script>
 
<a href="javascript:;" onclick="showhide1('Content_<%=rsComments("MsgID")%>');"><%=rsComments("MsgHeader")%></a>
 
 
 <div id="Content_<%=rsComments("MsgID")%>" style="display:none;">
   							<%=rsComments("MsgContent")%>
							</div>

Open in new window

0
Comment
Question by:gilalig
8 Comments
 
LVL 3

Expert Comment

by:WysG
ID: 22971730
Line 6 reads
state1 = state1 ==  'none'; ? 'block' : 'none';
Notice the ; after 'none'

Should be
state1 = state1 ==  'none' ? 'block' : 'none';

Or clearer
state1 = (state1 ==  'none' ? 'block' : 'none');

0
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 22971746
You've got an errant ";" in this line:

   state1 = state1 ==  'none'; ? 'block' : 'none';

Also NS4 doesn't support the style object. Besides, branching for IE4 and NS4 these days is rather silly.

Try this:

function showhide1(layer_ref) {
   if(!document.getElementById) return;
   var s = document.getElementById(layer_ref).style;
   s.display = (s.display == 'none') ? 'block' : 'none';
}

Open in new window

0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 22971868
As you are getting the current value from the element instead of the variable, you should skip the global variable and keep it local in the function. Any global variable is a potential conflict with other scripts.

Netscape 4 can not remove elements from the flow, as it doesn't reflow the layout. So, you have to drop the support for Netscape 4. You can keep the support for IE5, if you like.

In order for the IE5 support to work, you have to get the style object from the element first, so that you can use that both for getting and setting the value:
<script type="text/javascript">
 
function showhide1(layer_ref) {
   var s = null;
   if (document.getElementById) { // any normal browser nowadays
      s = document.getElementById(layer_ref).style;
   } else if (document.all) { //IS IE 4 or 5 (or 6 beta)
      s = document.all(layer_ref).style;
   }
   if (s != null) {
      s.display = (s.display == 'none' ? 'block' : 'none');
   }
}
</script>

Open in new window

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

 
LVL 29

Expert Comment

by:Göran Andersson
ID: 22971873
> you should skip the global variable and keep it local in the function

Well, as you see from the code I posted, you actually don't need a variable for that at all.
0
 
LVL 43

Expert Comment

by:David S.
ID: 22971908
@GreenGhost

IE5+ support document.getElementById().
0
 

Expert Comment

by:tommytcchan
ID: 22973159
you might want to install firebug as well to check that the id names are indeed what you want. firebug is a firefox add-on for debugging pages
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 22973238
@Kravimir

Ok, then the comment in the original code was incorrect.
0
 
LVL 43

Expert Comment

by:David S.
ID: 22973243
@GreenGhost

Yeah, it is incorrect.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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)
Suggested Courses

834 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