5 Easy Steps to Create a Fixed Header

This jQuery plugin just clones current header and place on top of the table. Follow below 5 steps to create a fixed header row of a normal HTML table or ASP.Net GridView/Datagrid.

Step 1: Include the jQuery library JavaScript file on header section of web page.

Download file (jquery-1.2.6.js)

Step 2: Include the jQuery Fixed Header JavaScript file on header section of web page.

Download file (jquery.fixedheader.js)

Step 3: Add this CSS code in stylesheet or header section of web page.

<style type="text/css">
.dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; font-size:12px;}
.dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
.dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
.dataTable thead a {text-decoration:none; color:#444444; }
.dataTable thead a:hover { text-decoration: underline;}

/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>

Step 4: Add this JavaScript code in header section of web page.

<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({
width: 500,height: 300
});
})
</script>

Step 5: Create an HTML table on the page, including THEAD and TBODY sections. This plug-in uses the THEAD to create the fixed rows, and TBODY is our data.

<table id="data" class="dataTable">

<thead>
<tr>
<th> ….. <\th>
<th> ….. <\th>
</tr>
</thead>

<tbody>
<tr>
<td> ….. <\td>
<td> ….. <\td>
</tr>
</tbody>

</table>

Note: For ASP.Net GridView/Datagrid you have to keep the header part in THEAD and put your Gridview/Datagrid in the TBODY section of table but without Grid header.

Our table or GridView with fixed header is now ready to view.

jQuery Plugin for Fixed Header
jQuery Plugin for Fixed Header

Features
1. Allow horizontal scroll
2. Auto hide box when scroll in IE6
3. Allow to adjust header cell width with your own implementation

Requires
jQuery 1.2.6

Compatibility
IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2

jQuery: Easy JavaScript for Front-end Programmers

I’m a big jQuery fan because it just makes things a lot easier and a lot simpler for a mostly front-end programmer like myself. It’s the first Javascript framework I’ve looked at, but I don’t see myself going back.

What Is jQuery?
jQuery is yet another JavaScript library to join the previously crowded space that includes Prototype, Scriptaculous, Rico, Moo.Fx and more than a dozen others. To use it, simply attach the .js file in the head of your page: magically, you have access to lots of pre-built functions and gizmos.

Why jQuery?
The true beauty of jQuery is what it can present you within the first 10 minutes of your using it. The key feature of jQuery is its simplicity. Few lines of jQuery code can replace a dozen lines of normal JavaScript, yet it remains very elemental and flexible. Let me illustrate this point with an example. Two years ago, we used the following script to fix the web page horizontal rule:

function ourRules() {
if (!document.getElementsByTagName) return;
var hr = document.getElementsByTagName(“hr”);
for (var i=0; i
var newhr = hr[i];
var wrapdiv = document.createElement(‘div’);
wrapdiv.className = ‘line’;
newhr.parentNode.replaceChild(wrapdiv, newhr);
wrapdiv.appendChild(newhr);
}
}

window.onload = ourRules;

Result of the code, the browser waits for the page to finish loading before rifling through the DOM to find each occurrence of hr. Each time it finds one, it creates a new div, gives it the class name “line”, inserts it where the hr was, and pops the old hr inside the new div, to achieve the markup required to apply this particular effect. The end result of this script was that we were able to get the desired result without having to change hundreds of pages.

But, we’d achieve the same result using jQuery.

$(document).ready(function(){
$(“hr”).wrap(“<div class=’fline’> </div>”);
});

To break it down:

$(document).ready(function(){

});

The first and third lines are jQuery’s load event, and they replace the old window.onload from above. Any activity that we wish to complete during the page load can be dropped inside these curly braces. This is a great upgrade on the old onload method, because rather than waiting until everything has finished loading, jQuery’s function watches everything that comes in, and starts working as soon as it has all the parts it needs. It’s really very neat.

Surprisingly, the second line is even simpler:

$(“hr”).wrap(“<div class=’fline’></div>”);

The “dollar object” $(“hr”) is all we need to tell jQuery to grab every horizontal rule on this page, and wrap is what we will be doing to those hr elements.

jQuery’s built-in wrap function takes in whatever HTML we give it (in this case “<div class=’fline’> </div>”) and wraps it around each hr in our page – no loops or tests required.

We’ve used a div here, but we could just as easily been modifying or wrapping a b, span, or a element.

And although we’ve used a very simple selection rule here (all hrs), we could have easily been much more specific with what we targeted. Using familiar old CSS syntax, we could have used any of the following:

$(“hr.separate”) – Get the hr elements with the class name “separate “.
$(“li:only-child”) – Get list items that are by themselves.
$(“ul > li”) – Get only list items with unordered parent lists.

While I’ve found wrap to be of the most instantly helpful jQuery functions, it’s just one of many, including hide, show, fadeOut(“slow”) and slideUp(“fast”), just to name a few. You can perhaps guess what each one of these functions does. The jQuery starter’s tutorial on the jQuery site is quite a gentle beginner’s guide, and takes you through some of the most regular functions. But perhaps jQuery’s single neatest feature is its ability to “chain” functions together. Like, if I wanted to add a second div to our hr elements for some foolish reason, I could simply add another call to the wrap function to the end of my code, like this:

$(“hr”).wrap(“<div class=’fline’></div>”).wrap(“<div class=’sline’></div>”);

Example of jQuery
Example of jQuery

It’s so easy, it’s wild. Wild like a fox!

While designing a web page, you want to add a small icon to the bottom corner of each thumbnail. This required each img element to be wrapped in a container div, and another div showing the icon to be positioned in the container div. Again, the jQuery code is just one line.

$(“#thumbnails li img”)
.wrap(“<div class=’mywrap’></div>”)
.before(“<div class=’mythumb’></div>”);

In simple English, this code just asks jQuery to locate all the images in li elements that are inside #thumbnails, Wrap these images in a div called “wrap”, Squeeze another div (the one with the icon graphic) in my “wrap” div just before my image.

Now that we have the structure, CSS does the rest. If JavaScript is turned off, the thumbnails link directly to the raw image files, and there’s no need for the icons. Now that’s what I call graceful degradation. Like most other JavaScript libraries, jQuery is competent of some very high-end actions, but the main attraction for me was its ability to solve the little problems quickly and with a minimum of fuss.

I hope you’ll find it helpful too.

Download Files

jQuery Minified (54.5 kb)
jQuery Packed (30.3 kb)
jQuery Regular (98.2 kb)

Click here to view jquery tutorials

Ajax reduces load time

Earlier web applications submit user completed forms to a web server and the web server responds by sending a web page back. This makes applications run more slowly and awkwardly than their native counterparts. Ajax is a term that refers to the use of a group of technologies together. Ajax applications can send requests to the web server to retrieve only the data that is needed; usually using SOAP or some other XML-based web services dialect. JavaScript processes the web server response at client side.

The final result is a quick interface, as the amount of data exchanged between the web browser and web server is greatly condensed. Web server processing time is also saved, since much of it is done on the client. Ajax is more a natural progression from an existing set of techniques as opposed to being something completely brand new. Yet within that progression, things are markedly different than in previous years in a couple of key areas.

Ajax provides a device to juggle up xml with xhtml. It drastically abridges the job fetching things from the server. It also defeats some speed glitches that conventional Web development has fallen prey too. In most instances an Ajax based site will load quicker than a comparable traditional Web site. Ajax significantly reduces initial load times. Ajax has some problems that it needs to overcome as it continues to mature.

But it is a promising field to be involved within and as the years roll on, it probably will greatly affect the way we think about building Web pages and Web applications. It also has to be apparent that Ajax is not a technology as such but to a certain extent is a technique that merges well with other technologies and techniques. For example: XHTML XML, DHTML and CSS. Actually, Ajax really is DHTML with the xmlhttprequest object thrown in. It is wonderful to believe how one object can modify the whole scenario of web technologies.

JavaScript for HTML Programmers

JavaScript is a object based scripting language created for developing Internet applications.We can develop server applications or client applications with JavaScript. We can embed JavaScript code in Web pages, which are written in HTML (Hypertext Markup Language). JavaScript is an extension to HTML that help us create more sophisticated Web pages than we ever could with HTML alone.

Javascript is an easy-to-use programming language that can be embedded in the header of our HTML pages. It can enhance the dynamics and interactive features of our page by allowing us to perform calculations, validate forms, write interactive games, animate objects, customize graphics selections, create security passwords, Adjust the page to fit the users browser and more.

As our web industry progress is rapid, One of the main things to think about when we write scripts is to make sure that they are compatible with the browsers we are targeting. JavaScript is a scripting language that you use to communicate with browsers and other applications, so it’s actually more of an interface than a programming language. However, when JavaScript is disabled many websites will become less dynamic and lose features which contain buttons and functionality powered by JavaScripts.

Embedding JavaScript in a Web page

<html>
<body>
<script type=”text/javascript”>
document.write(“My Blog!”);
</script>
</body>
</html>

Checklist for a web programmer

1. Quality of code

1. Does the site use a correct Doctype?
A doctype informs the validator which version of HTML you’re using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won’t validate without them.

2. Does the site use a Character set?
If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.

3. Does the site use Valid HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML.

4. Does the site use Valid CSS?
You need to make sure that there aren’t any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance. CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, color, etc) to structured documents.

5. Does the site use unnecessary classes or ids?
I’ve noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.

6. Is the code well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.

7. Does the site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.

8. How does the site perform in terms of speed/page size?
Don’t make me wait… That’s the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.

9. Does the site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under ‘Internet Options’ on the Advanced tab. Uncheck ‘Disable script debugging’.

2. Degree of separation between content and presentation

1. Does the site use CSS for all presentation aspects (fonts, color, padding, borders etc)?
Use style sheets to control layout and presentation.

2. Are all decorative images in the CSS, or do they appear in the HTML?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.

3. Accessibility for users

1. Are “alt” attributes used for all descriptive images?
Provide a text equivalent for every non-text element.

2. Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values’.

3. Do any aspects of the layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser’s font size. And again. And again… Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.

4. Is there sufficient color brightness/contrasts?
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits.

5. Is color alone used for critical information?
Ensure that all information conveyed with color is also available without color, for example from context or markup.

6. Is there delayed responsiveness for dropdown menus?
Depending upon the need and requirements of the layout dropdown used in the website should not be too heavy to load on page.

4. Site management

1. Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser’s built-in ability to explain what the problem is.

2. Does the site use friendly URLs?
Most search engines (with a few exceptions – namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL… what good is a site if no one can find it?

3. Do your URLs work without “www”?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.

4. Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the Webmaster to further promote their site, and to create a more customized appearance within a visitor’s browser.