Page 1 of 2

Javascript dependancy

Posted: Fri Sep 08, 2006 4:04 pm
by alex.barylski
In a web application (which are typically centered at vertical markets) would you favour valid XHTML/CSS driven layouts which required Javascript to *render* properly in every browser?

Or would your prefer an HTML table layout which didn't depend on any javascript to render correctly but utilized excessive tables...

Remember I said web applications...not web sites...web sites which are more content heavy than functionality and also have a much wider potential audience it might make sense to limit interactivity in the sense of depending on javascript to properly render display...

I'm getting the feeling that eventually CSS will deprecate all HTML which would be better justifed in javascript...

Posted: Fri Sep 08, 2006 4:22 pm
by feyd
Neither.

Posted: Fri Sep 08, 2006 4:25 pm
by Luke
I would have chosen neither too... but it wasn't a choice.

Posted: Fri Sep 08, 2006 4:46 pm
by timvw
I choose the other site with valid markup and without the javascript/active-x/flash/... requirements.. (Notice that there used to be a time that the html recommandation mentionned the table tag suitable for 'complex content'. So from that POV you can consider it as valid markup)

Since it's highly unlikely that you have a monopoly on your services/products i'm convinced that i can get what i want from a vendor that doesn't make me jump hoops...

Posted: Fri Sep 08, 2006 4:46 pm
by alex.barylski
What do you mean by neither...???

Posted: Fri Sep 08, 2006 4:49 pm
by Luke
Hockey wrote:What do you mean by neither...???
How about a non-table layout that just uses css??

Posted: Fri Sep 08, 2006 4:51 pm
by alex.barylski
timvw wrote:I choose the other site with valid markup and without the javascript/active-x/flash/... requirements.. (Notice that there used to be a time that the html recommandation mentionned the table tag suitable for 'complex content'. So from that POV you can consider it as valid markup)

Since it's highly unlikely that you have a monopoly on your services/products i'm convinced that i can get what i want from a vendor that doesn't make me jump hoops...
How is making javascript mandatory making you jump through hoops?

The way I see it...it's like this...advanced UI either require complex table nesting to get the layout just right...and make it work cross browser...

Or you can try and use CSS and struggle with it's downfalls...and have a less than desireable layout...

And/OR you can add some layout javascript code to the CSS mix and correct CSS short comings, such as DIV heights consuming the entire visible screen area...

If you think you can tackle any design/layout using strictly CSS and make it cross browser...

Can you please PM me...as I really would like to use CSS only, but I don't think it's possible given my design requirements, etc.

Posted: Fri Sep 08, 2006 4:55 pm
by feyd
Or you could just build it "correctly" and not need pixel level accuracy. That's so 2000 :P

Javascript is a usability nightmare. I can't think of a single instance where requiring it can be justified. Helpful, sure, but not required. Graceful upgrade.

Posted: Fri Sep 08, 2006 4:59 pm
by Luke
yea I'm with feyd on this one too... (kinda seems to be a trend :lol: )

I am building a site that completely revolves around the Google maps API, so it is javascript-o-licious... but it doesn't require javascript for layout. Looks great... 100% css/div layout no tables. The only time I can justify javascript being mandatory is when your application would be pointless w/out it.

Posted: Fri Sep 08, 2006 5:06 pm
by feyd
The Ninja Space Goat wrote:The only time I can justify javascript being mandatory is when your application would be pointless w/out it.
I would say that application needs a better design (or better programmer) then.

Posted: Fri Sep 08, 2006 5:30 pm
by Luke
feyd wrote:
The Ninja Space Goat wrote:The only time I can justify javascript being mandatory is when your application would be pointless w/out it.
I would say that application needs a better design (or better programmer) then.
I was referring to the application I am building... which is completely reliant on javascript because google maps is built with javascript... not much I can really do about that... :?

Posted: Fri Sep 08, 2006 5:32 pm
by alex.barylski
I have a layout, which uses FRAMES

Code: Select all

------------------------------------------
| Frame A                                |
|----------------------------------------|
|           |                            |
|           |                            |
|           |                            |
|   Frame   |           Frame C          |
|     B     |                            |
|           |                            |
|           |                            |
|           |                            |
------------------------------------------
I have reasons to use frames...it's for a web application not a web site...so SEO isn't important.

If you have ever worked with Outlook, this layout will look familiar.

Frame B will look something like:

Code: Select all

|-------------------------|
| My Projects: Test1 [^]  |
|-------------------------|
| - Home                  |
|  + Some Item            |
|  + Someother Items      |
|  - Show Child Items     |
|   + Some more Items     |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
|  Tab 1 | Tab 2 | Tab 3  |
---------------------------
God that was annoying typing out...I should have just done it in my editor and pasted :P ah well

Anyways, you can see the FRAME B is a tree control, similar to that found in many Windows programs...

The tabs at the bottom *MUST* be aligned with the bottom of the screen or it's parent and it's parent must be the height of it's parent, etc...

The tabs are aligned at the bottom for aesthetics only, but this cannot be accomplished through CSS alone as I have tried and tried to set the height using height: 100% and DIV's only seem to take the height of their content or their container height, but there is no way of making the ROOT element 100% the visible screen height, etc...that I could figure out anyways...

In 2 column designs or 3, etc...using CSS this is a common problem faced by many designers...as for aesthetics it looks nicer to have the entire column appear to render from top to bottom...but this cannot be done using strictly CSS

So many designers use a technique called faux columns where they use a background image and repeat it along the BODY of an HTML document...great for fixed columns....but i'm using FRAMES (for another technical reason) and therefore my columns aren't fixed...they're dynamic in width...

That and the fact that the TABS at the bottom of the CSS *should* be aligned to the bottom of the parent element...

If Javascript is disabled...those tabs are still visible and functional...but they kill the design if the tree is empty...and because I am using FRAMES...only the tree view section of the Frame B should be visible...the project drop down box should not be included in that scrolling window...so I need to be able to calculate the the height of the tree control and set display: scroll or something...

Anyways...I'm sure you get my point of what I am trying to do...

I would be super happy if someone showed me how I was wrong...or my design was flawed...but I don't think what I am trying to do is possible in CSS...without a mixture of javascript candy :)

Anyone???

Posted: Fri Sep 08, 2006 5:45 pm
by Luke
have you tried:

Code: Select all

html, body{
    height: 100%;
}
#your_box{
    height: 100%;
}

Posted: Fri Sep 08, 2006 6:06 pm
by alex.barylski
Edit: I'm back already... :P that didn't work either...I'm convinced this is a case of required javascript. As i'm not willing to sacrifice interface for the sake of least common denominator. I like fancy GUI's...I think most people have JS enabled...and I would prefer an interface which gave me enhanced usability/efficiency over again...the LCD :P

Unless this is possible in CSS...I'm afraid JS *with* CSS is required to have a proper display...it'll still work, just won't look as good I guess.
The Ninja Space Goat wrote:have you tried:

Code: Select all

html, body{
    height: 100%;
}
#your_box{
    height: 100%;
}
no sir I haven't but I will...so far only IE makes the DIV consume entire document height...which is a PITA...but i'll try setting HTML height to 100% and see what happens

Posted: Sat Sep 09, 2006 1:34 am
by DrTom
so like I'm probably just misunderstanding what you're looking for,
but how does

Code: Select all

<div id="left" style="position: absolute; top 0%; left: 0%; width: 100%; height: 100%; background-color: #ff0000;">
    Thing
    <div id="bottom_of_left" style="position: absolute; top: 95%; left: 0%; width: 100%; height: 5%; background-color: #696969;">
      Bottom
     </div>
</div>
not work?