THINK

The only way to prevent over-ordering is to lock all stocks at the moment they are added to cart. This is analogous to the real world when in a supermarket where the groceries are “deducted” from the shelves when they are “added” to the real shopping cart.

However, when customers in the supermarket decides not to check out and buy, they do not put the groceries back to the shelves. This is also true online and it becomes a problem because the stock count cannot be added back to cart in a timely fashion and subsequent buyers will have difficulty selecting the items they want.

In the online world, this implementation is only compulsory for time-sensitive products such as ticket bookings and the current way to overcome the problem is to set a time-out value where the items added to cart will be replenished back to the shelf stock count.

The CSS :hover event is only supported for the anchor element <a> and hence to simulate the correct :hover behavior for other elements such as td:hover, we need a javascript hack.

The idea is to change the class of the hoverable element so that the CSS can be applied to the class i.e. td.hoverable.

To do this, we attach a function to the onmouseover and onmouseout events of the element to add an remove the class name respectively.

c FireFox will glady center the div with just

div {
 width: auto;
}

but IE7 will keep the div aligned at its default. Hence we need a little trick here to make it the way we want it. What we do is we create a div wrapper using another div, and have the css code like this

div.wrapper {
 text-align: center;
}
div.wrapper div {
 text-align: left;
 width: auto;
}

The text align left is optional and is used to explicitly redefine the text alignment for the inner div so that it is independant of the wrapper div’s text align attribute value.

Had been playing around with CSS a lot lately just to practice conforming to the WC3 best practices. Especially for the past few projects I have done, I try very much to use 100% CSS for layouts. And only define HTML tags in a top down fashion to markup the content. I think i’ve improved very much since the first time I’ve done this.

One of the things that frustrates me is that there are a lot of obscured CSS properties and strange behaviors in different browsers. One such element is the table. For all the times I used a table with CSS, a strange margin will always appear around the table even though margins and borders are set to 0px. Just keep in mind that tables have an extra border-collapse property and setting it to “collapse” will give you more intuitive results.

Everybody is talking about the new facebook now. I quickly got into some love-hate relationship with it. The day when it was launched it caused so much trouble that they had to revert back to the old interface. I think it is still not clear when they are going to bring back the new version. And it would be so difficult for us to plan for both the old and new features in our upcoming apps.

This is how it looks like:

the new facebook look

You can change your old facebook to the new one by going to new.facebook.com and you will be logging into it forever. The “back to old facebook” link doesn’t seem like working for me.