Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28541

Apply a CSS block onresize?

Show all headers | View raw

Hello,

I'm not sure what conventions exist but I would like to apply a set of CSS 
rules to an HTML object when resizing the window. First there are one of 
two display styles that take effect on a div depending on the document's 
scroll width:

#menu_small{
border: solid red 1px;
/* and many more properties */
}

#menu_big{
border: solid green 1px;
/* and many more properties */
}

<body onresize="change_display()">

<script>
if(d.body.scrollWidth < 800){
d.write('<div id="menu_small">');
}
else{
d.write('<div id="menu_big">');
}
</script>

<h2>My big or small menu</h2>
<li><a href="#">Item 1</li>
<li><a href="#">Item 2</li>
etc.

<script>
d.write('</div>');
</script>

This works while the page loads, since the browser should know its scroll 
width before it's finished fully loading.

To make the alternate set of style properties take effect also when 
resizing the window, I can run a function onresize modifying the styles 
that exist in the div by collecting and resetting all individual style 
properties via for example getElementByTagName('a') in a loop as well as 
other more specific ID elements within the block by getElementById('...');

Is there a shorter and better way such as dynamically switching the ID of 
the html object along with the set of styles found in its corresponding and 
just changed CSS block? For example, is it possible to call a function 
onresize to do somethng as follows?:

function change_display(){
if(d.body.scrollWidth < 800){

/* If div ID is not already 'menu_small', switch the HTML div ID to 
'menu_small' and apply all properties found within that CSS block */

}
else{

/* If div ID is not already 'menu_big', switch the HTML div ID to 
'menu_big' and apply all properties found within that CSS block */

}

Many thanks for any tips!

Tuxedo

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Apply a CSS block onresize? Tuxedo <tuxedo@mailinator.com> - 2015-08-19 16:51 +0200
  Re: Apply a CSS block onresize? Martin Honnen <mahotrash@yahoo.de> - 2015-08-19 17:38 +0200
    Re: Apply a CSS block onresize? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-19 18:52 +0200
      Re: Apply a CSS block onresize? Tuxedo <tuxedo@mailinator.com> - 2015-08-19 22:17 +0200

csiph-web