Archive for September, 2009

progress bar using JavaScript

Wednesday, September 30th, 2009

Here’s a littile progress bar I’ve created using JavaScript. I’ve use JavaScript setInterval() to increase the progress bar & clearInterval() to stop progress bar.

//Create dom
var bar = document.createElement("div");
progressBar = document.createElement("div");
with(bar.style){
    width = "200px";
    height = "10px";
    position = "absolute";
    border = "1px solid #949DAD";
};

with(progressBar.style){
    width = "0px";
    height = "100%";
    background = "#D4E4FF none repeat scroll 0 0";
};

bar.appendChild(progressBar);
document.body.appendChild(bar);

//start setInterval
var x = window.setInterval(
	function(){
                progressBar.style.width = parseInt(progressBar.style.width) + 5 + "px";
            //stop interval when progress bar width = 200
            if(parseInt(progressBar.style.width) == 200) clearInterval(x);
	},
	40
);

Posted in Javascript | 2 Comments »

HTML – Tab Index

Sunday, September 13th, 2009

The tabIndex property sets or returns the tab index for a text field. The tab order defines the order the elements appear if you navigate the page using the “tab” button on the keyboard.

Given the scenario that we have a webpage which has many links & a form for users to complete. In this case we see that the main focus is the form not the links before the form. If users were to use tabkey to browse to the form, it would take many keypress before users are able to go to form. We can solve our problem by specifying the tabindex property.

Here’s a simple example:

<pre><form>
    <label for="name">Your Name</label>
    <input value="" id= "name" name="name" type="text" tabindex = "1">

    <label for="email">Your E-mail</label>
    <input value="" name="email" id="email" type="text" tabindex = 2>

    <label for="mobile">Your mobile</label>
    <input value="" name="mobile" id="mobile" type="text" tabindex = -1 >

    <label for="message">Message</label>
    <textarea rows="4" cols="30" name="message" id="message" tabindex = 3></textarea>
</form>
</pre>

“tabindex = -1″ will make the tab not go though the field when the user clicks tabkey.

Posted in HTML | 2 Comments »