Combining JS with CSS

[JackD4ME]

Hi All,
I am trying to get the screen size so that I can make the left and right columns the same as the screen when they are smaller than the screen. I found a small script that can get the screen size but is there anyway to get that variable into the css?

JS:
<SCRIPT>
if (navigator.javaEnabled()) {
var toolkit = java.awt.Toolkit.getDefaultToolkit();
var screen_size = toolkit.getScreenSize();
height = screen_size.height;
}
</SCRIPT>

CSS (in seperate page loaded at top of page)
#rightcol {
width:84%;
height: 600px;
margin-left:16%;
background: url("logo.png") no-repeat fixed center;
}

Thanks,
Jack

 

[Supra]

Hmm. I think you can eliminate your code altogether.

<style>
#rightcol {
   width:84%;
   height:[b]expression("screen.availHeight")[/b];
   margin-left:16%;
   background:url("logo.png") no-repeat fixed center;
}
</style>

 

[Supra]

By the way, I'm pretty sure that will only work in IE.

 

[Supra]

Whoops.. take out the quotes:

<style>
#rightcol {
   width:84%;
   height:[b]expression(screen.availHeight)[/b];
   margin-left:16%;
   background:url("logo.png") no-repeat fixed center;
}
</style>

It's 2AM gimme a break

 

[JackD4ME]

Ok, I am only programming for firefox as it will be proprietary. I tested it in ie but the css is so screwed there I can't tell if it worked. Anyway, no luck in ff.

 

[Supra]

I dunno if FireFox supports it, but test this and let me know:

<style>
#rightcol {
width:84%;
margin-left:16%;
background:url("logo.png") no-repeat fixed center;
background-color:#FF0000;
}
</style>

<script>
function createRule() {
	newRule = document.styleSheets[0].addRule("#rightcol", "height:"+screen.availHeight, 0); 
}
</script>

<div id="rightCol">Hi!</div>

<input type="button" value="Create Rule" onClick="createRule()">