CSS and Javascript - height issue

[Rabel]

I am having trouble getting an image in my design to stretch correctly
with the main content. Here is a link

http://creativeness.com/temptest/test9.html

Now the image on the left below the navigation (the one that is 65
pixels tall) I want to strech from the bottom of the one image to the
top of the bottom menu. Like on this page

http://creativeness.com/temptest/test10.html

On that page I am trying to use this javascript code

<script language="javascript" type="text/javascript">
var myVar = document.getElementById("siteContent").offsetHeigh t;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5height {
height:nheight;
}
</style>

But it seems that
height:nheight;
isnt the correct way to pass the variable that i determine because it
works if I put a number in there like this
#leftSide5height {
height:50em;
}

Any ideas how to get the correct number and pass the variable? Thanks
for your help.

[Jonathan N. Little]

Rabel wrote:

I am having trouble getting an image in my design to stretch correctly
with the main content. Here is a link

http://creativeness.com/temptest/test9.html

Now the image on the left below the navigation (the one that is 65
pixels tall) I want to strech from the bottom of the one image to the
top of the bottom menu. Like on this page

http://creativeness.com/temptest/test10.html

On that page I am trying to use this javascript code

<script language="javascript" type="text/javascript">
var myVar = document.getElementById("siteContent").offsetHeigh t;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5height {
height:nheight;
}
</style>

But it seems that
height:nheight;
isnt the correct way to pass the variable that i determine because it
works if I put a number in there like this

Of course not. The JavaScript var "nheight" is not automatically
expanded with HTML! You would have to have a script run on the
document's onload event, probably with a delay setTimeout to get the
value of "siteContent" after the page loads. Then apply the value to
"leftSide5height".

Seems like a bad idea all around.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Rabel]

On Aug 4, 6:46 pm, "Jonathan N. Little" <[e-mail]:

Rabel wrote:

I am having trouble getting an image in my design to stretch correctly
with the main content. Here is a link

http://creativeness.com/temptest/test9.html

Now the image on the left below the navigation (the one that is 65
pixels tall) I want to strech from the bottom of the one image to the
top of the bottom menu. Like on this page

http://creativeness.com/temptest/test10.html

On that page I am trying to use this javascript code

<script language="javascript" type="text/javascript">
var myVar = document.getElementById("siteContent").offsetHeigh t;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5height {
height:nheight;
}
</style>

But it seems that
height:nheight;
isnt the correct way to pass the variable that i determine because it
works if I put a number in there like this

Of course not. The JavaScript var "nheight" is not automatically
expanded with HTML! You would have to have a script run on the
document's onload event, probably with a delay setTimeout to get the
value of "siteContent" after the page loads. Then apply the value to
"leftSide5height".

Seems like a bad idea all around.

Thanks Jonathan,
The script is run after the main content and before the leftSide5 is
called and like I said it works fine if you change that code to

#leftSide5height {
height:50em;
}

so Im not sure if i need to move it or not, but either way I still
dont know how to pass the nheight variable to the height attribute.
Any ideas?

[Bergamot]

Rabel wrote:

>
http://creativeness.com/temptest/test9.html

Now the image on the left below the navigation (the one that is 65
pixels tall) I want to strech from the bottom of the one image to the
top of the bottom menu. Like on this page

http://creativeness.com/temptest/test10.html

Why do you need to stretch it at all? Why not just use that 65px tall
graphic as a repeating background image down the left side of the
container? You can still get the white spaces between elements over
there by using background and/or border properties.

--
Berg

[Christian Kirsch]

Rabel schrieb:

On Aug 4, 6:46 pm, "Jonathan N. Little" <[e-mail]:

>Rabel wrote:

>>I am having trouble getting an image in my design to stretch correctly
with the main content. Here is a link
http://creativeness.com/temptest/test9.html
Now the image on the left below the navigation (the one that is 65
pixels tall) I want to strech from the bottom of the one image to the
top of the bottom menu. Like on this page
http://creativeness.com/temptest/test10.html
On that page I am trying to use this javascript code
<script language="javascript" type="text/javascript">
var myVar = document.getElementById("siteContent").offsetHeigh t;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5height {
height:nheight;
}
</style>
But it seems that
height:nheight;
isnt the correct way to pass the variable that i determine because it
works if I put a number in there like this

Of course not. The JavaScript var "nheight" is not automatically
expanded with HTML! You would have to have a script run on the
document's onload event, probably with a delay setTimeout to get the
value of "siteContent" after the page loads. Then apply the value to
"leftSide5height".

Seems like a bad idea all around.

Thanks Jonathan,
The script is run after the main content and before the leftSide5 is
called and like I said it works fine if you change that code to

#leftSide5height {
height:50em;
}

THIS is not "Script" - this is inline CSS. It has nothing to do with the
<scriptelement preceding it. You can use JS to set style attributes
but you can't access JS variables or other code from CSS.

so Im not sure if i need to move it or not, but either way I still
dont know how to pass the nheight variable to the height attribute.
Any ideas?

If you use JS to determine the height, why not use JS to *set* it as well?

And please bear in mind that all of that won't work if the user has
turned JS off.

[Rabel]

On Aug 4, 8:40 pm, Bergamot <[e-mail]:

Why do you need to stretch it at all? Why not just use that 65px tall
graphic as a repeating background image down the left side of the
container? You can still get the white spaces between elements over
there by using background and/or border properties.

Thanks Berg,
Using a repeating background would be fine but I dont know how to tell
it the height of the element.

Christian,
"If you use JS to determine the height, why not use JS to *set* it as
well? "

I just dont know how to "set" this height I thought this would work

height:nheight;

Do you know how I would set the height?

Thanks Guys I really appreciate the help.

[Christian Kirsch]

Rabel schrieb:

"If you use JS to determine the height, why not use JS to *set* it as
well? "

I just dont know how to "set" this height I thought this would work.

I suggest that you read some elementary text on DOM scripting. What's
the point to use JS if you don't know what your can do with it?

document.getElementById('id').style.height= nheight+'px';

is *one* possibility to achieve what you want. It still only works when
the user has JS turned on.

And maybe you should be a bit more specific in your responses - replying
to two different posts in the same text is not very sensible.

[Bergamot]

Rabel wrote:

On Aug 4, 8:40 pm, Bergamot <[e-mail]:

>Why do you need to stretch it at all? Why not just use that 65px tall
graphic as a repeating background image down the left side of the
container?

Using a repeating background would be fine but I dont know how to tell
it the height of the element.

You shouldn't need to set any explicit height. The container should size
itself according to the content, unless you've done something silly like
absolutely position everything.

--
Berg