hidding div - showing div

N

news.west.cox.net

I have something like this in a function:

....
var box = document.getElementById("box");
box.style.visibility = 'hidden';
....

This hides a div setup like the following:

<div id="box">
<table>
<tr><td>Content1</td></tr>
</table>
</div>

But, what if I want to have a another table
replace the table in the div above.

Say I want something like this to replace it:

<table>
<tr><td>Content2</td></tr>
</table>

For this example I have used simple content
in my divs. But, in th real case, the div has a
large group of nested tables of data.

I want the two to occupy the same space, so
when one becomes hidden and the other becomes
visible, it is like they are replacing one another.

Since I have such large amounts of data in one of the
tables, I do not want to user innerHTML to do the
replacement. Is there any other way I can do it?

Thanks
 
T

tennisbill

This sounds like something I've done before, where it was accomplished
by simply having multiple <div>s, all absolutely positioned to the same
location, and each with its own appropriate text/html fill.
Then simply make only the current <div> of interest visible, and all
others that occupy that screen location hidden.
I tend to write a function that takes as a parameter the id of the
<div> that should be visible. Then the function runs through a list of
all the <div>s that occupy that space, making them hidden. Finally, it
makes visible the one that was referenced in the function call.
 
S

SimonFx

Don't use visibility but display. The following works well in the
browsers I have tested so far (IE / Netscape / Mozilla / Firebird /
Safari / Opera). Might also test using "ID=" in the table instead of a DIV


<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
<!--
function mySetStyleDisplay (myDiv, myStyle){
if (document.all){
obj = document.all(myDiv);
obj.style.display = myStyle;
} else if (document.getElementById) {
obj = document.getElementById(myDiv);
obj.style.display = myStyle;
} else {alert (Err_Browser);}
}

function myShow(myDiv){
mySetStyleDisplay (myDiv,'');
}

function myHide(myDiv){
mySetStyleDisplay (myDiv,'none');
}
-->
</SCRIPT>

</HEAD>
<BODY>
<A HREF="#"
onMouseOver="Javascript:myShow('content2');
myHide('content1'); return true;"
onMouseOut="Javascript:myShow('content1');
myHide('content2'); return true;">Test</a>

<TABLE ID="content1">
<TR><TD>Content1</TD></TR></TABLE>

<TABLE ID="content2" STYLE="display:none;">
<TR><TD>Content2</TD></TR></TABLE>

</BODY>
</HTML>
 
M

Michael Winter

Don't use visibility but display.

Well, it really depends. Sometimes it's desirable not to cause reflow due
to the appearance of previously hidden content.

[snip]

Valid documents should have a DOCTYPE definition...

....and a TITLE element.
<script type="text/javascript" language="JavaScript">

Remove the language attribute. It's long deprecated, and type makes it
redundant.

That can go, too.
function mySetStyleDisplay (myDiv, myStyle){
if (document.all){
obj = document.all(myDiv);
obj.style.display = myStyle;
} else if (document.getElementById) {
obj = document.getElementById(myDiv);
obj.style.display = myStyle;

It might be better to move the style assignment into common code, and
check that the style object is supported before using it. Also, the obj
variable should be made local with the var keyword.

var obj = null;
/* Be biased towards the standard method. */
if(document.getElementById) {
obj = document.getElementById(myDiv);
} else if(document.all) {
obj = document.all[myDiv];
}
if(obj && obj.style) {
obj.style.display = myStyle;
}

It would be even better to make document.getElementById a reliable
function. The simplest way to achieve that is:

if(!document.getElementById) {
document.getElementById = document.all ?
function(i) {return document.all;};
: function() {return null;};
}

Better ways can be found in the FAQ notes and the archives of this group.

Now you can re-write the function knowing that calling
document.getElementById will always be successful:

var obj = document.getElementById(myDiv);
if(obj && obj.style) {
obj.style.display = myStyle;
}
} else {alert (Err_Browser);}

There really isn't much point in telling the user about an error. There's
nothing they can do about it. Just make sure that such an event doesn't
prevent the user from using the page.

[snip]
<A HREF="#"
onMouseOver="Javascript:myShow('content2');

There is no need to prefix with "javascript:". Most browsers will ignore
that as a label anyway, and it's only of use in IE if you've used VBScript
previously.
myHide('content1'); return true;"

Returning true doesn't do anything. Returning false wouldn't either in
this case as mouseover isn't a cancellable event. The same comments apply
to the other link.

[snip]
<TABLE ID="content2" STYLE="display:none;">

I realise that this is only a demo, but you should warn that hiding the
table like isn't appropriate on the Web. If content should be hidden
initially, do it through script otherwise the visitor may never see it.

[snip]

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top