Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Test for Visibility 2

Status
Not open for further replies.
Mighty

Mighty

Programmer
Feb 22, 2001
1,682
US
When a user clicks on a particular link on the page, I want to be able to test to see if a particular table is visible. It is is not I want to show it and if it is I want to hide it - fairly straightforward - or so I thought.

Code: 
function showDetails(section)
{

  // Check to see if the section is visible or not
  if (document.getElementById(section).style.visibility == "visible") 
    document.getElementById(section).style.visibility = "hidden";
  else
   document.getElementById(section).style.visibility == "visible";

}

Howver the test on the visibility property always returns a blank and hence the else clause is always getting run. How do I test the visibility of an item on the page?

Mighty
 
Sort by date Sort by votes
Slight type in the else clause with the "==" - this is not the cause of my problems however

Mighty
 
Upvote 0 Downvote
Try assigning a style to your table thats visible or hidden.

Code: 
style="visibility: 'visible';"

I don't know the answer but my good friend Google does.
 
Upvote 0 Downvote
The Javascript seems to work fine for me in IE6. As long as I assign an initial visibility value to my table.
Code: 
<html>
<head>
<script>
function showDetails(section)
{
  // Check to see if the section is visible or not
	if (document.getElementById(section).style.visibility == "visible") 
		document.getElementById(section).style.visibility = "hidden";
	else
		document.getElementById(section).style.visibility = "visible";

}
</script>
</head>
<body>
<table id="section" border="1" style="visibility: 'visible';">
<td>
fdsafas
</td>
</table>
<button onclick="showDetails('section')">test</button>
</body>
</html>

I don't know the answer but my good friend Google does.
 
Upvote 0 Downvote
Sample of the HTML:

Code: 
	  <!-- Lead Details Header -->
	  <table cellpadding=0 cellspacing=0 width=400 class="heading">
	   <tr>
	    <td>Lead Details</td>
	    <td align=right><a class="lead" href="javascript: showDetails('Leads')">Hide</a></td>
	   </tr>
	  </table>

	  
	  <table cellpadding=3 cellspacing=2 id="Leads" class="visible">
	   <tr bgcolor=#CCCCCC>
	    <th align=left>Lead ID</th>
	    <th align=left>Type</th>
	    <th align=left>Owner</th>
	    <th align=left>Status</th>
	    <th>Date<br>Entered</th>
	    <th>Last<br>Updated</th>
	    <th>Update Due</th>	       
	   </tr>
	   
	   <tr bgcolor=#EEEEEE>
	    <td><a class="lead" href="viewLead.asp?compid=761&leadid=Cardiology & Radiology180205">Cardiology & Radiology180205</a></td>
	    <td>Distributor</td>
	    <td>Stephen Maher</td>
	    <td>Sales Realised</td>
	    <td align=center>18-Feb-05</td>
		<td align=center>25-Jul-05</td>
		<td align=center>15-Sep-05</td>
	   </tr>
	   
	   </table>


Actual Javascript function:

Code: 
// This function shows/hides the specified section of the company page
function showDetails(section)
{

	// Check to see if the section is visible or not
	if (document.getElementById(section).style.visibility == "visible") 
		document.getElementById(section).style.visibility = "hidden";
	else
		document.getElementById(section).style.visibility = "visible";

}


CSS Code:

Code: 
table.visible 
{
	margin-top: 10px;
	visibility: visible;
}

table.hidden 
{
	margin-top: 10px;
	visibility: hidden;
}


I have made the following discovery. When the page first loads I have two hidden tables and two visible ones. If I click on the link for the hidden ones it displays them. However if I click on the link for the visible ones it won't hide them. But if I click on it again it will then hide it and it will display it after the next click.

It seems that the JS doesn't see the visible tables as visible and sets it to visible the first time you click it. Then if you click it again it will see it as visible and hide it. Any ideas why?? I am setting the visible propertly using CSS.

Mighty
 
Upvote 0 Downvote
I am assigning the visibility to visible but I am doing it through css. Will that not work??

Mighty
 
Upvote 0 Downvote
you can try another method:

Code: 
// This function shows/hides the specified section of the company page
function showDetails(section)
{
    var t = document.getElementById(section);

    // Check to see if the section is visible or not
    if (t.className == "visible")
        t.className = "hidden";
    else
        t.className = "visible";

}



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
You could also edit the javascript to check weather the visibility value is "". Something like this should work
Code: 
 if (document.getElementById(section).style.visibility == "visible" || "" )

That way you don't have to edit the css or html.


I don't know the answer but my good friend Google does.
 
Upvote 0 Downvote
which you could also condense...

Code: 
// This function shows/hides the specified section of the company page
function showDetails(section)
{
    var t = document.getElementById(section);
    t.className = (t.className == 'visible') ? 'hidden' : 'visible';

}



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
cLFlaVA,

That worked a treat - thanks.

My idea with this was to have lots of sections on one page and start with several of them hidden. The user would just have to click once to show or hide the data. The reason for this was to reduce the need for scrolling and try to get as much info on one screen as possible.

However, the page is "reserving" the space for the table whether it is visible or not. How do I set it to have the space not used when the table is not visible? Do I need to use something other than tables??

Mighty
 
Upvote 0 Downvote
yeah, that's what the "visibility" style does for you. what you want is the "display" style.

using the last function I posted, incorporate this CSS:

Code: 
table.visible
{
    margin-top: 10px;
    display: block;
}

table.hidden
{
    margin-top: 10px;
    display: none;
}



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thanks guys. I was under the assumption that the display property didn't work in Netscape. I always use it on Intranet pages but was using the visibility property for a change. Now I know the difference!!

Mighty
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
688
Rayj0000
Rayj0000
michael12061206
  • Locked
  • Question
free javascript library for airliner diagrams
Replies
1
Views
263
xwb
xwb
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
295
chikwendu
chikwendu
dannyo12
  • Locked
  • Question
Async library error in terminal while running Ethereum Smart Contracts test with mocha?
Replies
0
Views
191
dannyo12
dannyo12
James Mcgill
  • Locked
  • Question
Schema for a haikus
Replies
0
Views
206
James Mcgill
James Mcgill

Part and Inventory Search

Sponsor

Back
Top