473,508 Members | 2,104 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to hide parts of a document, using Javascript

I have a document that is layed out in divs with ids and classes. There
can be N divs of class "other" but only one div with id ="main". Only
the div with id "main" should be visible.

I want to be able to programatically select the visible portion of the
document, by clicking a link at the bottom of the document. So for
example, the links at the bottom of the page will show "Page1", "Page2" etc.

Does anyone have an example that shows how I may do this?
Jun 27 '08 #1
2 1380
Ronald Raygun wrote on 03 mei 2008 in comp.lang.javascript:
I have a document that is layed out in divs with ids and classes.
There can be N divs of class "other" but only one div with id ="main".
Only the div with id "main" should be visible.
It is realy simple if you know JS and CSS.

A class being a CSS attribute could also be an an attribute of your
id='main' div, so let us forget about that first:

======================
var temp = document.getElementsByTagName('div')
for (var i=0;i<temp.length;i++)
temp[i].style.display='none';
document.getElementsById('main').style.display='bl ock';
=====================

[not tested]

However, if you have other divs that should not be affected,
and want to use the class 'other', do:

======================
var temp = document.getElementsByTagName('div')
for (var i=0;i<temp.length;i++)
if (temp[i].className=='other')
temp[i].style.display='none';
document.getElementsById('main').style.display='bl ock';
=====================
>
I want to be able to programatically select the visible portion of the
Change your idea fron "visible" to "displayed" as the first in CSS slang
means that the part will be displayed empty.
document, by clicking a link at the bottom of the document. So for
example, the links at the bottom of the page will show "Page1",
"Page2" etc.

Does anyone have an example that shows how I may do this?
I leave you to change this to the buttons on the bottom.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jun 27 '08 #2


Evertjan. wrote:
Ronald Raygun wrote on 03 mei 2008 in comp.lang.javascript:

>>I have a document that is layed out in divs with ids and classes.
There can be N divs of class "other" but only one div with id ="main".
Only the div with id "main" should be visible.


It is realy simple if you know JS and CSS.

A class being a CSS attribute could also be an an attribute of your
id='main' div, so let us forget about that first:

======================
var temp = document.getElementsByTagName('div')
for (var i=0;i<temp.length;i++)
temp[i].style.display='none';
document.getElementsById('main').style.display='bl ock';
=====================

[not tested]

However, if you have other divs that should not be affected,
and want to use the class 'other', do:

======================
var temp = document.getElementsByTagName('div')
for (var i=0;i<temp.length;i++)
if (temp[i].className=='other')
temp[i].style.display='none';
document.getElementsById('main').style.display='bl ock';
=====================

>>I want to be able to programatically select the visible portion of the


Change your idea fron "visible" to "displayed" as the first in CSS slang
means that the part will be displayed empty.

>>document, by clicking a link at the bottom of the document. So for
example, the links at the bottom of the page will show "Page1",
"Page2" etc.

Does anyone have an example that shows how I may do this?


I leave you to change this to the buttons on the bottom.

Thanks very much. This provides me with a very good starting ground.
Jun 27 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

19
6855
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...
12
2730
by: ATS | last post by:
I need to hide/reveal parts of a web page using javascript. I think I can do with using the <span> tag, but I've been away from it for a while and don't remember. Any pointers, examples?
2
12168
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow {...
5
3190
by: dje | last post by:
In the OnClick event on a radioButtonList, I run a javascript to show/hide the appropriate div along with a submit button, which displays as expected. The problem is the submit no longer works on...
7
29121
by: FP | last post by:
I'm new to Java Script. I'm displaying comments people have made. Below each persons' comment I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would display an empty text field...
3
2785
by: toodi4 | last post by:
I'm using a javascript that hides and unhides text based on a button click. It works great across static fields on a form. The problem I have is that I'm trying to hide and unhide various fields...
2
2126
by: dusk | last post by:
Hi, I have a page with lots of hidden divs which are revealed based on choices made at each 'layer'. So I've used naming convention which represents the order in which each div becomes...
12
2946
by: laredotornado | last post by:
Hi, I'm using PHP 5. I was wondering given an image, a.jpg, how can I make an image that would look like you slid a white index card (which I have a file, white.jpg with the same dimensions as...
58
8014
by: bonneylake | last post by:
Hey Everyone, Well recently i been inserting multiple fields for a section in my form called "serial". Well now i am trying to insert multiple fields for the not only the serial section but also...
0
7125
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...
0
5631
agi2029
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,...
1
5055
isladogs
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...
0
4709
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...
0
3199
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...
0
3186
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1561
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 ...
1
767
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
422
bsmnconsultancy
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.