Javascript with CSS…

@stmasiMay 28.2003

Is there any way to use javascript (or any way at all) to set the size of a CSS box with a formula?

Example:

#theTop {
background-color: #ffffff;
border-style: none;
color: #000000;
font-family: arial, helvetica, sans-serif, verdana;
font-size: 8px;
font-style: normal;
height: [(window.availHeight-150)*100%];
margin: 0px;
position: relative;
text-align: center;
width: 700;
}

Thanx.

to post a comment

JavaScript

35 Comments(s) _↴

@khalidali63May 28.2003 — #nope,

what you can do is use th eonload event of the body tag

something like this

<body onload="init()"

and in the javascript init() function set the required width,height,left,top value for the div.

function init(){

var obj = document.getElementById("theTop");

obj.style.height=(window.availHeight-150)*100)+"px";

}

@stmasiauthorMay 28.2003 — #I copied it verbatim and changed div name appropriately, but still getting an error with the javascript.

Run-time error...error: expected ;.

Any ideas?

Thanx.

[upl-file uuid=af69b09b-c532-4ce2-9f62-27014638a337 size=1kB]test.zip[/upl-file]

@stmasiauthorMay 28.2003 — #Found the problem...missing parenthesis.

However, now that there are no errors...the box is not resizing and the bottom box isn't even showing up.

Bummer.

@NevermoreMay 28.2003 — #I thought we had already dealt with this in the other thread?

@stmasiauthorMay 28.2003 — #Sorry, we were, but it didn't work.

I didn't get a response, so I decided to move it over to the javascript forum.

Forgive the newbie.

?

@khalidali63May 28.2003 — #I think I know the problem,since I know my suggestion works..:p

use the following syntax

window.screen.availHeight

and you will be a happy person as well we all

?

@khalidali63May 28.2003 — #just realize that,why would you post same topic in 2 forums???

thats rude...

@khakiMay 28.2003 — #well...

rude or not...

i've been following this subject through [SIZE=4]3[/SIZE] threads now....

so stmasi...

can you please keep us informed as to how these suggestions are working?

can you please provide the code that finally gets it working?

thanks...

? k

@stmasiauthorMay 28.2003 — #Sorry.

Keep switching because different aspects of the code are relating to different forums...HTML...JAVASCRIPT...CSS.

I've received a whole lot of help from several people, but still have yet to get this darn thing working.

I think I'm going to give up and just go back to tables...I'll end up with much more hair on my head at the end.

Thanx for all the help.

@khalidali63May 28.2003 — #this is strange,,,didn't my suggestion work for you?,,,,cus it works for me and I am 100% positive it will work for all other people..:-)

here is the file you uploaded and I have it working..unless if there is something else that you have not mentioned..

http://68.145.35.86/temp/stmasi/test/default.html

Its tested on NS6+,IE6+, opera 7+

@stmasiauthorMay 28.2003 — #When I load that page into my browser, the green box stretches downward almost forever (probably 10,000 px or so) and that's not what I'm looking for.

I need it to stop at the bottom of the browser window.

Thanx.

@khalidali63May 28.2003 — #geee.....thats how you have it there..though.

remember -150 *100...

???

ok..let finnish this...

is it possible for you to please explain what are the heights you want assign to those divs...onload??

@khakiMay 28.2003 — #well...

this really [I]is[/I] a bummer ?

all I know is this: the next time I hear ANYONE in this forum make the statement that tables should not be used for layout....

I will ask them to provide the solution for [I]this[/I]!

and if they can't....

then they should probably stop making that statement.

(but in reality... I really really want a CSS solution for this :rolleyes: )

bumming....

? k

@NevermoreMay 28.2003 — #What is he trying to solve at the moment. (So many threads... can't keep track...)

@stmasiauthorMay 28.2003 — #Here's exactly what I am looking for:

----------
div a: 600px wide by 100px high

div b: 600px wide by 20px high

div c: 100% of remaining visible browser height after subtracting area used by div a, div b, and div d

div d: 600px wide by 20px high
----------

It's so simple with tables, I just don't see why it has to be so difficult with CSS.

Thanx again.

@NevermoreMay 28.2003 — #This works fine for me in IE6, Mozilla 1.3 and Netscape Navigator 7, although it doesn't work in NN 4.7. It is entirely CSS based, no JavaScript.

This is the code, it is also online at http://www.evernet.co.uk/examples/flowingdiv.htm

[CODE]
 <div style="border:1px solid black; height:600px; height:100%; width:600px; position:relative;">
 <div style="height:100px; width:600px; border-bottom:1px solid black;">Div 1: 100 high, 600 wide</div>
 <div style="height:20px; width:600px; border-bottom:1px solid black;">Div 2: 20 high, 600 wide</div>
 Div 3: 100% of remaining height, 600 wide.
 <div style="height:20px; width:600px; border-top:1px solid black; position:absolute; bottom:0px; left:0px;">Div 4: 20 high, 600 wide</div>
 </div>[/CODE]

@khakiMay 28.2003 — #you won't get lost of you stick with me cijori....

i'm on this topic like glue! ? lol

actually it's kinda back to square 1

(the "solution" in the other thread actually does not work when

the content of div c exceeds the cumulative height of divs a, b, and d).

****
oh...

I see that you responded while I was typing this.

okay... but...

did you check that code with content that stretches div c?

it worked for me too... but not when the content exceeds the

remaining allowable space (then it blew-up!)

try it again with a lot of content in div c and let me know if it is still

working for you.

thanks....

? k

@stmasiauthorMay 28.2003 — #Okay.

That one looks great!

Now, the way I want to do this would require the contents of the "flowing" div to change dynamically.

Is this going to interfere with the other divs contained within?

Thanx.

@NevermoreMay 28.2003 — #As Khaki says, at the moment if their is too much content then it doesn't work. I think I may have a solution, though...

@khalidali63May 28.2003 — #smart solution cijori...

Try this one stmasi...

its close ..I think *_*

http://68.145.35.86/temp/stmasi/test/default.html

@NevermoreMay 28.2003 — #Great script. I was on my way to something like that. You're just too durn fast!

@stmasiauthorMay 28.2003 — #That is REALLY close to perfect there, guyz.

Only one little problem...

As I shrink the browser window down from top to bottom, the formula isn't figuring the viewable browser window size properly. After a certain point, the content is down beyond the bottom border of the screen. I'm trying to avoid vertical scrolling at all costs.

Thanx again.

@NevermoreMay 28.2003 — #Isn't that just because their is a minimum size that you gave?

@khalidali63May 28.2003 — #Thanks cijori,

Hey stmasi,

I think It could be doen even better,but I guess given the time I could spend o one issue thats about it..

?

@khakiMay 28.2003 — #uh-oh...

why do i feel like the kid at the party who keeps popping all of the balloons :rolleyes:

i checked the link that Khalid provided and got 3 different looking pages

(IE5.0, N7, Opera6.02)

it only really works on N7... although it causes a vertical scroll (a small one).

what browser are you guys testing on?

? k

@khalidali63May 28.2003 — #lol..the page will no work in les then IE6 browsers unless its code is updated...

as you guys must be aware of the fact that MS has changed the syntax to get height and width for the IE6

I tested it in

NS6+,

IE6+

Opera7+

:p

@stmasiauthorMay 28.2003 — #Interesting...

I am using IE6.

Take a look...

[upl-file uuid=7542ed45-f496-42ae-98dd-063d56463c2b size=11kB]ie.zip[/upl-file]

@khakiMay 28.2003 — #as you guys must be aware of the fact that MS has changed the syntax

to get height and width for the IE6[/QUOTE] ummm....

yeah... sure.

everybody knows [I]that[/I]...

but why don't you remind those people who may have forgotten (or somethin') :rolleyes:

? k

@stmasiauthorMay 28.2003 — #Any other ideas on the mathematical formula needed to compensate for the size of the browser?

Thanx.

@stmasiauthorMay 28.2003 — #Anyone?

@khalidali63May 28.2003 — #try it I have fixed the calculation...

@stmasiauthorMay 28.2003 — #YYYYYYYYYYYYYYEEEEEEEEEEEEEESSSSSSSSSSSSSSSS!!!!!!

THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!! THANK YOU!!!

YOU ARE THE BEST!!!

?

@khalidali63May 28.2003 — #Well....?

Thank you...?

[b]EDIT:[/b]

Hey K, this time I did put IE<6 code as well...

@NevermoreMay 29.2003 — #Nice!

@stmasiauthorJun 03.2003 — #Hey khalidali63,

I got to experimenting with that code you sent and I noticed something.

When displayed in IE, the code takes into consideration the top, bottom, left, and right margins set in the style sheet.

However, when displayed in O or NS, the code ignores the bottom margin and flushes the data with the bottom of the screen.

Is there any way around this? Can we force O and NS to account for the bottom border in the style sheet?

Thanx.

Also in #JavaScript _↴

yahtzee but not yahtzee cookie Please help...menu code

Success!

Help @stmasi spread the word by sharing this article on Twitter...

Tweet This

Javascript with CSS…

35 Comments(s) _↴

div d: 600px wide by 20px high
----------

Also in #JavaScript _↴

Success!

Social

Version

Javascript with CSS…

35 Comments(s) ↴

div d: 600px wide by 20px high ----------

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

35 Comments(s) _↴

div d: 600px wide by 20px high
----------

Also in #JavaScript _↴