28
Jan
Archive for the ‘Javascript’ Category
Javascript quick tips to do common tasks
21
Jan
The following scriptlet allows you to check whether the variable is defined or not:
if( typeof myVar == "undefined" ){
myVar = " ";
}
26
Dec
<html>
<head>
<script type="text/javascript">
function goForward()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()" />
<p>Notice that clicking on the Forward button here will not result in any action, because there is no next URL in the history list.</p>
</body>
</html>
21
Dec
Steps to display random image on a web page:
1)creating an array with the names of the images
2)random value is obtained by using the Math.random() method
3)Display the image using document.write() method
var arry_img= new Array("1.jpg", "2.jpg","3.jpg");
var i = Math.floor(3*Math.random());
document.write('');
21
Oct
The following example will show you how to add “Select All” and “Unselect All” script on your web page. Copy the following code and test it.
<html>
<head><title>Select Items</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function do_select_all(){
jQuery(":input[id^='item_']").each(
function()
{
$('#'+this.id).attr('checked', true);
}
);
}
function do_unselect_all(){
jQuery(":input[id^='item_']").each(
function()
{
$('#'+this.id).attr('checked', false);
}
);
}
</script>
</head>
<body>
<form name="f1" method="post">
<p>Select items from the following list</p>
<ol>
<li><input type="checkbox" name="item[]" id="item_1" value="Keyboard">Keyboard</li>
<li><input type="checkbox" name="item[]" id="item_2" value="Mouse">Mouse</li>
<li><input type="checkbox" name="item[]" id="item_3" value="DVD">DVD</li>
<li><input type="checkbox" name="item[]" id="item_4" value="Web Camera">Web Camera</li>
</ol>
<input type="button" name="select_all" id="select_all" value="Select All" onClick="do_select_all()" />
<input type="button" name="unselect_all" id="unselect_all" value="Unselect All" onClick="do_unselect_all()" />
</form>
</body>
</html>
15
Oct
The following code will put a text clock or a date time clock on your website that will update in real time.
<html>
<script type="text/javascript">
day =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
month=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function Clock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();
if(nyear<1000) nyear=nyear+1900;
if(nhour == 0) {ap = " AM";nhour = 12;}
else if(nhour <= 11) {ap = " AM";}
else if(nhour == 12) {ap = " PM";}
else if(nhour >= 13) {ap = " PM";nhour -= 12;}
if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}
document.getElementById('clock').innerHTML=""+day[nday]+", "+month[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
setTimeout("Clock()", 1000);
}
window.onload=Clock;
</script>
<body>
<div id="clock"></div>
</body>
</html>
output
15
Oct
All you need is a small html page with a “Refresh” button and small one line Javascript code to refresh the page. Copy the following code and save it with an extension .htm or .html:
<html>
<head><title>Page Refresh</title>
<script type="text/javascript">
function refresh_page(){
window.location.href = window.location;
}
</script>
</head>
<body>
<input type="button" name="refresh" id="refresh" value="Refresh" onClick="refresh_page()" />
</body>
</html>
15
Oct
This is a sample program to create a drag and drop using javascript.
<html>
<head>
<title>Javascript Drag and Drop Example.</title>
<style type="text/css">
.vidFrame {
position: absolute;
display: none;
background-color: #ffdead;
border: 1px solid #800000;
width: 435px;
height: 362px;
cursor: move;
}
.moveable {
position: absolute;
cursor: move;
}
</style>
<script language="JavaScript" type="text/javascript">
var selObj = null;
function playVid(vidId) {
if (vidPaneID.style.display=='block') {
vidPaneID.style.display='none';
vidPaneID.innerHTML='';
}
}
function moveHandler(e){
if (e == null) { e = window.event }
if (e.button<=1&&dragOK){
selObj.style.left=e.clientX-dragXoffset+'px';
selObj.style.top=e.clientY-dragYoffset+'px';
return false;
}
}
function cleanup(e) {
document.onmousemove=null;
document.onmouseup=null;
selObj.style.cursor=orgCursor;
dragOK=false;
}
function dragHandler(e){
var htype='-moz-grabbing';
if (e == null) { e = window.event; htype='move';}
var target = e.target != null ? e.target : e.srcElement;
selObj=target;
orgCursor=target.style.cursor;
if (target.className=="vidFrame"||target.className=="moveable") {
target.style.cursor=htype;
dragOK=true;
dragXoffset=e.clientX-parseInt(selObj.style.left);
dragYoffset=e.clientY-parseInt(selObj.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;
}
}
document.onmousedown=dragHandler;
</script>
</head>
<body>
<img src='Tree.jpg' class='moveable' id='movePic'>
<div id='vidPane' class='vidFrame'></div>
<script language="JavaScript" type="text/javascript">
var orgCursor=null;
var dragOK=false;
var dragXoffset=0;
var dragYoffset=0;
vidPaneID = document.getElementById('vidPane');
vidPaneID.style.top='75px';
vidPaneID.style.left='75px';
document.getElementById('movePic').style.left='500px';
document.getElementById('movePic').style.top='100px';
</script>
</body>
</html>
01
Oct
This is an Image Viewer application using HTML and Javascript.
More »
-
Follow us
