-
-
1- Create for Captcha
function loadImage()
{
var quote= new Array(5);
quote[0]=”65nlcvxf”;
quote[1]=”A7n59px”;
quote[2]=”Dnngbzdf”;
quote[3]=”fr9eqKWdl”;
quote[4]=”y8Uri5kg”;
var nextId=Math.floor(Math.random()*(quote.length-1)+1);
document.getElementById(‘pathimg’).innerHTML = ‘<img id=”‘+quote[nextId]+’” src=”captcha/’+quote[nextId]+’.jpg” />’;
var imgs=document.getElementById(‘pathimg’).getElementsByTagName(‘img’);
if(imgs.length>0){
while(true){
if(quote[nextId]==imgs[0].id){
nextId=Math.floor(Math.random()*(quote.length-1)+1);
}else{ break;}
}
}
}
function validateCaptcha(){
var ch=document.getElementById(‘pathimg’).getElementsByTagName(‘img’)[0].id;
var a2=document.getElementById(“inputCaptcha”).value;
var c3=ch.toUpperCase();
var a3=a2.toUpperCase();
if(a3==c3)
{
alert (“match”);
return true;
}else{
alert (ch+ “Security Code, Have You Entered is not valid !!” +a2);
loadImage();
return false;
}
}
2-
2)Bringing A Confirm Box
<html>
<head>
<script type=”text/javascript”>
function show_confirm()
{
var r=confirm(“Press a button!”);
if (r==true)
{
alert(“You pressed OK!”);
}
else
{
alert(“You pressed Cancel!”);
}
}
</script>
</head>
<body>
<input type=”button” onclick=”show_confirm()” value=”Show a confirm box” />
</body>
</html>
3)Which Element in a page has been clicked
<html>
<head>
<script type=”text/javascript”>
function whichElement(e)
{
var targ;
if (!e)
{
var e=window.event;
}
if (e.target)
{
targ=e.target;
}
else if (e.srcElement)
{
targ=e.srcElement;
}
if (targ.nodeType==3) // defeat Safari bug
{
targ = targ.parentNode;
}
var tname;
tname=targ.tagName;
alert(“You clicked on a ” + tname + ” element.”);
}
</script>
</head>
<body onmousedown=”whichElement(event)”>
<p>Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.</p>
</body>
</html>
4)Browser detection using javascript
<script type=”text/javascript>
function nambrow(){
var browsername=navigator.appName;
alert(“The Browser you are using”+browsername);
}
Now you can use it as an onclick or any other event of form element
5)Creating a back button on the page
<html>
<head>
<script type=”text/javascript”>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type=”button” value=”Back” onclick=”goBack()” />
<p>Ther should be some previous url to activate the button</p>
</body>
</html>
6)how to get hostname of current url
Answer:<html>
<body>
<script type=”text/javascript”>
document.write(location.protocol);
</script>
</body>
</html>
7-send a form value on url on click anchor link
<form action=”<? echo $this->getUrl(”) ?>catalogsearch/result” id=”search-form” method=”get”>
<fieldset>
<div><span>
<input type=”text” name=”q”>
</span>
<a onClick=”document.getElementById(‘search-form’).submit(this.value)”><img src=’<?php echo $this->getSkinUrl(“images/bizimages/submit.gif”) ?>’></a>
</div>
</fieldset>
</form>
How to disable a button while clicking on it
When we click a button we want sometime to be disable may be stopping multiple click OR any other reasons .You will find the script below
<html>
<head>
<script type=”text/javascript”>
function disable_button()
{
document.getElementById(“myButton”).disabled=true;
}
</script>
</head>
<body>
<button id=”myButton” type=”button” onclick=”disable_button()”>
Click to disable me</button>
</body>
</html>
9)How to Create a link to a low-resolution version of an image
By clicking on the link of low resolution image you can get to low resolution image
<html>
<body>
<img id=”compman” src=”compman.gif” lowsrc=”compman_lowres.gif” alt=”Computerman” width=”107″ height=”98″ />
<br />
<script type=”text/javascript”>
var x=document.getElementById(“compman”);
document.write(‘<a href=”‘ + x.lowsrc + ‘”>Low resolution</a>’);
</script>
</body>
</html>
10)How to get the mouse button type when clicked
OR
Which Mouse Button was Clicked
When you click the mouse button in the document sometime may be you want to proceed according to the the mouse button clicked
<html>
<head>
<script type=”text/javascript”>
function whichButton(event)
{
if (event.button==2)
{
alert(“You clicked the right mouse button!”);
}
else
{
alert(“You clicked the left mouse button!”);
}
}
</script>
</head>
<body onmousedown=”whichButton(event)”>
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>
</html>
11)How to get the coordinate of cursor relative to screen
<html>
<head>
<script type=”text/javascript”>
function whichButton(event)
{
alert(event.keyCode);
}
</script>
</head>
<body onkeyup=”whichButton(event)”>
<p><b>Note:</b> Make sure the right frame has focus when trying this example!</p>
<p>Press a key on your keyboard. An alert box will alert the keycode of the key.</p>
</body>
</html>
12)How to Load a specific URL from the history list
OR
How to go Two pages back in History
<script type=”text/javascript”>// <![CDATA[
function goBack()
{
window.history.back()
}
// ]]></script>
<input onclick=”goBack()” type=”button” value=”Back” />
Notice that clicking on the Back button here will not result in any action, because there is no previous URL in the history list.
13)How to create a static, dynamic and properties window in javascript
The script below will help you to crete a static dynamic and property window which is helpful in creating the diffrent windows as per need
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<SCRIPT>
function properties_page()
{
for (var i in window)
{
document.write (“Window property(” + i + “): ” +
window[i] + “<BR>”);
}
}
</SCRIPT>
<script language=”JavaScript”>
function dynamic_page(){
open(“http://www.java2s.com”, “myChild”);
}
function static_page()
{
window.open(“http://www.w3schools.com/PHP/php_arrays.asp”, “newWin”,
“resizeable,menubar,toolbar”);
}
</script>
<form name=”form1″>
<input type=”button” name=”b1″ value=”dynamic Child” onClick=’dynamic_page()’>
<input type=”button” name=”b2″ value=”static resize” onClick=’static_page()’>
<input type=”button” name=”b3″ value=”properties_page” onClick=’properties_page()’>
</form>
</body>
</html>
14)How to count how many times the mouse is clicked
Counting the mouse clicks can be important for interactive javascript application like games etc.
<html>
<head>
<title>Using window.captureEvents</title>
<script language=”JavaScript1.2″>
<!–
var counter = 0;
window.captureEvents(Event.CLICK)
window.onclick = myClickHandler;
function myClickHandler(){
window.document.myForm.myText.handleEvent;
}
function changeText(){
document.myForm.myText.value = counter++;
} –>
</script>
</head>
<body>
<form name=”myForm”>
<input type=TEXT size=2 value=”" name=”myText” onClick=’changeText()’>
</form>
</body>
</html>
15)How To disable External Events in a page through javascript
<html>
<head>
<script language=”JavaScript1.2″>
<!–
netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserWrite”);
window.enableExternalCapture();
window.captureEvents(Event.SUBMIT);
function turnOffEvents(){
window.disableExternalCapture();
alert(“You have sucessfully turned off external event captures”);
} –>
</script>
</head>
<body>
<form>
<input type=BUTTON value=”Disenable External Capturing” onClick=”turnOffEvents(
)”></form> </body> </html>
16)How to calculate the desktop height through javascript
By this example we can calculate height of desktop which can be useful to estimate the desktop height
<html>
<head>
<script language=”JavaScript1.2″>
<!–
function openWin(){
var myBars = ‘directories=no,location=no,menubar=no,status=no’;
myBars += ‘,titlebar=no,toolbar=no’;
var myOptions = ‘scrollbars=no,width=400,height=200,resizeable=no’;
var myFeatures = myBars + ‘,’ + myOptions;
var newWin = open(”, ‘myDoc’, myFeatures);
newWin.document.writeln(‘<h4>Properties for this Window</h4>’);
newWin.document.writeln(‘innerHeight: ‘ + newWin.innerHeight + ‘<br>’);
newWin.document.writeln(‘innerWidth: ‘ + newWin.innerWidth + ‘<br>’);
newWin.document.writeln(‘outerHeight: ‘ + newWin.outerHeight + ‘<br>’);
newWin.document.writeln(‘outerWidth: ‘ + newWin.outerWidth + ‘<br>’);
newWin.document.writeln(‘<form>’);
newWin.document.writeln(‘<input type=BUTTON value=”Close”‘);
newWin.document.writeln(‘ onClick=”window.close()”>’);
newWin.document.writeln(‘</form>’);
newWin.document.close();
} –>
</script>
</head>
<body>
<form>
<input type=BUTTON value=”Open” onClick=”openWin()”>
</form>
</body>
</html>
17)How to List the Directory with its files name
Displays a hyperlinked list of all the files contained in a specified folder. A really simple way to have your own directory browser, just drop the file in the folder and it will show an index of all files in the directory on your webspace.
/**
* Change the path to your folder.
* This must be the full path from the root of your
* web space. If you’re not sure what it is, ask your host.
*
* Name this file index.php and place in the directory.
*/
// Define the full path to your folder from root
$path = “/home/user/public/foldername/”;
// Open the folder
$dir_handle = @opendir($path) or die(“Unable to open $path”);
// Loop through the files
while ($file = readdir($dir_handle)) {
if($file == “.” || $file == “..” || $file == “index.php” )
continue;
echo “<a href=”\”>$file</a>”;
}
// Close
closedir($dir_handle);
18)How to stop right click by visitors on your website through javascvript
<SCRIPT LANGUAGE=”JAVASCRIPT”>
<!–
function click(e)
{
var msg = “No right click is allowed”;
if (document.all)
{
if (event.button == 2)
{
alert(msg);
return false;
}
}
if (document.layers)
{
if (e.which == 3)
{
alert(msg);
return false;
}
}
}
if (document.layers)
{
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
//–>
</script>
19)Counting words entered in a text box
function count_words(tbox_input)
{
no_words = tbox_input.value.split(” “);
alert(“Text box has ” + no_words.length + ” words”);
return false;
}
<FORM NAME=”myform”>
<TEXTAREA NAME=”details” COLS=”30″ ROWS=”6″>
This text box has six words.
</TEXTAREA>
<INPUT TYPE=”SUBMIT” VALUE=”Check”
ONCLICK=”return count_words(document.myform.details)”>
</FORM>
20)Switching between styles sheets through the use of javascript
The switch_style() function essentially iterates through all your link tags looking for a style sheet with the same title as the text specified in its argument (parameter). If it matches, it sets a special property, called disabled, to false, thus enabling that style sheet. In the meantime, all other relevant style sheets are disabled. The function ignores all persistent style sheets as well as any non-style-sheet link tags, such as those used for your site’s favicon. so this script can be intiated just by usiong an on click function with parameter as name of stylesheet and on clicking the button we get the changed effect
var style_cookie_name = “style” ;
var style_cookie_duration = 30 ;
// *** END OF CUSTOMISABLE SECTION ***
function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remote this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName(“link”) ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( “stylesheet” ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title,
style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
// http://www.thesitewizard.com/javascripts/cookies.shtml
var domain_string = valid_domain ?
(“; domain=” + valid_domain) : ” ;
document.cookie = cookie_name +
“=” + encodeURIComponent( cookie_value ) +
“; max-age=” + 60 * 60 *
24 * lifespan_in_days +
“; path=/” + domain_string ;
}
function get_cookie ( cookie_name )
{
// http://www.thesitewizard.com/javascripts/cookies.shtml
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
‘(^|;)[\s]*’ +
cookie_name +
‘=([^;]*)’ );
return decodeURIComponent ( cookie_value[2] ) ;
}
return ” ;
}
21)This example demonstrates how to add and remove rules from a style element. through javascript
The stylesheet of the code is as below
The javascript code to be attached with it
var e3_style_on = false;
function getStyleSheet() {
for(var i=0; i var sheet = document.styleSheets[i];
if(sheet.title == ‘e3_style’) {
return sheet;
}
}
}
var rule_sheet = getStyleSheet();
function changeText() {
if(!e3_style_on) {
rule_sheet.insertRule(“p { color: red;}”, 2);
}
e3_style_on = true;
showRules();
}
function resetText() {
if(e3_style_on) {
rule_sheet.deleteRule(2);
}
e3_style_on = false;
showRules();
}