JavaScript made simple: March 2009

Monday, March 30, 2009

Ajax Tabs Content script

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

Friday, March 27, 2009

Image slideshow with back and prev buttons

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

Wednesday, March 25, 2009

Javascript for Checkbox array

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.

Monday, March 23, 2009

Tabs using javascript

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

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>

Saturday, March 21, 2009

Javascript radio button validation

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.

Friday, March 20, 2009

Building a clock in Javascript

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

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.

Thursday, March 19, 2009

Calenders in Javascript

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

Monday, March 16, 2009

Javascript Menu List

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>

Thursday, March 12, 2009

Text / Image Slideshow

This is a simple basic example to slideshow the text given in an array. Here we use array to retrieve the text and pass to the slide show.

<html>
<head>
<title>Arrays and Loops</title>
<script type = "text/javascript">

var tips = new Array("Hello welcome.", "welcome to findmysolutions.blogspot.com", "Here you find a simple solutions.","javascript made simple","thanks you");
var index = 0;
function scroll() {
document.tip_form.tip_box.value = tips[index];
index++;
if (index == tips.length)
{
index = 0;
}
setTimeout("scroll()", 3500);
}

</script>
</head>
<body onLoad = "scroll();">
<form name = "tip_form">
<textarea name = "tip_box" rows = "3" cols = "30">
</form>
</body>
</html>

Here the text will be scrolled.

The same thing will be applied for the images the only change we need to do is just change the text value to the image path where the images are stored.

By adding the code <img src='test/testimage1.jpg'> ,<img src='test/testimage2.jpg'>
<img src='test/testimage3.jpg'> and so on. Then the images will be displayed instead of text.

Select All / None Checkboxes

In the below example you will know how to enable all the checkboxes by using single click and how to disable the checkboxes by using a single click. These functionality is used when we need to delete all the records in a single page. The best usage of using this exampe is "In yahoo mail where we need to provide user to check all the read mail and delete"

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

function checkAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}

</script>

</head>
<body>
<form name="myform" action="test2.html" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1">Java<br>
<input type="checkbox" name="list" value="2">Javascript<br>
<input type="checkbox" name="list" value="3">Active Server Pages<br>
<input type="checkbox" name="list" value="4">HTML<br>
<input type="checkbox" name="list" value="5">SQL<br>

<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
<br>
</form>
</body>
</html>

Here when we click on the check All function all the checkboxes are selected and when the uncheckAll() function is selected then all the checkboxes are deselected

If you want to use a single button to checkall and uncheck all use the below code

<html>
<head>

<script language="javascript">

checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>

</head>
<body>
<form id ="frm1">
<input type="checkbox" name="chk1">
<input type="checkbox" name="chk2">
<input type="checkbox" name="chk3">
<input type="checkbox" name="chk4">
<input type="checkbox" name="chk5">
<input type='button' name='checkall' value="check/uncheck" onclick='checkedAll(frm1);'>
</form>
</body>
</html>

checkbox validation

There are so many ways to check the checkbox validation scripts. But in some scenarios we need to check the checkbox's selected or not dynamically, for which the general scenarios are not usefull.

The below javascript code is used for checking the N number of checkbox's dynamically but not calling each and every checkbox name individually.

Javascript example:

<html>
<head>
<script language="javascript">
function ValidateCheckboxForm(checkForm){
var count = 0;
for(var i=0; i< checkForm.length; i++){
if(checkForm[i].checked == true){
count++;
}
}
if(count <= 0){
alert("please select at least one checkbox");
return false;
}
}
</script>
</head>
<body>
<form name="checkform">
<input type="checkbox" name="a" value="a" />A
<input type="checkbox" name="b" value="b" />B
<input type="checkbox" name="c" value="c" />C
<input type="button" name="submitmail" value="Click Here" onclick="javascript:ValidateCheckboxForm(this.form)"/> </form>
</body>
</html>

Here function name is "ValidateCheckboxForm()"
if user did not check even a single check box then an alert message is provided "to check atleast one check box" else it returns true.

Monday, March 9, 2009

Navigation using the Select tag

By using the form select tag the user can easily navigate from one page to another page. The "windiow.location.href" is used to move the user from one page to the another page. The below code makes it so simple.

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function changePage(newLoc)
{

nextPage = newLoc.options[newLoc.selectedIndex].value;

if (nextPage != "")
{
document.location.href = nextPage
}
}
</script>
</head>
<body>
<center>
<form method="POST" name="menu" >
<select name="selectedPage" onChange="changePage(this.form.selectedPage)">
<option value = "" selected> select </option>
<option value = "/test.html"> Goto test page </option>
<option value = "/home.html"> Goto home page </option>
<option value = "/welcome.html"> Goto welcome page </option>
<option value = "/index.html"> Goto index page </option>
</select>
</form>
</center>
</body>
</html>

Here as per the selected the option value the URL will be refreshed and the particular page is displayed.

Reading values from select tag

The below examples provides you information of how to read the values from the select tag

<html>

<head>

<script language="JavaScript">



</script>

<title>Select Boxes</title>

</head>

<body>

<form>

<p><select name="MySelect" size="1">

<option selected value="none">Clicke to test</option>

<option value="welcome">Welcome to javascript</option>

<option value="hello">hello world</option>

</select><input type="button" value="clickme >>>" name="B1"

onClick="Message(this.form)"></p>

</form>

</body>

</html>

Saturday, March 7, 2009

Validations for checking only numerics

The javascript below checks whether the user has entered numeric value or alphabets in the text box. Here we used the onkeyup event to raise the javascript event.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function checkForInvalid(obj) {
if( /[^0-9\-]|-{2,}/gi.test(obj.value) ) {
alert("Invalid character in Invoice No.")
obj.focus();
obj.select();
return false;
}
return true;
}

</script>
</head>

<body>
<form name="myForm">
<input type="text" name="invoiceNo" onkeyup="checkForInvalid(this)">
</form>
</body>
</html>

Validations for only characters

The below code allows user to enter only the character(lower case or upper case)

function check(df)
{
for (n=0;n<document.form.elements.length-1;n++)
{
if(form.elements[n].name.indexOf("invoiceNo")!=-1) && (form.elements[n].value==""))
{
var flag
var flag="false"
var valid="abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for(i=0;i<form.elements[n].value.length;i++)
{
if(valid.indexOf(form.elements[n].value.charAt(i))==-1)
{
flag="true"
alert("Invalid character in Invoice No.")
form.elements[n].focus();
form.elements[n].select();
return false;
break;
}
}

}
}
}

Thursday, March 5, 2009

Javascript Form events

Some Events That Different Form Elements Can Handle

These are the common events which we mostly use

For Button:
we use the Onclick event
For Check box:
We use the onClick event
For radio Button:
We use the onClick event
For Text Box:
We use the onChange event

Note that text fields, textareas, and selects can trigger events only when
someone changes them. If a user clicks on a pull-down menu and then chooses
an already selected option, that doesn’t trigger the onChange event. Similarly,
if someone clicks a text field and then clicks somewhere else without changing
anything in the text field, onChange won’t register this action.
Notice also that the form element takes an event called onSubmit. A form
is submitted when the user presses the ENTER key with the cursor in a text field
or when the user clicks a submit button.

Textbox simple onchange event example:

<form name = "the_form"
>
<input type = "text" name = "email"
onChange = "checkEmail(window.document.the_form.email.value);"/>
</form>

the elements window.document.the_form.email inside the onChange simply identify the text field that the onChange is part of. Because the text field is sending its own value to the checkEmail() function, the onChange of the text field can be rewritten like this:

onChange = "checkEmail(this.value);"

Simple example for SELECT TAG

<html>
<head>
<title>A Pull-Down Menu for Navigation</title>
<script type = "text/javascript">

</script>
</head>
<body>
<h1>Use the pull-down menu to choose where you want to go</h1>
<form name = "the_form">
<select name = "the_select" onChange = "visitSite(this.value);">
<option value = "http://www.nostarch.com">No Starch Press</option>
<option value = "http://www.nytimes.com">The New York Times</option>
<option value = "http://www.theonion.com">The Onion</option>
</select></form>
</body>
</html>

Tuesday, March 3, 2009

Image Zoom in/out

We have so many image zoom in /zoom out functionality, But in this we make is so simpler and make it compatible with so many browsers with less javascript.

Highslide JS

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:

* No plugins like Flash or Java required.
* Popup blockers are no problem. The content expands within the active browser window.
* Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
* Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

URL for this is highslide

You can visit the above URL and download the free script code. In this site we have so many zoom in/out scripts used which are so user friendly and can be easily implemented.

Installation

Note: some basic HTML knowledge is required to install Highslide.

1. Download and extract the zip-archive from the download page.
2. Run the file index.html, navigate to your favourite setup and view the source.
3. Change the file to suit your needs, or copy and paste parts of it into your HTML file. If you mess it up, go back to the original file and change it bit by bit. Study the documentation and the API reference for advanced features.
4. If you move the Highslide JS files, remember to change the graphicsDir setting in the Javascript.

Monday, March 2, 2009

How to read values in a form - Radio Buttons

The code for reading and setting radio buttons is slightly more complicated
than for text fields and checkboxes. Because all the radio buttons in a group
have the same name, you can’t just ask about the settings for a radio button
with a certain name—JavaScript won’t know which button you mean.
To overcome this difficulty, JavaScript puts all of the radio buttons with
the same name in a list. Each radio button in the list is given a number. The
first radio button in the group is number 0, the second is 1, the third is 2, and
so on. (Most programming languages start counting from 0—you just have
to get used to this.)
To refer to a radio button, use the notation radio_button_name[item_number].
For example, if you have four radio buttons named age, the first one will be
age[0], the second will be age[1], the third age[2], and the fourth age[3].
To see whether a visitor has chosen a certain radio button, look at its
checked property, just as with checkboxes. Let’s say you have four radio buttons
named age in a form called radio_button_form.To test whether
your visitor has selected the first radio button in the age group, write something
like this:

if (window.document.radio_button_form.age[0].checked == true)
{
alert("the first radio button was selected!");
}

This is much the same method that you would use for a checkbox. The only difference is that you must refer to the first radio button in the age group as age[0], whereas with a checkbox you can just give its name. Once you know how to determine whether a radio button is checked, it’s easy to understand how to select a radio button with JavaScript. With checkboxes, you use something like this:

window.document.form_name.checkbox_name.checked = true;

<b>Pull-Down Menus and Scrollable Lists<#60/b>

JavaScript can read and set pull-down menus and scrollable lists as it does radio buttons, with two main differences. First, while radio buttons have a checked property, pull-down menus and scrollable lists have a comparable property called selected. Second, the list that keeps track of the options in a pull-down menu or scrollable list differs from that for a radio button. As discussed in the section on reading and setting radio buttons, when a browser sees a group of radio buttons, it creates a list with the same name as the set
of radio buttons.
In contrast, a pull-down menu or scrollable list has the options property,
a list of all the options in the pull-down or scrollable list, which can tell you
what’s selected in that menu or list.

Small Example:

<form name = "my_form">
<select name = "the_gender">
<option value = "male">Male</option>
<option value = "female">Female</option>
</select>
</form>

The javascript function for this is:

if (window.document.my_form.the_gender.options[0].selected == true)
{
alert("It's a boy!)";
}

You can also select an option:

window.document.my_form.the_gender.options[1].selected = true;

Executing this line of JavaScript would select the female option in the pulldown
menu. Sometimes you have a long list of options in a pull-down menu, you just want to know which one the visitor has selected. Happily, pulldown menus and scrollable lists have a value property that contains value of the selected option.out quickly whether a visitor chose male or female in this pull-down menu,write something like this:

var chosen_gender = window.document.my_form.the_gender.value;

Sunday, March 1, 2009

How to read values in a form - Checkbox

Checkboxes differ from text fields and textareas. Instead of having a value
as text fields and textareas do, they have a Boolean attribute called checked.

If a user has clicked a checkbox so that an × or check mark appears in
it, then checked equals true. If the checkbox is not on, then checked equals
false (remember—because true and false are Booleans, they don’t take
quotes).

Let me explain with an example:

<html>
<head>
<title>A Little Quiz</title>
<script type = "text/javascript">

</script>
</head>
<body>
<h1>A Little Quiz</h1>
Check the statements which are true:
<form name = "the_form">
<input type = "checkbox" name =
"question1"> All men are featherless bipeds<br>
<input type = "checkbox" name =
"question2"> All kangaroos are featherless bipeds<<br>
<input type = "checkbox" name = "question3"> All men are kangaroos<br>
<input type = "button" value = "score this quiz" onClick = "scoreQuiz();">
</form>
</body>
</html>

When a user clicks the button form element at the bottom of the window it calls the scoreQuiz() function. then creates a variable called correct and sets its value to 0. This variable keeps track of how many answers the visitor answered correctly.
The if-then statement in is slightly different from the other two. It says that if the checked property of the third checkbox is false (that is, the visitor
hasn’t selected the checkbox), then JavaScript should add 1 to correct.

To show visitors the correct answers after they click the score button we could use the scoreQuiz() function to determine the value of each checkbox by setting its checked property to true or false. updates the scoreQuiz() function to give the correct answers.
I add an else to each if-then clause, which sets the checkbox to the correct answer if the visitor gets the answer wrong. The first if-then clause, starting with , reads in plain English, “If the visitor checks the first checkbox, the answer is correct, so add 1 to the variable correct. Otherwise, check the first checkbox to indicate the correct answer.” If the visitor guessed wrong, selects the first checkbox by setting its checked property to true.

How to read values in a form - Textbox

Important thing we have to know before we write a javascript form is "The values are are reading must be with the tag". The values which are in between them can only be read. IF the elements are outer than this form then that variables are not accessible.

Simple example:

<html>
<head>
<title>A Very Simple Calculator</title>
<script type = "text/javascript">

</script>
</head>
<body>
<form name = "the_form">
Number 1: <input type = "text" name = "field_one"> <br>
Number 2: <input type = "text" name = "field_two"> <br>
The Product: <input type = "text" name = "the_answer"> <br>
<a href = "#" onClick = "multiplyTheFields(); return false;">Multiply them!</a>
</form>
</body>
</html>

Here is a simple example which takes the values from the two text boxes .. mutiply them and display the resultant value to the third text box.

Note: In the last step of the JavaScript function we see return false. Here return false is mentioned because the form should not be posted and page should not be refreshed.