Hello to everyone, this is my first post here.
I'm creating a Java Script that will automatically activate a single stylesheet from a series of alternate stylesheets based on the width of the browser window. When I'm done I will post it for download as Freeware.
I'm trying to create a series of demo pages that do not use the script, but allow you to select each alternate stylesheet with a click of the mouse. Each of these pages should display some boiler plate stuff, but also a few different things based on which style sheet is active. Hope that was fairly clear.
My original thought on this was to key the variable stuff as follows:
<div ID=demo> <p class=show1>This is the stuff for style 1</p> <p class=show2>This is the stuff for style 2</p> <p class=show3>This is the stuff for style 3</p> </div>
Then I could create a screen.css file that included the line:
>#demo {display:none;}</code Then create my alternate stylesheets style1.css, style2.css etc: <code>@import url('screen.css'); #demo.show1 {display:inline;}
My original thought was that the #demo.show1 would be more specific and would therefore override the display none in the screen.css. Doesn't seem to work that way.
Is there a way to do something like this?
The alternative would be to define style1.css with entries to display none everything but the show1 lines. This can be a hassle as I add more and more examples and have to go back and update each of the existing css files. That is why I was looking for a way to basically hide all of them, then unhide the one I want for each example.
Hope this isn't too much for my first post, and I hope I'm not overstepping my bounds talking about the script I'm writing, like I said, it will be freeware when it's done.
The concept for the script would be to treat the displayed page the same as the way we use css to create a printable page, hiding certain items so the page is narrow enough to print.
I am also on the web design forum as PapaGeek where I ask the more technical questions about scripting.
Although I don't really
Although I don't really understand why you want to do this as you can set stylesheets up and set theire "media" attribute to "print" and create styles for printing.
You wouldn't want to change the layout of the page while the user is still on it, this should be done in the background when ready for printing. Anyway, heres a link which can accomplish this.


