[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