hidding div - showing div

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

Jul 23 '05 #1

Subscribe Post Reply

6882

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.

Jul 23 '05 #2

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">

</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>

Jul 23 '05 #3

Michael Winter

On Sun, 21 Nov 2004 04:27:25 +0000, SimonFx <ne**********@sapm.yahoo.com>
wrote:

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]
<HTML>
Valid documents should have a DOCTYPE definition...
<HEAD>
....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[i];};
: 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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #4

Frances Del Rio

I do this on this pg..

http://www.francesdelrio.com/dhtml/sonnets.html

HTH.. Frances
news.west.cox.net wrote:

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

Jul 23 '05 #5

SimonFx

Thanks Michael, I appreciate the coding pointers very much!

Jul 23 '05 #6

Similar topics

Showing Tif files in IE6.0 windowsxp

by: Vishnu | last post by:

I have a strange problem on WindowsXP proffessional with IE6 ,when i try to display a tiff file ,it is not showing ,small red x is comming up. I tried by dowloading latest IE from microsoft but...

ASP / Active Server Pages

howto hidding/overriding history dropdown list of a textbox ?

by: didier Belot | last post by:

Hi! If the subject isn't clear: Modern browsers provide an optional way of remembering user input in textbox: user begin to type, and a list drop down just under the textbox showing matching...

Javascript

Showing/Hiding <tr> s

by: c.anandkumar | last post by:

Hi All - I have some problems getting a small piece of javascript working correctly for Firefox. Here is what I am trying to do - 1. I have a form (like a search form) 2. I have many groups...

Javascript

Hidding dbWindow form user in access app

by: mauricio.silva | last post by:

Does anyone know of a way to hide the database window aside from the startup menu option that would prevent the window from showing ever when shift is held down while opening.

Microsoft Access / VBA

preventing combobox dropdown box from showing

by: Brian Henry | last post by:

Is there anyway to prevent the white box that drops down when you do a combobox dropdown from showing? I am trying to make a custom combobox which requires showing a custom form in its place, but...

C# / C Sharp

Hiding and Showing Columns in the DataGrid Control...

by: Amber | last post by:

The DataGrid allows you to make columns visible or invisible on demand - even edit and other special columns. This article will show you how it is done. Some developers have reported problems...

ASP.NET

Hidding information in ASP.Net

by: Sam Carleton | last post by:

Ok, have posted here before, but as a refresher, I have 8 years experience as a C/C++ Windows developer. Currently I am working on my first real web site using ASP.Net. I must admit that so far...

ASP.NET

ActiveX not showing up with framework 2.0

by: ikhan | last post by:

Hello, I am using an activex control on my website. It was running fine with framework 1.1, when I try to run it on framework 2.0 it's not showing up. It's not showing any error message, just a...

ASP.NET

image declared in xhtml code not showing in safari / konqueror

by: bessington | last post by:

hey all, i'm having a rather bizarre problem.. the image tag i have declared in my xhtml is not showing in safari / konqueror but showing just fine in Firefox, IE, Opera... this is a complete...

HTML / CSS

Two forms showing with acCmdAppMinimize?

by: missinglinq | last post by:

I'd like to use acCmdAppMinimize with two forms on the screen at once. Currently, if I have a form opening the db (with DoCmd.Maximize in the OnLoad event) and then a popup form on top of the first...

Microsoft Access / VBA

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA