By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,462 Members | 1,057 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,462 IT Pros & Developers. It's quick & easy.

How to hide parts of a document, using Javascript

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a


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 discussion thread is closed

Replies have been disabled for this discussion.