ManyCodes.com – codes & scripts Get free programming codes and tutorials!

28Jul/090

How to get a nice menu with java script on your website

Here is how you can How to get a nice menu with java script on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<!-- START OF Watermark Navigation Menu DHTML --><!-- START OF Watermark Navigation Menu DHTML -->


<!-- SUMMARY BRIEF

 This DHTML script will make a navigation menu
 that will follow your screen as you scroll,
 kind of like the old Geocities™ watermark.

 Look through the code for comments that will
 tell you where to change the code to configure
 it how you want in order to display the links
 that you want.

-->


<!-- Put this code inside of your <HEAD> tag. -->


<STYLE TYPE="text/css">
<!--

.menuheader {
 BORDER-COLOR : #000000 ;
 cursor : hand ;
 Border-Left : #000000 ;
 Border-Top : #000000 ;
 Padding-Left : 1px ;
 Padding-Top : 1px ;
 Background-Color : #000000 ;
}

.menu {
 Background-Color : white ;
}

.home {
 cursor : hand ;
}

.menulinks {
 text-decoration:none;
}

//-->
</STYLE>


<!-- Put this code inside of your <BODY> tag on your page, but OUTSIDE of any other tags. This can NOT be inside of any other tags on your page. -->


<SCRIPT Language="Javascript1.2">
<!--

///////////////////////////////////////////////////////////////
// Change the width and placement of the menu on the page below.
///////////////////////////////////////////////////////////////

var menuwidth=110
var offsetleft=10
var offsettop=10

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

function makeStatic() {
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop}
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
setTimeout("makeStatic()",0);
}

if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')}
else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')}

///////////////////////////////////////////////////////////////
// Change the name of the menu (the text at the top) below.
// You can also shange the font face, size and border colors.
///////////////////////////////////////////////////////////////

if (ie4||ns6||ns4)
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Navigation</FONT></TD></TR>')

var menui = new Array();
var menul = new Array();

///////////////////////////////////////////////////////////////
// Edit menus listing here. You can make as many as you need,
// just make sure that the numbers go up in order correctly.
// The "menui" variables are the actual link text that will
// show up in the menu. The "menul" variables are the URLs
// that match the text displayed there.
///////////////////////////////////////////////////////////////

menui[0]="CoffeeCup Software";
menui[1]="CoffeeCup HTML Editor";
menui[2]="CoffeeCup Help Site";
menui[3]="CoffeeCup Site Map";
menui[4]="Other CoffeeCup Products";
menui[5]="Bob & Larry\'s Free Stuff";
menui[6]="About CoffeeCup Software";
menui[7]="Bluedomino Webhosting";

menul[0]="http://www.webloger.5u.com";
menul[1]="http://www.webloger.5u.com";
menul[2]="http://www.webloger.5u.com";
menul[3]="http://www.webloger.5u.com";
menul[4]="http://www.webloger.5u.com";
menul[5]="http://www.webloger.5u.com";
menul[6]="http://www.webloger.5u.com";
menul[7]="http://www.webloger.5u.com";

for (i=0;i<=menui.length-1;i++)

///////////////////////////////////////////////////////////////
// You can change table cell background colors below.
// Just change the color names to whatever you want,
// but do NOT change any other code.
///////////////////////////////////////////////////////////////

if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location=\''+menul[i]+'\'" onmouseover="className=\'menuheader\'" onMouseout="className=\'menu\'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')}
else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor=\'yellow\'" onmouseout="bgColor=\'white\'"><CENTER><A HREF="'+menul[i]+'">'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')}

if (ie4||ns6) {document.write('</TABLE></span>')}
else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')}

function menu3(){
if (ns6||ie4||ns4)
makeStatic()
}

window.onload=menu3

//-->
</SCRIPT>


<!-- END OF Watermark Navigation Menu DHTML -->


<!-- SUMMARY BRIEF

 This DHTML script will make a navigation menu
 that will follow your screen as you scroll,
 kind of like the old Geocities™ watermark.

 Look through the code for comments that will
 tell you where to change the code to configure
 it how you want in order to display the links
 that you want.

-->


<!-- Put this code inside of your <HEAD> tag. -->


<STYLE TYPE="text/css">
<!--

.menuheader {
 BORDER-COLOR : #000000 ;
 cursor : hand ;
 Border-Left : #000000 ;
 Border-Top : #000000 ;
 Padding-Left : 1px ;
 Padding-Top : 1px ;
 Background-Color : #000000 ;
}

.menu {
 Background-Color : white ;
}

.home {
 cursor : hand ;
}

.menulinks {
 text-decoration:none;
}

//-->
</STYLE>


<!-- Put this code inside of your <BODY> tag on your page, but OUTSIDE of any other tags. This can NOT be inside of any other tags on your page. -->


<SCRIPT Language="Javascript1.2">
<!--

///////////////////////////////////////////////////////////////
// Change the width and placement of the menu on the page below.
///////////////////////////////////////////////////////////////

var menuwidth=110
var offsetleft=10
var offsettop=10

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

function makeStatic() {
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop}
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
setTimeout("makeStatic()",0);
}

if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')}
else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')}

///////////////////////////////////////////////////////////////
// Change the name of the menu (the text at the top) below.
// You can also shange the font face, size and border colors.
///////////////////////////////////////////////////////////////

if (ie4||ns6||ns4)
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Navigation</FONT></TD></TR>')

var menui = new Array();
var menul = new Array();

///////////////////////////////////////////////////////////////
// Edit menus listing here. You can make as many as you need,
// just make sure that the numbers go up in order correctly.
// The "menui" variables are the actual link text that will
// show up in the menu. The "menul" variables are the URLs
// that match the text displayed there.
///////////////////////////////////////////////////////////////

menui[0]="CoffeeCup Software";
menui[1]="CoffeeCup HTML Editor";
menui[2]="CoffeeCup Help Site";
menui[3]="CoffeeCup Site Map";
menui[4]="Other CoffeeCup Products";
menui[5]="Bob & Larry\'s Free Stuff";
menui[6]="About CoffeeCup Software";
menui[7]="Bluedomino Webhosting";

menul[0]="http://www.javakhafan.9f.com";
menul[1]="http://www.javakhafan.9f.com";
menul[2]="http://www.javakhafan.9f.com";
menul[3]="http://www.javakhafan.9f.com";
menul[4]="http://www.javakhafan.9f.com";
menul[5]="http://www.javakhafan.9f.com";
menul[6]="http://www.javakhafan.9f.com";
menul[7]="http://www.javakhafan.9f.com";

for (i=0;i<=menui.length-1;i++)

///////////////////////////////////////////////////////////////
// You can change table cell background colors below.
// Just change the color names to whatever you want,
// but do NOT change any other code.
///////////////////////////////////////////////////////////////

if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location=\''+menul[i]+'\'" onmouseover="className=\'menuheader\'" onMouseout="className=\'menu\'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')}
else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor=\'yellow\'" onmouseout="bgColor=\'white\'"><CENTER><A HREF="'+menul[i]+'">'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')}

if (ie4||ns6) {document.write('</TABLE></span>')}
else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')}

function menu3(){
if (ns6||ie4||ns4)
makeStatic()
}

window.onload=menu3

//-->
</SCRIPT>


<!-- END OF Watermark Navigation Menu DHTML -->

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to set background color (User control) of your website

Here is how you can set background color (User control) of your website. This code allows the user to choose the favorite color of himself/herself and adjust it on the bground of the page by moving mouse and choosing the color.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<CENTER>

<!-- This script and many more are available online free at -->
<!-- The JavaScript Source!! http://www.javakhafan.9f.com -->
<p>[<a href="/"
onmouseover="document.bgColor='green'">Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='greem'">Bright Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='seagreen'">Sea Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='red'">Red</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='magenta'">Magenta</a>]<br>
[<a href="/"
onmouseover="document.bgColor='fusia'">Fusia</a>]<br>
[<a href="/"
onmouseover="document.bgColor='pink'">Pink</a>]<br>
[<a href="/"
onmouseover="document.bgColor='purple'">Purple</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='navy'">Navy</a>]<br>
[<a href="/"
onmouseover="document.bgColor='blue'">Blue</a>]<br>
[<a href="/"
onmouseover="document.bgColor='royalblue'">Royal Blue</a>]<br>
[<a href="/"
onmouseover="document.bgColor='Skyblue'">Sky Blue</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='yellow'">Yellow</a>]<br>
[<a href="/"
onmouseover="document.bgColor='brown'">Brown</a>]<br>
[<a href="/"
onmouseover="document.bgColor='almond'">Almond</a>]<br>
[<a href="/"
onmouseover="document.bgColor='white'">White</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='black'">Black</a>]<br>
[<a href="/"
onmouseover="document.bgColor='coral'">Coral</a>]<br>
[<a href="/"
onmouseover="document.bgColor='olivedrab'">Olive Drab</a>]<br>
[<a href="/"
onmouseover="document.bgColor='orange'">Orange</a>]<br>
<hr color="#00FFFF">
</CENTER>

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to get a moving text status on your website

Here is how you can get a moving text status on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<!--   DESCRIPTION:  This script will make your status message slide into place.  Neat effect.

 INSTRUCTIONS:  Place this script in the BODY tags of
your webpage.  Then place the appropriate message in the var msg value.

 FUNCTIONALITY: Works in both Netscape and IE.



//Modified by CoffeeCup Software
//This code is Copyright (c) 1997 CoffeeCup Software
//all rights reserved. License is granted to a single user to
//reuse this code on a personal or business Web Site.

-->

<BODY onLoad="timerONE=window.setTimeout('slide(120,0)',20);">

<SCRIPT LANGUAGE="JavaScript">

function slide(jumpSpaces,position) {
 var msg = "This JavaScript will slide in your desired message....Cool...isn't it???.......drink more coffee"
 var out = ""
 if (endScroll) {return false}
 for (var i=0; i<position; i++)
 {out += msg.charAt(i)}
 for (i=1;i<jumpSpaces;i++)
 {out += " "}
 out += msg.charAt(position)
 window.status = out
 if (jumpSpaces <= 1) {
 position++
 if (msg.charAt(position) == ' ')
 {position++ }
 jumpSpaces = 100-position
 } else if (jumpSpaces >  3)
 {jumpSpaces *= .75}
 else
 {jumpSpaces--}
 if (position != msg.length) {
 var cmd = "slide(" + jumpSpaces + "," + position + ")";
 scrollID = window.setTimeout(cmd,5);
 } else {
 scrolling = false
 return false
 }
 return true
}
function ccSetup() {
 if (scrolling)
 if (!confirm('Re-initialize slide?'))
 return false
 endScroll = true
 scrolling = true
 var killID = window.setTimeout('endScroll=false',6)
 scrollID = window.setTimeout('slide(100,0)',10)
 return true
}
var scrollID = Object
var scrolling = false
var endScroll = false
</SCRIPT>
<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to have a text alert when entering and exiting your website

Here is how you can have a text alert when entering and exiting your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<script language="javascript" type="text/javascript">

alert("Welcome to my weblog")

</script>

<body>
<h1>

<!-- hide script from old browsers -->
<!--this is on example of a long JavaScript comment-->

<script language="javascript" type="text/javascript">

document.write("IranJavaScript")

//end hiding script from old browsers -->
</script>
</h1>

</body>

<!--   DESCRIPTION:  This will cause an elert message before your visitor leaves (OR reloads) your page.
 INSTRUCTIONS:  Place this tag where your BODY tag is.  Make changes to attributes (TEXT, LINK, VLINK, BGCOLOR, etc.) as necessary.
 FUNCTIONALITY: Works in both Netscape and IE.

//Modified by CoffeeCup Software
//This code is Copyright (c) 1997 CoffeeCup Software
//all rights reserved. License is granted to a single user to
//reuse this code on a personal or business Web Site.
-->


<BODY onUnload="window.alert(' Good Bye ')">


</BODY>
<!--   DESCRIPTION:  This will cause an elert message before your visitor leaves (OR reloads) your page.
 INSTRUCTIONS:  Place this tag where your BODY tag is.  Make changes to attributes (TEXT, LINK, VLINK, BGCOLOR, etc.) as necessary.
 FUNCTIONALITY: Works in both Netscape and IE.

//Modified by CoffeeCup Software
//This code is Copyright (c) 1997 CoffeeCup Software
//all rights reserved. License is granted to a single user to
//reuse this code on a personal or business Web Site.
-->


<BODY onUnload="window.alert(' Good Bye ')">


</BODY>

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to Close the browser with a button

Here is how you can close the browser with a button.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<!-- Start of Close Browser Script -->
<!-- When the "Close Window" button is clicked, this script
 will close the browser window that the webpage is in.
-->
<script language="JavaScript">
<!--

function closeIt() {
 close();
}

// -->
</script>

<center>
<form>
<input type=button value="Close Window" onClick="closeIt()">
</form>
</center>

<!-- End of Close Browser Script -->

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to put a msn search box on your website

Here is how you can put a msn search box on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<body>
<table BORDER="0" WIDTH="222" HEIGHT="18">
 <tr>
 <td WIDTH="214" HEIGHT="10">
 <form NAME="search" ID="search" ACTION="http://search.msn.com/results.asp" METHOD="get">
 <p><font FACE="arial" SIZE="2"><strong>Search
 <font COLOR="#808080">the Web for:</font></strong></font><br>
 <input TYPE="text" ID="q" SIZE="18" MAXLENGTH="251" NAME="q" VCARD_NAME="SearchText"><input TYPE="submit" VALUE="Search" NAME="B1"><input TYPE="hidden" NAME="FORM" VALUE="FRNT"><input TYPE="hidden" NAME="un" VALUE="doc"><input TYPE="hidden" NAME="v" VALUE="1"></p>
 </form>
 </td>
 </tr>
 <tr>
 <td WIDTH="214" HEIGHT="21" VALIGN="bottom">
 <p ALIGN="center"><font SIZE="1" FACE="arial">
 <a HREF="http://search.msn.com/advanced.asp?MT=&RS=CHECKED&Form=FRNT">Use
 Advanced Search</a></font></td>
 </tr>
</table>
<p> </p>
</body>

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
Filed under: Linux No Comments
28Jul/090

How to put a Google search box on your website

Here is how you can put a Google search box on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<!-- Search Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" <br></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value="en">
<INPUT type=submit name=btnG VALUE="Google Search">
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/091

How to make the text to rain on your website

Here is how you can make the text to rain on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
 }
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
 }
 }
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}
//  End -->
</script>
</body>

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
Tagged as: , , , 1 Comment
22Jul/090

How to make falling leaves appear in the background of your webpage

Here is how you can make the title of the your webpage scroll.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->

<script language="JavaScript1.2">

//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="http://javascriptfreecode.com/images/barg.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://javascriptfreecode.com/images/barg.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://javascriptfreecode.com/images/barg.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://javascriptfreecode.com/images/barg.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://javascriptfreecode.com/images/barg.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://javascriptfreecode.com/images/barg.gif"

Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
 Ypos[i] = Math.round(Math.random()*WinHeight);
 Xpos[i] = Math.round(Math.random()*WinWidth);
 Speed[i]= Math.random()*5+3;
 Cstep[i]=0;
 Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',20);
}

window.onload=fall
//-->
</script>
<pre><font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font></pre>
</pre>
22Jul/091

How to make snow fall on your webpage

Here is how you can make snow fall on your webpage.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->

<script>
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=3

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
 rand=Math.floor(range*Math.random())
 return rand
}

function initsnow() {
 if (ie5 || opera) {
 marginbottom = document.body.clientHeight
 marginright = document.body.clientWidth
 }
 else if (ns6) {
 marginbottom = window.innerHeight
 marginright = window.innerWidth
 }
 var snowsizerange=snowmaxsize-snowminsize
 for (i=0;i<=snowmax;i++) {
 crds[i] = 0;
 lftrght[i] = Math.random()*15;
 x_mv[i] = 0.03 + Math.random()/10;
 snow[i]=document.getElementById("s"+i)
 snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
 snow[i].size=randommaker(snowsizerange)+snowminsize
 snow[i].style.fontSize=snow[i].size
 snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
 snow[i].sink=sinkspeed*snow[i].size/5
 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
 if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
 if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
 if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
 snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
 snow[i].style.left=snow[i].posx
 snow[i].style.top=snow[i].posy
 }
 movesnow()
}

function movesnow() {
 for (i=0;i<=snowmax;i++) {
 crds[i] += x_mv[i];
 snow[i].posy+=snow[i].sink
 snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
 snow[i].style.top=snow[i].posy

 if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
 if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
 if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
 if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
 snow[i].posy=0
 }
 }
 var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
 document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
 window.onload=initsnow
}
</script>
<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>