Now if you need to find out the some information like 30 degree C equivalent F or 8% tax upon $1200 or interest amount upon $4500 with 13.5% yearly compound interest etc. Best way is to find out pen & paper and a calculator to do the math. I found out an interesting search engine powered by computational power.

The tagline Wolfram|Alpha says that it is the computational knowledge engine. The home page contain a nice interface to search with self-explanatory hints. The interface also provides random link to generate search items in the search box randomly. IMO this feature is helpful for the newbie with Wolfram|Alpha. The tour is also helpful. Same way examples are really good to understand the we can use Wolfram|Alpha

I found lot of good resource in Wolfram|Alpha. Likely they have announced API version 2.0 with various features. It is free for personal/experimental use. They also provide commercial license. For webmasters & bloggers Wolfram|Alpha provides a wide variety of widgets in different categories. Here are two among them that I have used in this page.

Wolfram|Alpha is a result of continuous development effort from Wolfram Research driven by the key person Stephen Wolfram. Two most important key component of WA is Wolfram Mathematica & A New Kind of Science(NKS).

Though I have started using Wolfram|Alpha for few days but I need to admit its usefulness. I am exploring its features day by day. I am sure you will like this too. I will feel better if you share your experience with Wolfram|Alpha.

To explore with Google Chart API for Image chart I chose the data set of browser usages by visitors on my blog for the month of January 2011. Here is a snapshot from Awstats from my blog cPanel.

Browse usage comparison of Cohesive Web for January 2011

Here is the chart produced by the Google Chart API.

Comparison Chart produced by Google Chart

Let me explain the process I have used for drawing this chart. If you send a request URL with parameters in GET or POST then The Google Chart API returns a chart image as response. The request URL is https://chart.googleapis.com/chart. Here I have used GET method to send the parameters. Here is my URL for drawing this chart

Here are the list of parameters with brief description :-

chs
This is the dimension for the chart. The syntax is chs=<width>x<height>. For both width & height max value is 1000 pixcels. However widthxheight should not exceed more than 300000.

cht
The chart type. The syntax is cht=<chart_type>. I have used p3(for 3D pie chart). You can use values like p(pie chart), lc(line chart), v(venn chart), s(scatter chart), bhs/bvs(bar chart) etc. Check the chart gallery for complete listing of available chart types.

chd
The data set for drawing the chart Basic syntax is chd=t:n1,n2,n3,n4…. n1, n2, n3 are floating point numbers with a value range of 0 – 100. Numbers below zero will be dropped and above 100 will be truncated to 100.

chdl
This is the chart legend text/label for each data/data series. The syntax is chdl=<data_1_label>|…|<data_n_label>. If you have multiple words as label then they must be used in encoded format(URL encoding).

chco
The color specification for each elements/series. Syntax for this parameter is chco=element_1_color|element_2_color|…|element_n_color. The color code is a string of RRGGBB format hexadecimal number format. With this each 6 character color code you can use optional 2 character hexadecimal number from 00 to AA. Hence the color code format used here is RRGGBB[AA]. The last AA is used as transparency value , where 00 means complete transparent and FF means complete opaque.

chtt
This parameter is for chart title. Syntax is chtt=<chart_title>. To provide a line break you can use “|“. However the chart title also should be in encoded format.

chts
This is used to mention the font size and the color of the chart title. Syntax is chts=<color>,<font_size>. Color is as RRGGBB format hexadecimal format and font size is in point value.

chf
This parameter is used for background fill. Syntax is chf=<fill_type>,s,<color>. Here I have used bg as fill_type which means background fill. s means solid color. Color code is in RRGGBB hexadecimal format.

Beyond these parameters there are more which can be used to draw charts as per requirement. You can draw more complex charts using this API. You can read Google Chart Tools. To use this chart API you don’t require any API key from Google. Currently there is no limit to the number of requests per day you can make to the Google Chart API, but Google have reserved the right to block any use that they regard as abusive.

There is Image Chart Editor which you can use to draw your chart. So happy charting then.

In my current project I need to display multiple content pages within a web page. I require to slide the page numbers so that user can view the number of pages by sliding/scrolling. I was looking for some good plugin which could satisfy my need. I have tested some of them but couldn’t find out the ideal one. So wrote the basic code for the functionality and the effect. However I wasn’t satisfied with my work as I was looking for some plugin for it. I thought it is the best time to try authoring plugin in jQuery.

It took almost 9 days to convert the code into a plugin. I gave the plugin namespace as paginationslider.

Code example:
Script section -

Style section –

HTML Section –

I will eagerly wait for your reviews on this plugin. Here you can view the demo.

Case 1:

In one of my project there is a user table containing fields like userId, UserName, UserLoginID, Password etc. The UserLoginID field is basically the email address. Almost 95% of the email addresses belongs to a specific domain that is the domain of the project. Let’s say testproject.com. The table contains approx 12,000 records. In that project client decided to shift their main tld from .com to .org like testproject.com to testproject.org. Now they asked me to change the all the users’ email from .com to .org. That means user1@testproject.com to user1@testproject.org I needed to do this job within a shortest span of time. So I decided to run a sql command directly in the database to do the modification. A simple UPDATE sql won’t work in that situation as I needed to change some part of a field and also update statement shouldn’t affect those rows which do not contain testproject.com. So I tried with different types of update sql to do the job but finally derived the following one :-

The beauty of this statement lies in the usage of replace function. This replace function will synchronously select records having ‘testproject.com’ implementing functionality of the Where clause and generate the value to be set for the field UserLoginID as @testproject.org

Case 2:

This case was relatively easy. I need to find out unique entries from a table. It was not a hard job for me but still I googled a bit for this purpose. Now after some study I come to a position where I could do that using two different sql statements. They are :-

and

While looking at the results I found both of them produces same result but the only differnce is Select DISTINCT does not sort the result set like GROUP BY does. So I wasn’t sure which one should used. SELECT DISTINCT vs GROUP BY – udbug | Google Groups helped me to chose the correct statement as Select DISTINCT. So I used the following :-

Case 3:

This is also related with the earlier case of unique entries. This time I need to find out the ids which have duplicate entries. Almost the opposite job than the previous one. Well this statement also uses distinct but along with Group by clause gives the entries which have duplicates in the table. Here is the statement.

This statement is very useful to find out entries which have duplicates in the tables.

Somebody asked me earlier how do I learn php and database? My answer was – learn the basic, find some real-life project to work for, take the challenge to complete it. You would face lots and lots problem while doing that. Don’t try to get rid of them but try to solve them. When you would finish the job you will understand the difference in you in terms of practical knowledge. I hope you all agree with me.

I thought of using some JavaScript to make all the columns height equal. The algorithm to do this is very simple. Calculate the max height among three columns and assign it for all the columns. So first I introduced three different IDs for these three columns to access the properties of those columns using Javascript document.getElementById() method. So I changed the HTML code as follows:

contentDiv_left for the left column, contentDiv_mid for the middle column and contentDiv_right for the right one. contentDiv ID for the container div for these 3 columns.

Then my job was to find out the maximum height of these 3 columns. First I used offsetHeight property for this purpose. Calculate the max height and assign it to all the 3 columns style.height property. While testing the code I found it was working fine with Internet Explorer. In case of FireFox or Opera or Netscape browsers the code was malfunctioning, more specifically it was unable to find out the height of those columns using offsetHeight property. So I started looking for bug. While doing that I found out offsetHeight is a readonly property of the DHTML Object model introduced by MSIE. But is not part of any W3C specification or technical recommendation. So incase of browsers like FF or Opera it won’t work. So I started looking for some alternate property to find out the heights of those columns. There are some properties which didn’t worked for me are element.style.height, element.style.max-height etc. I tried with
window.getComputedStyle(element,null).getPropertyValue(“height”).
As window.getComputedStyle method can be used to get the styles of an element that are not set using the style attribute or with JavaScript. But it didn’t work too. Finally I worked out with this method :
document.defaultView.getComputedStyle(element, null).getPropertyValue(“height”).
The document.defaultView returns a reference to the default AbstractView for the document. This document.defaultView is part of the DOM Level 2 DocumentView interface. This interface is not a mandatory part of Document Object Model Level 2 Core specification. DOM of IE doesn’t implement this but DOM in mozilla supports this. So I put a browser check and utilized the above method for browser like FF, Opera and offsetHeight propery for IE. Hence my code looks like this :

I called this function maintainMaxColHeight() in onLoad within body tag.

After adding this script the page now looks like :

Now what’s the conclusion? I think in case of maintaining the equal height for the columns there are 2 options. First one is to put a fixed pixel value as height property in css for all the columns. Next one is implementing this JavaScript code. For this second option browser should support JavaScript (I believe most of the current browsers do so). In my opinion if a website is designed using liquid column display layout where all pages contain static information, first option will the best for that case. I always prefer to avoid unnecessary script execution for web pages as it reduces the page download and display time. The second option is best for websites containing dynamic information (like my project).

The project where I have implemented this layout is near to completion. Still it is not fully online I won’t be able to show you. I need to wait a little more to show you the live example.

Earlier web page designing was highly dependent on HTML table structure. Common practice was to design a web page using HTML tags like table, tr, th, td, tbody etc. Web page designer used to design a layout in a graphic editor like Adobe Photoshop and slice the layout in small images in gif or jpeg format. Then create a table structure and insert those small images in different cells. This technique is very useful because putting those small rectangular images into different table cells, a web page can be designed having the same look and feel as layout image drawn in graphic editor. If not wrong till today this is the mostly used methodology to design web pages.

Let us review this designing procedure. I have described it in a very simplest way. Sometime designing a web page using the table structure based on graphical layout becomes a difficult job. If the graphical layout contains curves, color gradient then the complexity increases. I consider the most crucial part in this process is to design the table structure. Many times designer uses nested tables while designing the pages. Merging cells and rows are also widely used. Another important factor is how to put images in the table cells. Most of the cases img HTML tag is used, but sometimes inserting image as background works wonderfully.

So unless you don’t have a good knowledge of HTML table structure you won’t be able to work as professional web designer. In my early days in this profession I had to suffer with the complexity of nested table structure while designing pages.

In recent years I found there is a trend to avoid this procedure of designing web pages. There are certain reasons behind this change. First and foremost reason I think the size of the web page. Using nested table structure increases the file size of the web page, but many times it becomes unavoidable. I have also noticed a peculiar case of Internet Explorer while opening a page containing nested table. If the web page contains heavy images and huge text in nested tables, browser’s status will show “Done” while display of the page is not complete. IE shows “Done” status when display of the outermost table is complete. Another reason, editing the table structure in those web pages is quite difficult, that’s why people like to avoid this procedure. I found many times editing that kind of pages make the complex table structure incorrect. Support for other HTML tags having boxed or blocked like display such as div, layer, iframe etc by most of the browser is another important reason. Increasing use of CSS for applying style to provide a good look is also important. I found designer uses div tag supported with CSS instead of table to design web pages. They have produces pages which looks same as page designed using table structure and most importantly they have able to reduce the file size a bit.
Layouts like liquid column display, clean structure are the outcome of this increasing usage of div like tag instead of table tags in HTML. Though this new methodology is not very easy but I found there is a rapid increase in number who follows this.

Now here are the reasons why I was interested to implement liquid column display layout in one of my project.

• If I need to design those web pages using table structure, I need to use one outermost table containing 3 columns. Now to display contents like (text, photographs), I need to use nested tables in those columns. I knew that I was going to suffer with that particular problem in IE. Also my file size will be higher.
• There was another designing constrain that I can’t avoid using table structure. There was a background image that I had to display in the bottom portion of the page. Table structure wasn’t allowing me to do that.
• The other reasons are basically the advantages of using liquid column display. I don’t like to discuss it here. You can always search to know about it. Let me discuss how do I designed the page layout.

Here is a sketch diagram about the structure that I was going to implement. It contains three columns which aligned in center and below footer. The page should display centered align three columns along with white spaces in the left and right side of the page. To design this structure I have used mainly div tags along with proper styles defined in CSS.

Here is a structural overview of the HTML code in the web page.

Here is styles defined in css

Now here is outcome of the effort.

A brief explanation about the structure.
To design the 3 column structure I have used nested div tags with proper styles. There is a outermost div tag having class name contentDiv. Within that I have put 3 more divs with class names as contentDiv_left, contentDiv_mid and contentDiv_right. For these 3 divs I have defined float property in CSS and width in percentage value to achieve liquidity. For all those divs I have used height property as auto in CSS. This helps div to grow in lenght depending upon the content put in it.

Though I have implemented the 3 column liquid layout, there is a problem in it. If you look at the above picture you can spot out the problem. Yehh, the three columns are not of equal height. Depending upon the content added in those columns, their lengths will get adjusted. This is due to height:auto; in CSS for the 3 inner divs. One solution is to specify a big value as height in CSS. Pages will be unnecessarily long containing small content in those divs. Will create another problem.

I have used a technique to overcome this problem. I will be discussing it in my next post and this time next post I will do very soon. Till then comments, suggestions and queries are always welcome.