Building Shadow with Prototype

We have projects that we have to tweak with JavaScript to satisfy our customers' meticulousness on how their site will look. I'm not a fan of some site designs which rely heavily on how the site looks but not much on how the site works.

I was handed a project with a stupid design where I get to place shadows on almost all boxes on the page and not to use tables, for SEO's sakes. So I have a hard time figuring out what to do.

First, I cut the shadows to use on Photoshop by areas, top-left, top, top-right, left, right, bottom-left, bottom, and bottom-right, cause the image looks like this:



The width and the height of the content grows, so a slice on other than what I had in mind would be impossible.

Next, I was absorbing the ideas of Prototype framework and scriptaculous, so I decided to use it. For scriptaculous, I only made use of builder.js. To equalize the height of the left and right areas, I found the code somewhere which makes the heights of 2 divs equal.

So the code:

function buildShadow(itemarea) {
var objBody = itemarea.parentNode;

objBody.appendChild(Builder.node('div', [
Builder.node('div', {className:'stop'} , [
Builder.node('div', {className:'sleft'}) ,
Builder.node('div', {className:'sright'})]
),
Builder.node('div', {className:'sinner', id: itemarea.id+'sinner'} , [
Builder.node('div', {className:'sleft', id: itemarea.id+'sleft'}) ,
Builder.node('div', {className:'sright', id: itemarea.id+'sright'}),
Builder.node('div', {style:'overflow: hidden;', className:'detailsarea'}, [itemarea])
]
),
Builder.node('div', {className:'sbottom'} , [
Builder.node('div', {className:'sleft'}) ,
Builder.node('div', {className:'sright'})]
)
]));


fixH(itemarea.id, itemarea.id+'sleft');
x = $(itemarea.id+'sleft').style.height.replace("px", "");
$(itemarea.id+'sright').style.height = String(x) + "px";
}

function fixH(one,two) {
if (document.getElementById(one)) {
var lh=$(one).getHeight();
var rh=$(two).getHeight();
var nh = Math.max(lh, rh);
document.getElementById(one).style.height=nh+"px";
document.getElementById(two).style.height=nh+"px";
}
}

The css:

.stop{
height: 4px;
font-size: 2pt;
background: url('shadow_top.jpg') repeat-x top left;
}
.sleft {
height: 4px;
width: 4px;
background: url('shadow_top_left.jpg') no-repeat top right;
float:left;
}
.sright{
height: 4px;
width: 4px;
background: url('shadow_top_right.jpg') no-repeat top left;
float: right
}
.sinner {
width: auto;
font-size: 2pt;
background: white;
}
.sinner .sleft {
background: url('shadow_left.jpg') repeat-y top left;
height: 100%;
}
.sinner .sright {
background: url('shadow_right.jpg') repeat-y top right;
height: 100%;
}
.sbottom {
height: 4px;
font-size: 2pt;
background: url('ishadow_btm.jpg') repeat-x bottom left;
}
.sbottom .sleft {
background: url('shadow_btm_left.jpg') no-repeat bottom right;
}
.sbottom .sright {
background: url('shadow_btm_right.jpg') no-repeat bottom left;
}

To accomplish the shadow, I make a call to the function, passing the object(div) as parameter:

buildShadow($("divIDHere"));

Downloads:
prototype
scriptaculous