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="javas cript" type="text/javascript">
var myVar = document.getEle mentById("siteC ontent").offset Height;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5heigh t {
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


#leftSide5heigh t {
height:50em;
}

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

[Jonathan N. Little]

Re: CSS and Javascript - height issue

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="javas cript" type="text/javascript">
var myVar = document.getEle mentById("siteC ontent").offset Height;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5heigh t {
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 "siteConten t" after the page loads. Then apply the value to
"leftSide5heigh t".

Seems like a bad idea all around.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[Rabel]

Re: CSS and Javascript - height issue

On Aug 4, 6:46 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:

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="javas cript" type="text/javascript">
var myVar = document.getEle mentById("siteC ontent").offset Height;
var nheight = myVar/10-200+'em';
alert('The height is '+myVar+' the new height is '+nheight );
</script>
<style>
#leftSide5heigh t {
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 "siteConten t" after the page loads. Then apply the value to
"leftSide5heigh t".
>
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

#leftSide5heigh t {
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]

Re: CSS and Javascript - height issue


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]

Re: CSS and Javascript - height issue

Rabel schrieb:

On Aug 4, 6:46 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:

>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="javas cript" type="text/javascript">
>>var myVar = document.getEle mentById("siteC ontent").offset Height;
>>var nheight = myVar/10-200+'em';
>>alert('The height is '+myVar+' the new height is '+nheight );
>></script>
>><style>
>>#leftSide5hei ght {
>>height:nheigh t;
>>}
>></style>
>>But it seems that
>>height:nheigh t;
>>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 "siteConten t" after the page loads. Then apply the value to
>"leftSide5heig ht".
>>
>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
>
#leftSide5heigh t {
height:50em;
}
>

THIS is not "Script" - this is inline CSS. It has nothing to do with the
<scriptelemen t 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]

Re: CSS and Javascript - height issue

On Aug 4, 8:40 pm, Bergamot <berga...@visi. comwrote:

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]

Re: CSS and Javascript - height issue

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.getEle mentById('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]

Re: CSS and Javascript - height issue


Rabel wrote:

On Aug 4, 8:40 pm, Bergamot <berga...@visi. comwrote:

>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