JavaScript and dynamic style..

[createmedia123]

Hello,
For days I've been trying to figure out how to move the value of a JavaScript variable into a Style tag value....
In the following example, I'm trying to move the value of the JS variable "panelposition1"... into the "LEFT" value of the Style "panel".

I've tried doing the whole Style area in "document.write"
statements ...but it ignores the whole thing then....

Anyone out there able to help????

<script language="javascript">
var aw = window.screen.availWidth //gets the available width (Available Width)
var cw = aw/2 //divides the width by 2 (Center Width)
var panelposition1 = cw + 60
var righttabpos = cw + 375
var sidetabpos = cw
</script>


<style type="text/css">
.panel{
position: absolute;
top: 150;
left: "javacript variable panelposition1";
width: 315;
z-index: 2;
height: 280;
visibility: hidden;
font: 8pt Verdana,sans-serif;
color: b15523;
border-style: solid;
border-width: 1px;
padding: 0;
overflow: auto;
}
</style>

thanks!
john

 

[Miros]

In place of "javacript variable panelposition1";, you need:

<script language="javascript">
print panelposition1 + ";"
</script>

 

[createmedia123]

Thanks Miros,

It almost worked. But, it goes to the wrong location... Here is the page.

http://65.36.189.174/purchaseDetails.cfm?productID=3

it goes about 50-100 pixels too far to the right...
how it is now.. it should go to LEFT position 650

The code now is :
<script language="javascript">
var aw = window.screen.availWidth //gets the available width (Available Width)
var cw = aw/2 //divides the width by 2 (Center Width)
var panelposition1 = cw + 10 //you need to change the last number to the
var righttabpos = cw + 375 //you need to change the last number to the
var sidetabpos = cw
document.write(panelposition1)
</script>



.panel{
position: absolute;
top: 150;
width: 315;
z-index: 2;
height: 280;
visibility: hidden;
font: 8pt Verdana,sans-serif;
color: b15523;
border-style: solid;
border-width: 1px;
padding: 0;
overflow: auto;
left: <script language="javascript">print panelposition1 + ";"</script>
}

I have a document.write statement to see what the variable value is... and it shows up in the top left hand corner as 650.... but it over too much now...

It's closer than I've been
John

 

[createmedia123]

Hi Miros,

Do you know if there is a way to set the LEFT paramater of the "panel" style manually after the STYLE sheet is set.. It doesn't seem to like setting it dynamically with Javascript in the STYLE code...

Something like : (have no idea what the right code is...but)


<style type="text/css">
.panel{
position: absolute;
top: 150;
width: 315;
z-index: 2;
height: 280;
visibility: hidden;
font: 8pt Verdana,sans-serif;
color: b15523;
border-style: solid;
border-width: 1px;
padding: 0;
overflow: auto;
margin: 0px !important;
}
</style>



<script language=javascript>
document.style.panel.left = panelposition1;
<script>


I know the code is probably really wrong...
but just an thought..

thanks for you help and time..
john

 

[Miros]

Well, you're past my expertise... I can tell you what's wrong with your JScript, but not your CSS!

Is there a CSS forum, now that you know your JScript is right?