[thelist] Re-defining CSS via Javascript
Matthew Bernhardt
bernhardt.7 at osu.edu
Wed Feb 14 13:05:37 CST 2007
Hello,
I'm wondering whether/how its possible to re-write CSS styles via Javascript? I read the SwitchyMcLayout article on ALA, and it got me thinking - could I change the z-index of a div based on the window size of the browser?
The context is that I've been working on a site where the menu block and content block overlap. The menu sits on top of the content block, and for most window sizes there's no issue - the overlap is about 8 pixels. However, on very small window sizes the overlap gets much more pronounced, causing the content to more completely slide under the menu - obscuring the content. In those situations, I'd like to be able to push the content on top of the menu. Is this possible?
I suppose this could either be by switching the class of the content block, so there'd be:
CSS:
.menu { z-index: 3; }
.contentlow { z-index: 2; }
.contenthigh { z-index: 4; }
HTML:
<body>
<div class="menu">(menu HTML)</div>
<div class="contentlow">(content HTML)</div>
(other divs and HTML)
</body>
with a window.onresize call similar to the SwitchyMcLayout example? I'm not sure if this would work, though, as how would I write the Javascript to only swap the content div's class? I'm still very new to Javascript in general, so I'm not sure if this is easy/impossible to do or not. My initial thought would be to use an id attribute - which would allow me (I believe) to use document.getElementById() - but I've had problems before with CSS in that case and IE not picking up on styles correctly.
Thoughts? I can provide a test page if necessary tomorrow (snowed in at home today, surfing and doing research).
Thanks,
Matt
bernhardt.7 at osu.edu
More information about the thelist
mailing list