Showing posts with label Java Scripts. Show all posts
Showing posts with label Java Scripts. Show all posts

Wednesday, May 4, 2011

Go to top of page

By Magesh Kumar   Posted at  3:05 AM   Java Scripts No comments

<!-- START OF Watermark Jump to Top Link DHTML -->


<!-- SUMMARY BRIEF

          This DHTML script will put a small watermark
          link in the bottom right corner of your page
          that will stay there even when the page scrolls.
          This link will always take the user back to
          the top of the page.

-->


<!-- Put this portion of the script inside of your <HEAD> tag -->


<script>
<!--

// Change this text to the text that you want to be displayed as the link on your page.

var displayed="<nobr><font size=2 face=Arial><b>[Top]</b></font></nobr>"

// === DO NOT EDIT ANYTHING BELOW THIS LINE!!! === //

var logolink='javascript:window.scrollTo(0,0)'
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}

if (ie4||ns6)
document.write('<span id="logo" style="position:absolute;top:-300;z-index:100">'+displayed+'</span>')

function createtext(){ //function for NS4
staticimage=new Layer(5)
staticimage.left=-300
staticimage.document.write('<a href="'+logolink+'">'+displayed+'</a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}

function staticit(){ //function for IE4/ NS6
var w2=ns6? pageXOffset+w : document.body.scrollLeft+w
var h2=ns6? pageYOffset+h : document.body.scrollTop+h
crosslogo.style.left=w2
crosslogo.style.top=h2
}

function staticit2(){ //function for NS4
staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-28
staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height-10
}

function inserttext(){ //function for IE4/ NS6
if (ie4)
crosslogo=document.all.logo
else if (ns6)
crosslogo=document.getElementById("logo")
crosslogo.innerHTML='<a href="'+logolink+'">'+displayed+'</a>'
w=ns6? window.innerWidth-crosslogo.offsetWidth-20 : document.body.clientWidth-crosslogo.offsetWidth-10
h=ns6? window.innerHeight-crosslogo.offsetHeight-15 : document.body.clientHeight-crosslogo.offsetHeight-10
crosslogo.style.left=w
crosslogo.style.top=h
if (ie4)
window.onscroll=staticit
else if (ns6)
startstatic=setInterval("staticit()",100)
}

if (ie4||ns6){
window.onload=inserttext
window.onresize=new Function("window.location.reload()")
}
else if (ns4)
window.onload=createtext

function staticitns(){ //function for NS4
startstatic=setInterval("staticit2()",90)
}

//-->
</script>

<!-- END OF Watermark Jump to Top Link DHTML -->

Calculator script

By Magesh Kumar   Posted at  2:59 AM   Java Scripts No comments

<!-- A Simple Calculator -->
<!-- Instructions: Just put this script anywhere on your webpage
          between the body tags and you will have a calculator for your visitors!  -->
<CENTER>

<FORM name="Keypad" action="">
<TABLE>
<B>
<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</TD>
<TD
</TD>
<TD>
<input name="btnClear" type="Button" value="  C  " onclick="Clear()">
</TD>
<TD><input name="btnClearEntry" type="Button" value="  CE " onclick="ClearEntry()">
</TD>
</TR>
<TR>
<TD>
<input name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">
</TD>
<TD>
<input name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">
</TD>
<TD>
<input name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
</TD>
<TD>
</TD>
<TD>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</TD>
<TD>
<input name="btnPercent" type="Button" value="  % " onclick="Percent()">
</TD>
</TR>
<TR>
<TD>
<input name="btnFour" type="Button" value="  4  " onclick="NumPressed(4)">
</TD>
<TD>
<input name="btnFive" type="Button" value="  5  " onclick="NumPressed(5)">
</TD>
<TD>
<input name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnPlus" type="Button" value="  +  " onclick="Operation('+')">
</TD>
<TD align=middle><input name="btnMinus" type="Button" value="   -   " onclick="Operation('-')">
</TD>
</TR>
<TR>
<TD>
<input name="btnOne" type="Button" value="  1  " onclick="NumPressed(1)">
</TD>
<TD>
<input name="btnTwo" type="Button" value="  2  " onclick="NumPressed(2)">
</TD>
<TD>
<input name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')">
</TD>
<TD align=middle><input name="btnDivide" type="Button" value="   /   " onclick="Operation('/')">
</TD>
</TR>
<TR>
<TD>
<input name="btnZero" type="Button" value="  0  " onclick="NumPressed(0)">
</TD>
<TD>
<input name="btnDecimal" type="Button" value="   .  " onclick="Decimal()">
</TD>
<TD colspan=3>
</TD>
<TD>
<input name="btnEquals" type="Button" value="  =  " onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value  = Num;
FlagNewNum = false;
   }
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
   }
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accumulate += parseFloat(Readout);
else if ( '-' == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
   }
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
   }
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
   }
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}
// End -->
</SCRIPT>

Saturday, February 19, 2011

Event Handler

By Magesh Kumar   Posted at  2:10 AM   Java Scripts No comments


Standalone JavaScript

First, let's look at what a standalone piece of JavaScript looks like.

<script type="text/javascript">
<!--
 alert('Hey, remember to tell your friends!');
-->
</script>
If we place the above JavaScript between the 'head' tags (or 'body' tags), it will run as soon as we load the page.
Now this is fine - as long as you want it to run as soon as the page loads!
But, what if you don't want it to run as soon as the page loads? What if you only want it to run when a user clicks on a button?
Easy! This is where you need to use an "event handler".

What's an Event Handler?

In JavaScript/HTML, an event handler allows you to attach your JavaScript to your HTML elements.
Event handlers allow your web page to detect when a given "event" has occurred, so that it can run some JavaScript code. An example of an "event" could be say, a click on an HTML element.
In your code, an event handler is simply a special attribute that you add to your HTML element. For example, to run some JavaScript when the user clicks on an element, you add the onClick attribute to the element.
The examples below demonstrate this for you.

Adding JavaScript to an HTML Element

Here's a basic example of adding JavaScript to an HTML element. In this case, when the user clicks on our button, a JavaScript alert box is displayed. This is done by adding an onClick attribute and placing the JavaScript alert box code into it.
When you use JavaScript like this, you don't need to use script tags (like we did above). Simply place your JavaScript within the event handler and it will work.
Code:
<input type="button" onClick="alert('Hey, remember to tell your friends !');" value="Click Me!" />

JavaScript "On Double Click"

You could just have easily used another event to trigger the same JavaScript. For example, you could run JavaScript only when the double clicks the HTML element. We can do this using the onDblClick event handler.
Code:
<input type="button" onDblClick="alert('Hey, remember to tell your friends ');" value="Double Click Me!" />

Friday, February 18, 2011

JavaScript Image Rotator - cycle images or ads randomly or sequentially even of different sizes

By Magesh Kumar   Posted at  1:33 AM   Java Scripts No comments

Sometimes you may want to cycle affiliate ads on your site from an array of ads. The ads may be shown randomly or in a sequential fashion. What if the ads are of different sizes?

This script is a solution to all the above problems. This script can cycle images of different sizes on your site in a random or sequential order.

Extract the images directory and this file into the same directory and run the script for a demo.

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Javascript Image Rotater</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
// The order of display : True - Random / False - Sequential
var randomOrder = false;
// Default Width of the image (if not set individually)
var defaultWidth = 50;
// Default Height of the image (if not set individually)
var defaultHeight = 50;
// An array of the images to be rotated (Image Path[, Width of the Image[, Height of the Image]])
// If the width and height is not specified, the Default value specified above will be used
var arImg = new Array(); 
arImg[0] = ['images/1.gif'];
arImg[1] = ['images/2.gif', 100, 100];
arImg[2] = ['images/3.gif'];
arImg[3] = ['images/4.gif', 25, 25];
arImg[4] = ['images/5.gif'];

function rotateImage(){
    if(randomOrder){
        index = Math.floor(Math.random() * arImg.length);
    }else{
        var index = getCookie('rotate_image');
        index = index ? index : 0;
        index = ++index % arImg.length;
    }
    (img = document.getElementById('image_id')).src = arImg[index][0];
    img.width = (arImg[index][1]) ? arImg[index][1] : defaultWidth;
    img.height = (arImg[index][2]) ? arImg[index][2] : defaultHeight;
    setCookie('rotate_image', index);
}
/*
Functions for storing and retrieving cookies from my previous example
Check http://www.weberdev.com/get_example-4570.html
*/

function getCookie(name) {
    var sPos = document.cookie.indexOf(name + '=');
    var len = sPos + name.length + 1;
    if((!sPos) && (name != document.cookie.substring(0, name.length))){
        return null;
    }
    if(sPos == -1){
        return null;
    }
    var ePos = document.cookie.indexOf(';', len);
    if(ePos == -1) ePos = document.cookie.length;
    return unescape(document.cookie.substring(len, ePos));
}

function setCookie(name, value, expires, path, domain, secure){
    var today = new Date();
    if(expires){
        expires = expires * 1000 * 3600 * 24;
    }
    document.cookie = name+'='+escape(value) +
        ((expires) ? ';expires=' + new Date(today.getTime() + expires).toGMTString() : '') +
        ((path) ? ';path=' + path : '') +
        ((domain) ? ';domain=' + domain : '') +
        ((secure) ? ';secure' : '');
}
//-->
</script>
</head>

<body onload="rotateImage()">
<img src="images/1.gif" id="image_id" width="50" height="50" border="0" alt=""/>
</body>
</html>

Selected menu links

By Magesh Kumar   Posted at  1:32 AM   Java Scripts No comments


<script type="text/javascript">
function applySelectedTo(link) {
var ul = document.getElementsByTagName("ul")[0]; // get the first ul tag on the page
var allLinks = ul.getElementsByTagName("a"); // get all the links within that ul
for (var i=0; i<allLinks.length; i++) { // iterate through all those links
allLinks[i].className = ""; // and assign their class names to nothing
}
link.className = "selected"; // finally, assign class="selected" to our chosen link
}
</script>



Where the code in html is:

<ul>
<li><a onclick="applySelectedTo(this);return false;" href="#" class="">xxxx </a></li>
<li><a onclick="applySelectedTo(this);return false;" href="#" class="">yyyy </a></li>
<li><a onclick="applySelectedTo(this);return false;" href="#" class="">zzzz </a></li>
</ul> 

Magic title for weblogs or any pages on the internet

By Magesh Kumar   Posted at  1:30 AM   Java Scripts No comments

<!-- this script -->
     <SCRIPT language=javascript>
msg = " programmer in the world";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos >  msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
    </SCRIPT>

Back to top ↑
Connect with Us

What they says

© 2013 MaGeSH 2 help. WP Mythemeshop Converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.