Sliding Down Calender

javascriptFile2 CssFile2 cssFile1 javascriptFile1

This is a calender which will display when we click on the text box.The calender will slide down when the visitor click on the text box…. 😀

All the javascript and CSS files are attached at the top of this post.Just copy and save with the names given in the top of those files.save these files in to the same folder where calender.php file is included.



 

 

 

 

 

 

 

 

 

 

 

 

 

 

The following is the php code….
<html><title>Calender</title>

<head>

<LINK href=”ui.datepicker.css” rel=”stylesheet” type=”text/css”>
<LINK href=”ui.theme.css” rel=”stylesheet” type=”text/css”>
<script src=”jquery-1.3.2.js” type=”text/javascript”></script>
<script src=”ui.datepicker.js” type=”text/javascript”></script>
<script>

function getStartDate(){
$(‘#txtStartDate’).datepicker({showButtonPanel: false});
}

</script>
</head>
<body>
Start Date : <input type=”text” id=”txtStartDate” onFocus=”getStartDate()”>

</body>
</html>

Published in: on November 18, 2009 at 12:12 pm  Leave a Comment  

Move options in a combo to another Combo

This is one of selection methods used in web developing. Here we can use javascript to get this job done… 🙂

combo

This is the HTML form I used….

<html>
<head>
<title>Move items from one combo to another</title>

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

<body>
<table align="centre" class="box-table-a" width="80%" id="tblFields">
<tr>
<td>

<select size=5 name=select_columns multiple=yes id=available_columns>
<option value ="Name">Name</option>
<option value ="Age">Age</option>
<option value ="Gender">Gender</option>
<option value ="Address">Address</option>
</select>

</td>
<td>

<br>
<input type="button" id="move_right" onclick="moveRightAll()" value="Move All >>">
<br>
<input type="button" id="move_right" onclick="moveRight()" value=">>">
<br>
<input type="button" id="move_left" onclick="moveLeft()" value="<<">
<br>
<input type="button" id="move_left" onclick="moveLeftAll()" value="<< Move All">
<br>

</td>
<td>
<select name="selectedItems" id="selected_columns" size="5" multiple="yes">
</select>
</td>
</tr>

</table>
</body>
</html>

Following is the javascript file I used …
moveItems.js

// JavaScript Document

//moving all items
function moveRightAll(){

var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');
var sl_length = sl_cols.options.length;
//empty selected item box
//sl_cols.options.length = 0;

for (var i = 0; i < av_cols.options.length; i ){
sl_cols.options[i sl_length] = new Option(av_cols.options[i].text, av_cols.options[i].value);
}

for (var i = 0; i < av_cols.options.length; i )
{
sl_cols.options[i sl_length] = new Option(av_cols.options[i].text, av_cols.options[i].value,av_cols.options[i].selected = true);
// av_cols.options[i].value.select();
}

//empty available item box
av_cols.options.length = 0;

}

//moving all items
function moveLeftAll(){

var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');
var av_length = av_cols.options.length;
//empty available item box
//av_cols.options.length = 0;

for (var i = 0; i < sl_cols.options.length; i )
av_cols.options[i av_length] = new Option(sl_cols.options[i].text, sl_cols.options[i].value);

//empty selected item box
sl_cols.options.length = 0;

}

//moving items to the right
function moveRight(){
var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');

swapItems(av_cols, sl_cols);

}

function moveLeft(){
var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');

swapItems(sl_cols, av_cols);

}

function swapItems(boxFrom, boxTo){
var countBoxTo = boxTo.options.length;

for (var i = 0; i < boxFrom.options.length; i ){
if (boxFrom.options[i].selected) {
boxTo.options[countBoxTo ] = new Option(boxFrom.options[i].text, boxFrom.options[i].value);
removeItem(boxFrom, i);
i–;
}
}
}

function removeItem(listBox, optionIndex){
listBox.remove(optionIndex);

}

Published in: on November 13, 2009 at 10:15 am  Leave a Comment