Connecting Tech Pros Worldwide Help | Site Map

CSS and Javascript - height issue

 
LinkBack Thread Tools Search this Thread
  #1  
Old August 4th, 2008, 07:45 PM
Rabel
Guest
 
Posts: n/a
Default CSS and Javascript - height issue

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.

  #2  
Old August 4th, 2008, 10:55 PM
Jonathan N. Little
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue

Rabel wrote:
Quote:
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
  #3  
Old August 4th, 2008, 11:05 PM
Rabel
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue

On Aug 4, 6:46 pm, "Jonathan N. Little" <lws4...@central.netwrote:
Quote:
Rabel wrote:
Quote:
I am having trouble getting an image in my design to stretch correctly
with the main content. Here is a link
>>
Quote:
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
>>
Quote:
On that page I am trying to use this javascript code
>
Quote:
<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>
>
Quote:
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?
  #4  
Old August 5th, 2008, 12:45 AM
Bergamot
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue


Rabel wrote:
Quote:
>
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
  #5  
Old August 5th, 2008, 07:55 AM
Christian Kirsch
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue

Rabel schrieb:
Quote:
On Aug 4, 6:46 pm, "Jonathan N. Little" <lws4...@central.netwrote:
Quote:
>Rabel wrote:
Quote:
>>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.
Quote:
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.
  #6  
Old August 5th, 2008, 06:05 PM
Rabel
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue

On Aug 4, 8:40 pm, Bergamot <berga...@visi.comwrote:
Quote:
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.
  #7  
Old August 6th, 2008, 07:45 AM
Christian Kirsch
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue

Rabel schrieb:
Quote:
"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.
  #8  
Old August 7th, 2008, 12:05 AM
Bergamot
Guest
 
Posts: n/a
Default Re: CSS and Javascript - height issue


Rabel wrote:
Quote:
On Aug 4, 8:40 pm, Bergamot <berga...@visi.comwrote:
Quote:
>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
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.