Cohesive Web

In my earlier post I had discussed about the designing the liquid 3 column display layout. While developing the structure I had some problem with the column heights. Depending upon the contents length of those columns varies. I have declared the height property as auto in the css. I could have declared them with some specific pixel value to make the columns of equal length. But if you consider your pages to contain dynamic content generated by server side scripting then this technique may fail. Particularly in Internet Explorer the data part may be extended beyond the columns, which could make the structure awful. So I was in need to find some other solutions for that purpose.

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.

I used to think myself as a coffee lover. I like tea and coffee either with or without milk. But my favorite is black coffee. Many people don’t like black coffee due to its bitter taste and I liked it for the same reason. Due to the reason easy to prepare, I take most of the branded instant coffee. Last week I had gone to a well known branded coffee shop in shopping mall with my friend. We were coming back to office after a client meeting and my friend suggested me to have a good coffee treat after the meeting. There we had a tempting experience which put me in a dilemma of continuing my love for coffee.

After we entered into the coffee shop waiter showed us a table to seat and presented the menu (like a weekly magazine). Without wasting our time by going through it we ordered two Espresso for us. I had Americano earlier and so I thought Espresso is something like that. After few minutes waiter served us our order. I  was little curious while looking at the items, 2 small cups containing 4-5 sips of dark black concentrated coffee along with small paper packs of sugar and few cookies. The quantity of coffee was quite low but I was impressed with the aroma coming from them. So I put little sugar which was colored brown from the pack, mixed it with a spoon and made myself prepared to have a great experience of coffee. I just sipped a little and spontaneously OMG came out from my mouth. It was so concentrated and so bitter I ever had. It seemed to me like I some horrible medicine. I was trying to have it as quickly as possible but it seemed to like one of the toughest jobs I ever had. Both of us were almost speechless while completing our cups. We paid the bill, came out of the shop. Form a nearby grocery shop we bought bottle of drinking water and almost emptied them. Then we took a car and rush back to our office. Rest of the day we were cherishing about the coffee we had.

Coffee - Espresso

Today I find out some good resource about coffee. I learned a lot about coffee and it’s ordering options. Now I am sure I won’t order Espresso, may be I will go for Espresso Macchiato or Flat White or Cappuccino or may be Caffé Mocha. I request to all the reader who likes coffee but have less knowledge about it please read Coffee Drinks Illustrated or similar kind of stuffs before you go for a coffee break.

I was busy with some of my projects. Few months back I was interested in liquid column layout structure. I had used this kind of layout in one of my project. This time I am going to discuss about the features of liquid column layout.

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.

Warm session greeting to all my friends, family members, co-workers, well wishers, supporters and last but wish to be least – spammers. Wish you all a very Happy New Year 2009

Timestamp conversion are required when you import information generated by Windows based application to UNIX system. I faced a similar type of problem when I was trying to read data from a MS Excel file and storing it in MySQL database using a php code.

I was using Excel_reader class to read the Excel file. In that file there were two columns for 2 dates. While reading those column value I found they contain some numeric value. Those values are not same as unix timestamp value. As I was trying to store those values as timestamp I need to convert them into the timestamp.

After some searching and reading from internet I found that Windows and Unix system stores timestamp in different manner. Once this is clear to me I have converted them easily. So let us understand how these two system stores timestamp .

In Unix system timestamp is stored as integer in terms of seconds. If we consider the current timestamp value in Unix then it is basically the no. of seconds passed from 1 January 1970 00.00Hrs to till now. One important thing for Unix timestamp is that it is measured with reference to GMT time. That means there is no time-zone adjustment considered in case of Unix timestamp.

In case of Windows time it is stored as floating point/real number but in terms of days. For current timestamp, the no. days spent from 1 January 1900 stored in integer part and fraction of the day stored in the fractional part of the timestamp.

Now comes the conversion process. I made a simple conversion calculation as follows:

Now if you look at the calculation, you may find that the conversion is not absolutely accurate. This is because I haven’t consider the fractional part of the Excel time. The reason behind doing so is that all I need to do is to convert a date from Windows format to Unix format. So fraction part of windows time won’t affect a lot for my requirement. But if you use this calculation for converting a date-time from Windows format to Unix format then conversion of the fractional part should done.
If you like this small tips please let me know about it.

For me its a celebration time! Wanna know why ?

Well I got my new logo for my website and company. At first take a look at it.

Designed by my friend Nilkamal. Before he start working on it he asked me a simple question.

Do you dream about it?

I said yes. After 2 days this is the outcome. Simple but caries the senses. I like this guy, not because he is my friend but because of his artistic senses. I also love his professionalism. Together we had lot discussions related to art, culture, trends in visualization jobs and many more. Some day I will try to take his interview and then post it here.

** This is a long waiting post, as I was very busy with my jobs. Also I found some problem with my blog, which needed fresh installation. So I upgrade it with current version and make this post live.

Most of us are familiar with calendars in web pages. Small calendar showing date and year are really good to see and useful too. While in case of forms we have seen calendars attached with date fields. In some of my earlier projects I have designed date fields using simple drop down menu containing the data, month and year menu. It’s good but not very user friendly as user need to select 3 menus to choose a certain date. I had to stick with that format as I mostly use PEAR HTML_QuickForm to design forms in the web pages. Among many reasons the most unavoidable one is that it automatically generates client side validation JavaScript code. With time I realized that I should find some options to integrate calendar object with the QuickForm.

After giving a thorough search I selected jscalendar to incorporate with my form elements. The reasons behind selecting jscalendar are:

• It has a nice interface and wide variety of themes.
• Multiple integration options along with selectable date format to put the date in the text field.
• Support for integrating the calendar object with HTML_QuickForm.

Prior to integrate the jscalendar I need to upgrade HTML_QuickFom version to 3.2.10 as I found some code added in this version to support jscalendar. I also need to upgrade my PEAR DB package to version 1.7.13 and DB_Table to version 1.5.5. In my projects most of the cases I generate forms using DB_Table instead of using QuickForm directly. This gives an extra benefit for data validation and storing them in database.

After the up-gradating the required pear packages I worked upon integrating the jscalendar code. After a spending a moderate amount of time I was able to work jscalender with the QuickForm. But unfortunately when I was trying generate forms using DB_Table jscalendar component was not working. I was getting javascript errors.
I was following the method described by Philippe Jausions of 11abacus in jscalendar.php file. It was working fine with the QuickForm. In that case I was using addElements function to add jscalendar with proper options using the $option array like this –

I used this same option array in the column definition for the same field, as DB_Table uses the column definition for the attributes of the form elements of the form. I written like

It didn’t worked and also gave the javascript error as calendar.Setup – no such method found….
Now I started working on how to fix this problem. I started checking the all the codes thoroughly and found that using QuickForm from DB_Table setting all these options can’t be done. After spending some upon those codes I rewrite the column definition like this

Also I declared the global path defining variable in the page where I was generating the form. I defined

Oh that time it worked. It showed the small calendar while the clicking the small button beside the text field for data. But I wasn’t still happy with it. What I found that the calendar was coming but it wasn’t using any style and dates are raveling upon a transparent layer, making it too ugly. I tried to define the style using style class/ stylesheet file name in different places as different parameter. But nothing worked. Now I had two options then

Define the stylesheet for the calendar within the head tags of the page containing the form, means hardcode the name of the stylesheet.
Change the coding to accommodate to options for setting the style class for the calendar.

Selecting the 1st option means loosing some dynamicity and selecting the 2nd option means I need to change or modify certain code in pear class package files. So it was difficult to select any option. I was investigating the benefits and the hitches which can come out as a result of using any one of those options. Also side by side I was looking for third other option which can be better then these two. I spent almost two days and came up with a decision of selecting the second option. I decided to add two lines of code in the QuicfForm.php file in the DB package as

Also I have added one more element in column definitions for the date field as

Now my problem is solved and the jscalendar is working seamlessly with the QuickForm from the DB_Table package too.

My opinion is if you like to add the two lines of code in QuickForm.php file you can add it but you need to remember it at the time when you upgrade the pear package. Also you need to check if it works properly or not. The other way is to hardcode the stylesheet file within the head tag part of the page where you will go to generate the form. In this case you will surely loose some dynamicity but this is easier to work with. Choice is yours.

Currently I am working upon another important issue in php. I need some time to accomplish this job. I will discuss this issue too cause I find it very interesting. However if you find this above discussion useful then I might expect your comment here. Suggestion and queries are also welcome.

I am still searching theme for my blog. While doing so an idea came in to my mind. I must list my favorite movies in my blog. I have posted them in one of my earlier blog. Here I am cherishing them again.

First one is all about a battle. You might have seen this. If not watch it here. I’m sure you will like.

This is the 2nd highest viewed movie in YouTube . It almost near to 13.5 million views in YouTube. BBC has already reported this as fast biggest web video hits. Though its a amateur video but it is becoming the envy of professional wildlife snappers. The movie has got a professional quality script which many film director like to work with, but in reality there was no script! Its a battle between survivor(calf), paladins(group of buffalo), hero of land (lions) and owner of water(crocodile). The eight-minute-long footage shows nothing can be unachievable. Enjoy the The battle of Kruger ..
Some raw facts about battle of Kruger :

• Place : a watering hole near Pretoriuskop Camp, Mpumalanga in South Africa’s Kruger National Park
• Time : September 2004
• Shooter : David Budzinski acconpanied by Jason Schlosberg
• Submitted to Youtube : May 03, 2007

Now, a comment from Budzinski

“I’m not a camera person. I’m just lucky to have it!”

The second favorite movie is about time. Do you agree that sometimes each minute in our life becomes very important, vital or say crucial to our life? I’m pretty sure you will surely agree with me after watching this movie.

Some facts :

• Its named as Just 10 minutes
• Made by Ahmed Imamovic
• The film won the award for the best European short film in 2002

I hope you like them both. I will come up with some php related issue in my next post very soon. Till then

Light!! Sound!! Action!!

Lets start.

Welcome to my blog. I gonna make my first post right now. Though I am not a good write but I feel at least I manage myself to express the thoughts that I like to share with others. I am not as good as regular blogger too, but I will definitely try my best to be like them.

Well this is a long awaiting moment for me since I had started blogging in another well known website. I was dreaming from that time to have my own blog in a domain owned by me. I dreamed, thought, planned, dropped all and started from scratch many times. Somehow I couldn’t reach the goal. May be I wasn’t enough prepared for that. But I kept the faith on myself that someday I will do it.

I have just started my own blog. Lots of things are already in my mind that I like to do, discuss over here. I am also looking for some good template for my blog. Good suggestions are always welcome. But I really dislike spams. Believe me or not, I have proven myself as spam assassinator in early times. The first thing I have done after installing the wordpress blog is, install the anti spam pluggin Akismet. I need to work on some message for the spammers too make them hate me. I will put that visible through out my blog.

I will come back with my next post very soon and I hope I will be able to get a suitable theme also.

Till then GoodLuck