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

The Innocent Man

Since I got hold of books by John Grisham, I have become attracted to legal thrillers. I have read countless of his books, except for his old ones like The Client, The Pelican Brief, etc. I started reading his books when my landlady hand me The Chamber. It was made into a movie but I wanted to read and know how good he is.

Fast forward, then came his first non-fiction book. When a friend of mine was in Manila, he told me that he was in Powerbooks and because he knows I read a lot of Grishams, informed me that The Innocent Man is out on paperback. I told him to buy me one, unfortunately, he doesn't have some extra cash. It was Midnight sale anyway in G-Mall so I decided to try my luck at NBS. Then I found the last 2 copies of the book. Without thinking of my budget, I bought it and hurriedly read it.

The element of thriller that are present in most of Grisham's book is still evident in the book. It was narrated in a manner that you will fell sorry for the protagonist and how he suffered the consequences of the crime he did not commit. The story then continued on his being misjudged and his life on death row. There are also religious aspects discussed on the book, on how Ron (that was his name) was denied by his church and decided to join another community. It all ended on the time of his death when he was diagnosed with liver disease.

It is a good read because you will get to realize that there are indeed injustices, not because of money or lack of it, but because people in power plays with it.