Tuxedo
8/19/2015 2:51:00 PM
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