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):
var RoundedCorners = function() {
var element = document.getElementById("element");
var topLeft, topRight, bottomLeft, bottomRight;
var classArray = [topLeft, topRight, bottomLeft, bottomRight];
var classNameArray = ["topLeft", "topRight", "bottomLeft",
"bottomRight"];
for (var i = 0; i < classArray.length; i++) {
classArray[i] = document.createElement("span");
classArray[i].className = "corner " + classNameArray[i];
element.appendChild(classArray[i]);
}
};
window.onload = function() {
RoundedCorners();
};
#element {
display: block;
width: 100px;
height: 100px;
position: relative;
background: blue;
}
.corner {
display: block;
position: absolute;
width: 10px;
height: 10px;
background: red;
}
.topLeft {
top: 0;
left: 0;
}
.topRight {
top: 0;
right: 0;
}
.bottomLeft {
bottom: 0;
left: 0;
}
.bottomRight {
bottom: 0;
right: 0;
}
<div id="element">
<p>test</p>
</div>
You get the gist. I don't even think that JS adds up to 1kb.
On Dec 27, 2006, at 1:01 PM, Parag Jagdale wrote:
> So the company I am working for suggests the use of one of the
> Javascript+CSS rounded corners solutions. But I myself do not believe
> in using Javascript for pure presentation, and I believe that
> sacrificing the bandwidth to load all this JS is not worth the
> benefit.
>
> On the other hand, the solution I currently have is also a little
> complex and heavy. It uses 3 images and 3 DIV layers. The header and
> footer images in total probably take more bandwidth than the JS in the
> other solution. The benefit I see in this solution is that there is no
> 3rd party (no JS to worry about). There are only DIV layers and CSS
> classes that are already defined, so no JS is involved in
> presentation.
> Another benefit is that I can give the boxes any type of shadowing and
> patterns in Photoshop to make the style of the boxes match the rest of
> the site.
>
> What do you think?
>
> <div class="portalBox">
> <div class="portalBox_head">Search Colleges</div>
>
>
> </div>
> <div class="portalBox_foot"></div>
>
> portalBox: is a vertically repeating image
>
> portalBox_head: a fixed width and height rectangle which has a non
> repeating image with the top left and right corners rounded
>
> portalBox_foot: a fixed width and height rectangle which has a non
> repeating image with the bottom left and right corners rounded
>
> div.portalBox{
> float:left;
> width: 524px;
> text-align:left;
> background-image: url(../images/portals/portalBox_blue_re.jpg);
> background-repeat: repeat-y;
> }
> div.portalBox_head{
> width: 524px;
> height: 25px;
> float:left;
> background-image: url(../images/portals/portalBox_blue_head.jpg);
> background-repeat: no-repeat;
> text-align:left;
> font-size:14px;
> font-weight: bold;
> color: #333;
> padding: 0.6em 1em;
> margin:0;
>
>
> }
> div.portalBox_foot{
> float:left;
> width: 524px;
> height: 12px;
> background-image: url(../images/portals/portalBox_blue_foot.jpg);
> background-repeat: no-repeat;
> }
>
>
> What I want to know is am i just being stubborn about not using an
> easier solution(The JS), or am I right saying that the solution is too
> complex and no JS should be involved?
>
> If there is a better no JS solution, im all ears!
>
> Thank You,
> Parag Jagdale
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
