[thelist] Re-defining CSS via Javascript
Matthew Bernhardt
bernhardt.7 at osu.edu
Mon Feb 19 08:44:38 CST 2007
Hello all,
In response to my original question:
>> 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?
Christian Heilmann <codepo8 at gmail.com> wrote:
> Generally you can change the z-index of an element with the style
> property. Say if your element has the ID "main" it'll be:
>
> var obj = document.getElementById('main');
> obj.style.zIndex = 100;
>
> You can read the window size of the browser with window.innerWidth.
>
> These examples should get you on the way:
> http://beginningjavascript.com/Chapter5/index.html
>
> Easiest would be a demo URL though.
Thanks! I'll definitely check out the link (and the book). After I sent
the original message, I kept mucking about and got the following test case
to behave generally how I wanted:
http://morphosis7.byethost12.com/sandbox/switchymatt.php
I ended up defining three different classes for each of the divs on the
page (banner, menu, and content) - and the javascript re-assigns classes
to each element based on the page width. This actually works out a bit
better than simply changing the z-index as I can change the positioning of
the content block to prevent side-scrolling.
Of course, I welcome feedback on this technique - I'd like to integrate
this into this (currently development) site sometime this week:
http://benedikt.knowlton.ohio-state.edu
I'd solicited feedback about this site here a week or so ago, and have
been working my way through the feedback received. Many thanks to everyone
who contacted me.
Thanks,
Matt
--
Matt Bernhardt, bernhardt.7 at osu.edu
Webmaster + Fab Lab Coordinator
Knowlton School of Architecture
The Ohio State University
More information about the thelist
mailing list