Javascript with CSS... [Archive]

stmasi

05-28-2003, 11:45 AM

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.

khalidali63

05-28-2003, 11:50 AM

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";
}

stmasi

05-28-2003, 12:14 PM

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.

stmasi

05-28-2003, 12:20 PM

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.

Nevermore

05-28-2003, 12:24 PM

I thought we had already dealt with this in the other thread?

stmasi

05-28-2003, 12:38 PM

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.

:D

khalidali63

05-28-2003, 12:54 PM

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
:D

khalidali63

05-28-2003, 01:00 PM

just realize that,why would you post same topic in 2 forums???

thats rude...

khaki

05-28-2003, 01:10 PM

well...
rude or not...

i've been following this subject through 3 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

stmasi

05-28-2003, 01:14 PM

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.

khalidali63

05-28-2003, 01:19 PM

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+

stmasi

05-28-2003, 01:24 PM

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.

khalidali63

05-28-2003, 01:58 PM

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??

khaki

05-28-2003, 02:05 PM

well...
this really is 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 this!
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

Nevermore

05-28-2003, 02:08 PM

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

stmasi

05-28-2003, 02:08 PM

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.

Nevermore

05-28-2003, 02:24 PM

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

<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>

khaki

05-28-2003, 02:34 PM

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

stmasi

05-28-2003, 02:40 PM

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.

Nevermore

05-28-2003, 02:42 PM

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...

khalidali63

05-28-2003, 03:03 PM

smart solution cijori...

Try this one stmasi...
its close ..I think *_*

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

Nevermore

05-28-2003, 03:08 PM

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

stmasi

05-28-2003, 03:15 PM

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.

Nevermore

05-28-2003, 03:18 PM

Isn't that just because their is a minimum size that you gave?

khalidali63

05-28-2003, 03:24 PM

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..

:D

khaki

05-28-2003, 03:26 PM

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

khalidali63

05-28-2003, 03:29 PM

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

stmasi

05-28-2003, 03:35 PM

Interesting...

I am using IE6.

Take a look...

khaki

05-28-2003, 03:48 PM

as you guys must be aware of the fact that MS has changed the syntax
to get height and width for the IE6 ummm....
yeah... sure.
everybody knows that...
but why don't you remind those people who may have forgotten (or somethin') :rolleyes:

;) k

stmasi

05-28-2003, 04:33 PM

Any other ideas on the mathematical formula needed to compensate for the size of the browser?

Thanx.

stmasi

05-28-2003, 05:17 PM

Anyone?

khalidali63

05-28-2003, 05:24 PM

try it I have fixed the calculation...

stmasi

05-28-2003, 05:36 PM

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!!!

:D

khalidali63

05-28-2003, 05:49 PM

Well....:D

Thank you...;)

EDIT:

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

Nevermore

05-29-2003, 03:45 AM

Nice!

stmasi

06-03-2003, 01:47 PM

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.