Putting styles in external CSS file causes JS not work.

[jasonc]

hopefully this is what I need to fix a problem with my code too.

 

I have a JS that resizes a few div widths on my page but when i also have the styles in a seperate file the JS does not work.

 

this is my original code that works when i use the following line in my html.

 

function Div(id,hw,ud) {
					var div=document.getElementById(id);
					 if (hw == "h"){
									 var h=parseInt(div.style.height)+ud;
										 if (h>=150){
										  div.style.height = h + "px";
										  //alert(hw + h);
										 }
						 } else if (hw == "w"){
												 var w=parseInt(div.style.width)+ud;
														 if (w>=150){
	  div.style.width = w + "px";
		  var inputdiv=document.getElementById('txt_message');
		  var inputw=parseInt(inputdiv.style.width)+ud;
		  inputdiv.style.width = inputw + "px";
	 }
}
					var chat_div = document.getElementById('div_chat');
					chat_div.scrollTop = chat_div.scrollHeight;
					}

 

<div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div>

 

if i was to use the following instead

<div id="div_chat"></div>

with

#div_chat { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; }

 

in my CSS file then the JS is fired (i added an alert() to my code to check this) but the widths are not changed.

 

what changes should i make to my codes to make this work so i can have the styles in my CSS file instead of the main HTML file.

 

 

 

edit:  just thought you may need this part too so you can see what the call looks like.

 

<div>
resize chat log <img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);" alt="height +"> 
<img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);" alt="height -">  
<img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);" alt="width +"> 
<img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);" alt="height -">
</div>

 

 

 

further edit: i have just tried the following JS but this time i get the following error...

 

Webpage error details

 

Message: Invalid procedure call or argument

 

on the following line

 

div.currentStyle["width"] = w + "px";

[DaiLaughing]

The Javascript is looking at in-line styles.  You need to access the stylesheet which I believe you do like this:

 

document.styleSheets[0]