JavaScript made simple

Javascript open new window

2009-09-25T02:25:00.000-07:00

To open a new window by using javascript we need to use window.open method. We can customize the window.open method as per the requirement.

Syntax:

window.open([URL], [Window Name], [Feature List], [Replace]);

Simple Example:

<a href="javascript:%20void(0)" onclick="window.open('popup.html', 'windowname1', 'width=200, height=77'); return false;">Click here for simple popup window</a>

This is a simple window.open method with minimum features included.

The features supported by the window.open method is:

Width --- Auto --- specifies width of the new window in pixels
height --- Auto --- height of the window in pixels
top --- Auto --- specifies window position
left --- Auto --- specifies window position
directories --- no--- should the directories bar be shown? (Links bar)
location --- no--- specifies the presence of the location bar
resizable --- no--- specifies whether the window can be resized.
menubar --- no--- specifies the presence of the menu bar
toolbar --- no--- specifies the presence of the toolbar
scrollbars --- no--- specifies the presence of the scrollbars
status --- no--- specifies the presence of the statusbar

Example when added the above features is:

<a href="javascript: void(0)"
onclick="window.open('popup.html',
'windowname2',
'width=200, \
height=77, \
directories=no, \
location=no, \
menubar=no, \
resizable=no, \
scrollbars=1, \
status=no, \
toolbar=no');
return false;">Click here for specific popup window</a>

Check the Date

2009-08-20T05:25:00.000-07:00

The below script provides to how to check the entered date is the correct date or not like by selecting the april if we select 31 days it has to prompt the entered date is the invalid date. Such type of scenarios can be tested with the below javascript.

var mth = new Array(' ','january','february','march','april','may','june','july','august','september','october','november','december');
var day = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

function validateDate(fld,fmt,rng) {
var dd, mm, yy;var today = new Date;var t = new Date;fld = stripBlanks(fld);
if (fld == '') return false;var d1 = fld.split('\/');
if (d1.length != 3) d1 = fld.split(' ');
if (d1.length != 3) return false;
if (fmt == 'u' || fmt == 'U') {
dd = d1[1]; mm = d1[0]; yy = d1[2];
}
else if (fmt == 'j' || fmt == 'J') {
dd = d1[2]; mm = d1[1]; yy = d1[0];
}
else if (fmt == 'w' || fmt == 'W'){
dd = d1[0]; mm = d1[1]; yy = d1[2];
}
else return false;
var n = dd.lastIndexOf('st');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf('nd');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf('rd');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf('th');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf(',');
if (n > -1) dd = dd.substr(0,n);
n = mm.lastIndexOf(',');
if (n > -1) mm = mm.substr(0,n);
if (!isNumber(dd)) return false;
if (!isNumber(yy)) return false;
if (!isNumber(mm)) {
var nn = mm.toLowerCase();
for (var i=1; i < 13; i++) {
if (nn == mth[i] ||
nn == mth[i].substr(0,3)) {
mm = i; i = 13;
}
}
}
if (!isNumber(mm)) return false;
dd = parseFloat(dd); mm = parseFloat(mm); yy = parseFloat(yy);
if (yy < 100) yy += 2000;
if (yy < 1582 || yy > 4881) return false;
if (mm == 2 && (yy%400 == 0 || (yy%4 == 0 && yy%100 != 0))) day[mm-1]++;
if (mm < 1 || mm > 12) return false;
if (dd < 1 || dd > day[mm-1]) return false;
t.setDate(dd); t.setMonth(mm-1); t.setFullYear(yy);
if (rng == 'p' || rng == 'P') {
if (t > today) return false;
}
else if (rng == 'f' || rng == 'F') {
if (t < today) return false;
}
else if (rng != 'a' && rng != 'A') return false;
return true;

Compare two dates

2009-08-20T05:17:00.000-07:00

When working with the date of birth we need to check the date. We can check the date by writing the server side script. But when writing the server side script it takes so much time for the user which may not be usefull in some scenarios.

Below is the sample javascript method which compares the two date and proivdes the result whether the entered date is greater than the current date.

function comparedates()
{
var userdate=Date.parse("06/19/2008");

var currentdate=new Date;
if(userdate>Date.parse(currentdate))
{
alert("User Entered Date is greater then Current Date.");
}
else
{
alert("User Entered Date is less than the Current Date");
}
}

Validating the image

2009-08-10T22:53:00.000-07:00

In the Forms the mostly common task we use is uploading the image. When uploading the image we are in need of certain condition like we need only images to be uploaded or only the documents files to be uploaded.
For such type of requirements we need to provide the javascript code for restricting the users from uploading. This script will be validated at the client side so there is not burden on the server side. Hence makes the server work more easier.

Below is the javascript code for checking the uploaded image is image format or not and intern check whether the uploaded image format is jpg,gif or png format.

function validate()
{
var extensions = new Array("jpg","jpeg","gif","png","bmp");

/*
// Alternative way to create the array

var extensions = new Array();

extensions[1] = "jpg";
extensions[0] = "jpeg";
extensions[2] = "gif";
extensions[3] = "png";
extensions[4] = "bmp";
*/

var image_file = document.form.image_file.value;

var image_length = document.form.image_file.value.length;

var pos = image_file.lastIndexOf('.') + 1;

var ext = image_file.substring(pos, image_length);

var final_ext = ext.toLowerCase();

for (i = 0; i < extensions.length; i++)
{
if(extensions[i] == final_ext)
{
return true;
}
}

alert("You must upload an image file with one of the following extensions: "+ extensions.join(', ') +".");
return false;
}

When ever you want to validate the file uploading control just copy this script and paste wherever you want to validate.If you want more formats you can add on the ext array.

The form is

<form name="form" action="http://test.com/test" enctype="multipart/form-data" method="post" onSubmit="return validate();">
<h2>Validate image on upload</h2>

Upload an image: <INPUT type="file" name="image_file"> <input type="submit" name="submit" value="Submit">

</form>

Fixed Header and footer

2009-06-06T04:10:00.001-07:00

I have gone through so many websites for the fixed header and footer and i found the below code as the best suitable for any type of browser.
IN the below downloaded code you will view only the CSS file which will make your work so easier. Everything is maintained in the CSS fiie. You need to just download the files and copy the selected CSS and use where ever you need to keep the header and the footer styles.

In this we have used the DIV tags to maintain the Header and the footer styles. The main advantage of this code is that it works best for all type of browsers(mozilla, internet explorer......)

Javascript Slideshow with timeout

2009-05-22T22:00:00.000-07:00

We have so many sideshow available, The below also explains the same with some simple steps and with one java script method setTimeout).

This makes our work so simple to rotating the images.

<html>
<head>
<titleA Timed Slide Show</title>
<script type = "text/javascript">

var the_images = new Array();
the_images[0] = new Image();
the_images[0].src = "one.jpg";
the_images[1] = new Image();
the_images[1].src = "two.jpg";
the_images[2] = new Image();
the_images[2].src = "three.jpg";
var the_timeout;
function rotateImage(index)
{
window.document.my_image.src = the_images[index].src;
index++;
if (index >= the_images.length)
{
index = 0;
}
var the_function_string = "rotateImage(" + index + ");";
the_timeout = setTimeout(the_function_string, 1000);
}
Timing Events 165

</script>
</head>
<body>
<img name = "my_image" src = "one.jpg">
<form>

onClick = "clearTimeout(the_timeout);">
</form>
</body>
</html>

Code Explaination:

The first few lines set up the array containing the images we’ll put in the slide
show. Line creates the new array, sets the first item in the array equal to
an image object, and sets the src of that image object to the first picture of
the slide show. Lines and are just like the lines used to preload images
before an image swap. The next few
lines load the rest of the images.
After the images have loaded, and set up two variables for use in the
timing loop. Line declares the_timeout, which keeps track of each time-out,
and keeps track of which image in the slide show to bring up next time the
script calls rotateImage(). Keep in mind that declaring the index variable
outside the rotateImage() function, as I’ve done here in , is not the safest
programming practice—it’s just easier and quicker than the safe solution.
A safer version of rotateImage() will be described subsequently.
Next comes the rotateImage() function, which swaps in a new image and
then calls itself in one second. The first line of the function does the
image swap. It looks up the value of index, finds the src of the element numbered
index in the the_images array, and swaps in that image for my_image (the
image in).
After swapping the image, the function adds 1 to the index variable. The
next time rotateImage() gets called, it looks up the next item in the array and
swaps in that item. We have to make sure the number stored in index doesn’t
exceed the number of images stored in the the_images array. The if-then
statement starting in takes care of this issue by ensuring that if index has
incremented past the number of items in the array, it will be set back to 0
(corresponding to the first image in the the_images array). The last line in the
function should be old hat by now. This line sets a time-out to call the
rotateImage() function in one second.
Timing Events 163
The slide show starts when a visitor presses the button that calls
rotateImage() and ends when the user presses the Stop the Show button,
canceling the most recently set time-out.

Show webpage content when scrolling comes

2009-05-09T12:19:00.001-07:00

We may need to show some part of the page content. We will have the web pages with the page contents. When displaying the web pages there will be large content or small content. When we have the small content then the scrolling will not appear. So when we have the large content then we will have the scrolling option. So all the content will be scrolled from top to bottom.

But we need to only some part of the content need to be scrolled when the scrolling option is scrolled. The main content will not be scrolled when the page is scrolled.

Preview

Code

Javascript disable right click

2009-05-09T11:42:00.000-07:00

Disable right click option provides an option to disable the right click option when ever user wants to copy the content of the code. Disabling the right click also secures the data upto some part.

This is mainly used for the important data not to be disclosed to another persons or you dont want to provide an option to copy the images from your site to any another sites. Now a days this is the most common task to disable the right click functionality.

Javascript Code

<html>
<head>
<script language=JavaScript>
var message="This is the example to disable the right click";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>
</head>
<body>

This is the web page content ... You can place any content here................
</body>
</html>

Displaying Calender through javascript

2009-04-30T11:18:00.000-07:00

Displaying the Calender is the most common script in all the websites. Now-a-days in every web application requiring the calender application. We have so many calender scripts found in the internet if we search, But i prefer this is the most user friendly calender script we can use. This was downloaded from cool dhtml website.

I have used this and found to be very useful and very flexible. IN the provided example we are given with all the possible options like displaying only the date or displaying the date and time option, By clicking single click the calender script will be pop up and we can select the appropriate date.

All the events are clearly mentioned. We can directly paste the code in our application and can use the following code.In this script we are provided with the draggable option.

Preview

Reserved Key words and Triggering scripts with events

2009-04-20T11:28:00.000-07:00

Javascript has some strict rules and referring to vairables. Your function name and variable name must begin with a letter and they can contain only letters, number and underscores. By conversion function and variables names must begin with lower letters, but they use uppercase for additional words. For example autotext() is completly different from autoText() in the javascript. Javascript is case sensitive.

Reserved Keywords:

abstract , boolean , byte , case , catch , char , class , const , debugger , default
delete , do , double , else , enum , export , extends , false , final , finally , float , for , function , goto , if , imports , in , int , interface , null , new , package
public , protected , return , this , throw , throws , typeof , true , try , void

Triggering scripts with events

autoText The scripts loads when a page is loaded. Like this we can call scripts when the user clicks the button or mouse overs on a image. Each of these clicks are called as events.
Some events are used by the document's BODY as a whole, and some are used by specific tags such as images , anchor tags , buttons.

Events that are assigned to the BODY Tag

1. onLoad when the document loads.
2. onUnload When a new document is loaded.
3. onFocus When the browser window recieves focus.
4. onBlur When the browser window loses focus.
5. onHelp when the user presses F1(IE only).
6. onKeypress when the user presses a key. Except the function keys.

Events that are used to tags includes

1.onFocus When the tag receives focus.
2.onBlur When the tag loses the focus.
3. onMouseOver When the user moves the mouse over the tag.
4. onMouseOut When the use moves the mouse away from the tag.
5. onChange When a form element value is changed.
6. onClick When a tag is clicked.
7. onSubmit When a form is submitted.

we can use these events to run our scripts based on different user actions

Checkbox array Enable / Disable

2009-04-19T01:51:00.000-07:00

There will be two types of checkboxes one is the general checkbox and the second is the checkbox array. There will be a scenario that we need to read the value from the checkbox or the checkbox array.

Writing a javascript for the general checkbox is more easy when compared to the checkbox array. We need to write the javascript for checkbox array For example : We have a music options available and we need to provide option to enable the disable the checkbox array.

The below code explains how to enable and disable the checkbox array.

<Html>
<head>
//Music skills
function musicskills(value)
{

if(value==1)
{

chkvaluer=document.form.elements['chkmusic[]'];
for (r=0;r<chkvaluer.length;r++)
{
chkvaluer[r].disabled = true;
}
document.form.txtmusic.disabled = true;
}else{

chkvaluer=document.form.elements['chkmusic[]'];
for (r=0;r<chkvaluer.length;r++)
{
chkvaluer[r].disabled = false;
}
document.form.txtmusic.disabled = false;
}
}

</head>
<body>
<form name="form" method="post" action="testfile.php">
<input type="radio" value="yes" onClick="musicskills(0);">Yes
<input type="radio" value="no" onClick="musicskills(1);">No
<input type="checkbox" name="chkmusic[]" value="Punjabi">Punjabi
<input type="checkbox" name="chkmusic[]" value="classical">Classical
<input type="checkbox" name="chkmusic[]" value="devotional">Devotional
<input type="checkbox" name="chkmusic[]" value="westren">Westren
</body>
</html>

Checkbox read only

2009-04-16T04:12:00.000-07:00

The below code will explain how can we make the checkbox enable and disable. Here we use the function deDemo() to enable / disable the checkbox and return the value of the checkbox is enabled.

<html>
<head>
<script type="text/javascript">
function doDemo(form) {
var cbObj = form.cbObj;

if (cbObj.checked)
alert("Value is " + cbObj.value);
else
alert("No value will be submitted.");

if (cbObj.disabled)
cbObj.disabled = false;
else
cbObj.disabled = true;
}
</script>
</head>
<body>
<center>
<b>Read-only Checkbox Demo</b>
<form>
<input type="checkbox" name="cbObj" value="Y" disabled>
<p>
<input type="button" value="Execute" onClick="doDemo(this.form)">
</form>
<hr>
</center>
</body>
</html>

Checkbox array select / unselect

2009-04-11T03:32:00.000-07:00

Generally in the checkbox, we have two different type of checkboxes one are plain checkboxes and the second one are checkbox array. The javascript for both differs a lot. The default checkbox script will be very simple to write and can be found any where in the net. The checkbox array scripts would be difficult.

The below example would define how to write a javascript for a checkbox array.

<html>
<head>
<script language="javascript">
function checkarray(form) {
var total = 0;
var max = document.form.elements['gender[]'].length;

for (var idx = 0; idx<max; idx++) {

if(document.form.elements['gender[]'][idx].checked==true)
{

if(document.form.elements['gender[]'][idx].value=="any")
{
for (var idx1 = 0; idx1<max; idx1++) {

document.form.elements['gender[]'][idx1].checked=true;
}
}

}else{
if(document.form.elements['gender[]'][idx].value=="any")
{
for (var idx1 = 0; idx1<max; idx1++) {

document.form.elements['gender[]'][idx1].checked=false;
}
}
}

}

}

function checkarray1(form) {
var total = 0;
var max = document.form.elements['gender[]'].length;

for (var idx = 0; idx<max; idx++) {
var cc=0;
if(document.form.elements['gender[]'][idx].checked==true)
{

if(document.form.elements['gender[]'][idx].value=="any")
{
cc=1;
}

}else{
if(document.form.elements['gender[]'][idx].value=="m")
{

document.form.elements['gender[]']['0'].checked=false;;

}
if(document.form.elements['gender[]'][idx].value=="f")
{

document.form.elements['gender[]']['0'].checked=false;;

}
}

}

}
</script>
</head>
<body>
<table class="right_linksr" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="middle" width="10%" align="left"><label>

<input size="5" name="gender[]" onclick="checkarray(this.form)" value="any" type="checkbox">
</label></td>
<td valign="middle" width="90%" align="left">Any Gender</td>
</tr>
<tr>
<td valign="middle" width="10%" align="left"><input name="gender[]" onclick="checkarray1(this.form)" value="f" type="checkbox"></td>
<td valign="middle" width="90%" align="left">Female</td>
</tr>

<tr>
<td valign="middle" width="10%" align="left"><input name="gender[]" onclick="checkarray1(this.form)" value="m" checked="checked/" type="checkbox"></td>
<td valign="middle" width="90%" align="left">Male</td>
</tr>
</tbody></table>

</body>
</html>

Here we have two javascripts function used. One function checkarray() selects all the checkboxes and the function checkarray1() unselects the any checkbox if any of the another checkbox is selected.

Checkbox array Mutiple select

2009-04-11T03:20:00.000-07:00

Increase website font

2009-04-03T05:38:00.000-07:00

This example mainly concentrates in the font of the web application. We use a default font in our websites and there may be situation we need to increase the font size of the text in the website. The example will help you to increase the font of your web application.

For using the example you need to download the javascript file and add place it in your folder. Call the javascript in the html or any page. Before using this javascript you need to to maintain the structure of the html. <body> tag must be started and as well as closed. You need to take care about this.

Ajax Tabs Content script

2009-03-30T09:58:00.000-07:00

This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an "IFRAME" mode, a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more.

Here's a quick outline of the script features:

* Fetch and display an external page (from the same domain) inside a container when a tab is clicked on via Ajax.
* (v 2.0) Apart from Ajax, an external page can also be fetched and displayed via the IFRAME element instead. This is useful for external pages that either contain JavaScript/ CSS code that doesn't run properly when fetched via Ajax, or the page is from an outside domain.
* Add a "default" content inside the container to either be shown while no tabs are selected, or to be associated with a specific tab. The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages.
* Supports session only persistence, so the last tab user clicked on is remembered if he/she returns to the page within the same browser session.
This is taken from dynamicdrive.com

SCREEN SHOT

Image slideshow with back and prev buttons

2009-03-27T07:39:00.000-07:00

This script shows the image gallery slide show with prev and next buttons. When clicked in the next button the next 6 images are displayed. when clicked on the thumbnail the image is popuped up. First all the small thumbnails are displayed. When clicked on the thumbnail image is enlarged.

<span style="font-weight:bold;">Add thumbnails</span>

Thumbnails are inserted into the HTML code in the following format

<div class="strip_of_thumbnails"><div><a id="firstThumbnailLink" href="#" onclick="showPreview('images/image1_big.jpg',this);return false;"><img src="images/image1.jpg"></a></div><div><a href="#" onclick="showPreview('images/image2_big.jpg',this);return false;"><img src="images/image2.jpg"></a></div><div><a href="#" onclick="showPreview('images/image3_big.jpg',this);returnfalse;"><img src="images/image3.jpg"></a></div>
</div>

<div class="strip_of_thumbnails"> is the parent element of a vertical "strip" of thumbnails. How many thumbnails you add inside this div depends on your layout. In the demo, I have used 3 images.

Also note that id="firstThumbnailLink" is only applied to the first thumbnail. It is used to initially highlight this thumbnail
Layout

Width, height, border colors etc. are controlled by CSS. Look at the comment in image-slideshow-5.css for help.
Initialize the script

The slideshow script is initialized with these lines at the bottom of the HTML file:

<script type="text/javascript">
initGalleryScript(); // Initialize script
</script>
Speed of animations

You can control the speed of how fast the opacity changes on the large images, and how fast you want the thumbnail pane to slide when you click on the arrows. This is done by adjusting the javascript variables opacitySpeed, opacitySteps, slideSpeed and slideSteps at the top of image-slideshow-5.js.
Number of thumbnail columns

Usually, the script is able to measure how many columns of thumbnails you have automatically. However, if you have a slideshow where the script isn' table to show all your columns, you can set number of columns manually at the top of image-slideshow.js. This is done in the variable var columnsOfThumbnails

SCREENSHOT

Javascript for Checkbox array

2009-03-25T11:59:00.000-07:00

I have searched so many javascripts for writing a code for the checkbox array example "< input type="checkbox" name="check[]" >" But i could not find a single javascript. You will get so many scripts for a simple checkbox with name "check" , which can be found with a simple search, But this type of scenario's cannot be found easily. So we are updating the javascript so that you can use it when needed.

<html>
<head>

<script language="javascript">
function anyCheck(form) {
var total = 0;
var max = document.playlist.elements['ckbox[]'].length;
alert(max);
for (var idx = 0; idx < max; idx++) {
if(document.playlist.elements['ckbox[]'][idx].checked==true){
total += 1;
//alert(total);
}
//alert('ns');
}
alert("You selected " + total + " boxes.");
}
</script>
</head>
<body>

<form method="post" name=playlist>
1<input type=checkbox name=ckbox[]>
<brɮ<input type=checkbox name=ckbox[]>
<brɯ<input type=checkbox name=ckbox[]>
<brɰ<input type=checkbox name=ckbox[]>
<brɱ<input type=checkbox name=ckbox[]>
<brɲ<input type=checkbox name=ckbox[]>
<brɳ<input type=checkbox name=ckbox[]>
<brɴ<input type=checkbox name=ckbox[]>
<brɵ<input type=checkbox name=ckbox[]>
<p><input type=button value="Count Checkboxes" onClick="anyCheck(this.form)">
</form>

</body>
</html>

Here the method is used is anyCheck(). Which will invoke the javascript method. When we invoke the javascript method document.playlist.elements['ckbox[]'].length will calculate the length of the checkbox array value and if condition will evaluate which checkbox is checked and returns the total count.

Tabs using javascript

2009-03-23T12:54:00.000-07:00

This is the second example to creating the tabs in the html by using Div tag and the javascript.

The example will explain of how to create the tabs using div tag

<html>
<head>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

</script>
</head>
<body>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><b><a href="javascript:countries.expandit(3)">Click here to select last tab</a></b></p>
</body>
</html>

To download the js and the css please click on the below link
Click here

Tabs using javascript

2009-03-23T12:46:00.000-07:00

Here is an example to how to create a tab control in html using the div tag and the javascript

<script type="text/javascript" language="JavaScript"></script>



<style type="text/css">
.tab {
font-family: verdana,sans-serif;
font-size: 14px;
width: 100px;
white-space: nowrap;
text-align: center;
border-style: solid;
border-color: black;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 0px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
.tabhold {
background-color: white;
color: black;
}
.tabfocus {
background-color: black;
color: white;
}
.tabcontent {
font-family: sans-serif;
font-size: 14px;
width: 400px;
height: 275px;
border-style: solid;
border-color: black;
border-width: 1px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
</style>



<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="tab1focus" class="tab tabfocus" style="display:block;">
Tab1
</div>
<div id="tab1ready" class="tab tabhold" style="display:none;">

<span onclick="ManageTabPanelDisplay('tab1focus','tab2ready','tab3ready','content1')">Tab1</span>
</div>
</td><td width="20"> </td><td>
<div id="tab2focus" class="tab tabfocus" style="display:none;">
Tab2
</div>
<div id="tab2ready" class="tab tabhold" style="display:block;">

<span onclick="ManageTabPanelDisplay('tab1ready','tab2focus','tab3ready','content2')">Tab2</span>
</div>
</td><td width="20"> </td><td>
<div id="tab3focus" class="tab tabfocus" style="display:none;">
Tab3
</div>
<div id="tab3ready" class="tab tabhold" style="display:block;">

<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3focus','content3')">Tab3</span>
</div>
</td><td width="180"> </td><td>
</tr>
<tr>
<td colspan="6">
<div id="content1" class="tabcontent" style="display:block;">
<p style="margin-top:0px">
This is the first tab
</p>
<p>
This tab is generated for the first tab data. Here you can have any data related to the first tab
</p>
<p>
WE can also have a paragraph of data, if we want to it to be
dynamically we need to concentrate more on this
</p>
<p>
blah................
</p>
<p style="margin-bottom:0px">
Tab1 sucessfully done
</p>
</div>
<div id="content2" class="tabcontent" style="display:none;">
<p style="margin-top:0px">
Hello everyone Now testing the contect2
</p>
<p>
This software is one of the most sophisticated form handlers available
on the Internet. Yet, it is easy to implement.
</p>
<p>
And it has anti-hijacking code built right in.
</p>
<p>
The software also helps spam-proof your web site so email
harvesting robots find nothing when they crawl your site.
</p>
<p style="margin-bottom:0px">
This is the sampel test program use this for the further resiults
</p>
</div>
<div id="content3" class="tabcontent" style="display:none;">
<div style="margin: 0px 20px 10px 0px; width: 80px; height: 105px; float: left;">Third tab test data</div>
<p style="margin-top:0px">
test data you can write anything here.
test datatest datatest datatest datatest data....... THis is the third tab
<p>
I noticed unusual activity on the server and determined a script
was being used to send spam. Quickly, I replaced that script with one that would
record everything sent to it but would not send email.
</p>
<p>
During the hijacking, which continued for hours, I developed and tweaked code to
block that very thing.
</p>
<p>
Get some peace of mind. Get this
</p>

</div>

</td></tr>
</table>

Javascript radio button validation

2009-03-21T11:48:00.001-07:00

In the form we need to like to have a scenario where we need to write a java script code for checking whether we need the radio has been selected or not?

The below example tells you to how to write a JavaScript for checking the radio button is checked or not.

<html>
<head>
<script language="javascript">
function GetSelectedItem() {

chosen = ""
len = document.f1.r1.length

for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
chosen = document.f1.r1[i].value
}
}

if (chosen == "") {
alert("No Location Chosen");
return false;
}
else {
alert(chosen)
return true;
}
}
</script>
</head>
<body>
<form name="f1" action="" onsubmit="return GetSelectedItem();">
<Input type ="radio" Name ="r1" Value = "NE">North East
<Input type = "radio" Name = "r1" Value = "NW">North West
<Input type = "radio" Name = "r1" Value = "SE">South East
<Input type = "radio" Name = "r1" Value = "SW">South West
<Input type = "radio" Name = "r1" Value = "midlands">Midlands
<input type="submit" value="submit">
</form>
</body>
</html>

Here we have a javascript method GetSelectedItem() which will be invoked when a submit button is pressed. document.f1.r1.length will tells the length of the radio buttons present. The for loop will check all the radio buttons and find if even a single radio button is checked or not.

Building a clock in Javascript

2009-03-20T13:21:00.000-07:00

Clocks are one obvious application of timing loops.Below is the code for displaying a watch in a website using javascript

<html><head><title>A JavaScript Clock</title>
<script type = "text/javascript">

</script>
</head>
<body onload="writeTime();">
The time is now:
<form name = "the_form">
<input type = "text" name = "the_text">
<input type = "button" value = "Start the Clock" onClick = "writeTime();">
<input type = "button" value = "Stop the Clock"
onClick = "clearTimeout(the_timeout);">
</form>
</body>
</html>

The heart of script is the writeTime() function.Every second, this function figures out the current time, puts the time in the text field, and then sets a time-out to run writeTime() a second later.
the script starts by declaring the variable that will hold the timeouts. Next comes the writeTime() function, which creates a new Date
object in (remember that a new Date object holds the current date and time). Line and the two lines following it get the hours, minutes, and seconds from the Date object using the getHours(), getMinutes(), and getSeconds() methods.
you’ll see that getMinutes() and getSeconds() each return an integer from 1 to 59. If it’s two minutes and three seconds past 9 AM, the variable hours in will be 9, minutes will be 2, and seconds will be 3. But putting these numbers together to display the time would create the string 9:2:3 instead of 9:02:03. Line takes care of this little problem by sending the minutes and seconds variables to a function I’ve written called fixTime(). The fixTime() function in takes a number as its parameter and puts 0 before the number if it is less than 10 (so 2 becomes 02). Make sure you understand how the fixTime() and writeTime() functions work together.

Once fixTime() fixes the minutes and the seconds by inserting zero where appropriate, creates the time string, and writes it into the text box. Finally, sets the time-out that will call writeTime() again in one second. When writeTime() is called again, it creates a new Date object, gets the information out of it, fixes the minutes and seconds if necessary, writes the new time into the text box, and sets the time-out again. The whole process starts when a visitor clicks the Start the Clock button and ends when the visitor clicks the Stop the Clock button, which cancels the most recently set time-out.

Creating arrays in javascript

2009-03-20T12:29:00.000-07:00

Arrays are so handy that you’ll often want to create your own.for example, A phone book is an array of names and phone numbers. You can think of a survey as an array of questions; an array can also store the answers a visitor enters. A slide show is an array of pictures shown in sequence.

JavaScript lets you create your own arrays. If you know what
you want to store in the array when you create it, use a line like the following:

Array Declaration:
var colors =new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet");

This line creates a variable called rainbow_colors that stores an array of colors.
The words new Array() tell JavaScript to create a new Array object.To put values in your new array, simply list them in the parentheses.

Example:

<html>
<head>
<title>Strobe</title>
<script type = "text/javascript">

function strobeIt()
{
var colors =
new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet");
var index = 0;
while (index < rainbow_colors.length)
{
window.document.bgColor = colors[index];
index++;
}
}

</script>
</head>
<body>
<form>
<input type = "button" value = "strobe" onClick = "strobeIt();">
</form>
</body>
</html>

creates the array and sets up the loop, saying, “While index is less than the number of items in the array, execute the JavaScript between the curly brackets.” The first time through the loop, index is 0, so when looks up rainbow_colors[index], it gets the first item in the array, the value red. Line assigns this value to window.document.bgColor, which sets the background color to red. Once the script has set this color, adds 1 to index, and the loop begins again. Next time through, index will be 1, so will make the background color orange, then adds 1 to index, making it 2, and back through the loop we go. If you have a very fast computer, the background
may strobe too quickly for you to see it. In this case, add a few more colors
to the array in.

Calenders in Javascript

2009-03-19T00:28:00.000-07:00

The “Coolest” DHTML Calendar:
This tool is easy to use and is well documented. It has several high quality color themes and it's translated into a lot of languages.Easy to use in our websites. In the downloaded files each and everything is clearly explained with an example for further understanding.

Download link is:
Downloalink

Download this files and use in your website. I found is very usefull, Hope for youalso

Javascript Menu List

2009-03-16T00:30:00.000-07:00

In the below example we have a two list boxes where we can transfer one list box value to another list box. and vice verse. I found this useful when creating a distribution list where you have a set of people available to go into that list.

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
form method="post" name="theForm">
<table align="center" bgcolor="white" border="1" cellpadding="10" cellspacing="0">
<tbody><tr><td align="center">
<select name="menu1" size="10" multiple="multiple">
<option>Menu Item 2</option>
<option>Menu Item 3</option>
<option>Menu Item 5</option>
</select><br>
<p align="center"><input onclick="one2two()" value=" >> " type="button"></p>

</td><td align="center">

<select name="menu2" size="10" multiple="multiple">
<option>Menu Item 6</option>
<option>Menu Item 4</option>
<option>Menu Item 1</option
</select><br>
<p align="center"><input onclick="two2one()" value=" << " type="button"></p>

</td></tr></tbody></table>
</form>
</body>
</html>