Archive for the ‘HTML’ Category

JavaScript Ignore HREF Attribute Value

Thursday, March 25th, 2010

On the web programming, it’s common to use the “#” as the HREF value and apply the event handler on the “click” event. But if you don’t return false in the “on click” event handler, the “#” will be appended to the URL when user click on that link and it may ugly and even worse break some functionality. A common recommend way to do this is something like:

<a href="#" onclick="dosomething();return false;">Click Me</a>

This works well when you are adding the onclick event handler directly as part of the HTML, but fails when you need to bind the “click” event using the Even Listener model (as in this case multiple event handler could be bound with a single event). Here is an equivalent workaround for this which works in case of multiple event handlers too:

<a href="javascript:" onclick="dosomething();return false;">Click  Me</a>

As you can see we have replaced the “#” with “javascript:” which means just don’t perform any JavaScript operation. Neat and Simple.

Tags: , ,
Posted in HTML | No Comments »

Dottor-o Web Reference

Thursday, March 11th, 2010

I found another very interesting reference site on the DOM and JavaScript and it’s Dottoro:
http://help.dottoro.com/ljxsqnoi.php

For example, just check how much detail is available on just the Range object. The best thing is all the compatibility options of all the major browsers are also discussed. The main idea for this post is to bookmark this link for my future reference, but I hope some of you might find this helpful too.

Tags: ,
Posted in HTML, JavaScript | No Comments »

Center Align the DIV

Monday, March 16th, 2009

As I discussed in my previous thread, more and more people and moving toward the Tableless design to design the HTML files. Check the following post for detail:

http://blog.syedgakbar.com/2008/03/01/a-step-toward-tableless-design/

Of course, the migration is not as simple as it looks. Designing the page layout with just the DIVs (basically not using tables) is not that easy for newbies. There are many tricks and tweaks you learn with time (similar to what it was with table based design). One question I asked frequently is that how you can center align the DIV tag using the stylesheet. The reason for this the trick to do this using CSS is not that intutive. You may start with “text-align:center”, or by doing “float:left”, but all this doesn’t work. The correct way to do this using something like this:

<div style="margin:0 auto;width:930px;">
	Center Aligned Box
</div>

In the width, you can give it either by percentage (to make it relative to current page width) or in pixel (hard coded). There is still one small catch. Sometime you will notice that it doesn’t work in the IE. The most probable reason is that IE is running in the Quirks Mode :-)

To fix this, add the following line which set the DOCTYPE to restrict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Hope it helps.

Tags:
Posted in HTML | 2 Comments »

A Step toward Tableless Design

Saturday, March 1st, 2008
I have been working on the website development for few years now and nearly 98% of the time I was using the Tables for the web page layout. I had known that this task can be better done using the CSS, but, to be honest, I didn’t had courage to drop the old fashioned technique of the table layout I had learned over the last couple of the years. I learned to layout the page using tables from the very first HTML lesson and from then have religiously followed it until today.
The story behind this swtich is that while working on the web page today, I had to align two labels like this on the page:

Left Aligned Text Right Aligned Text

I was going to jump and create another nested table in the page layout when someone inside me (good programmer) scrammed a loud and shouted “STOP IT! There must be some better way of creating the layout then all those clumsy nested tables which not only take more space but also make the page complex to read”. I finally got courage and decided to read more on the CSS layout and drop my old learned technique of HTML layout (at least for as small layout as above). As I continued reading more and more, I was amazed by how simple it’s to layout this using only CSS. For example, if I head created the above layout using the table layout, it would have been something like this:

<table border=”0″>
    <tr>
        <td>Left Aligned Text</td>
        <td>Right Aligned Text</td>
    </tr>
</table>

And this is how I ended up doing it using CSS:

<div class=”leftAlign”>Left Aligned Text</div><div class=”rightAlign”>Right Aligned Text</div>

Though I have to add the following entries in my CSS file but as these will be cached in the browser, it will not require reloading of the presentation data again and again. I see two main advantages of using CSS technique over the HTML layout. First is that my code is more compact and will load fast, second is that the new code is easy to read and maintain

div.leftAlign {
    float: left;
} div.rightAlign {
    float: right;
}

For some of you interested in reading more, please check the following related links:
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
http://www.stopdesign.com/articles/throwing_tables/
http://www.alistapart.com/articles/practicalcss/
http://w3tableless.com/

My favorite quote of the day is “Look Ma, No Tables!”

Tags: , , , ,
Posted in HTML | No Comments »