Monday, February 26, 2024
 Popular · Latest · Hot · Upcoming
92
rated 0 times [  97] [ 5]  / answers: 1 / hits: 17085  / 13 Years ago, thu, march 24, 2011, 12:00:00

Possible Duplicate:

Avoiding repeated constants in CSS






I have a javascript file that I am using to obtain the width and height of the viewport to adjust my site's resolution. I can get these values with javascript, but I don't really know where to go from here. I'd like to send the values to my CSS variables but I have not found a way to do this quickly. Is it possible? Here is my JS code:



<script type=text/javascript>
<!--

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}


else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}


else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>


For the CSS I was hoping to get away with something quick and easy but its not working:



@variables{
ViewWidth:'+viewportwidth+';}

@variables{
ViewHeight:'+viewportheight+';}

html{
max-width: var(ViewWidth);
max-height: var(ViewHeight);}


I am assuming that I have the incorrect syntax within the variable declarations. I wrote it that way to show that I am trying to get the variable value from JS and pass it to CSS.


More From » css

 Answers
20

I think you're looking for something similar to this:



var parentElement = document.documentElement || document.body;
parentElement.style.maxWidth = parentElement.clientWidth + 'px';
parentElement.style.maxHeight = parentElement.clientHeight + 'px';

[#93087] Wednesday, March 23, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yesseniadajab

Total Points: 258
Total Questions: 101
Total Answers: 127

Location: Mexico
Member since Mon, Sep 12, 2022
1 Year ago
;