Posts Tagged ‘HTML’

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.

Page break in HTML pages

Saturday, June 21st, 2008
Page break in HTML pages
 
When generating reports directly in the HTML, it’s often required to do a forced page break so that a new sections always prints on a new page. Fortunately, this is very simple with the help of CSS. For this you just need to add the “page-break-before:always” or “page-break-after:always” styles to the tags on which you want to have the page break.
 
As clear from the name, if you add the  “page-break-before:always”, it will add a page break before the current tag. Similarly, “page-break-after:always” will create a page break after the current tag end.
 
Here is a sample code to see this in action
<div style=”page-break-before:always”>This will print on first page</div>
 
<div style=”page-break-before:always; page-break-after:always”>This will print on second page</div>
 
<div>This will print on third page</div>
Please notice that how we have added the page break before and after attributes on the second page such that we no longer need this on the third DIV tag.
 
Note: Please note that these attributes doesn’t work in FireFox (and most other browsers) when used within tables (cells or rows). When having problem with the page break, make sure the section you want to have break on is not under any table.

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!”