How to implement a mask of visibility/invisibility of a set of <div>elements?

N

Num GG

Hi all,

Given two web pages from the same site (eg: a weblog site). These two
pages contain a certain number of <div> elements

One of this page is the "reference" page as the configuration of the
visibility of all the <div> elements is "memorized" in this page. The
visibility/invisibility of the divs is affected programmatically. This
page could be seen as a kind of mask:

// First page : reference page
<HTML>
<BODY>
<div id="header" class="header">bla bla: the header </div>
<div id="title" class="content" style="display: none;"> Bli bli bli,
the title </div>
<div id="main" class="content"> Blu blu blu, the content of the post</
div>
<div id="comments" class="comments" style="display: none;">Your
comments here:
<div class="content">one comment </div> // PLS: remark that these
<div> has no id
<div class="content">another comment </div>
<div class="content">a last comment </div>
</div>
<div class="advertissement" style="display: none"> bla bla bla ...
advertissement </div>

//and so on...
</BODY>
</HTML>

The second page could be any page of the same site. It may be either
the fresher version of the first one, either another page (eg: another
post of the blog). This page has obviously the same structure of the
"reference" page. But several new divs can be present in this version:

// Another page : the page we want to apply a mask of visible/
invisible divs from the "reference"
<HTML>
<BODY>
<div id="header" class="header">bla bla: the header </div>
<div id="title" class="content"> Bli bli bli, the title </div>
<div id="main" class="content"> Blu blu blu, the content of the post</
div>
<div id="comments" class="comments">Your comments here:
<div class="content">one comment </div>
<div class="content">another comment </div>
<div class="content">a last comment </div> //... that is not more
the last but it's not the problem... ;)
<div class="content">yet another comment </div>
<div class="content">a comment </div>
<div class="content">a last comment </div>
</div>
<div class="advertissement"> bla bla bla ... advertissement </div>
<div class="on the same subject"> bla bla bla ... on the same subject
bla bla </div>

//and so on...
</BODY>
</HTML>

Now, the question is:
Is there a way to apply the reference page div's visibility options as
a mask to the second page?
In order to give this result (to end with this example):

// Another page : the page we want to apply a mask of visible/
invisible divs from the "reference"
<HTML>
<BODY>
<div id="header" class="header">bla bla: the header </div>
<div id="title" class="content" style="display: none;"> Bli bli bli,
the title </div>
<div id="main" class="content"> Blu blu blu, the content of the post</
div>
<div id="comments" class="comments" style="display: none;">Your
comments here:
<div class="content">one comment </div>
<div class="content">another comment </div>
<div class="content">a last comment </div> //... that is not more
the last but it's not the problem... ;)
<div class="content">yet another comment </div>
<div class="content">a comment </div>
<div class="content">a last comment </div>
</div>
<div class="advertissement" style="display: none"> bla bla bla ...
advertissement </div>
<div class="on the same subject" style="display: none;"> bla bla
bla ... on the same subject bla bla</div>
// This last div must be set as invisible because it is not present in
the reference page.


//and so on...
</BODY>
</HTML>

I think I should use DOM Treewalker to filter the DOM tree but is it
the only way?

Cheers,

Num
 
N

Num GG

Wow... this post is pretty unreadable. Ok, i'll try to make it
simpler:

I've got this first page:
-----------------------------------------------------------
<div id=1>some text here</div>
<div id=2 style="display: none;"> some text here</div>
<div id=3> another text here </div>
<div id=4 style="display: none;">text here:
<div id=4.1>one comment </div>
<div id=4.2>another comment </div>
</div>
<div id=5 style="display: none"> some text </div>
-----------------------------------------------------------
divs 1 and 3 are visible
divs 2, 4 and 5 are hidden (and 4.1, 4.2 too as they're 4's children).
This page is the reference in terms of visibility of divs.

Now, let's say I have another page, like this one:
-----------------------------------------------------------
<div id=1>some text here</div>
<div id=2> some text here</div>
<div id=3> another text here </div>
<div id=4>text here:
<div id=4.1>one comment </div>
<div id=4.2>another comment </div>
<div id=4.3>yet another comment </div>
</div>
<div id=5> some text </div>
<div id=6> a new div here with some text!!! </div>
-----------------------------------------------------------
This page is somehow the same but not really because:
- All divs are visible
- the div 4.3 have been added
- the div 6 is new too

OK?
Now the question is:
For this second page, considering my reference page, how could I
programmatically:
-let divs 1 and 3 visible
-hide divs 2, 4, 5 ( and all children divs of 4)
-hide div 6 too.

Thanks for all kind of suggestions.

Num,
 
T

The Natural Philosopher

Num said:
Wow... this post is pretty unreadable. Ok, i'll try to make it
simpler:

I've got this first page:
-----------------------------------------------------------
<div id=1>some text here</div>
<div id=2 style="display: none;"> some text here</div>
<div id=3> another text here </div>
<div id=4 style="display: none;">text here:
<div id=4.1>one comment </div>
<div id=4.2>another comment </div>
</div>
<div id=5 style="display: none"> some text </div>
-----------------------------------------------------------
divs 1 and 3 are visible
divs 2, 4 and 5 are hidden (and 4.1, 4.2 too as they're 4's children).
This page is the reference in terms of visibility of divs.

Now, let's say I have another page, like this one:
-----------------------------------------------------------
<div id=1>some text here</div>
<div id=2> some text here</div>
<div id=3> another text here </div>
<div id=4>text here:
<div id=4.1>one comment </div>
<div id=4.2>another comment </div>
<div id=4.3>yet another comment </div>
</div>
<div id=5> some text </div>
<div id=6> a new div here with some text!!! </div>
-----------------------------------------------------------
This page is somehow the same but not really because:
- All divs are visible
- the div 4.3 have been added
- the div 6 is new too

OK?
Now the question is:
For this second page, considering my reference page, how could I
programmatically:
-let divs 1 and 3 visible
-hide divs 2, 4, 5 ( and all children divs of 4)
-hide div 6 too.

Thanks for all kind of suggestions.

Num,
Click to expand...
1/. Give all divs an id="something" statement so you can
'programmatically' FIND them .

2/. Write a program that on some event, finds them and sets their
style.display property between 'inline' and 'none'.

3/. If you want stuff to overlay stuff, look at the Z-index style attribute.

4/. if its just a question of switching a page put it in one div
container and switch that.
 
N

Num GG

Hi Natural Philosopher,
1/. Give all divs an id="something" statement so you can
'programmatically' FIND them .
Click to expand...
Yes it would be much easier. But the problem is that I look for a
solution that "fits in" all kind of sites. Especially sites (for
example blogs pages) that deal with anonymous divs (without id).
2/. Write a program that on some event, finds them and sets their
style.display property between 'inline' and 'none'.
Click to expand...
Yes, I know how to set div's style to get them visible or hidden. The
3/. If you want stuff to overlay stuff, look at the Z-index style attribute.
Click to expand...
No no. No overlay stuff here...
4/. if its just a question of switching a page put it in one div
container and switch that.
Click to expand...
Neither a question of switching. I want to apply the visibility
options of the reference page TO the second page.
 
T

The Natural Philosopher

Num said:
Hi Natural Philosopher,

Yes it would be much easier. But the problem is that I look for a
solution that "fits in" all kind of sites. Especially sites (for
example blogs pages) that deal with anonymous divs (without id).
Click to expand...

well if you cant find the elements, you can't change em.

Either fix your code to give sensible IDs or give up.

Yes, I know how to set div's style to get them visible or hidden. The
issue is how to browse both the <div> reference page's tree in order
to apply the style from the reference page to the second page?
Click to expand...

Easy. getelements by tag name 'div' gets all the divs..step through and
look for the ones youu want..

If they haven;t the right ID, you will have to look for something else.
Maybe firstChild.data and parse the first letter to sort alphabetically?
whatever.


No no. No overlay stuff here...

Neither a question of switching. I want to apply the visibility
options of the reference page TO the second page.
Click to expand...
Well that IS an overlay isn't it? Like saying 'here is page1,. and here
are some holes in a sheet of paper, and I'll lay it over the top of page 2'

That's easy enough. Create a div on z-index 1 to form the 'paper' and
punch holes in it with some little divs with a background image of a
transparent gif, also z-index one, and then slap that over page 2, and
turn the whole lot on and off.

But I still don't see what the real problem is or what you are trying to
do. Maybe its English, not Javascript, that is the problem.;-)
 
N

Num GG

well if you cant find the elements, you can't change em.

Either fix your code to give sensible IDs or  give up.


Easy. getelements by tag name 'div' gets all the divs..step through and
look for the ones youu want..

If they haven;t the right ID, you will have to look for something else.
Maybe firstChild.data and parse the first letter to sort alphabetically?
whatever.


Well that IS an overlay isn't it? Like saying 'here is page1,. and here
are some holes in a sheet of paper, and I'll lay it over the top of page 2'

That's easy enough. Create a div on z-index 1 to form the 'paper' and
punch holes in it with some little divs with a background image of a
transparent gif, also z-index one, and then slap that over page 2, and
turn the whole lot on and off.

But I still don't see what the real problem is or what you are trying to
do. Maybe its English, not Javascript, that is the problem.;-)
Click to expand...

Maybe, maybe... :))
Sure. I'll get my dictionnary and I'll have a look at div's of z-
index...
 

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

Similar Threads

Clickable Div Block 1
<div> help 1
How can I get my menu inside of a menu to function properly? 1
How can I arrange a series of radio buttons? 2
How can I add arrows to my FAQ 0
Set value after clicking in field 11
Add recipes using JavaScript in table 20
Having difficulty with the layout of these images / video for this web page 2

Members online

Total: 35 (members: 3, guests: 32)
Robots: 446

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top