• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 190
  • Last Modified:

Put javascript value in css style

Hi!

I have a three values i want to pass into the css style.

Se bold code...

....
if (WindowWidth>=1681)
  {
      //1920x1200
     swfHeight="66.250";
      swfWidth="93.750";
      swfHalfHeight=swfHeight/2  

  }
else if ((WindowWidth<=1680) && (WindowWidth>=1367))
  {
      //1680x1050
      swfHeight="50";
      swfWidth="70.750";
      swfHalfHeight=swfHeight/2  
  }
.......

Here is the css style

<style type="text/css">
      #distance {
            width:1px;
            height:50%;
            background-color:#cccccc;
            margin-bottom:-25em; /* half of container's height */
            float:left;
            }

      #container {
            margin:0 auto;
            position:relative; /* puts container in front of distance */
            text-align:left;
            height:50em;
            width:70.750em;
            clear:left;
            background-color:#cccccc;
            border:1px solid #000000;
            border-top-color:#000000;
            border-left-color:#000000;
            }

      #container div {
            font-size:80%;
            float:right;
            width:17em;
            margin-left:2em;
            }
</style>
0
myhrvold
Asked:
myhrvold
  • 4
  • 3
  • 2
1 Solution
 
EyalCommented:
is this what you need?

getElementById('distance').style.marginBottom = ?
getElementById('container').style.height = swfHeight;
getElementById('container').style.width = swfWidth;

Open in new window

0
 
myhrvoldAuthor Commented:
Think so... how've do i use it and where do i put it?
0
 
EyalCommented:
right after the if else in the javascript
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
myhrvoldAuthor Commented:
Hi!

I cant get it to work.. What is wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TEST DYNAMIC SWF/DIV</title>
<script type="text/javascript">
<!--
       var WindowWidth;
       var WindowHeight;
       var swfHeight;
       var swfWidth;
       var swfHalfHeight;
      
       // Check window size start
       // ------------------------------------------------------------------------------
       // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
       if (typeof window.innerWidth != 'undefined')
       {
              WindowWidth = window.innerWidth,
              WindowHeight = window.innerHeight
       }
        
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
       else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
       {
               WindowWidth = document.documentElement.clientWidth,
               WindowHeight = document.documentElement.clientHeight
       }
        
       // older versions of IE
       else
       {
               WindowWidth = document.getElementsByTagName('body')[0].clientWidth,
               WindowHeight = document.getElementsByTagName('body')[0].clientHeight
       }
       // ------------------------------------------------------------------------------
       // Check window size end

 
      // Check flash size start
      // ------------------------------------------------------------------------------  
      // give the flash correct size depend on window width..
      if (WindowWidth>=1681)
        {
            //1920x1200
            swfHeight="66.250";
            swfWidth="93.750";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1680) && (WindowWidth>=1367))
        {
            //1680x1050
            swfHeight="50";
            swfWidth="70.750";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1366) && (WindowWidth>=1281))
        {
            //1366x768
            swfHeight="42.375";
            swfWidth="60";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1280) && (WindowWidth>=1025))
        {
            //1280x768
            swfHeight="31.813";
            swfWidth="45";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1024) && (WindowWidth>=801))
        {
            //1024x768
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=800) && (WindowWidth>=481))
        {
            //800x600
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=640) && (WindowWidth>=481))
        {
            //640x480
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      else
        {
            //480 -->
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      // ------------------------------------------------------------------------------    
      // Check flash size end
      
      // Update the css style with given value.
      document.getElementById('distance').style.marginBottom = swfHalfHeight;
      document.getElementById('container').style.height = swfHeight;
      document.sgetElementById('container').style.width = swfWidth;
 //-->
</SCRIPT>

<style type="text/css">
      * {
            margin:0;
            padding:0;
            }

      html, body {
            height:100%;
            }

      body {
            background-color:#cccccc;
            color:#630;
            font:100.01%/1.4 sans-serif;
            text-align:center; /* horizontal centering for IE Win quirks */
            }

      #distance {
            width:1px;
            height:50%;
            background-color:#cccccc;
            margin-bottom:-25em; /* half of container's height */
            float:left;
            }

      #container {
            margin:0 auto;
            position:relative; /* puts container in front of distance */
            text-align:left;
            height:50em;
            width:70.750em;
            clear:left;
            background-color:#cccccc;
            border:1px solid #000000;
            border-top-color:#000000;
            border-left-color:#000000;
            }

      #container div {
            font-size:80%;
            float:right;
            width:17em;
            margin-left:2em;
            }
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>

<script type="text/javascript">
document.write('Vindu høyde er: '+WindowWidth+'<br>');
document.write('Vindu bredde er: '+WindowHeight+'<br>');
document.write('Flash høyde er: '+swfHeight+'<br>');
document.write('Flash bredde er: '+swfWidth+'<br>');
document.write('Flash margin er: '+swfHalfHeight+'<br>');
</script>

      <div id="distance"></div>
      <div id="container">
       Hello!
      </div>

</body>
</html>
0
 
EyalCommented:
well... you try to access the html elements before they are generated after the javascript

try this..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TEST DYNAMIC SWF/DIV</title>
<script type="text/javascript">
<!--

       var WindowWidth;
       var WindowHeight;
       var swfHeight;
       var swfWidth;
       var swfHalfHeight;

window.onload = function{      
       // Check window size start
       // ------------------------------------------------------------------------------
       // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
       if (typeof window.innerWidth != 'undefined')
       {
              WindowWidth = window.innerWidth,
              WindowHeight = window.innerHeight
       }
        
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
       else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
       {
               WindowWidth = document.documentElement.clientWidth,
               WindowHeight = document.documentElement.clientHeight
       }
        
       // older versions of IE
       else
       {
               WindowWidth = document.getElementsByTagName('body')[0].clientWidth,
               WindowHeight = document.getElementsByTagName('body')[0].clientHeight
       }
       // ------------------------------------------------------------------------------
       // Check window size end

 
      // Check flash size start
      // ------------------------------------------------------------------------------  
      // give the flash correct size depend on window width..
      if (WindowWidth>=1681)
        {
            //1920x1200
            swfHeight="66.250";
            swfWidth="93.750";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1680) && (WindowWidth>=1367))
        {
            //1680x1050
            swfHeight="50";
            swfWidth="70.750";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1366) && (WindowWidth>=1281))
        {
            //1366x768
            swfHeight="42.375";
            swfWidth="60";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1280) && (WindowWidth>=1025))
        {
            //1280x768
            swfHeight="31.813";
            swfWidth="45";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=1024) && (WindowWidth>=801))
        {
            //1024x768
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=800) && (WindowWidth>=481))
        {
            //800x600
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      else if ((WindowWidth<=640) && (WindowWidth>=481))
        {
            //640x480
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      else
        {
            //480 -->
            swfHeight="22.063";
            swfWidth="31.250";
            swfHalfHeight=swfHeight/2  
        }
      // ------------------------------------------------------------------------------    
      // Check flash size end
      
      // Update the css style with given value.
      document.getElementById('distance').style.marginBottom = swfHalfHeight;
      document.getElementById('container').style.height = swfHeight;
      document.sgetElementById('container').style.width = swfWidth;

document.write('Vindu høyde er: '+WindowWidth+'<br>');
document.write('Vindu bredde er: '+WindowHeight+'<br>');
document.write('Flash høyde er: '+swfHeight+'<br>');
document.write('Flash bredde er: '+swfWidth+'<br>');
document.write('Flash margin er: '+swfHalfHeight+'<br>');

}
 //-->
</SCRIPT>

<style type="text/css">
      * {
            margin:0;
            padding:0;
            }

      html, body {
            height:100%;
            }

      body {
            background-color:#cccccc;
            color:#630;
            font:100.01%/1.4 sans-serif;
            text-align:center; /* horizontal centering for IE Win quirks */
            }

      #distance {
            width:1px;
            height:50%;
            background-color:#cccccc;
            margin-bottom:-25em; /* half of container's height */
            float:left;
            }

      #container {
            margin:0 auto;
            position:relative; /* puts container in front of distance */
            text-align:left;
            height:50em;
            width:70.750em;
            clear:left;
            background-color:#cccccc;
            border:1px solid #000000;
            border-top-color:#000000;
            border-left-color:#000000;
            }

      #container div {
            font-size:80%;
            float:right;
            width:17em;
            margin-left:2em;
            }
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>


      <div id="distance"></div>
      <div id="container">
       Hello!
      </div>

</body>
</html>

Open in new window

0
 
EyalCommented:
ooops.... missed something

instead of
window.onload = function {
write
window.onload = function () {
0
 
myhrvoldAuthor Commented:
Dont work....
0
 
Immanuel PhillipsUser Interface EngineerCommented:
And a small typo here:

// Update the css style with given value.
document.getElementById('distance').style.marginBottom = swfHalfHeight;
document.getElementById('container').style.height = swfHeight;
document.sgetElementById('container').style.width = swfWidth;

to

// Update the css style with given value.
document.getElementById('distance').style.marginBottom = swfHalfHeight;
document.getElementById('container').style.height = swfHeight;
document.getElementById('container').style.width = swfWidth;
0
 
Immanuel PhillipsUser Interface EngineerCommented:
Here you go.. Eyal just forgot the units (em)..

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

       var WindowWidth;
       var WindowHeight;
       var swfHeight;
       var swfWidth;
       var swfHalfHeight;

window.onload = function() {      
       // Check window size start
       // ------------------------------------------------------------------------------
       // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
       if (typeof window.innerWidth != 'undefined')
       {
              WindowWidth = window.innerWidth,
              WindowHeight = window.innerHeight
       }
        
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
       else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
       {
               WindowWidth = document.documentElement.clientWidth,
               WindowHeight = document.documentElement.clientHeight
       }
        
       // older versions of IE
       else
       {
               WindowWidth = document.getElementsByTagName('body')[0].clientWidth,
               WindowHeight = document.getElementsByTagName('body')[0].clientHeight
       }
       // ------------------------------------------------------------------------------
       // Check window size end

 
      // Check flash size start
      // ------------------------------------------------------------------------------  
      // give the flash correct size depend on window width..
      if (WindowWidth>=1681)
        {
            //1920x1200
            swfHeight = "66.250em";
            swfWidth = "93.750em";
        }
      else if ((WindowWidth<=1680) && (WindowWidth>=1367))
        {
            //1680x1050
            swfHeight = "50em";
            swfWidth = "70.750em";
            
        }
      else if ((WindowWidth<=1366) && (WindowWidth>=1281))
        {
            //1366x768
            swfHeight = "42.375em";
            swfWidth = "60em";
        }
      else if ((WindowWidth<=1280) && (WindowWidth>=1025))
        {
            //1280x768
            swfHeight = "31.813em";
            swfWidth = "45em";
        }
      else if ((WindowWidth<=1024) && (WindowWidth>=801))
        {
            //1024x768
            swfHeight = "22.063em";
            swfWidth = "31.250em";
        }
      else if ((WindowWidth<=800) && (WindowWidth>=640))
        {
            //800x600
            swfHeight = "22.063em";
            swfWidth = "31.250em";
        }
      else if ((WindowWidth<=640) && (WindowWidth>=481))
        {
            //640x480
            swfHeight = "22.063em";
            swfWidth = "31.250em";
        }
      else
        {
            //480 -->
            swfHeight = "22.063em";
            swfWidth = "31.250em";
        }
	
	swfHalfHeight = (parseFloat(swfHeight.substr(0, swfHeight.length - 2)) / 2) + "em";
      // ------------------------------------------------------------------------------    
      // Check flash size end
      
      // Update the css style with given value.
      document.getElementById('distance').style.marginBottom = swfHalfHeight;
      document.getElementById('container').style.height = swfHeight;
      document.getElementById('container').style.width = swfWidth;
}
 //-->
</SCRIPT>

Open in new window

0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now