Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Javascript - Hide some but not all divs

1:09 pm on Aug 29, 2008 (gmt 0)

Full Member

10+ Year Member

joined:May 13, 2003
votes: 0

I have a webpage partly dynamically created and partly hard coded. If the document spans 1 whole page print the header once, if there are multiple documents fitting to the page height print the header once, then we it goes on to the next page print out the header:

Example of html - Content is dynmaic:

<div class="header">Logo</div>
<div class="content">
some text

<div class="header">Logo</div>
<div class="content">
some text

What i thought would be possible, it doesnt have to be valid html, would be to set a count.

Use javascript to count the "header" div, then in the "header" class add the count number to the div:


<div class="header 1">Logo</div>
<div class="content">
some text

<div class="header 2">Logo</div>
<div class="content">
some text

Then in css i would decide on a per document basis which headers to hide:

header 1 = Display

header 2 = Hide

When header 3 comes along and starts on a new page = show!

Basically I want to count number of "header" and out put to the class which number each "header" is in the count?

3:15 pm on Aug 29, 2008 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts: 578
votes: 0

I have a hunch that an old mantra might be apt:
Javascript is for behaviour
CSS is for presentation

I suggest that you have a look at the media-specific CSS [webmasterworld.com] thread

One other CSS 'trick' that might be worth investigating is (in a @media = "print" stylesheet) is page-break-before: always; that you could apply to the relevant headers to force them to the top of a new page


page-break-before: always;


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members