hidding div - showing div

news.west.cox.net

I have something like this in a function:

....
var box = document.getEle mentById("box") ;
box.style.visib ility = 'hidden';
....

This hides a div setup like the following:

<div id="box">
<table>
<tr><td>Content 1</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>Content 2</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 Reply

6905

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="JavaS cript">

</SCRIPT>

</HEAD>
<BODY>
<A HREF="#"
onMouseOver="Ja vascript:myShow ('content2');
myHide('content 1'); return true;"
onMouseOut="Jav ascript:myShow( 'content1');
myHide('content 2'); return true;">Test</a>

<TABLE ID="content1">
<TR><TD>Content 1</TD></TR></TABLE>

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

</BODY>
</HTML>

Jul 23 '05 #3

Michael Winter

On Sun, 21 Nov 2004 04:27:25 +0000, SimonFx <ne**********@s apm.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="JavaS cript">
Remove the language attribute. It's long deprecated, and type makes it
redundant.
<!--
That can go, too.
function mySetStyleDispl ay (myDiv, myStyle){
if (document.all){
obj = document.all(my Div);
obj.style.displ ay = myStyle;
} else if (document.getEl ementById) {
obj = document.getEle mentById(myDiv) ;
obj.style.displ ay = 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.get ElementById) {
obj = document.getEle mentById(myDiv) ;
} else if(document.all ) {
obj = document.all[myDiv];
}
if(obj && obj.style) {
obj.style.displ ay = myStyle;
}

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

if(!document.ge tElementById) {
document.getEle mentById = 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.getEle mentById will always be successful:

var obj = document.getEle mentById(myDiv) ;
if(obj && obj.style) {
obj.style.displ ay = 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="Ja vascript: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('content 1'); 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.n et wrote:

I have something like this in a function:

...
var box = document.getEle mentById("box") ;
box.style.visib ility = 'hidden';
...

This hides a div setup like the following:

<div id="box">
<table>
<tr><td>Content 1</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>Content 2</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

7332

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 no use. This is working fine on win2k IE6 Here is the html file I am using to display the tif file <html> <head>

ASP / Active Server Pages

1996

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 strings already typed. I just want to provide my own droplist.

Javascript

2226

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 of searchable fields in the fields 3. Each group can be expanded/collapsed by clicking on a link "(Fewer|More) Options" which sits right next to the group title.

Javascript

1501

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

3084

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 the white box shows up still ontop of the new form that is taking its palce even though there is no items in the white box. Any windows messages or anything you can trap or whatnot? thanks!

C# / C Sharp

840

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 controlling the visibility of columns in the DataGrid control. The problem usually comes down to one fact. The DataGrid has a property called AutoGenerateColumns. The default value is "True". This means that when AutoGenerateColumns is set to True,...

ASP.NET

1368

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 it has been a lot of fun, but the way one must thing about things is very different from what I know and love:) I have worked though the "Walkthrough: Validating User Input in a Web Forms Page" and have my form, now I need to do something with...

ASP.NET

1244

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 "image not found icon" in webpage's body and "DONE" on IE's status bar. When switch it to framwork 1.1 it runs fine. What I think for the activeX not showing issue is that this might be some security issue because I had the same problem earlier...

ASP.NET

2160

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 mystery and I have been scouring every book / resource I can find but haven't come up with an answer. any one have any ideas? all other images in site showing fine - but they are declared as background images in the css. the site is:...

HTML / CSS

2701

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 form, the first form vanishes when the second form appears. Alternatively, I like to have both showing with just the Access container showing, with no native menus showing. Unchecking everything in Startup gets rid of everythinh except File - Edit...

Microsoft Access / VBA

9679

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9527

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10453

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

7546

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6785

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5441

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4115

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3730

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2924

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General