Drag/Drop shopping cart using jQuery

Most of the AJAX introduction sessions give a demonstration of drag/drop features. I've attended an AJAX session 1 year back and wondered.."Will I ever be able to do such an amazing drag/drop cart?" Hehe..thanks to jQuery UI. Drag/drop  isn't a magic anymore!

Here is a demo of jQuery drag/drop shopping cart. Simply drag the items into the basket and total will be calculated. You may also remove the items from the basket, everything without postback.

Twitter initiated war to kill IE6 !!

All that started with a simple tweet by a Norwegian developer Erlend Schei. He came up with an idea to display an "Upgrade" message on IE6 browsers for his websites and suddenly, all major websites of Norway adopted it, thereby declaring a war on IE6. According to wired.com, even Microsoft is supporting the campaign.

Here is a fast spreading code, appearing on the internet, to support the campaign. This conditional code when included in our sites, appears as a message at the top when the site is opened in IE6 .
<title>No IE6 campaign!</title>
<!--[if lte IE 6]>
<style type="text/css">
#ie6msg{border:3px solid lightblue; margin:8px 0; background:AliceBlue; color:#000;font-family:Verdana;font-size:smaller}
#ie6msg h4{margin:8px; padding:0;}
#ie6msg p{margin:8px; padding:0;}
#ie6msg p a.getie7{font-weight:bold; color:#006;}
#ie6msg p a.ie6expl{font-weight:normal; color:#006;}
<div id="ie6msg" >
<h4>Did you know that your browser is out of date?</h4>
<p>You are using Internet Explorer 6. To get the best possible experience using our website we recommend that you upgrade your browser to a newer version. The latest version is <a class="getie7" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 7</a>. You may also try <a class="getie7" href="http://www.microsoft.com/windows/Internet-explorer/beta/default.aspx">Internet Explorer 8</a> which is available as a beta. The upgrade is free. If you're using a PC at work you should contact your IT-administrator.</p>
<p>You may also try other popular Internet browsers like <a class="ie6expl" href="http://www.opera.com">Opera</a>, <a class="ie6expl" href="http://firefox.com">Firefox</a> or <a class="ie6expl" href="http://www.apple.com/safari/download/">Safari</a></p>

Feel free to tweak it & use it.
In the world of browser compatibility problems, I think it's time for all of us to support this movement and reduce some pain to the developer as well as the customer...
Update(10th March, 2009):
The current BlogEngine theme itself looks distorted in IE6, as pointed out by one of my seniors'. So added the above code to my blog. You will get the above message when you open my blog in IE6 :)

ASP.NET AJAX Accordion postback problem, jQuery's solution!!

Hi folks,|
I would like to share a bitter experience I faced for one long week and a beautiful solution I found today :) It goes like this:

The Requirement:
There is a web page contains hundreds of checkboxes, textboxes and dropdowns. All these controls are dynamically built in code behind. On page load all the controls should be disabled and on clicking an "Edit" button, all the controls should be enabled so that user can change the values and save. I need to format the page so that it would be user friendly.

My Initial Approach:
Since the layout is cluttered because of hundreds of controls (number depends on records in database) , I decided to use ASP.NET AJAX Accordion control, grouping all my controls into different panes. Not a bad start I guess. So, on every page load, I created new controls, built my UI and databound them. Then I created new accordion panes and added these controls to them. As far as displaying data, the accordion was perfect!

The Problem:
In Edit mode, I have to enable my page' controls, change the values in them and save them to database. But when I change values and click 'Save', in the pageload, all my controls are rebuilt and the changes I made are lost. The accordion is not able to restore the values after postback. I googled a lot for this problem and found few approaches like this one, but in vain (though it worked for some people). I tried to access my controls' value using client side javascript, store them in hidden variables and get back after postback. But inactive accordion panes do not render the controls. So I cannot access all controls. I posted my problem in ASP.NET forums but couldn't get any solution as of then.

jQuery's Soluton:
As I was lacking time, I thought of using jQuery for my problem.  I built dynamic HTML tables, which contain all my controls, in code behind. I wrapped these tables in divs and assigned classes to these divs. Then, using jQuery's slide effects, I was able to toggle my content (slide up and slide down). I wasted 4 long days with accordion (without result), but I could finish this task so easily with jQuery in just 1 hr.

I personally suggest budding developers to give a serious look at jQuery.

Browser compatibility issues? Are you having DOCTYPE in your markup?

The markup i.e., (X)HTML of your web page exists in many versions such as: HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict etc. A web browser parses your web page and renders the content based on the version in which your markup exists. This information will be available to the browser though the DOCTYPE declaration. It should be declared before the <html> tag and looks like :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Omitting DOCTYPE in the markup is one of the main reasons for cross browser compatibility issues. Sometimes, even if your mark up is valid (with XHTML and CSS), there might still be problems due to incorrect DOCTYPE.

Please go through these excellent links which explain the importance and implementation of DOCTYPE.

Tables Vs Divs...what to chose for better UI?

I was lucky enough in getting a chance to solve certain browser compatibility issues in UI design of a certain web project. The problem is, they are using "div" tags to hold content, but these tags are not styled properly with CSS. As most of the UI designers (who, like me,  are addicted to UI Design tools) do, I too suggested using tables to align content. But the customer preferred having divs to tables. Neither of us were wrong in our choice, yet I agreed to work using divs (as it's an area which I loved to explore). Here is an excellent article on the choice of using Divs or Tables.

The real challenge came while nesting divs simulating a tabular look and feel. The flow of elements in the page by floating and positioning divs appeared to a big mystery. I googled a lot and found excellent stuff on Understanding Page Layout using CSS at HTMLDog.com. A detailed and very good description of using floats to align your content is given here. This will surely be useful for budding web developers. Hopefully, I should be able to give a solution to the problem by 2moro EOD after reading all this stuff :)

Unobtrusive JavaScript with jQuery

Last night my friend Deepak called me from UK(onsite) and asked me how a web application(with javascript) can be made to behave normally even though javascript is disabled in the browser. Though I saw this phrase "Unobtrusive Javascript" many times, I din't bother much about it. What my friend asked was precisely this topic. Nice to find a presentaion on such an important topic. Thanks to Simon Willison for that! You can download it from his blog.

Speed up your web pages with YSlow!

Caught this beautiful firefox plugin, YSlow on delicious and thought it's worth mentioning here.

From Yahoo Developer Network - YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you
# Performance report card
# List of components in the page
# Tools including JSLint
# HTTP/HTML summary
Dont miss it!