[thelist] Re-defining CSS via Javascript
Stephen Rider
evolt_org at striderweb.com
Sat Feb 17 11:33:44 CST 2007
Go track down a book called "DOM Scripting", published by "Friends of
Ed". It's a *GREAT* primer on manipulating a web page (including
CSS) using JavaScript.
Short on time or I'd give you a link....
Steve
On Feb 14, 2007, at 1:05 PM, Matthew Bernhardt wrote:
> 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
>
> --
>
> * * Please support the community that supports you. * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
More information about the thelist
mailing list