Enable Tab navigation for your entire page using jQuery


One of the most commonly faced Accessibility issue is in maintaining the tab order. If you don’t take it the right way, you might end up wasting days and days of effort, when you can just get it done in 2mins using jQuery.

Requirement:

Clicking on tab should go through all the functional controls on my current page.

Solution:

$(function() {
SetTabIndex();//Set tabIndex for all the HTML input elements, dropdowns, anchor tags and any control with classname as ‘linkname’ coming under control with id ‘myId’
});
function SetTabIndex() {
var tabindex = 1;
$(‘input,select,a,#myId .linkname’).each(function() {
if (this.type != “hidden”) {
var $input = $(this);
       $input.attr(“tabindex”, tabindex);
tabindex++;
}
});
}

Concept:

It’s very simple, you just need to set the tabIndex property of all the desired controls on your page, when the DOM load is complete.

Word of Caution:

It might look simple to you, but there is an expensive for loop going on inside, hence its desirable to avoid using any classnames and good to target Ids and specific controls. But i did not see much impact on my page which had around 300 links.

Hope this saved your time and effort.

‘Add to Favourites’ button javascript


Here is a simple code, that i found useful from dynamicdrive. You can use for ‘Add to Favourites’ button in HTML. Add them in your head tag:

<script type=”text/javascript”>

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, “”)
}

</script>

You can then call this javascript in your button ‘onclick’ event like this:

javascript:bookmarksite(‘site_title’, ‘site_URL’)

Demo

HTML 5: Part 1 – Getting Started


Hola Amigos!

Before i work with the elephant in the room; lemme tell you HTML 5 specs aint REC ready (Candidate Recommendation – W3C stage for stamping the spec to be ready for use). If Apple dint care waiting for 802.11g spec to stabilize for use in their products…then why should we.. 😉 ..jsssst kidding

So, first of all i recommend (estoy recomiendo) you get Chrome. You can have FF or Safari as well. bt not IE guyz not IE… Just open your browser and go to (www.html5test.com) you will kno y… 😛

1. To start with all you need is to have a proper HTML DOCTYPE tag. HTML5 docType:

“Aah! so simple…”. Yup its simple guyz…bt therez a whole lot going in the back.. i will explain them in detail in my upcoming posts..

Worried about getting chrome & all… You know…You can also use a shim file to get HTML5 up and running in your browser.

So you jst need to add this script reference into your html and then start using html5 tags…

http://html5shiv.googlecode.com/svn/trunk/html5.js

For those of you who want CSS Reset, you can get it here:

http://html5resetcss.googlecode.com/files/html5-reset-1.4.css

 They work pretty decently from what i have tried… donno if it cracks…

2. From now on you write the following codes happily… 🙂

a. No need for type..language….blah blahs..default is javascript 🙂

b. No need for type here… default is css 🙂

c. < input type=”email” > — No need for self closing tags… 🙂 also. u hav internal validations for ■search■tel■url■email■datetime■date■month■week■time■datetime-local■number■range■color

d…loads more… lets not get excited…. 😛

3. HTML5 page sections:

We had to fight with div and css to design our websites… bt now.. html5 has given us some containers that you can use efficiently..chk below

html5_structure
html5_structure

You can start using these tags instead of the traditional divs. You can see the nesting done inside the <section>.

So Guyz… Lemme wind up for now b4 my manager winds me up… i will get back with the more on html5 background, serialization, specs and then we will delve into html5 demos slowly… 🙂

Post your comments and views here… & Feel free to blast me left-right-center*.. if u find any mistakes.. 😛 [*Conditions apply]

Until nxt time…

goodbye n godspeed… 🙂

Some Common Html Validation errors you should keep in mind


Some common standards that i keep in mind while writing an html code:

1. Avoid using html tags inside <script>:

It would be good if you avoid using html tags inside script tags on the page.

<script type=”text/javascript”>
<!–
// This is an error!
document.write(“</P>”);
// –>
</script>

As mentioned in the HTML 4 Recommendation’s note about specifying non-HTML data in element content, end tags are recognized within SCRIPT elements, but other kinds of markup–such as start tags and comments–are not. This is an unintuitive quirk of SGML for elements defined to have CDATA content.

Authors should avoid using strings such as “</P>” in their embedded scripts. In JavaScript, authors may use a backslash to prevent the string from being parsed as markup:

<script type=”text/javascript”>
<!–
document.write(“<\/P>”);
// –>
</script>

2. Use Query strings wisely:

You will be using & to tag on multiple query strings. But please do ensure that you don’t use entity keywords in your URL. For instance &copy would give a copyright symbol. &section would give replace &sect with a symbol. You can get to know about the entities here.

3. Incorrect nesting of elements:

Nest html elements properly in the proper order in which they are created. For instance, check the example below:

Incorrect: <b><i>Hello World</b></i>

Correct: <b><i>Hello World</i></b>

4. Always use NAME attribute with IMG or FORM.

5. Use all lower case letters in a DOCTYPE

In a DOCTYPE, the formal public identifier–the quoted string that appears after the PUBLIC keyword–is case sensitive. A common error is to use the following:

<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>

Here the formal public identifier (FPI) is all lowercase. The validator does not recognize the document as HTML 4.0 Transitional since the expected FPI for HTML 4.0 Transitional uses different case:

<!doctype html public “-//W3C//DTD HTML 4.0 Transitional//EN”>

6. “Missing a required sub-element of HEAD”

If you receive the error “Missing a required sub-element of HEAD”, check that you have included the TITLE element in the HEAD. The TITLE element is required in all HTML documents.
7. Avoid Uppercase letters in XHTML tags, thought HTML is fine with it.

In XHTML, unlike HTML, element and attribute names must be all lowercase. For example, onMouseOver is an invalid attribute in XHTML, which requires use of onmouseover instead. Either is fine in HTML.

8. Please do not forget to validate your HTML. You can use the one recommended by W3C:

http://validator.w3.org/

Learn jQuery: A simple ‘Hello World’ jQuery Code


jQuery – A powerful javascript library capable of doing all your complex javascript actions and functionality in a line or two. How cool is that.

Pre-requisites : Notepad, jquery.js file(You can get it here),  some coding background and an open mind

Let’s Start with a simple Hello World:

Open your notepad, create a html file as below:

<html>

<head>

<title>Hello World</title>

<script type=”text/javascript” language=”javascript”  src=”jquery-1.3.2.min.js”>

<script type=”text/javascript” language=”javascript”>

$.document.ready(function(){

$(“#btnX”).click(function(){

alert(‘Hello World’);

});

});

</script>

</head>

<body>

<input id=”btnX” type=”button” value=”Click Me” />

</body>

</html>

Save the above file as “HelloWorld.html” in a Folder. Copy the jquery-1.3.2.min.js  file to the same folder. Now double-click the button named “Click Me“.

Voila! An alert box pops up with “Hello World” text.

jQuery : To check if an element is present in the page or not


This is a precautionary measure that you can adopt, if you are doubtful about the presence of a particular control in the page. Under normal scenarios, in case if the element is not there, it would throw an error. But you can now check if that particular element is present in the page or not, by just using the html() method in jQuery. Check the code snippet below:

<html>
<head>
<script language=”javascript” src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
function fnoerror()
{
return true;
}
window.onerror=fnoerror;
$(document).ready(function(){
if($(“#x”).html())
alert(‘x exist’);
else
alert(‘x is missing’);
});
</script>
</head>
<body>
<div id=”x1″>
hello
</div>

<input type=”text” id=”xxx” value=’xcvxvcxcv’/>
</body>
</html>

When you load the page, it will throw the popup with the message ‘x is missing’. Now replace the id of the input textbox from ‘xxx’ to ‘x’ and load the page. The popup would show ‘x exist’ message. Hope this was useful.

Javascript to maximise window on load


Well this is simple script to get your browser maximised onload:

<html>

<head>
<script language=”JavaScript”>
window.onload = maxWindow;
function maxWindow()
{
window.moveTo(0,0);
if (document.all)
{
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById)
{
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)
{
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;

}
}
}
</script>
</head>
<body>Testing</body>

</html>

I just tested it it IE. Hope this works fine in other browsers.

You can also open up a new window as maximised. Check the script snippet below:

function fullScreen(theURL) {
window.open(‘testwindow.html’, ”, ‘fullscreen=yes, scrollbars=auto’);
}

If you would like to use jQuery here, you can use the following jQuery methods:

var height = $(window).height();
var width  = $(window).width();

Hope this helps.