Ajax file uploader using Jquery

I found this plugin for jquery while ago. You can visit this plugin's home page at:
http://www.uploadify.com/.
Its not actually not total jquery/ajax based. It uses flash .swf for filereference & upload progress, so without flash player on browser it won't work. Anybody who knows actionscript, can do this by him/herself easily , but this plugin will save their time to implement. it has multiple file upload features with customizable stylesheet. I used & liked it very much.

Scrollpane using Simple JQuery with mouseover/click event

If you are looking for a script that causes contents to scroll on mouseover/click event , then its a simple tutorial, which you can extend more as per your requirements. The html markup is as follows:

<!-- HTML MarkUp for Scrollpane Starts Here -->
<div id="scrollPane">
<div id="scroll_content">
<!-- Your Content Starts Here -->
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
<!-- Your Content Ends Here -->
</div>
<div id="arrow_container">
<img id="uparrow" src="images/up.jpg" alt="up arrow" />
<div id="verticalGap"></div>
<img id="downarrow" src="images/down.jpg" alt="down arrow" />
</div>
</div>
<!-- HTML MarkUp for Scrollpane Ends Here -->

the main function that responsible for all actions are as follows:


function ScrollPane(width,height,speed,mouseOver)
{
var NAV_WIDTH = 20, NAV_HEIGHT=28, H_TOL=20;

var y, diff,
container=$("#scrollPane"),
content = $("#scroll_content"),
nevigator=$("#arrow_container"),
upArrow = $("#uparrow"),
downArrow = $("#downarrow"),
verticalGap = $("#verticalGap");

container.css('width',width);
container.css('overflow','hidden');
container.css('position','absolute');

nevigator.css('height',height);
nevigator.css('width',NAV_WIDTH);
nevigator.css('float','right');

verticalGap.css('height',height-NAV_HEIGHT);

y = content.attr("offsetTop");
content.css('top',y);
content.css('position','absolute');
content.css('width',width-NAV_WIDTH);
content.css('z-index',1);
content.css('z-index',2);
diff = y-content.attr("offsetHeight")+H_TOL;

if(mouseOver)
{
upArrow.bind('mouseover',GoUp);
upArrow.bind('mouseout',Stop);

downArrow.bind('mouseover',GoDown);
downArrow.bind('mouseout',Stop);
}
else
{
upArrow.bind('mousedown',GoUp);
upArrow.bind('mouseup',Stop);

upArrow.bind('mousedown',GoDown);
upArrow.bind('mouseup',Stop);
}

function GoUp()
{
content.animate({top:(y)},10000/speed);
}

function GoDown()
{
content.animate({top:(diff)},10000/speed);
}

function Stop()
{
content.stop();
}
}

Now, initialize it on page load like as follows:

$(document).ready(Initialize);
function Initialize()
{
//The settings that you can change
//width= The width of the area you want to made scroll
var width = 300,height=200,speed=5,mouseOver=true;

var test = new ScrollPane(width,height,speed,mouseOver);
}

This is a very simple example, you can extend it, modify as like you want & very easy to understand. So, hope this will help you.

12 hours AM/PM format input mask using javascript/Jquery

For this task, I have used & extended a jquery plugin its jquery.maskedinput-1.2.2.js. You can see its more versions here:

http://plugins.jquery.com/node/104/release

It has its support for number masking like "99:99". To make it more meaningful with time mask in 12 hours AM/PM format, I have added some definitions like follows:

$.mask.definitions['g']="[ ]";
$.mask.definitions['h']="[aApP]";
$.mask.definitions['i']="[mM]";
$.mask.definitions['2']="[0-1]";
$.mask.definitions['6']="[0-5]";

Then the mask expression will be:
myMask = "29:69ghi";

$('#textBoxId').mask(myMask);

There, user will be forced to input a 12 hours format time like "11:19 AM". You can also, make your own definitions & use it as you like.

If you are having trouble to convert a 24 hours format into 12 hours am-pm format, then the following code snippet will help you to do this, very simple:

var time24HoursFormat = "17:30";//24 hours time to convert
var dateTime = new Date();
var splitted24Time = time24HoursFormat.split(":");
dateTime.setHours(splitted24Time[0].toString(),splitted24Time[1].toString());
alert(dateTime.toLocaleTimeString());
//give alert with 12 hours format time.