Richard Herrera wrote:
>[...]I think you're being too paranoid. Javascript for presentation is one
>of the most unobtrusive things you can do with the language. And I
>hardly think the tiny bit of JS required even qualifies as "bandwidth".
>
>Unless you're talking about a specific solution. A quickie script (&
>test case):
>[...]
>You get the gist. I don't even think that JS adds up to 1kb.
>
Hi Parag,
Richard's script is giving as generated html:
<div id="element">
<p>test</p>
<span class="corner topLeft"></span>
<span class="corner topRight"></span>
<span class="corner bottomLeft"></span>
<span class="corner bottomRight"></span>
</div>
* See testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-cornerscript.htm>
So this script is working as a method to put the <span>'s in the html,
with an alternative css way for getting some smaller corner images on
the right places (for painted borders some extra's are needed).
* Comparing: the script is about 12 lines of code, and adding the
span's directly in the html is 4 lines of code.
I should say: no real advantage for the script, it's only delaying the
download time (though not very much), and if javascript is turned off
client side, the visitor doesn't see the corners.
- My interpretation of the question was using an "image replacing"
javascript, which is drawing the corners (pixel by pixel) on the fly.
* Like the Nifty Cube javascript method
<http://www.html.it/articoli/niftycube/index.html>
In that way, indeed quite some javascript exercitions are applied. In a
quick view, the needed niftycube.js is about 9kB.
* Comparing: the combined top-foot image in my example is 2.4kB and
the middle gif is 108bytes. If you combine them with other
background images in the page, you can save the 2 http-requests to
get them (and save the packet filling empty space), and use even
less bandwith for downloading.
And for me the most important reason to use css + images (apart from the
"js not enabled problem"): you have total freedom about what is
displayed on screen (the shadowing etc. like you mentioned). :-)
As Tedd said already, a flexible width (self adapting to the surrounding
box) is possible as well: no problem!
Some more liquid examples you can find in:
* Liquid Corners Playgarden
<http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm>
* Liquid Corners (and Borders) article
<http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm>
* The Gap Safe Alternative
<http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners-gapsaver.htm>
I should go for the css + images method! [You guessed this already, I
suppose ;-) ]
Succes and greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
