homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Javascript - Hide some but not all divs

10+ Year Member

Msg#: 3734303 posted 1:09 pm on Aug 29, 2008 (gmt 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?



5+ Year Member

Msg#: 3734303 posted 3:15 pm on Aug 29, 2008 (gmt 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;

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved