PDA

View Full Version : Defining variables in CSS



nathanelmori
Apr 25th, 2010, 11:14 PM
Suppose I have this line:


width: 864px;

What if I want to use a javascript variable instead of "864"? I've tried this for hours and couldn't find a way to do it.

Please help!

BIOSTALL
Apr 25th, 2010, 11:54 PM
Hi nathanelmori. FYI, you can't set variables in a CSS file. To do what you are after you would have to do something like so (simplified):


<html>
<head>

<style type="text/css">
#container { width:864px; }
</style>

<script type="text/javascript">
function changeWidth() {
document.getElementById('container').style.width = '800px'; // where 800 is your javascript variable
}
</script>

</head>
<body onload="changeWidth">
<div id="container"></div>
</body>
</html>Let me know if you have any questions about the above.

mbaker
Apr 25th, 2010, 11:54 PM
You can't use Javascript in CSS, but you can use Javascript to write CSS.

I've not done this before, but the following appears to do what you want. or at least close to what you want.

If you want to use this across several pages on a site, you could put the javascript in an external file.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>CSS Javascript Width</title>
<script type="text/javascript">
var width = "864px";
document.write("<style type='text/css'> #content { width:" + width + "; margin:0 auto; background:yellow;} <\/style>");
</script>
</head>
<body>
<div id="content">
<h1>CSS Javascript Width</h1>
<p>The width of this content is set using Javascript.</p>
</div>
</body>
</html>

nathanelmori
Apr 26th, 2010, 12:39 AM
Thanks, guys!

You've been helpful.

bazz
Apr 26th, 2010, 04:13 AM
what if someone has JS disabled? Not only is it bad practice to make nav menus rely on JS but, in this case, the layout won't even be correct because the page won't know what you JS variable is.

best I would suggest, either to hard code the width in your css or, make your css server-side so it is always there, irrespective of users JS settings.

bazz

fletcherkasmer
Jun 20th, 2010, 05:12 PM
Hi, thanks for the help here, but I'm failing to get this code to interact with the other code I'm using. Basically, I have a script, something along these lines:

function getWindowWidth() {
var windowWidth = 0;
if (typeof(window.innerWidth) == 'number') {
windowWidth = window.innerWidth;
}
else {
if (document.documentElement && document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
}
else {
if (document.body && document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
}
return windowWidth;
}

And I want to apply the variable windowWidth to the width of a table cell, which has a unique ID selector. I tried the method included in this forum, where I run the scripts in the head which modify the style attribute, but that doesn't work. The only thing I've been able to achieve with the above script is to throw in a document.write (windowWidth) to get it to print the width in the cell, but that doesn't do any of us any good. As you have probably garnered by now by my jumbling of terminology, I have almost no experience with any of this. Any thoughts?

Keleth
Jun 20th, 2010, 06:34 PM
Another way of doing it, is if you want to edit the css based on the pages, you can make a css file with PHP (thus letting you use PHP variables).