THE
MOST USEFUL JAVA APPLETS AND SCRIPTS
Table of contents :
The script parts highlighted in red
are the ones you can customize.
-
HEX-RGB converter
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
function NumToHex(num1,num2) {
strNum=document.forms[0].elements[num1].value;
for(i = 0; i < strNum.length; i++) {
chr=strNum.substring(i, i + 1);
if((isNaN(chr))||(chr == ' ')) {
alert('You must enter a digit between 0 and 9!');
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
}
if(strNum > 255) {
alert('You must enter a number between 0 and
255!');
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
else {
base = strNum / 16;
rem = strNum % 16;
base = base - (rem / 16);
baseS = MakeHex(base);
remS = MakeHex(rem);
document.forms[0].elements[num2].value=baseS + '' + remS;
ChangeBackground(3, 4, 5);
return true;
}
}
function MakeHex(x) {
if((x >= 0) && (x <= 9))
return x;
else {
switch(x) {
case 10: return "A";
case 11: return "B";
case 12: return "C";
case 13: return "D";
case 14: return "E";
case 15: return "F";
}
}
}
function HexToNum(num1,num2) {
numberS = document.forms[0].elements[num1].value;
tens = MakeNum(numberS.substring(0,1));
if(tens == 'X') {
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
ones = 0;
if(numberS.length > 1) // means two characters entered
ones=MakeNum(numberS.substring(1,2));
if(ones == 'X') {
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
document.forms[0].elements[num2].value = (tens * 16) + (ones * 1);
document.forms[0].elements[num1].value = document.forms[0].elements[num1].value.toUpperCase();
ChangeBackground(3, 4, 5);
return true;
}
function MakeNum(str) {
if((str >= 0) && (str <= 9))
return str;
switch(str.toUpperCase()) {
case "A": return 10;
case "B": return 11;
case "C": return 12;
case "D": return 13;
case "E": return 14;
case "F": return 15;
default: alert('You must choose a number between 0 and 9 or a
letter between A and F!');
return 'X';
}
}
function ChangeBackground(num1, num2, num3) {
document.bgColor = '#'+document.forms[0].elements[num1].value + document.forms[0].elements[num2].value
+ document.forms[0].elements[num3].value;
}
</script>
-
copy and paste this code into the BODY of your HTML document :
<form>
<table border=1 align=center cellpadding=10 bgcolor=white>
<tr>
<th>Color/Code</th>
<th>Red</th>
<th>Green</th>
<th>Blue</th>
</tr>
<tr>
<th>0-255</th>
<td><input type=text name=rr_num size=4 maxlength=3 onKeyUp="return
NumToHex(0,3);"></td>
<td><input type=text name=gg_num size=4 maxlength=3 onKeyUp="return
NumToHex(1,4);"></td>
<td><input type=text name=bb_num size=4 maxlength=3 onKeyUp="return
NumToHex(2,5);"></td>
</tr>
<tr>
<th>HEX</th>
<td><input type=text name=rr_hex size=4 maxlength=2 onKeyUp="return
HexToNum(3,0);"></td>
<td><input type=text name=gg_hex size=4 maxlength=2 onKeyUp="return
HexToNum(4,1);"></td>
<td><input type=text name=bb_hex size=4 maxlength=2 onKeyUp="return
HexToNum(5,2);"></td>
</tr>
</table>
</form>
animated image tooltip
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px
solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
</script>
-
copy this code into the BODY of your HTML document :
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0
150 50 0);width:150px;background-color:gold;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Insert
your animated tooltip!');" onMouseout="hidetip2();" STYLE="cursor:
hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD
COLSPAN="7">
<IMG SRC="image.gif" WIDTH="100" HEIGHT="39"
BORDER="0"><p>
</TABLE>
<p></div>
page reload on resize : useful
for situations when a page resize moves the page elements improperly or
causes JavaScript errors, which has been known to occasionally occur on
pages with layers. Insert the onLoad event handler into your BODY tag :
<BODY onResize="window.location.href = window.location.href;">
written
greeting based on user's time of the day : copy and paste this code
into the BODY of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 18) display = "Evening";
else if (thehour >12) display = "Afternoon";
else display = "Morning";
var greeting = ("Good " + display + "!");
document.write(greeting);
</script>
audio
and written greeting based on user's time of the day :
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript" src="AudioGreeting.js"></script>
-
create a separate file called "AudioGreeting.js" and put this code into
it :
var d = new Date()
var h = d.getHours()
if (h < 12) document.write('<bgsound SRC="Goodmorning.wav"
AUTOSTART=true LOOP=1>'+'Good morning!')
else if (h < 17) document.write('<bgsound SRC="Goodafternoon.wav"
AUTOSTART=true LOOP=1>'+'Good afternoon!')
else if (h < 24) document.write('<bgsound SRC="Goodevening.wav"
AUTOSTART=true LOOP=1>'+'Good evening!')
play
a .WAV sound file when the user clicks a link : copy the following
between the <BODY> and </BODY> tags :
<center>
<a href="#" onMouseOver="document.all.music.src='talk.wav'">You
Talkin' To Me?</a><p>
<a href="#" onMouseOver="document.all.music.src='laugh.wav'">Laughing</a><p>
<a href="#" onMouseOver="document.all.music.src='shoot.wav'">Come
Out</a><p>
<a href="#" onMouseOver="document.all.music.src='sweet.wav'">Sweet</a><p>
<a href="#" onMouseOver="document.all.music.src='hell.wav'">Go
To Hell!</a><p>
<bgsound src="#" id=music loop=1 autostart="true">
</center>
page up for ...
-
copy and paste this code into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
function HowLongSince(startmonth, startdate, startyear) {
sdate=startdate;
smonth=startmonth-1;
syear=startyear;
var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
today = new Date()
var thisyear = today.getFullYear();
var thismonth = today.getMonth();
var thisdate = today.getDate();
mstart = new Date(syear,(smonth==12?1:smonth+1),1);
days1 = (mstart - new Date(syear,smonth,sdate))/(24*60*60*1000)-1;
mend = new Date(thisyear,thismonth,1);
days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000)+1;
dayst = days1 + days2;
if (dayst >= DaysInMonth[smonth]) {
AddOneMonth = 1;
dayst -= DaysInMonth[smonth];
}
else AddOneMonth = 0;
ydiff1 = thisyear-mstart.getFullYear();
mdiff1 = thismonth-mstart.getMonth()+AddOneMonth;
if (mdiff1 >11) { mdiff1=0; ydiff1++; }
if (mdiff1 < 0) { mdiff1 = mdiff1 + 12; ydiff1--; }
temp = (ydiff1==0?"":(ydiff1==1?ydiff1+" year and ":ydiff1 + " years,
"));
temp += (mdiff1==0?"0 months, and ":(mdiff1==1?mdiff1+" month, and
":mdiff1+" months, and "));
temp += (dayst==0?"no days":(dayst==1 ? " 1 day." : dayst + " days."
));
return temp;
}
</script>
-
copy and paste this code into the BODY of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
document.write("This website has been up for
");
document.write("<font color=red>");
document.write(HowLongSince(16,12,97));
document.write("</font>");
</script>
random taglines : copy and paste this
code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
var numb = 11
title_text = new Array();
title_text[0] = "Line One";
title_text[1] = "Line Two";
title_text[2] = "Line Three";
title_text[3] = "Line Four";
title_text[4] = "Line Five";
title_text[5] = "Line Six";
title_text[6] = "Line Seven";
title_text[7] = "Line Eight";
title_text[8] = "Line Nine";
title_text[9] = "Line Ten";
title_text[10] = "Line Eleven";
title_text[11] = "Line Twelve";
var doit = title_text[Math.round(Math.random()*numb)];
document.write("<title>:[ JavaScript Source ]: - "+doit+"</title>");
</script>
preload page displays a loading message
as the page, including images and sound elements, are loaded in the background.
When the page finishes loading the screen is shown, similar to how Macromedia's
Flash plugin works
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
function loadImages() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
</script>
-
copy and paste the onLoad event handler into your BODY tag -->
<BODY OnLoad="loadImages()">
-
copy this code into the BODY of your HTML document -->
<div id="hidepage" style="position: absolute; left:5px; top:5px;
background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 100%;
width: 100%;">
<table width=100%><tr><td>Page loading
... Please wait.</td></tr></table></div>
<!-- put the rest of your page contents here
-->
logo
fixed on bottom right corner when scrolling
-
copy this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
imgwidth=235; // logo width, in
pixels
imgheight=19; // logo height, in
pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function checkLocation() {
objectXY="branding";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</SCRIPT>
-
copy this onLoad event handler into the BODY tag -->
<BODY onload="setVariables(); checkLocation();">
-
copy this code into the BODY of your HTML document -->
<div id="branding" style="position:absolute; visibility:show; left:235px;
top:-50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="http://www.yoursite.com" onmouseover="window.status='Thanks
for visiting!';return true" onmouseout="window.status='';return
true"><center><img src="your-logo.gif"
width="235" height="19" border="0"></center></a></font></td>
</table>
</div>
logo (or text)
in the bottom right corner of the browser window as they scroll the page
up and down. The logo glides very smoothly when the page is scrolled and
looks great. When their cursor is on the logo, a menu appears in its place
offering links to different sections of the site. The menu returns to the
logo a few seconds after the move the cursor off the menu
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
if (navigator.appName == "Netscape") {
v = ".top=";
h = ".left=";
dS = "document.";
sD = "";
y = "window.pageYOffset";
x = "window.pageXOffset";
iW = "window.innerWidth";
iH = "window.innerHeight";
}
else {
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
y = "document.body.scrollTop";
x = "document.body.scrollLeft";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
}
xyz = 500;
innerX = eval(iW) - 115;
innerY = eval(iH) - 110;
object = "logo";
checkLocationA();
}
movex = 0;
movey = 0;
xdiff = 0;
ydiff = 0;
ystart = 0;
xstart = 0;
function checkLocation() {
yy = eval(y);
xx = eval(x);
ydiff = ystart - yy;
xdiff = xstart - xx;
if ((ydiff < (-1)) || (ydiff > (1))) movey = Math.round(ydiff /
10), ystart -= movey;
if ((xdiff < (-1)) || (xdiff > (1))) movex = Math.round(xdiff /
10), xstart -= movex;
eval(dS + object + sD + v + (ystart + innerY));
eval(dS + object + sD + h + (xstart + innerX));
setTimeout("checkLocation()", 10);
}
function checkLocationA() {
ystart = eval(y);
xstart=eval(x);
}
function switchLogo(abc) {
if (abc == "menu") {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = abc;
}
else xyz = setTimeout("delayLogo()", 2000)
}
function delayLogo() {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = 'logo';
}
</script>
-
copy the onLoad event handler into your BODY tag -->
<BODY OnLoad="setVariables();checkLocation()">
-
copy this code into the BODY of your HTML document -->
<div id="logo" style="position:absolute; visibility:show; left:0px;
top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center><br><br><br>
<A href="javascript:void(0)"; onmouseover="switchLogo('menu')">
Logo
</A>
</center>
</td>
</tr>
</table>
</div>
<div id="menu" style="position:absolute; visibility:show; left:0px;
top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center>
<a href="http://www.your-web-site-address-here.com/page-one.html";
onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page
One</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.your-web-site-address-here.com/page-two.html";
onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page
Two</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.your-web-site-address-here.com/page-three.html";
onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page
Three</a>
</center>
</td>
</tr>
</table>
</div>
<p><center>
write page title : copy the following
between the <BODY> and </BODY> tags :
<SCRIPT LANGUAGE="JavaScript">
document.write(document.title);
</SCRIPT>
send
a link to the visited webpage to a friend via Outlook : copy and paste
this code into the BODY of your HTML document :
<div align="center">
<font face="Verdana" color="#0000FF">
<SCRIPT LANGUAGE="JavaScript">
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<b>Send <A CLASS="contact" HREF=\"mailto:\?subject\=Take
a look at this page I found, ' + document.title + '?body=You
can see this page at: ' + window.location + '\" onMouseOver="window.status=\'Send
your friends e-mail about this page\'; return true" TITLE="Send
your friends e-mail about this page">this page<\/A> to a friend</b>');
}
else { document.write('<b>Send <A CLASS="contact" HREF=\"mailto:\?body\=Take
a look at this page I found, ' + document.title + '.
You can see this page at: ' + window.location + '\" onMouseOver="window.status=\'Send
your friends e-mail about this page\'; return true" TITLE="Send
your friends e-mail about this page">this page<\/A> to a friend</b>');
}
</script>
</font>
</div>
floating
email-this-link with auto-capture of page URL : copy and paste into
the body
<script>
var hX = 340;
var vY = -140;
</script>
<div id="FloatMail" style="position: absolute;
background-color: #000000;
background-image:url('float_dots.gif');
width: 180px;
border-width: 2;
border-style:outset;
border-color:#444444;
padding:5px">
<center>
<form name="eMailer">
<font size="2" face="Verdana,Arial" color="#ff0056">
E-Mail This Link
<br>
Enter recipient's e-mail:
</font>
<br>
<input type="text" name="address" size="20"
style="background-color:#000000;
color:#05fa9e;
border-color:#ff0000;
border-width:1;
border-style:dashed;
margin-top:7px;"><br>
<input type="button" value="Send this URL"
onClick="mailThisUrl();"
style="color:#ff0057;
font-family:Arial;
font-size:10pt;
background-color:#000000;
border-width:1;
border-style:solid;
border-color:#242424;
margin-top:7px;">
</form>
</center>
</div>
<script>
var good;function checkEmailAddress(field){
var goodEmail=field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){good = true}else{alert('Please enter a valid e-mail
address.');
field.focus();field.select();good=false;}}
u=window.location;m="I thought this might interest you...";
function mailThisUrl(){good=false;
checkEmailAddress(document.eMailer.address);
if (good){window.location="mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+"
"+u;}}
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatMail(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fm=function(){var
pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fm()',33);};
return L;}
floatMail(hX,vY,'FloatMail').Fm();
</script>
send
a link to the visited webpage to a friend via Freedback.com
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
function initMail(form) {
text = "Check out this page: " +
window.location;
form.message.value = "Hi " + form.sendto.value
+ " (" + form.to.value + "):\n\n"
+ text + "\n\nYour Friend,\n" + form.sendername.value + "(" +
form.senderemail.value + ")";
return (form.to.value != "");
}
</script>
-
copy and paste this code into the BODY of your HTML document -->
<center>
<form name=emailform method=post action="http://cgi.freedback.com/mail.pl"
target="_new" onSubmit="return initMail(this);">
<input type=hidden name=subject value="**
Check Out This Site! **">
<input type=hidden name=message value="">
<table>
<tr><td colspan=2 align=center>Tell a friend
about this page!</td></tr>
<tr><td>Their Name:</td><td><input type=text name=sendto></td></tr>
<tr><td>Their Email:</td><td><input type=text name=to></td></tr>
<tr><td>Your Name:</td><td><input type=text name=sendername></td></tr>
<tr><td>Your Email:</td><td><input type=text name=senderemail></td></tr>
<tr><td colspan=2 align=center><input type=submit value="Ok!"></td></tr>
</table>
</form>
</center>
formatting
background, font, and sticky selection in dropdown menus
-
copy and paste into the head
<style>
select.Menu{
font-family: Verdana,sans serif;
font-size: 14pt;
font-weight: bold;
font-style: normal;
}
option.MenuColorOne{
color:#FFFFFF;
background-color:#FF0000;
}
option.MenuColorTwo{
color:#FFFF00;
background-color:#0000FF;
}
option.MenuColorThree{
color:#123456;
background-color:#FEDCBA;
}
</style>
-
copy and paste into the body
<form>
<select class="Menu" size="1">
<option class="MenuColorOne">Item One</option>
<option class="MenuColorOne">Item Two</option>
<option class="MenuColorOne">Item Three</option>
<option class="MenuColorTwo">Item Four</option>
<option class="MenuColorTwo">Item Five</option>
<option class="MenuColorTwo">Item Six</option>
<option class="MenuColorThree">Item Seven</option>
<option class="MenuColorThree">Item Eight</option>
<option class="MenuColorThree">Item Nine</option>
</select>
</form>
<select class="Menu" size="1" onClick="javascript:self.focus()">
show time spent on webpage
:
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() {
var myTime = new Date();
return((myTime.getTime() - clockStart)/1000);
}
function getSecs() {
var tSecs = Math.round(initStopwatch());
var iSecs = tSecs % 60;
var iMins = Math.round((tSecs-30)/60);
var sSecs ="" + ((iSecs > 9) ? iSecs : "0" + iSecs);
var sMins ="" + ((iMins > 9) ? iMins : "0" + iMins);
document.forms[0].timespent.value = sMins+":"+sSecs;
window.setTimeout('getSecs()',1000);
}
</script>
-
add this onLoad event handler into the BODY tag :
<BODY onLoad="window.setTimeout('getSecs()',1)">
-
copy and paste this code into the BODY of your HTML document :
<CENTER>
<FORM>
<input size=5 name=timespent>
</FORM>
</CENTER>
menus :
-
pull down menu generator
-
cascading menu :
-
OpenCube : DHTML menus (easy
to create and put at the top of a scrollbar-less wepage while using a lower
iFrame for navigation)
-
copy the following between the <HEAD> and </HEAD> tags :
<SCRIPT LANGUAGE="JavaScript">
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
}
var popTimer = 0;
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
}
}
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {
itemArray = new Array(menu.length);
while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the hierarchy, return.
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
}
}
function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++)
{
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
}
}
}
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}
function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass,
textClass) {
this.isVert = isVert;
this.popInd = popInd
this.x = x;
this.y = y;
this.width = width;
this.overCol = overCol;
this.backCol = backCol;
this.borderClass = borderClass;
this.textClass = textClass;
this.parentMenu = null;
this.parentItem = null;
this.ref = null;
}
function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
this.ref = null;
}
function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;
for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0])
{
var str = '', itemX = 0, itemY = 0;
for (currItem = 1; currItem < menu[currMenu].length; currItem++)
with (menu[currMenu]
[currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;
var w = (isVert ? width : length);
var h = (isVert ? length : width);
if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left:
' + itemX + '; top: ' +
itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit;
';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' +
itemY + '" width="' + w
+ '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut('
+
currMenu + ',' + currItem + ')">';
str += '<table width="' + (w - 8) + '" border="0" cellspacing="0"
cellpadding="' + (!isNS4
&& borderClass ? 3 : 0) + '"><tr><td align="left" height="'
+ (h - 7) + '">' + '<a
class="' + textClass + '" href="' + href + '"' + (frame ? ' target="'
+ frame + '">' :
'>') + text + '</a></td>';
if (target > 0) {
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;
if (popInd) str += '<td class="' + textClass + '" align="right">'
+ popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}
if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' +
currMenu + 'div" ' +
'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}
if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}
for (currItem = 1; currItem < menu[currMenu].length; currItem++)
{
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
}
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
}
}
var menu = new Array();
var defOver = '#336699', defBack = '#003366';
var defLength = 22;
menu[0] = new Array();
menu[0][0] = new Menu(false, '', 5, 0, 17, '#669999',
'#006666', '', 'itemText');
menu[0][1] = new Item(' File', '#', '', 40, 10, 1);
menu[0][2] = new Item(' Edit', '#', '', 40, 10, 2);
menu[0][3] = new Item(' Help', '#', '', 40, 10, 3);
menu[0][4] = new Item(' Site', 'http://gusnz.cjb.net', '_new',
40, 10, 0);
menu[1] = new Array();
menu[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder',
'itemText');
menu[1][1] = new Item('Open', '#', '', defLength, 0, 0);
menu[1][2] = new Item('Save', '#', '', defLength, 0, 0);
menu[1][3] = new Item('Reopen', '#', '', defLength, 0, 4);
menu[1][4] = new Item('Exit', '#', '', defLength, 0, 0);
menu[2] = new Array();
menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder',
'itemText');
menu[2][1] = new Item('Cut', '#', '', defLength, 0, 0);
menu[2][2] = new Item('Copy', '#', '', defLength, 0, 0);
menu[2][3] = new Item('Paste', '#', '', defLength, 0, 0);
menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder',
'itemText');
menu[3][1] = new Item('Contents', '#', '', defLength, 0, 0);
menu[3][2] = new Item('Index', '#', '', defLength, 0, 0);
menu[3][3] = new Item('About', '#', '', defLength, 0, 5);
menu[4] = new Array();
menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699',
'crazyBorder',
'crazyText');
menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', '', 36,
4, 0);
menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7, 0);
menu[4][3] = new Item('Etc. etc...', '#', '', defLength, 0, 0);
menu[5] = new Array();
menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder',
'itemText');
menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 0, 0);
var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth)
location.reload()');
if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;
function clickHandle(evt)
{
if (isNS4) document.routeEvent(evt);
hideAllBut(0);
}
function moveRoot()
{
with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100
: 5);
}
</script>
<style>
.itemBorder { border: 1px solid black }
.itemText { text-decoration: none; color: #FFFFFF; font: 12px Arial,
Helvetica }
.crazyBorder { border: 2px outset #663399 }
.crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px
Arial, Helvetica }
</style>
-
insert the onLoad event handler into your BODY tag :
<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()"
onResize="if (isNS4) nsResizeHandler()">
-
copy this code into the BODY of your HTML document :
<table bgcolor="#006666" width="100%"
border="0" cellpadding="0"
cellspacing="0">
<tr><td height="17"><font size="1">
</font></td></tr></table>
-
category menu in left frame
-
save this FRAMESET code and modify it for your page :
<frameset cols="175,*">
<frame src="category-menus.html" name="left">
<frame src="home-page.html" name="right">
</frameset>
</html>
-
create a new document, save it as category-menus.html
:
-
paste this code into the HEAD of category-menus.html :
<style type="text/css">
a
{text-decoration: none;}
.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}
.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>
<SCRIPT LANGUAGE="JavaScript">
var nom = 4; // Number of menus
var usePictures = 1; // use pictures?
1 = yes, 0 = no
var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
</script>
-
copy and paste this code into the BODY of category-menus.html :
<div class="title" id="title1" style="top: 0px">
<a href="#" onclick="javascript: toggle(1,30); return false"><img
name="pic1" src="http://javascript.internet.com/img/category-menus/closed.gif"
border="0">Category 1</a>
</div>
<div class="submenu" id="submenu1" style="top: 20px">
<a href="page01.html" target="right">Item # 1</a><br>
<a href="page02.html" target="right">Item # 2</a>
</div>
<div class="title" id="title2" style="top: 20px">
<a href="#" onclick="javascript: toggle(2,60); return false"><img
name="pic2" src="http://javascript.internet.com/img/category-menus/closed.gif"
border="0">Category 2</a>
</div>
<div class="submenu" id="submenu2" style="top: 40px">
<a href="page03.html" target="right">Item # 3</a><br>
<a href="page04.html" target="right">Item # 4</a><br>
<a href="page05.html" target="right">Item # 5</a><br>
<a href="page06.html" target="right">Item # 6</a>
</div>
<div class="title" id="title3" style="top: 40px">
<a href="#" onclick="javascript: toggle(3,45); return false"><img
name="pic3" src="http://javascript.internet.com/img/category-menus/closed.gif"
border="0">Category 3</a>
</div>
<div class="submenu" id="submenu3" style="top: 60px">
<a href="page07.html" target="right">Item # 7</a><br>
<a href="page08.html" target="right">Item # 8</a><br>
<a href="page09.html" target="right">Item # 9</a>
</div>
<div class="title" id="title4" style="top: 60px">
<a href="#" onclick="javascript: toggle(4,60); return false"><img
name="pic4" src="http://javascript.internet.com/img/category-menus/closed.gif"
border="0">Category 4</a>
</div>
<div class="submenu" id="submenu4" style="top: 80px">
<a href="page10.html" target="right">Item # 10</a><br>
<a href="page11.html" target="right">Item # 11</a><br>
<a href="page12.html" target="right">Item # 12</a><br>
<a href="page13.html" target="right">Item # 13</a>
</div>
-
be sure to save the arrow images (opened.gif
and closed.gif) to your site :
color chart : 8 tables with the 512 "standard"
colors and their corresponding "#RRGGBB" values written in. Copy the following
between the <BODY> and </BODY> tags :
<center>
<SCRIPT LANGUAGE="JavaScript">
clr=new Array('00','20','40','60','80','a0','c0','ff');
for (i=0;i<8;i++) {
document.write("<table border=1 cellpadding=8>");
for (j=0;j<8;j++) {
document.write("<tr>");
for (k=0;k<8;k++) {
document.write('<td bgcolor="#'+clr[i]+clr[j]+clr[k]+'">');
document.write('<tt><font color="#'+clr[7-i]+clr[7-j]+clr[7-k]+'">
');
document.write(clr[i]+clr[j]+clr[k]+' </font></tt></td>');
}
document.write("</tr>"); }
document.write("</table><br>"); }
</script>
-
ensures that the page is fully loaded before the animated GIF begins
-
frame reloading
and content protector : if your content page is loaded directly (not
in frames) the page is reloaded in your frames. And to the aid of webmasters
everywhere, this script also foils other sites loading your content page
in their frames. Visitors are notified of the bandwidth theft then are
sent to the page on your site (if used with our Dynamic Frameset script)
or back to your main page. Copy the following between the <HEAD> and
</HEAD> tags :
<SCRIPT LANGUAGE="JavaScript">
ok_urls = new Array();
ok_urls[1] = "http://your-web-site-address-here.com/frameset.html";
ok_urls[2] = "http://www.your-web-site-address-here.com/frameset.html";
function reportError(msg, url, line) {
if (url == window.location.href) {
msg = "\nBandwidth Theft Alert!\n\n" +
"This site is illegally stealing bandwidth\n"
+
"from our site, WWW.OUR-SITE.COM.\n\n"
+
"We will now load the content page\n"
+
"from our server so you may view it.\n\n"
+
"Thanks for your patience!";
alert(msg);
top.location.href = ok_urls[1] + "?" + window.location.href;
return true;
}
}
window.onerror = reportError;
url_found = 0;
for (var i = 1; i <= ok_urls.length && !url_found; i++)
{
url_found = (parent.location.href.indexOf(ok_urls[i]) == -1);
}
if (!url_found || (window == top))
top.location.href = ok_urls[1] + "?" + window.location.href;
</script>
-
gradual theatral opening
-
copy and paste the coding into a text file and name it "reveal.js" :
var width=document.body.clientWidth;
var height=document.body.clientHeight;
function doClickText(who,type,step,timeOut) {
document.getElementById(who).style.display="none";
if(type==0) {
reveal('revealDiv1',step,timeOut,0);
reveal('revealDiv2',step,timeOut,1);
}
if(type==1) {
reveal('revealDiv1',step,timeOut,2);
reveal('revealDiv2',step,timeOut,3);
}
}
function reveal(who,step,timeOut,type) {
if(type==0)
var where="top";
if(type==1)
var where="bottom";
if(type==2)
var where="left";
if(type==3)
var where="right";
eval('var temp=document.getElementById(who).style.'+where);
temp=parseInt(temp);
if(type==0||type==1)
var checkWith=height/2;
if(type==2||type==3)
var checkWith=width/2;
if(-temp<checkWith) {
temp-=step;
eval('document.getElementById(who).style.'+where+'=temp;');
setTimeout("reveal('"+who+"',"+step+",'"+timeOut+"',"+type+")",
timeOut);
}
else {
document.getElementById(who).style.display="none";
document.body.scroll="yes";
}
}
/*
Following function is required to initialise Reveal
The function is called in the following manner :
initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
Parameter description :
type -> 0 for vertical | 1 for horizantal
div1bg -> Background color of first layer (eg. '#CCCCCC')
div2bg -> Background color of second layer (eg. '#CCCCCC')
div1bw -> Border width of first layer (eg. 1)
div2bw -> Border width of second layer (eg. 1)
div1bc -> Border color of first layer (eg. '#000000')
div2bc -> Border color of second layer (eg. '#000000')
step -> The amount revealed every interval (eg. 5)
timeOut -> The delay in milliseconds
click -> true if user has to click to reveal | false for auto
reveal
function initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
{
if(type==0) {
var bWhere1="border-bottom";
var bWhere2="border-top";
var putZero1="top:0px; left:0px";
var putZero2="bottom:0px; left:0px";
document.write('<div id="revealDiv1" style="z-index:100;
display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ;
width:'+(width)+'; height:'+(height/2)+'; '+bWhere1+':'+div1bc+' solid
'+div1bw+'px"></div>');
document.write('<div id="revealDiv2" style="z-index:100;
display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ;
width:'+(width)+'; height:'+(height/2)+'; '+bWhere2+':'+div2bc+' solid
'+div2bw+'px"></div>');
if(!click) {
reveal('revealDiv1',step,timeOut,0);
reveal('revealDiv2',step,timeOut,1);
}
else {
clickText(type,step,timeOut);
}
}
if(type==1) {
var bWhere1="border-right";
var bWhere2="border-left";
var putZero1="top:0px; left:0px";
var putZero2="top:0px; right:0px";
document.write('<div id="revealDiv1" style="z-index:100;
display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ;
width:'+(width/2)+'; height:'+(height)+'; '+bWhere1+':'+div1bc+' solid
'+div1bw+'px"></div>');
document.write('<div id="revealDiv2" style="z-index:100;
display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ;
width:'+(width/2)+'; height:'+(height)+'; '+bWhere2+':'+div2bc+' solid
'+div2bw+'px"></div>');
if(!click) {
reveal('revealDiv1',step,timeOut,2);
reveal('revealDiv2',step,timeOut,3);
}
else {
clickText(type,step,timeOut);
}
}
function clickText(type,step,timeOut) {
document.write('<div id="clickText" style="z-index:101; display:block;
position:absolute; top:'+(height/2-clickh/2-clickb)+'; left:'+(width/2-clickw/2-clickb)+'"><table
style="border:'+clickc+' solid '+clickb+'px; background:'+clickbg+' ;width:'+clickw+'px;
height:'+clickh+'; '+clickFont+'; cursor:hand; cursor:pointer" onClick="doClickText(\'clickText\','+type+','+step+','+timeOut+')"><tr><td
align="middle">'+clickt+'</td></tr></table></div>');
}
}
-
insert the scroll event handler into your BODY tag -->
<BODY scroll="no">
-
copy and paste this code into the BODY of your HTML document -->
<script language="JavaScript" src="reveal.js"></script>
<script language="JavaScript">
var clickw=150; // Width
var clickh=20; // Height
var clickb=2; // Border width
var clickc="#000098"; // Border color
var clickbg="#000098"; // Background color
var clickt="Click Here to Reveal the Page!";
// Text to display
var clickFont="font-family:verdana,arial,helvetica;
font-size:10pt; font-weight:bold; color:#FFFFFF"; // The font
style of the text
initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
Parameter description :
type -> 0 for vertical | 1 for horizantal
div1bg -> Background color of first layer (eg. '#CCCCCC')
div2bg -> Background color of second layer (eg. '#CCCCCC')
div1bw -> Border width of first layer (eg. 1)
div2bw -> Border width of second layer (eg. 1)
div1bc -> Border color of first layer (eg. '#000000')
div2bc -> Border color of second layer (eg. '#000000')
step -> The amount revealed every interval (eg. 5)
timeOut -> The delay in milliseconds
click -> true if user has to click to reveal | false for auto
reveal
See below for an example of how to call the function.
*/
new initReveal(0,'#BFCEFF','#BFCEFF',1,1,'#000000','#000000',3,10,true);
</script>
-
resizeable viewer
-
copy and paste this first code into a new file and save it as resizableViewer.js
:
arImageSrc = new Array ("loading.gif","loaded.gif");
arImageList = new Array ();
for (counter in arImageSrc) {
arImageList[counter] = new Image();
arImageList[counter].src = arImageSrc[counter];
}
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - 50;
var toppos = height / 2 - 50;
function encode(str){ // Netscape fix thanks to Cyanide_7
return escape(str.replace(/ /g,'+'));
}
function view(what) {
var url = 'viewer.html?pic='+encode(what);
window.open(url,'WIN','scrollbars=no,status=no,toolbar=no,resizable=1,location=no,menu=no,width=100,height=100,left='
+ leftpos + ',top=' + toppos);
}
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
params = getParams();
function resize() {
if (eval(pic).height) {
var name = navigator.appName
if (name == "Microsoft Internet Explorer") {
myHeight = eval(pic).height + 40;
myWidth = eval(pic).width + 12;
}
else {
myHeight = eval(pic).height + 9;
myWidth = eval(pic).width;
}
clearTimeout();
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - myWidth / 2;
var toppos = height / 2 - myHeight / 2;
self.moveTo(leftpos, toppos);
self.resizeTo(myWidth, myHeight);
document.il.src = 'loaded.gif';
}
else setTimeOut(resize(), 100);
}
-
copy and paste this whole section into a new HTML document and then save
it as: viewer.html :
<html>
<head>
<script language="javascript" src="resizableViewer.js"></script>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"
bgcolor="#FFFFFF">
<img border="0" src="loading.gif" width="100" height="9" name="il"
onload="window.focus()">
<br>
<SCRIPT LANGUAGE="JavaScript">
form = unescape(params["pic"]);
pic = new Image();
pic.src=form;
document.write("<img src=" + form + " boder=1 onload=resize()>");
</script>
</body>
</html>
-
save this code into the HEAD of your HTML page :
<head>
<script language="javascript" src="resizableViewer.js"></script>
</head>
-
copy and paste this code into the BODY of your HTML page -->
<center>
<a href="javascript:view('cotton.jpg')">Pic 1</a>
<a href="javascript:view('michael.jpg')">Pic 2</a>
</center>
-
save the image load images to your web server
<!-- http://www.your-web-site.com/loading.gif
-->
<!-- http://www.your-web-site.com/loaded.gif
-->
-
dynamic sized image : sometimes,
your image does not look very good in different sized browser windows.
This script will proportionally resize a graphic to fit within the current
window or frame when a page is reloaded, thus giving a more consistent
and attractive look to your page
-
copy the coding into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "left";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 24;
if(bh == null) bh = 24;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'"
height="'+sh+'" align="'+aln+'">');
}
</script>
-
copy this code into the BODY of your HTML document :
<script language="javascript">
showpic("your-image.gif", 362, 113, "A
crows of people", "middle");
</script>
-
dynamic title bar changing message every 10 seconds :
-
focus OnLoad : put the user's cursor inside a text box (calling
giving the text box focus) as soon as the page is loaded. This helps ensure
that visitors do not 'overlook' an important form item on your site.
-
launches a frameless "go-behind" popup banner window that cannot be
closed unless the banner ad is clicked on. The frameless banner window
persists, even if the launching browser window is closed. The banner window
closes once the banner is clicked.
-
launch a popup window that continually re-opens itself and cannot be
permanently closed unless the visitor clicks on a link that you provide.
Compatible Browsers: NS6 and IE4-6.
-
random banner at uploading
: copy and paste the code to the BODY of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt="The World's Largest Online Bookstore, Amazon.com";
url="http://www.amazon.com";
alt="amazon.com";
banner="http://imageserv.imgis.com/images/Ad12669St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
if (ad==2) {
txt="Palm III by 3Com, in stock!";
url="http://cybershop.com/";
alt="cybershop.com";
banner="http://imageserv.imgis.com/images/Ad13189St1Sz1Sq5_Ban10.gif";
width="468";
height="60";
}
if (ad==3) {
txt="Find it at GoTo.com";
url="http://www.goto.com";
alt="goto.com";
banner="http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
</SCRIPT>
-
rotating banner
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
var mfBanners = [
['http://www.banner1-url-here.com', 'http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif'],
['http://www.banner2-url-here.com', 'http://imageserv.imgis.com/images/Ad13189St1Sz1Sq5_Ban10.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'">
<img border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
</script>
-
copy and paste this code into the BODY of your HTML document :
<div id="banner" style="position:absolute; top:300; left:171;"></div>
-
blinking text
-
copy and paste the coding into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer"
&& bVer < 4);
var blink_speed=100;
var i=0;
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
function Blink(layerName){
if (NS4 || IE4) {
if(i%2==0)
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="visible"');
}
else
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="hidden"');
}
}
if(i<1)
{
i++;
}
else
{
i--
}
setTimeout("Blink('"+layerName+"')",blink_speed);
}
</script>
-
copy and paste this code into the BODY of your HTML document -->
<div id="prem_hint" style="position:relative; left:0; visibility:hidden"
class="prem_hint">
<font color="#FF0000"><b>Welcome to the
JavaScript Source!</b></font>
</div>
<script language="javascript">Blink('prem_hint');</script>
-
colorful text fader :
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
var msg=new Array()
msg[0]="<CENTER>You can see more scripts like
this one...</CENTER>";
msg[1]="<CENTER>...when you visit the JavaScript
Source.</CENTER>";
msg[2]="<CENTER>Just type in \"<A href='http://javascript.internet.com/'>javascript.internet.com</A>\"</CENTER>";
msg[3]="<CENTER>Your computer can handle the
rest.</CENTER>";
// set your first set of colors. Use as many or as few as you
wish.
var colors1=new Array("ffffff", "eeeeff",
"ddddff", "ccccff",
"bbbbff", "aaaaff",
"9999ff",
"8888ff", "7777ff",
"6666ff", "5555ff",
"4444ff", "3333ff","2222ff",
"1111ff", "0000ff")
//set your second set of colors
// *** must have exactly the same number of colors as the array above
***
var colors2=new Array("ffffff", "ffeeee",
"ffdddd", "ffcccc",
"ffbbbb", "ffaaaa",
"ff9999",
"ff8888", "ff7777",
"ff6666", "ff5555",
"ff4444", "ff3333",
"ff2222", "ff1111",
"ff0000")
//set the height of the display in pixels
high=60;
//set the width of the display in pixels
wide=350;
//set the pixel coordinates for the upper left hand corner of the display
Xpos=220;
Ypos=180;
// move the display away from the edges of the background
pad=15;
bgcol="ffffff";
cellbg="faderbg.jpg";
fntFam="verdana,helvetica,arial";
fntSize=14;
// set how how many seconds you want the message to stay remain at
totality.
pause=2.5;
icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}
function doPause(){
totality=false; t=setTimeout("changecolor()",pause);
}
function initiate(){
getContentColor();
getMsg();
getCellContent();
if(document.all){
msgbg.innerHTML=cellcontent;
msgfade.innerHTML=theMsg;
msgbg.style.posLeft=Xpos;
msgbg.style.posTop=Ypos;
msgfade.style.posLeft=Xpos+pad;
msgfade.style.posTop=Ypos+pad;
t=setTimeout("changecolor()",50);}
if(document.layers){
document.msgbg.document.write(cellcontent);
document.msgbg.document.close();
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
document.msgbg.left=Xpos;
document.msgbg.top=Ypos;
document.msgfade.left=Xpos+pad;
document.msgfade.top=Ypos+pad;
t=setTimeout("changecolor()",100);}
}
function changecolor(){
if(totality==true){doPause();}
else{
getMsg();
getContentColor();
if(document.all){
msgfade.innerHTML=theMsg;
t=setTimeout("changecolor()",50);}
if(document.layers){
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
t=setTimeout("changecolor()",70);}
}
}
function getFadeColor(){
icolor=icolor-1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function getGlowColor(){
icolor=icolor+1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function changemsg(){
if(imsg==msg.length-1){imsg=0; mcolor=1;}
else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1;
mcolor=0;}
else{imsg=imsg+1; mcolor=1;}
}
function getContentColor(){
if(icolor==colors1.length-1 && glowing==true){
getFadeColor(); glowing=false; totality=true;}
else if(icolor < colors1.length && glowing==true){
getGlowColor();}
else if(icolor < 1 && glowing==false){changemsg();
getGlowColor(); glowing=true;}
else{getFadeColor();}
}
function getMsg() {
theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+";
width:"+spWidth+";'>"
theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B>
"
theMsg+="</span>"
}
function getCellContent(){
cellcontent="<TABLE height="+high+
" width="+wide+" bgcolor="+bgcol+" cellpadding=0 cellspacing=0><TR><TD"+cellbg+">
</TD></TR></TABLE>"}
</script>
-
insert the onLoad event handler into your BODY tag :
<BODY onLoad="initiate()">
-
copy this code into the BODY of your HTML document :
<DIV id=msgbg style="position: absolute;"></DIV>
<DIV id=msgfade style="position: absolute;"></DIV>
-
timed popup :
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
function popupWin() {
text = "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<a href='http://javascript.internet.com/new' target='_blank'><h2>New
JavaScripts</h2></a>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000);
// delay 3 seconds before opening
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 5000);
// delay 5 seconds before closing
}
function closeWin(newWindow) {
newWindow.close();
}
</script>
-
insert the onLoad event handler into your BODY tag -->
<BODY onLoad="popupWin()">
-
confirm entry or come back
: copy this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
var agree=confirm("I'd like to show you how to
get this exact JavaScript message script. OK?");
if (agree)
document.write("");
else
history.go(-1);
</SCRIPT>
-
continuously changing
link color : copy and paste the code in the HEAD of your HTML document
:
<SCRIPT LANGUAGE="JavaScript">
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"red");
delay = .5; // seconds
link = 0;
vlink = 2;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay*1000);
}
linkDance();
</script>
-
train station-like text :
copy and paste this code into the BODY of your HTML document :
<script>
var text="This Text Here Scroll Thrpugh The ALPHABET!!!
Numbers 0 1 2 3 4 5 6 7 8 and 9, comma, full stop. JavaScriptSource, your
place for free scripts.";
document.write("<big><tt id=dis nowrap>Display Area</tt></big>");
var symtype=new Array(" ","A","a","B","b","C","c","D","d","E","e","F","f","G","g","H","h","I","i","J","j","K","k","L","l","M","m","N","n","O","o","P","p","Q","q","R","r","S","s","T","t","U","u","V","v","W","w","X","x","Y","y","Z","z","0","1","2","3","4","5","6","7","8","9",".",",","&","!","?","-","_");
var symarray=new Array();
for (var i=0; i<text.length; i++){
symarray[i]=" ";}
function scroll(){
for (var i=0; i<text.length; i++){
if (symarray[i]!=text.substring(i,i+1)) {
for (var x=0; x<70; x++) if (symarray[i]==symtype[x]) {symarray[i]=symtype[x+1];
break}}
}var outsym="";
for (var i=0; i<text.length; i++) outsym+=symarray[i];
dis.innerHTML=outsym;
setTimeout('scroll()',100);
}scroll();
</script>
-
date-based messages
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
var days = new Array();
var msgs = new Array();
days[0] = "December 20, 1999";
msgs[0] = "Thanks for stopping by on my birthday!";
days[1] = "December 21, 1999";
msgs[1] = "Not Christmas yet, it's only the 21st.";
days[2] = "December 22, 1999";
msgs[2] = "Another day closer, almost there!";
days[3] = "December 23, 1999";
msgs[3] = "Wow, tomorrow is Christmas Eve!";
days[4] = "December 24, 1999";
msgs[4] = "It's Christmas Eve, thanks for visiting!";
days[5] = "December 25, 1999";
msgs[5] = "Welcome to this page on Christmas Day!";
var months = new Array("",
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
);
var today = new Date(); // today
var mon = months[today.getMonth() + 1]; // month
var day = today.getDate(); // day
var year = y2k(today.getYear()); // year
function dateMsg() {
for (i = 0; i < days.length; i++) {
tempdate = new Date(days[i]);
tempmonth = months[tempdate.getMonth() + 1];
tempday = tempdate.getDate();
tempyear = y2k(tempdate.getYear());
if (year == tempyear && mon == tempmonth && day ==
tempday)
return("Today is " + days[i] + ". " + msgs[i]); // returns day
message
}
return("Today is " + mon + " " + day + ", " + year + "."); // returns
default
}
function y2k(year) {
if (year < 2000)
year = year + 1900;
return year;
}
</script>
-
copy and paste this code into the BODY of your HTML document -->
<script>
document.write(dateMsg());
</script>
-
definition message : copy and paste
the coding into the BODY of your HTML document :
text<a href='javascript:alert("The
word means .....");'>word</a>?
-
link description while
hovering
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
function setupDescriptions() {
var x = navigator.appVersion;
y = x.substring(0,4);
if (y>=4) setVariables();
}
var x,y,a,b;
function setVariables(){
if (navigator.appName == "Netscape") {
h=".left=";
v=".top=";
dS="document.";
sD="";
}
else
{
h=".pixelLeft=";
v=".pixelTop=";
dS="";
sD=".style";
}
}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function popLayer(a){
desc = "<table cellpadding=3 border=1 bgcolor=F7F7F7><td>";
if (a==1) desc += "The JavaScript Source Home
Page!";
if (a==2) desc += "Updates on all the latest
scripts added to the site!";
if (a==3) desc += "Browser our Table of Contents
page!";
if (a==4) desc += "Get JavaScript assistance
in our JS forum!";
if (a==5) desc += "Get the answers to our commonly
asked JS questions!";
desc += "</td></table>";
if(isNav) {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+25;
document.object1.top=y;
}
else {
object1.innerHTML=desc;
eval(dS+"object1"+sD+h+(x+25));
eval(dS+"object1"+sD+v+y);
}
}
function hideLayer(a){
if(isNav) {
eval(document.object1.top=a);
}
else object1.innerHTML="";
}
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX;
y = (isNav) ? e.pageY : event.clientY;
}
if (isNav){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>
-
insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="setupDescriptions()">
-
copy and paste this code into the BODY of your HTML document -->
<div id="object1" style="position:absolute; visibility:show; left:25px;
top:-50px; z-index:2">layer hidden off the screen</div>
<a href="http://javascriptsource.com"
onMouseOver="popLayer(1)" onMouseOut="hideLayer(-50)">Home Page</a>
<p>
<a href="http://javascriptsource.com/new.html"
onMouseOver="popLayer(2)" onMouseOut="hideLayer(-50)">What's New?</a>
<p>
<a href="http://javascriptsource.com/toc.html"
onMouseOver="popLayer(3)" onMouseOut="hideLayer(-50)">Site Contents</a>
<p>
<a href="http://javascriptsource.com/forum/"
onMouseOver="popLayer(4)" onMouseOut="hideLayer(-50)">JavaScript Forum</a>
<p>
<a href="http://javascriptsource.com/faq/"
onMouseOver="popLayer(5)" onMouseOut="hideLayer(-50)">JavaScript FAQs</a>
<p>
-
sinusal snake
text following the cursor : copy and paste this code into the BODY
of your HTML document :
<script language="JavaScript">
var text="www.JavaScriptSource.com";
var textfont="Helvetica";
var textsize="24";
var textstyle="normal";
var textcolor="ffff00";
var amplitude="80";
var distance="20";
var speed="2";
var regkey="";
</script>
<script src="DS_CursorSinusText.js">
</script>
-
scroll-text with the
zoom effect : copy and paste this code into the BODY of your HTML document
-->
<script language="JavaScript">
var text="Free Scripts from the Source";
var textfont="fantasy";
var textstyle="bold";
var textsize="8";
var textcolor="ff00ff";
var transparency="yes";
var posy="150";
var zoomspeed="3";
var scrollspeed="3";
var zoomsize="48";
var regkey="";
var reglink="";
var regtarget="";
</script>
<script src="DS_ZoomScroll.js"></script
-
DHTML
tooltip generator
-
DHTML media popup : copy and paste
the coding into the BODY of your HTML document :
<script language="JavaScript1.2" src="cpw_example.js"></script>
<script language="JavaScript1.2" src="cpw.js"></script>
<a href="#" onClick="CPW_showWindow(1);return false;">Show
Form</a><br>
<a href="#" onClick="CPW_showWindow(2);return false;">Show
Image</a><br>
<a href="#" onClick="CPW_showWindow(3);return false;">Show
Tip</a><br>
<a href="#" onClick="CPW_hideWindow(1);return false;">Hide
Form</a><br>
<a href="#" onClick="CPW_hideWindow(2);return false;">Hide
Image</a><br>
<a href="#" onClick="CPW_hideWindow(3);return false;">Hide
Tip</a>
-
drop-in content box
-
copy and paste this code into the HEAD of your HTML document :
<style type="text/css">
#dropinboxv2cover{
width: 320px; /*change width to desired
*/
height: 220px; /*change height to
desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}
#dropinboxv2{
width: 300px; /*change width to above
width-20. */
height: 200px; /*change height to above
height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
position:absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
var dropboxleft=200 //set left position
of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)
//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is
displayed
//2) "oncepersession"- This uses cookies to display the fade-in box
only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display
the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time
the page loads.
var displaymode="always"
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById
function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}
function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}
function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("droppedinv2")==""
|| displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}
</script>
-
copy and paste this code into the BODY of your HTML document -->
<div id="dropinboxv2cover">
<div id="dropinboxv2">
You can add anything you like to the box.
<br>
<p align="right"><a href="#" onClick="dismissboxv2();return false">Close
It</a></p>
</div>
</div>
-
show
link description on status bar while hovering :
-
insert the onLoad event handler into your BODY tag :
<BODY onLoad="window.defaultStatus = 'Hello' ">
-
copy and paste this code into the BODY of your HTML document :
<p>
<a href="http://javascript.internet.com"
onmouseover="window.status='JSS the home for free
scripts';return true">JSS Home</a></p>
<p>
<a href="http://javascript.internet.com/messages/"
onmouseover="window.status='Dynamic Message Scripts!';return
true">Messages</a></p>
<p>
<a href="http://javascript.internet.com/bgeffects/"
onmouseover="window.status='Want to change the background
effects on your site.';return true">JSS
Home</a></p>
-
show page loading time
-
copy and paste this code into the HEAD of your HTML document :
<script type="text/javascript">
var startTime=new Date();
function currentTime(){
var a=Math.floor((new Date()-startTime)/100)/10;
if (a%1==0) a+=".0";
document.getElementById("endTime").innerHTML=a;
}
window.onload=function(){
clearTimeout(loopTime);
}
</script>
-
copy and paste this code into the BODY of your HTML document :
<script type="text/javascript">
document.write('This page took <span id="endTime">0.0</span>
seconds to load.');
var loopTime=setInterval("currentTime()",100);
</script>
-
message blinker
-
copy and paste this code into the HEAD of your HTML document -->
<style type="text/css">
.tab { font-weight:bold; font-size:12px; font-family:Arial;}
A:link {color:blue;}
A:visited{color: blue;}
A:hover {color: red;}
</style>
<script language=javascript>
var mswidth=250;
var msheight=60;
var mspause=1500; //1000=1s
var msspeed=500; // 1000=1s
var bcolor='#ffffcc';
var singlemessages='<div class=tab align="center"><a class=tab
href=""><u>JavaScriptSource <div class=tab>WDVL<div
class=tab>WebDevelopersJournal<div class=tab>JavaBoutique</u></a></div></div></div></div>'
var kkk=0;var timer1 = null;var timer2 = null;function startb(){if(document.all){iens6div=ieNS6sliderb;iens6marquee11();}else
if(document.layers){ns4layerb=document.ns4sliderb0.document.ns4sliderb1;ns4layerb.visibility='show';ns4marquee11();}else
if(document.getElementById){iens6div=document.getElementById('ieNS6sliderb');iens6marquee11(iens6div);}}function
iens6marquee11(){iens6div.innerHTML=singlemessages;timer1=setTimeout("iens6marquee12(iens6div.style.top=msheight)",mspause);return;}function
iens6marquee12(){timer2=setTimeout("iens6marquee11(iens6div.style.top=0)",msspeed);return;}function
ns4marquee11(){ns4layerb.document.write(singlemessages);ns4layerb.document.close();timer1=setTimeout("ns4marquee12(ns4layerb.top=msheight)",mspause);return;}function
ns4marquee12(){timer2=setTimeout("ns4marquee11(ns4layerb.top=0)",msspeed);return;}
</SCRIPT>
-
insert the onLoad event handler into your BODY tag :
<BODY onLoad="startb()">
-
copy and paste this code into the BODY of your HTML document -->
<script language="JavaScript">document.write('<table align="center"
border=2 CELLSPACING="0" CELLPADDING="0"><tr><td width='+mswidth+'>');if(document.all||document.getElementById){document.write('<div
style="position:relative;overflow:hidden;width:'+mswidth+';height:'+msheight+';background-color:'+bcolor+';"
onMouseover="if (timer1!=null){ clearTimeout(timer1);iens6div.style.top=0;
kkk=1;} if (timer2!=null) {kkk=1; clearTimeout(timer2);}" onMouseout="if
(kkk==1) { kkk=0; timer2=setTimeout(\'iens6marquee11(iens6div.style.top=0)\',msspeed);}"><div
id="ieNS6sliderb" style="position:relative;width:'+mswidth+';height:'+msheight+';"></div></div>')}
</script><ilayer id="ns4sliderb0" width=&{mswidth}; height=&{msheight};
bgcolor=&{bcolor};><layer id="ns4sliderb1" width=&{mswidth};
height=&{msheight}; onMouseover='if (timer1!=null){ clearTimeout(timer1);
ns4layerb.top=0; kkk=1;} if (timer2!=null){ kkk=1; clearTimeout(timer2);
}' onMouseout='if (kkk==1) {kkk=0; timer2=setTimeout("ns4marquee11(ns4layerb.top=0)",msspeed);}'></layer></ilayer></td></tr></table>
-
gradual neon script : copy and
paste this code into the BODY of your HTML document :
<script language="JavaScript1.2">
var message="Welcome to JavaScriptSource!"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100 //in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) :
document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
-
letter-by-letter highlighting
-
copy and paste this code into the HEAD of your HTML document -->
<script type="text/javascript">
var bgcolour="#ffffff"; // background
colour
var hlcolour="#bfceff"; // highlight colour
var speed=250; // speed colours change, 1 second = 1000
var w3c=document.getElementById;
var ie45=document.all;
var p_txt, p_cnt=0;
window.onload=function() {
if (w3c||ie45) {
var phone=(w3c)?document.getElementById("phonein"):document.all["phonein"];
p_txt=(w3c)?phone.firstChild.nodeValue:phone.innerHTML;
if (ie45) {
var phoni="";
for (var i=0; i<p_txt.length; i++)
phoni+='<sp'+'an id="phon'+i+'">'+p_txt.charAt(i)+'</'+'span>';
phone.innerHTML=phoni;
} else {
while (phone.childNodes.length) phone.removeChild(phone.childNodes[0]);
for (var i=0; i<p_txt.length; i++)
{
var phoni=document.createElement("span");
phoni.setAttribute("id",
"phon"+i);
phoni.appendChild(document.createTextNode(p_txt.charAt(i)));
phone.appendChild(phoni);
}
}
p_cnt=p_txt.length-1;
phone=setInterval ("phon1()", speed);
}
}
function phon1() {
var p_ct=p_cnt%p_txt.length;
var p_tmp=(w3c)?document.getElementById("phon"+p_ct):document.all["phon"+p_ct];
p_tmp.style.backgroundColor=bgcolour;
p_tmp.style.fontWeight="normal";
p_ct=++p_cnt%p_txt.length;
p_tmp=(w3c)?document.getElementById("phon"+p_ct):document.all["phon"+p_ct];
p_tmp.style.fontWeight="bold";
if (((w3c)?p_tmp.firstChild.nodeValue:p_tmp.innerHTML)!=" ")
p_tmp.style.backgroundColor=hlcolour;
}
</script>
-
copy this code into the BODY of your HTML document :
<span id="phonein">text to be highlighted
letter by letter</span>
-
please wait message : copy the
coding into the BODY of your HTML document :
<script language="javascript">
function do_totals1()
{
document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop
+ 50);
document.all.pleasewaitScreen.style.visibility="visible";
window.setTimeout('do_totals2()',1);
}
function do_totals2()
{
lengthy_calculation();
document.all.pleasewaitScreen.style.visibility="hidden";
}
function lengthy_calculation()
{
var x,y
for(x=0;x<1000000;x++)
{
y += (x * y) / (y - x);
}
}
</script>
<DIV ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:30%;left:42%;visibility:hidden">
<TABLE BGCOLOR="#000000" BORDER="1" BORDERCOLOR="#000000"
CELLPADDING="0" CELLSPACING="0" HEIGHT="100" WIDTH="150" ID="Table1">
<TR>
<TD WIDTH="100%" HEIGHT="100%" BGCOLOR="silver"
ALIGN="CENTER" VALIGN="MIDDLE">
<FONT FACE="Arial" SIZE="4" COLOR="blue"><B>Calculating<br>
Please
Wait</B></FONT>
</TD>
</TR>
</TABLE>
</DIV>
<input type="button" name="btn_calc" value="Perform
Calculation" onclick="do_totals1()">
-
notify the user is an image on your site fails to load properly or if
it is aborted when loading. Definitely an excellent example of the
onAbort and onError image event handlers in use. Please note that in the
script example we intentionally included a 'broken image' that fails to
load properly to display the script in use.
-
mouse orbit : a series of dots orbit the mouse cursor on the page,
giving the appearance of a comet effect.
-
bubbles float up from mouse
giving
the effect that the mouse is under water. The bubbles even expand in Internet
Explorer. Copy the coding into the BODY of your HTML document
<BODY BGCOLOR="#000000">
<SCRIPT LANGUAGE="JavaScript">
Image0 = new Image();
Image0.src = "BubBlack.gif";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+"
name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
</script>
<div style="position:relative">
rest of page content, text and graphics etc.
</div>
-
display the mouse's X and Y coordinates in the status window
-
when visitors using Netscape right-click your Web page and select "View
Source" or go to the View menu bar and select "View -> Page Source" the
entire source code of your page is displayed. Interestingly enough, it's
possible to actually insert an image into Netscape's view source page
instead of just having text. When Netscape users view the source of your
page, they see an image as well as the source code! Your image could tell
the visitor that they are not allowed to view this source code, for example.
A very simple but very clever script, indeed.
-
displaying
the "new" icon for a link until a given date
-
copy the coding into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
function checknew(date) {
var pic = "new.gif";
expdate = new Date(date);
curdate = new Date();
if (expdate.getTime() > curdate.getTime())
document.write("<img src=" + pic + ">");
}
</script>
-
copy this code into the BODY of your HTML document -->
<script> checknew("6/01/2000") </script>Shown
as "New" until 6/01/2000<br>
<script> checknew("12/01/2000") </script>Shown
as "New" until 12/01/2000<br>
<script> checknew("6/01/2001") </script>Shown
as "New" until 6/01/2001<br>
<script> checknew("12/01/2001") </script>Shown
as "New" until 12/01/2001<br>
-
cookies
-
new to your browser
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
now = new Date
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
lastVisit = new Date(cookieVal("pageVisit"))
document.cookie = "pageVisit="+now+";expires=" + expireDate.toGMTString()
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0])
{
return thisCookie[i].split("=")[1]
}
}
return "1 January 1970"
}
function newCheck(yyy,mm,dd) {
lastChgd = new Date(yyy,mm-1,dd)
if (lastChgd.getTime() > lastVisit.getTime()) {
document.write("<img src='update.jpeg'
alt='new'>")
}
}
</script>
-
copy this code into the BODY of your HTML document -->
Be sure to check out our new scripts!<script
type="text/javascript" language="JavaScript"> newCheck(2005,2,11)</script>
<br>
Have you seen our Tutorials?<script
type="text/javascript" language="JavaScript"> newCheck(2005,2,3)</script>
-
visitor's name,
visits, and last visit
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function Who(info){
var VisitorName = GetCookie('VisitorName')
if (VisitorName == null) {
VisitorName = prompt("Who are you?");
SetCookie ('VisitorName', VisitorName, exp);
}
return VisitorName;
}
function When(info){
var rightNow = new Date()
var WWHTime = 0;
WWHTime = GetCookie('WWhenH')
WWHTime = WWHTime * 1
var lastHereFormatting = new Date(WWHTime);
var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth()
* 100) + lastHereFormatting.getDate()
var lastHereInDateFormat = "" + lastHereFormatting;
var dayOfWeek = lastHereInDateFormat.substring(0,3)
var dateMonth = lastHereInDateFormat.substring(4,11)
var timeOfDay = lastHereInDateFormat.substring(11,16)
var year = lastHereInDateFormat.substring(23,25)
var WWHText = dayOfWeek + ", " + dateMonth + " at " + timeOfDay
SetCookie ("WWhenH", rightNow.getTime(), exp)
return WWHText
}
function Count(info){
var WWHCount = GetCookie('WWHCount')
if (WWHCount == null) {
WWHCount = 0;
}
else{
WWHCount++;
}
SetCookie ('WWHCount', WWHCount, exp);
return WWHCount;
}
function set(){
VisitorName = prompt("Who are you?");
SetCookie ('VisitorName', VisitorName, exp);
SetCookie ('WWHCount', 0, exp);
SetCookie ('WWhenH', 0, exp);
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
</SCRIPT>
-
copy and paste this code into the BODY of your HTML document -->
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello " + Who() + ". You've been here " + Count() +
" time(s). Last time was " + When() +".");
</SCRIPT>
</CENTER>
-
fixed and mobile
status bar messages
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
function scrollit_r2l(seed)
{
var m1 = " offering Free Scripts
";
var m2 = " .... ";
var m3 = " Visit Us Now!
";
var m4 = " Youm may add as many messages as you
like! ";
var m5 = " LOOOK........ Great!!
";
var msg=m1+m2+m3+m2+m4+m2+m5;
var out = "Javascript Source
";
var c = 1;
if (seed > 100) {
seed--;
var cmd="scrollit_r2l(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit_r2l(100)",75);
}
}
}
</script>
-
insert the onLoad event handler into your BODY tag -->
<BODY onLoad="timerONE=window.setTimeout('scrollit_r2()">
-
bouncing scroll : copy and paste the
coding into the BODY of your HTML document :
<script language="JavaScript">
var text="JavaScriptsSource - The home of free
scripts!";
var textfont="arial";
var textcolor="000000";
var textstyle="italic";
var textsize="42";
var scrollspeed="4";
var bouncespeed="2";
var distance="50";
var posy="160";
var regkey="";
var reglink="";
var regtarget="";
</script>
<script src="DS_BounceScroll.js"></script>
-
status bar text flasher :
-
copy this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
var message="The JavaScript Source is your JavaScript
solution!! ";
var speed=400;
var visible=0;
function Flash() {
if (visible == 0) {
window.status=message;
visible=1;
} else {
window.status="";
visible=0;
}
setTimeout('Flash()', speed);
}
</SCRIPT>
-
add this onLoad event handler into the BODY tag -->
<BODY onLoad="Flash()">
-
news scroller
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
var blank = "http://www.your-web-site-address-here.com/blank.gif";
topedge = 130; // location of news
box from top of page
leftedge = 10; // location of news
box from left edge
boxheight = 150; // height of news
box
boxwidth = 210; // width of news
box
scrollheight = 240; // total height of
all data to be scrolled
function scrollnews(cliptop) {
if (document.layers) {
newsDiv = document.news;
newsDiv.clip.top = cliptop;
newsDiv.clip.bottom = cliptop + boxheight;
newsDiv.clip.left = 0;
newsDiv.clip.right = boxwidth + leftedge;
newsDiv.left = leftedge;
newsDiv.top = topedge - cliptop;
}
else {
newsDiv = news.style;
newsDiv.clip = "rect(" + cliptop + "px " + (boxwidth + leftedge) +
"px " + (cliptop + boxheight) + "px 0px)";
newsDiv.pixelLeft = leftedge;
newsDiv.pixelTop = topedge - cliptop;
}
cliptop = (cliptop + 1) % (scrollheight + boxheight);
newsDiv.visibility='visible';
setTimeout("scrollnews(" + cliptop + ")", 150);
}
</script>
-
insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="scrollnews(0)">
-
copy this code into the BODY of your HTML document -->
<div ID="news" style="position:absolute; visibility:hidden;
top:1; left:1; height:600;
clip:rect(10,100,100,10); border-width:0px;">
<table border=0 cellpadding=1 cellspacing=0 bgcolor="white">
<tr>
<td>
<script language="javascript">
document.write('<img src=' + blank + ' width=1 height='+boxheight+'>');
</script>
</td>
</tr>
<tr>
<td>
This news scroller begins<br>
Displaying text and images<br>
From the bottom of the box<br>
And restarts when all the<br>
Information scrolls above<br>
The top of the box.<br><br>
Any HTML page content can<br>
Be used in this Javascript<br>
Scroller.<br>
<br>
<a href="mailto:yobo42@hotmail.com">yobo42@hotmail.com</a>
</td>
</tr>
<tr>
<td>
<script language="javascript">
document.write('<img src=' + blank + ' width=1 height='+boxheight+'>');
</script>
</td>
</tr>
</table>
</div>
-
automatic copyright year
update : copy the following between the <BODY> and </BODY> tags
:
<script type="text/javascript">
copyright=new Date();
update=copyright.getFullYear();
document.write("Copyright © 2001-"+
update + " (your company name) All rights reserved.");
</script>
-
"last modified
.." auto-update and eventual updates since last visit : copy the following
between the <BODY> and </BODY> tags :
<SCRIPT LANGUAGE="JavaScript">
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
var exp = new Date();
FixCookieDate (exp);
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
if (cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var cookie_date=new Date(document.lastModified);
var expdate = new Date();
expdate.setTime(expdate.getTime()+(5*24*60*60*1000));
document.write("<Font color=ff8800>" + "Last updated: "+ "</font>"
+document.lastModified);
document.write("");
if (!(cookie_date == GetCookie("cookie_date"))){
SetCookie("cookie_date",cookie_date,expdate);
document.write("<font color='yellow'><br>Site has changed since
last visit!</font><br>");
}
</SCRIPT>
-
last
modified in the form "day of the week, month date, year" : copy the
following between the <BODY> and </BODY> tags :
<SCRIPT LANGUAGE="JavaScript">
var days = new Array(8);
days[1] = "Sunday";
days[2] = "Monday";
days[3] = "Tuesday";
days[4] = "Wednesday";
days[5] = "Thursday";
days[6] = "Friday";
days[7] = "Saturday";
var months = new Array(13);
months[1] = "January";
months[2] = "February";
months[3] = "March";
months[4] = "April";
months[5] = "May";
months[6] = "June";
months[7] = "July";
months[8] = "August";
months[9] = "September";
months[10] = "October";
months[11] = "November";
months[12] = "December";
var dateObj = new Date(document.lastModified)
var wday = days[dateObj.getDay() + 1]
var lmonth = months[dateObj.getMonth() + 1]
var date = dateObj.getDate()
var fyear = dateObj.getYear()
if (fyear < 2000)
fyear = fyear + 1900
document.write(wday + ", " + lmonth + " " + date + ", " + fyear)
</SCRIPT>
-
random password generator
-
copy the following between the <HEAD> and </HEAD> tags :
<SCRIPT LANGUAGE="JavaScript">
function getRandomNum(lbound, ubound) {
return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
}
function getRandomChar(number, lower, upper, other, extra) {
var numberChars = "0123456789";
var lowerChars = "abcdefghijklmnopqrstuvwxyz";
var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var otherChars = "`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/? ";
var charSet = extra;
if (number == true)
charSet += numberChars;
if (lower == true)
charSet += lowerChars;
if (upper == true)
charSet += upperChars;
if (other == true)
charSet += otherChars;
return charSet.charAt(getRandomNum(0, charSet.length));
}
function getPassword(length, extraChars, firstNumber, firstLower, firstUpper,
firstOther,
latterNumber, latterLower, latterUpper, latterOther) {
var rc = "";
if (length > 0)
rc = rc + getRandomChar(firstNumber, firstLower, firstUpper, firstOther,
extraChars);
for (var idx = 1; idx < length; ++idx) {
rc = rc + getRandomChar(latterNumber, latterLower, latterUpper, latterOther,
extraChars);
}
return rc;
}
</script>
-
copy the following between the <BODY> and </BODY> tags :
<center>
<table width=80% border=0>
<tr align=center>
<td>
<form name="myform">
<table border=0>
<tr>
<td>
First character can be:
</td>
<td>
<input type=checkbox name=firstNumber checked>Number
<input type=checkbox name=firstLower checked>Lowercase
<input type=checkbox name=firstUpper checked>Uppercase
<input type=checkbox name=firstOther>Other
</td>
</tr>
<tr>
<td>
Latter characters can be:
</td>
<td>
<input type=checkbox name=latterNumber checked>Number
<input type=checkbox name=latterLower checked>Lowercase
<input type=checkbox name=latterUpper checked>Uppercase
<input type=checkbox name=latterOther>Other
</td>
</tr>
<tr>
<td>
Password length:
</td>
<td>
<input type=text name=passwordLength value="8" size=3>
</td>
</tr>
<tr>
<td>
Extra password characters:
</td>
<td>
<input type=text name=extraChars size=20>
</td>
</tr>
</table>
</td>
</tr>
<tr align=center>
<td>
New password:
<input type=text name=password size=20>
<br>
<input type=button value="Generate password" onClick="document.myform.password.value
=
getPassword(document.myform.passwordLength.value, document.myform.extraChars.value,
document.myform.firstNumber.checked, document.myform.firstLower.checked,
document.myform.firstUpper.checked, document.myform.firstOther.checked,
document.myform.latterNumber.checked, document.myform.latterLower.checked,
document.myform.latterUpper.checked, document.myform.latterOther.checked);">
</form>
</td>
</tr>
</table>
</center>
-
login coder
<center><table border=1>
<tr><form name=members><td rowspan=4>
<select name=memlist size=10 onChange="showmem(this.form)">
<option selected value="John Smith|password|mainpage|">John Smith
<option value="Peter Jones|theirpwd|endpages|">Peter Jones
<option value="Sue Brown|asdfvcxz|nowheres|">Sue Brown
<option value="Sally West|zaqxswde|logintop|">Sally West
</select></td>
<td align=right>User:</td><td><input type=hidden value="0"
name=entry>
<input type=text name=memname size=8 value=""></td></tr>
<tr><td align=right>Password:</td><td><input type=text
name=password size=8 maxlength=8><font size="-1"><-- Must be exactly
8 characters</font></td></tr>
<tr><td align=right>Page Name:</td><td><input type=text
name=pagename size=8 maxlength=8><b>.html</b><font size="-1"><--
Must be exactly 8 characters</font></td></tr>
<tr><td colspan=2 align=center>
<input type=button value="New User" onclick="addnew(this.form);">
<input type=button value="Delete User" onclick="delthis(this.form);">
<input type=button value="Update/Show Coding" onclick="update(this.form);
create(this.form);"></td></tr>
<tr><td colspan=3 align=center>
<input type=text size=60 name=message value="Note: Password/Page
Name must be exactly 8 letters! (a-z)">
<input type=hidden name=num value=1></td>
</form></tr>
</table>
<hr size=2 width=75%>
<form name=js><textarea cols=75 rows=10 name=scrpt wrap=virtual>
<SCRIPT LANGUAGE="JavaScript">
var params=new Array(4);
var alpha="ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHI";
function check(form) {
which=form.memlist.selectedIndex;
choice = form.memlist.options[which].value+"|";
if (choice=="x|") {
alert("Please Select Your Name From The List");
return;
}
p=0;
for (i=0;i<3;i++) {
a=choice.indexOf("|",p);
params[i]=choice.substring(a,p);
p=a+1;
}
h1=makehash(form.pass.value,3);
h2=makehash(form.pass.value,10)+" ";
if (h1!=params[1]) {
alert("Incorrect Password!"); return; };
var page="";
for (var i=0;i<8;i++) {
letter=params[2].substring(i,i+1)
ul=letter.toUpperCase();
a=alpha.indexOf(ul,0);
a-=(h2.substring(i,i+1)*1);
if (a<0) a+=26;
page+=alpha.substring(a,a+1); };
top.location=page.toLowerCase()+".html";
}
function makehash(pw,mult) {
pass=pw.toUpperCase();
hash=0;
for (i=0;i<8;i++) {
letter=pass.substring(i,i+1);
c=alpha.indexOf(letter,0)+1;
hash=hash*mult+c;
}
return(hash);
}
// End -->
</script>
</textarea>
</form>
<SCRIPT LANGUAGE="JavaScript">
var params=new Array(4);
var script=document.js.scrpt.value;
document.js.scrpt.value="Create your users, their passwords, and their
destination pages using the form above.\n\nThen, click 'Show Coding' to
see the login HTML and JavaScript that you need to put on your page to
password-protect your site with that info.\n\nQuestions about this script
or how to put it on your site should be directed to it's author via email:
dion@mailhub.omen.com.au\n\n*Honestly, we don't even totally understand
this JavaScript!*";
var alpha="ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHI";
showmem(document.members);
function showmem(form) {
document.members.num.value=document.members.memlist.length;
var which=form.memlist.selectedIndex;
splt(form.memlist[which].value);
form.entry.value=which+1;
for (i=2;i<5;i++) {
form.elements[i].value=params[i-2]; };
}
function splt(choice) {
p=0;
for (i=0;i<3;i++) {
a=choice.indexOf("|",p);
params[i]=choice.substring(a,p);
p=a+1;
}
}
function addnew(form) {
newmem=getfields(form);
var who=prompt("New User's Name:","");
form.memlist[form.memlist.length] = new Option(who, newmem, false,
true);
if (navigator.appName=="Netscape") {
document.js.scrpt.value=script;
history.go(0);
}
else {
showmem(document.members);
}
}
function getfields(form) {
newmem="";
for (i=2;i<5;i++) {
newmem+=form.elements[i].value+"|"; };
for (i=3;i<5;i++) {
a=form.elements[i];
for (k=0;k<8;k++) {
}
}
return(newmem);
}
function delthis(form) {
if (confirm("Delete "+form.memname.value+"?")) {
form.memlist.options[form.entry.value-1]=null;
form.message.value=form.memname.value+" Deleted";
form.memlist.selectedIndex=0;
if (navigator.appName=="Netscape") {
document.js.scrpt.value=script;
history.go(0);
}
else {
showmem(document.members);
}
}
}
function update(form) {
msg="no";
a=form.elements[i];
for (k=0;k<8;k++) {
b=a.value.substring(k,k+1);
c=b.toUpperCase();
form.memlist[form.entry.value-1].value=getfields(form);
form.message.value=form.memname.value+"'s record was updated";
}
}
function create(form) {
var html="<center><form name=login>\n";
html+="<table border=1 cellpadding=3>\n\n";
html+="<!-- Original: Dion -->\n";
html+="<!-- Web Site: http://www.iinet.net.au/~biab/ -->\n";
html+="<!-- This script and many more are available free online
at -->\n";
html+="<!-- The JavaScript Source!! http://javascript.internet.com
-->\n\n";
html+='<tr><td colspan=2 align=center><font size="+2">';
html+='<b>Members-Only Area!</b></font></td></tr>\n';
html+="<tr><td>Username:</td><td><select name=memlist>\n<option
value='x'>";
for (j=0;j<form.memlist.length;j++) {
splt(form.memlist.options[j].value);
h1=makehash(params[1],3);
h2=makehash(params[1],10)+" ";
var page="";
for (var i=0;i<8;i++) {
letter=params[2].substring(i,i+1);
ul=letter.toUpperCase();
a=alpha.indexOf(ul,0);
a+=(h2.substring(i,i+1)*1);
page+=alpha.substring(a,a+1);
}
html+="\n<option value='"+params[0]+"|"+h1+"|"+page+"'>"+params[0];
};
html+="\n</select></td></tr>\n";
html+="<tr><td>Password:</td><td><input type=password
size=10 maxlength=8 name=pass></td></tr>\n";
html+='<tr><td colspan=2 align=center><input type=button value="Login"
onclick="check(this.form)"></td>\n';
html+="</tr>\n</table>\n</form>\n";
document.js.scrpt.value=html+script+"</center>";
}
function makehash(pw,mult) {
pass=pw.toUpperCase();
hash=0;
for (i=0;i<8;i++) {
letter=pass.substring(i,i+1);
c=alpha.indexOf(letter,0)+1;
hash=hash*mult+c;
}
return(hash);
}
</script>
</center>
browser properties
-
copy and paste this code into the HEAD of your HTML document :
<SCRIPT LANGUAGE="JavaScript">
function display() {
window.onerror=null;
colors = window.screen.colorDepth;
document.form.color.value = Math.pow (2, colors);
if (window.screen.fontSmoothingEnabled == true)
document.form.fonts.value = "Yes";
else document.form.fonts.value = "No";
document.form.navigator.value = navigator.appName;
document.form.version.value = navigator.appVersion;
document.form.colordepth.value = window.screen.colorDepth;
document.form.width.value = window.screen.width;
document.form.height.value = window.screen.height;
document.form.maxwidth.value = window.screen.availWidth;
document.form.maxheight.value = window.screen.availHeight;
document.form.codename.value = navigator.appCodeName;
document.form.platform.value = navigator.platform;
if (navigator.javaEnabled() < 1) document.form.java.value="No";
if (navigator.javaEnabled() == 1) document.form.java.value="Yes";
if(navigator.javaEnabled() && (navigator.appName != "Microsoft
Internet Explorer")) {
vartool=java.awt.Toolkit.getDefaultToolkit();
addr=java.net.InetAddress.getLocalHost();
host=addr.getHostName();
ip=addr.getHostAddress();
alert("Your host name is '" + host + "'\nYour
IP address is " + ip);
}
}
</script>
-
copy and paste this code into your BODY tag : <BODY OnLoad="display()">
-
copy and paste this code into the BODY of your HTML document
<center>
<form name=form>
<table border=1 width=300>
<tr>
<td>current resolution:</td>
<td align=center><input type=text size=4 maxlength=4 name=width>
x <input type=text size=4 maxlength=4 name=height></td>
</tr>
<tr>
<td>
browser:</td>
<td align=center><input type=text size=20 maxlength=20 name=navigator></td>
</tr>
<tr>
<td>
max resolution:</td>
<td align=center><input type=text size=4 maxlength=4 name=maxwidth>
x <input type=text size=4 maxlength=4 name=maxheight></td>
</tr>
<tr>
<td>
version:</td>
<td align=center><input type=text size=20 maxlength=20 name=version></td>
</tr>
<tr>
<td>
color depth:</td>
<td align=center><input type=text size=2 maxlength=2 name=colordepth>
bit</td>
</tr>
<tr>
<td>
code name:</td>
<td align=center><input type=text size=15 maxlength=15 name=codename></td>
</tr>
<tr>
<td>
platform:</td>
<td align=center><input type=text size=15 maxlength=15 name=platform></td>
</tr>
<tr>
<td>
colors:</td>
<td align=center><input type=text size=8 maxlength=8 name=color></td>
</tr>
<tr>
<td>
java enabled:</td>
<td align=center><input type=text size=3 maxlength=3 name=java></td>
</tr>
<tr>
<td>
anti-aliasing fonts:</td>
<td align=center><input type=text size=3 maxlength=3 name=fonts></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button name=again value="again?" onclick="display()"></td>
</tr>
</table>
</form>
</center>
show IP
address in alert box on opening, status bar and/or title : copy and
paste this code into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
var ip = ''<!--#echo var="REMOTE_ADDR"-->';
alert("Your IP address
is "+ip);
window.defaultStatus = "Your
IP address is "+ip;
document.write("<title>Your
IP address is "+ip+"</title>");
</script>
To display in the title bar, exclude the "<title></title>" code
from the page.
IP address filter : this JavaScript
uses server side includes ("SSI") so this document's name must end in .shtml.
Paste this code into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
function ban(){
var ip = '<!--#echo var="REMOTE_ADDR"-->';
if (ip == "x.x.x.x" || ip == "x.x.x.x")
{
alert("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Attention!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\nYour
ip address \("+ip+"\) has been banned!");
history.go(-1);
window.location.replace("http://www.google.com/")
}
}
ban();
</script>
alert box on opening : copy the
following code into the BODY of your html page.
<script language="JavaScript">
alert ("Put your warning text here!")
</script>
redirect to
Java Scripts containing page if visitor is Java enabled : copy and
paste this code into the HEAD of your HTML document
<SCRIPT LANGUAGE="JavaScript">
if (navigator.javaEnabled())
window.location = "java-page.html";
else
window.location = "non-java-page.html";
</script>
must visit from .... : copy the following
code into your HEAD tags
<SCRIPT LANGUAGE="JavaScript">
var requiredfrom = "www.mm.interhealth.info";
if (document.referrer.indexOf(requiredfrom) == -1) {
alert("You must come to this page from "
+ requiredfrom);
window.location=requiredfrom;
}
</script>
referrer : copy the coding into the BODY
of your HTML document
<SCRIPT LANGUAGE="JavaScript">
if (document.referrer) {
document.write("<B>Thanks for visiting us
from ");
document.write(document.referrer+"</B>");
}
</SCRIPT>
image size according
to screen resolution
<SCRIPT LANGUAGE="JavaScript1.2">
if (screen.height >= 768 && screen.width >= 1024) {
document.write("<img src='http://your-web-site-address-here.com/image.gif'
width=850 height=11 border=0>");
}
else {
if (screen.height == 600 && screen.width == 800) {
document.write("<img src='http://your-web-site-address-here.com/image.gif'
width=600 height=11 border=0>");
}
else {
document.write("<img src='http://your-web-site-address-here.com/image.gif'
width=475 height=11 border=0>");
}
}
</script>
change background
hovering safe color palette
-
copy this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
function makeArray(q){
for(i=1 ; i <= q ; i++){this[i]=0}}
Colors = new makeArray(7);
Colors[1] = "00";
Colors[2] = "33";
Colors[3] = "66";
Colors[4] = "99";
Colors[5] = "CC";
Colors[6] = "FF";
</SCRIPT>
-
copy this code into the BODY of your HTML document :
<table cellspacing = 0 cellpadding = 0>
<script language="JavaScript">
for(i=1 ; i <= 6 ; i++){
for(j=1 ; j <= 6 ; j++){
for(k=1 ; k <= 6 ; k++){
var thiscolor = Colors[i] + Colors[j] + Colors[k];
document.writeln("<tr><td height = 20 bgcolor = \"#" + thiscolor
+ "\" align = right><a href = ");
document.writeln("\'\' onMouseOver = \"document.bgColor = \'" + thiscolor
+ "\'\">" + thiscolor + "</a></td></tr>");
}
}
}
</script>
backgrounds
according to screen resolution : copy the coding into the HEAD of your
HTML document -->
<SCRIPT LANGUAGE="JavaScript">
var ScrnSize = "UnCommon"
if (navigator.appVersion.indexOf("4.") != -1 &&
navigator.appName.indexOf("Explorer")
!= -1) {
ScrnSize = screen.width + "x" + screen.height;
}
if (navigator.appVersion.indexOf("4.") != -1 &&
navigator.appName.indexOf("Netscape")
!= -1) {
ScrnSize = screen.width + "x" + (screen.height
+ 19); //Netscape sees 19 pixels less on Height
}
switch(ScrnSize) {
case "640x480": document.write('<body
bgcolor="#FF0000" text="#000000">');
case "800x600": document.write('<body
bgcolor="#00FF00" text="#000000">');
case "1024x768": document.write('<body
bgcolor="#0000FF" text="#000000">');
case "1152x864": document.write('<body
bgcolor="#FFFF00" text="#000000">');
case "1280x1024": document.write('<body bgcolor="#AA0000"
text="#000000">');
case "1600x1200": document.write('<body bgcolor="#FF00FF"
text="#000000">');
case "1600x1280": document.write('<body bgcolor="#00AA00"
text="#000000">');
default:
document.write('<body bgcolor="#FFFFFF" text="#000000">');
}
</script>
popup calendar
-
copy the following code into your HEAD tags
<script type="text/javascript" language="javascript">
function HTML(p){
if(!p){
/*default*/
p='A action align alt B background Base bgcolor BIG BLINK BODY
border bordercolor bordercolordark bordercolorlight Br cellpadding cellspacing
checked color cols colspan compact content dir DIV enctype face FONT FORM
H1 H2 H3 H4 H5 H6 HEAD height Hr href hspace HTML I id Img Input lang language
leftmargin LI marginheight marginwidth maxlength Meta method name NOSCRIPT
noshade nowrap OL onblur onchange onclick onfocus onload onmouseout onmouseover
onreset onselect onsubmit onunload OPTION P PRE profile readonly rows rowspan
SCRIPT SELECT size SMALL SPAN src start STRIKE STYLE style SUB SUP TABLE
target TD TEXTAREA TH TITLE title topmargin TR TT type U UL valign value
vspace width wrap'
};
String.prototype.write=function(){
document.write(this);
return this
};
String.prototype.alert=function(){
window.alert(this);
return this
};
String.prototype.status=function(){
window.status=this;
return this
};
var x=[
function(W){var q=String.fromCharCode(34);return ' x='+q+((typeof(W)!='undefined')?W:'x')+q}/*attr*/,
function(W){return '<x'+((typeof(W)!='undefined')?W:'')+'
/>'}/*tag*/,
function(W){return '<x'+((typeof(W)!='undefined')?W:'')+'>'+this+'</'+'x>'}/*container*/,
function(W){var o='<x'+((typeof(W)!='undefined')?W:'')+' />';return
o+this.join(o)}/*tags*/,
function(W){var o='<x'+((typeof(W)!='undefined')?W:'')+'>';var
c='</'+'x>';return o+this.join(c+o)+c}/*containers*/
];
var j=[];
var f=0;
var a=p.split(' ');
var t,u,l;
for(var i=0;i<a.length;i++){
t=a[i];
u=t.toUpperCase();
l=t.toLowerCase();
if(t==l){
/*attr*/
j[f]='window.'+u+'='+x[0]
}
else if(t==u){
/*container;containers*/
j[f]='String.prototype.'+u+'='+x[2]+';Array.prototype.'+u+'='+x[4]
}
else{
/*tag;tags*/
j[f]='window.'+u+'='+x[1]+';Array.prototype.'+u+'='+x[3]
};
/*specific*/
j[f]=j[f].replace(/x/g,l);
f++
};
window.status='HTML() bookmarklet library: Copyright (c) 2002-'+(new
Date()).getFullYear()+', by Richard Edwards. ['+f+' tag/attrs added] ';
/*implement!*/
eval(j.join(';'))
};
HTML();
</script>
<script type="text/javascript" language="javascript">
function init(){m='January February March April May June July August
September October November December'.split(' ');wd='Su M Tu W Th Fr Sa'.split('
');lom=[31,28,31,30,31,30,31,31,30,31,30,31];sz=25;js='javascript';fn=[function(F){},function(F){DATE=new
Date(F.date.value);if(isNaN(DATE.valueOf())){DATE=new Date()};M=DATE.getMonth();D=DATE.getDate();Y=DATE.getFullYear();lom[1]=28;if((Y%/**/4==0)&&((Y%/**/100>0)||(Y%/**/400==0))){lom[1]++}},function(F){if(D>lom[M]){D=lom[M]};F.date.value=(M<9?'0':'')+(1.0+M)+'/'+(D<10?'0':'')+D+'/'+Y;dv.value=F.date.value;if(opener.Page){opener.document.forms[0][dv.name].value=F.date.value}},function(){F=this.form;fn[1](F);M=this.selectedIndex;fn[2](F);fn[0](F)},function(){F=this.form;fn[1](F);D=this.value;fn[2](F);fn[0](F)},function(){F=this.form;fn[1](F);Y=this.value;fn[2](F);fn[0](F)},function(F){fn[1](F);var
f=new Date(Y,M,1);var x=1-(f.getDay());for(var i=0;i<49;i++){F.d[i].value=(i<7?wd[i]:'');F.d[i].onclick=this;};for(var
i=1;i<=lom[M];i++){w=Math.floor((i-1)/7);n=7+i-x;F.d[n].value=i;F.d[n].onclick=fn[4];if(i==D){F.d[7+i-x].focus()}};for(var
i=0;i<F.m.length;i++){F.m[i].selected=(i==M)};F.m.onchange=fn[3];F.y.value=Y;F.y.onchange=fn[5];F.y.onblur=fn[5];fn[2](F)}];fn[0]=fn[6]};init();function
popCal(datevalue){if(!datevalue){dv={name:'Today',value:(new Date())}}else{dv=datevalue};var
c=ALIGN('center')+HEIGHT(sz);var h=(m.OPTION().SELECT(NAME('m'))+INPUT(TYPE('text')+SIZE(4)+NAME('y'))+INPUT(TYPE('hidden')+NAME('date')+VALUE(dv.value))).TD(COLSPAN(7)+c);var
b=INPUT(TYPE('button')+NAME('d')+STYLE('width:'+sz+';height:'+sz)+WIDTH(sz)+c);var
r=[b,b,b,b,b,b,b].TD(WIDTH(sz*7)+c);h=[h,r,r,r,r,r,r,r].TR(c).TABLE(BORDER('0')+CELLSPACING('0')+CELLPADDING('0')+c).FORM(NAME('frm')+ACTION(js+'://'));h+=(init+';init();dv=opener.dv;fn[0](document.forms.frm);').SCRIPT(LANGUAGE(js)+TYPE('text/'+js));window.open('','cal'+(new
Date()).valueOf(),'height='+sz*9+',width='+sz*8).document.write(h)};
</script>
-
copy the following code into the BODY of your html page.
<script type="text/javascript" language="javascript">
(INPUT(NAME("DV")+READONLY())+INPUT(TYPE("button")+VALUE("Calendar..")+ONCLICK("popCal(this.form.DV)"))).FORM().write();
</script>
calendar popdown
-
copy the following code into your HEAD tags.
<script language="JavaScript">
<!--
var months = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31,
30, 31);
var days = new Array("S", "M", "T", "W", "T", "F", "S");
today = new getToday();
var element_id;
function getDays(month, year)
{
// Test for leap year when February is selected.
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday()
{
this.now = new Date();
this.year = this.now.getFullYear() ; // Returned year XXXX
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
function newCalendar()
{
var parseYear = parseInt(document.all.year [document.all.year.selectedIndex].text);
var newCal = new Date(parseYear , document.all.month.selectedIndex,
1);
var day = -1;
var startDay = newCal.getDay();
var daily = 0;
today = new getToday(); // 1st call
if ((today.year == newCal.getFullYear() ) &&
(today.month == newCal.getMonth()))
day = today.day;
var tableCal = document.all.calendar.tBodies.dayList;
var intDaysInMonth =
getDays(newCal.getMonth(), newCal.getFullYear()
);
for (var intWeek = 0; intWeek < tableCal.rows.length;
intWeek++)
for (var intDay = 0;
intDay < tableCal.rows[intWeek].cells.length;
intDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay];
if ((intDay == startDay) && (0 == daily))
daily = 1;
cell.style.color = (day == daily) ? "red"
: "";
if(day == daily)
{
document.all.todayday.innerText= "Today: " +
day + "/" +
(newCal.getMonth()+1) + "/" + newCal.getFullYear()
;
}
if ((daily > 0) && (daily <= intDaysInMonth))
cell.innerText = daily++;
else
cell.innerText = "";
}
}
function getTodayDay()
{
document.all[element_id].value
= today.day + "/" + (today.month+1) +
"/" + today.year;
//document.all.calendar.style.visibility="hidden";
document.all.calendar.style.display="none";
document.all.year.selectedIndex =100;
document.all.month.selectedIndex = today.month;
}
function getDate()
{
// This code executes when the user clicks on a day
// in the calendar.
if ("TD" == event.srcElement.tagName)
// Test whether day is valid.
if ("" != event.srcElement.innerText)
{
var mn = document.all.month.selectedIndex+1;
var Year = document.all.year
[document.all.year.selectedIndex].text;
document.all[element_id].value=event.srcElement.innerText+"/"+mn
+"/" +Year;
//document.all.calendar.style.visibility="hidden";
document.all.calendar.style.display="none";
}
}
function GetBodyOffsetX(el_name, shift)
{
var x;
var y;
x = 0;
y = 0;
var elem = document.all[el_name];
do
{
x += elem.offsetLeft;
y += elem.offsetTop;
if (elem.tagName == "BODY")
break;
elem = elem.offsetParent;
} while (1 > 0);
shift[0] = x;
shift[1] = y;
return x;
}
function SetCalendarOnElement(el_name)
{
if (el_name=="")
el_name = element_id;
var shift = new Array(2);
GetBodyOffsetX(el_name, shift);
document.all.calendar.style.pixelLeft = shift[0]; //
- document.all.calendar.offsetLeft;
document.all.calendar.style.pixelTop = shift[1] + 25 ;
}
function ShowCalendar(elem_name)
{
if (elem_name=="")
elem_name = element_id;
element_id = elem_name; // element_id is global variable
newCalendar();
SetCalendarOnElement(element_id);
//document.all.calendar.style.visibility = "visible";
document.all.calendar.style.display="inline";
}
function HideCalendar()
{
//document.all.calendar.style.visibility="hidden";
document.all.calendar.style.display="none";
}
function toggleCalendar(elem_name)
{
//if (document.all.calendar.style.visibility == "hidden")
if(document.all.calendar.style.display=="none")
ShowCalendar(elem_name);
else
HideCalendar();
}
</script>
<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT:
bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT:
bold; TEXT-ALIGN: center}
.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>
-
copy the following code into the BODY of your html page
<FORM name=myForm>
<INPUT id=MyDate name=MyDate size=15>
<a href="JavaScript:;" onClick="toggleCalendar('MyDate')">Calendar</a>
</form>
<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar
style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4">
<TBODY>
<TR>
<TD colSpan=7 vAlign=center>
<!-- Month combo box -->
<SELECT id=month onchange=newCalendar()>
<SCRIPT language=JavaScript>
// Output months into the document.
// Select current month.
for (var intLoop = 0; intLoop < months.length; intLoop++)
document.write("<OPTION " + (today.month == intLoop
? "Selected" : "") + ">" + months[intLoop]);
</SCRIPT>
</SELECT>
<!-- Year combo box -->
<SELECT id=year onchange=newCalendar()>
<SCRIPT language=JavaScript>
// Output years into the document.
// Select current year.
for (var intLoop = 1900; intLoop < 2028; intLoop++)
document.write("<OPTION " + (today.year == intLoop
? "Selected" : "") + ">" + intLoop);
</SCRIPT>
</SELECT>
</TD>
</TR>
<TR class=days>
<!-- Generate column for each day. -->
<SCRIPT language=JavaScript>
// Output days.
for (var intLoop = 0; intLoop < days.length; intLoop++)
document.write("<TD>" + days[intLoop] + "</TD>");
</SCRIPT>
</TR>
<TBODY class=dates id=dayList onclick="getDate('')" vAlign=center>
<!-- Generate grid for individual days. -->
<SCRIPT language=JavaScript>
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write("<TR>");
for (var intDays = 0; intDays < days.length; intDays++)
document.write("<TD></TD>");
document.write("</TR>");
}
</SCRIPT>
<!-- Generate today day. --></TBODY>
<TBODY>
<TR>
<TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
<TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN
style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
</TR>
</TBODY>
</TABLE>
alert box on left clicking
(e.g. to disable links): copy the following code into the BODY of your
html page.
<input type ="button" value="the name of your
button" onclick="alert('Your alert here.');">
button alert : copy the following code
into the BODY of your html page.
<input type="button" value="Click here to
be alerted"
onClick='alert("there you have been alerted")'>
resolution warning :
<SCRIPT LANGUAGE="JavaScript1.2">
if (screen.height == 600 && screen.width == 800) {
alert("Your current resolution is too small to view the entire page.
Please raise your screen resolution.");
}
</script>
date, hour and URL descriptor : copy
the following code into the BODY of your html page.
<center><script>
var today=new Date()
document.write('<center>'+today.toString()+'<br>This
page is located at '+window.location+'</center>')
</script></center>
limited
page view with countdown on status bar : copy the following code into
the BODY of your html page
<script language="Javascript">
var countdown = "90"
function doCount() {
if (countdown > 0) {
countdown--
}
else {
document.location = "http://www....net"
}
window.status=countdown + " seconds left to view this page."
setTimeout('doCount()',1000)
}
doCount()
</script>
world
time for 22 world capitals at double right click
-
copy the following code into your HEAD tags.
<script language=javaScript>
var worldtime = new Array()
worldtime[0]="Azores,-1"
worldtime[1]="Baghdad,3"
worldtime[2]="Beijing,8"
worldtime[3]="Berlin,1"
worldtime[4]="Buenos Aires,-3"
worldtime[5]="Chicago,-6"
worldtime[6]="Denver,-7"
worldtime[7]="Hong Kong,8"
worldtime[8]="Honolulu,-10"
worldtime[9]="Johannesburg,2"
worldtime[10]="Kairo,2"
worldtime[11]="Lima,-5"
worldtime[12]="London,0"
worldtime[13]="Mexico City,-6"
worldtime[14]="Moscow,3"
worldtime[15]="New York,-5"
worldtime[16]="Paris,1"
worldtime[17]="Perth,8"
worldtime[18]="Rio de Janheiro,-2"
worldtime[19]="San Francisco,-8"
worldtime[20]="Sydney,11"
worldtime[21]="Tokyo,9"
var hours
var shifthours
var minutes
var seconds
var localhours
var pause=2000
var thisplace
var thisline=""
var showmenu=1
function showtime() {
for (i=0; i<=worldtime.length-1;i++) {
thisplace=worldtime[i].split(",")
thistime= new Date()
hours=thistime.getUTCHours()
hours=eval(hours)
shifthours=eval(thisplace[1])
localhours=eval(shifthours+hours)
if (localhours <0) {localhours=24+localhours}
if (localhours >=24) {localhours=localhours-24}
minutes=thistime.getUTCMinutes()
seconds=thistime.getUTCSeconds()
if (thisplace[0]=='Delhi') {
minutes=eval(minutes+30)
if (minutes>=60) {
minutes=eval(minutes-60)
localhours=eval(localhours+1)
}
}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (eval(seconds) < 10) {seconds="0"+seconds}
if (eval(localhours) < 10) {localhours="0"+localhours}
thisline+=localhours+":"+minutes+":"+seconds+" "+thisplace[0]+"<br>"
}
if (document.all) {
timediv.innerHTML=thisline
thisline=""
var timer=setTimeout("showtime()",1000)
}
if (document.layers) {
document.timediv.document.write("<span id='nn' class='timestyle'>")
document.timediv.document.write(thisline)
document.timediv.document.write("</span>")
document.timediv.document.close()
thisline=""
}
}
function dblclick() {
if (document.all && showmenu==1) {
document.all.timediv.style.visibility="visible"
document.all.timediv.style.posLeft=x
document.all.timediv.style.posTop=y
showtime()
}
if (document.layers && showmenu==1) {
document.timediv.visibility="visible"
document.timediv.left=x-40
document.timediv.top=y-80
showtime()
}
if (document.all && showmenu!=1) {
document.all.timediv.style.visibility="hidden"
}
if (document.layers && showmenu!=1) {
document.timediv.visibility="hidden"
}
showmenu=showmenu*-1
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
function handlerMM(e){
x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
}
</script>
<STYLE>
.timestyle {
position:absolute;
left:50px;
top:100px;
font-family:Verdana;
font-size:8pt;
color:880000;
background-color:DDDDFF;
}
.explainstyle {
position:absolute;
left:10px;
top:160px;
font-family:Verdana;
font-size:8pt;
color:000000;
}
</STYLE>
-
copy the following code into the BODY of your html page.
<div id="timediv" class="timestyle"></div>
clock and
hour-related message on status bar
-
copy the following code into your HEAD tags.
<script language="javascript">
function timeing(){
var today = new Date()
var hour= today.getHours()
var min = today.getMinutes()
var sec = today.getSeconds()
var P="pm"
if(hour>12){
P="am"
hour=hour-12
}
if(hour==0)
hour=12
if(min<=9){
min="0"+min
}
if(sec<=9){
sec="0"+sec
}
if(hour==12 && min==06 && sec==30 && P=="pm"){
alert("I'ts time to go!")
}
if(hour==12 && min==00 && sec==00 && P=="am"){
alert("I'ts 12:00:00 midnight! GO to BED!")
}
if(hour==7 && min==00 && sec==00 && P=="am"){
alert("It's time to get some coffee!")
}
var time = hour + ":" + min + ":" + sec + P
window.status=time
setTimeout("timeing()",1000)
}
</script>
-
copy the following code into your BODY tag.
onload="timeing()"
extended
day, month and year on the status bar : copy the following code into
your HEAD tags.
<script language="javascript">
var today = new Date()
var day = today.getDay()
var date = today.getDate()
var mon = today.getMonth()
var year = today.getYear()
var D
var Mon
var Dat
if(day==0){
Dat="Sunday"
}
if(day==1){
Dat="Monday"
}
if(day==2){
Dat="Tuesday"
}
if(day==3){
Dat="Wednesday"
}
if(day==4){
Dat="Thursday"
}
if(day==5){
Dat="Friday"
}
if(day==6){
Dat="Saturday"
}
if(mon==0){
Mon="January"
}
if(mon==1){
Mon="February"
}
if(mon==2){
Mon="March"
}
if(mon==3){
Mon="April"
}
if(mon==4){
Mon="May"
}
if(mon==5){
Mon="June"
}
if(mon==6){
Mon="July"
}
if(mon==7){
Mon="August"
}
if(mon==8){
Mon="September"
}
if(mon==9){
Mon="October"
}
if(mon==10){
Mon="November"
}
if(mon==11){
Mon="December"
}
if(date==1){
D="1st"
}
if(date==2){
D="2nd"
}
if(date==3){
D="3rd"
}
if(date==4){
D="4th"
}
if(date==5){
D="5th"
}
if(date==6){
D="6th"
}
if(date==7){
D="7th"
}
if(date==8){
D="8th"
}
if(date==9){
D="9th"
}
if(date==10){
D="10th"
}
if(date==11){
D="11th"
}
if(date==12){
D="12th"
}
if(date==13){
D="13th"
}
if(date==14){
D="14th"
}
if(date==15){
D="15th"
}
if(date==16){
D="16th"
}
if(date==17){
D="17th"
}
if(date==18){
D="18th"
}
if(date==19){
D="19th"
}
if(date==20){
D="20th"
}
if(date==21){
D="21st"
}
if(date==22){
D="22nd"
}
if(date==23){
D="23rd"
}
if(date==24){
D="24th"
}
if(date==25){
D="25th"
}
if(date==26){
D="26th"
}
if(date==27){
D="27th"
}
if(date==28){
D="28th"
}
if(date==29){
D="29th"
}
if(date==30){
D="30th"
}
if(date==31){
D="31st"
}
var Writedate = " It's " + Mon + ", the " + D + " " + year + "-----"
+ Dat
window.status=Writedate
</script>
clock and date following
the mouse : copy the following code into the BODY of your html page.
<script language="JavaScript">
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='000000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15
height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15
height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font
face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</script>
ISO 8601
standard date and hour with seconds
-
copy the following code into your HEAD tags.
<SCRIPT LANGUAGE="JavaScript">
function isodatetime() {
var today = new Date();
var year = today.getYear();
if (year < 2000) // Y2K Fix, Isaac Powell
year = year + 1900; // http://onyx.idbsu.edu/~ipowell
var month = today.getMonth() + 1;
var day = today.getDate();
var hour = today.getHours();
var hourUTC = today.getUTCHours();
var diff = hour - hourUTC;
var hourdifference = Math.abs(diff);
var minute = today.getMinutes();
var minuteUTC = today.getUTCMinutes();
var minutedifference;
var second = today.getSeconds();
var timezone;
if (minute != minuteUTC && minuteUTC < 30 && diff
< 0) { hourdifference--; }
if (minute != minuteUTC && minuteUTC > 30 && diff >
0) { hourdifference--; }
if (minute != minuteUTC) {
minutedifference = ":30";
}
else {
minutedifference = ":00";
}
if (hourdifference < 10) {
timezone = "0" + hourdifference + minutedifference;
}
else {
timezone = "" + hourdifference + minutedifference;
}
if (diff < 0) {
timezone = "-" + timezone;
}
else {
timezone = "+" + timezone;
}
if (month <= 9) month = "0" + month;
if (day <= 9) day = "0" + day;
if (hour <= 9) hour = "0" + hour;
if (minute <= 9) minute = "0" + minute;
if (second <= 9) second = "0" + second;
time = year + "-" + month + "-" + day + "T"
+ hour + ":" + minute + ":" + second + timezone;
document.isoclock.display.value = time;
window.setTimeout("isodatetime();", 500);
}
</script>
-
copy the following code into your BODY tag.
<BODY OnLoad="isodatetime()">
-
copy the following code into the BODY of your html page.
<form name=isoclock>
<input type=text name=display size=30 style="border:0;">
</form>
bandwidth converter
<form name="bandwidth">
<p><input type="text" name="original" size="20" value=1024>
<select size="1" name="units">
<option value="Bytes">Bytes</option>
<option value="Kb">Kb</option>
<option value="Mb">Mb</option>
<option value="Gb">Gb</option>
</select> <input type="button" value="Calculate" name="B1" onClick="calculate()"></p>
</form>
<p>
<script>
var bytevalue=0
function calculate(){
var invalue=document.bandwidth.original.value
var selectunit = document.bandwidth.units.options[document.bandwidth.units.selectedIndex].value
if (selectunit=="Bytes")
bytevalue=invalue
else if (selectunit=="Kb")
bytevalue=invalue*1024
else if (selectunit=="Mb")
bytevalue=invalue*1024*1024
else if (selectunit=="Gb")
bytevalue=invalue*1024*1024*1024
alert (invalue+" "+selectunit+" is equal to:\n\n- "+bytevalue+" Bytes\n-
"+Math.round(bytevalue/1024)+" Kb\n- "+Math.round(bytevalue/1024/1024)+"
Mb\n- "+Math.round(bytevalue/1024/1024/1024)+" Gb\n")
}
</script>
auto browser closer : copy the
following code into your BODY tag : onLoad="setTimeout(window.close, 30000);"
. Each 1000 = 1 second.
detect a viewers browser
version and direct to proper URL
<script language="JavaScript">
function WHATISIT(){
var browserName = navigator.appName;
var browserVer = parseInt ( navigator.appVersion );
var name = "0";
if ( browserName == "Netscape" && browserVer >= 4 ) name="1";
if ( browserName == "Microsoft Internet Explorer" &&
browserVer >=4 ) name="2";
if ( browserName == "Netscape" && browserVer < 4 )name="3";
if ( browserName == "Microsoft Internet Explorer" &&
browserVer <4 )name="4";
if ( browserName != "Microsoft Internet Explorer" &&
browserName != "Netscape") name="5";
if (name == "5")location.href=("your favorite
page url here");
if (name == "1")
location.href=("if Netscape url
here");
else
if (name == "2")
location.href=("if Internet
Explorer url here");
else
if (name == "3")
location.href=("if
Netscape url here");
else
location.href=("if
Internet Explorer url here");
}
</script>
detect and display browser
type : copy the following code into the BODY of your html page.
<script>
if (document.all)
var version=/MSIE \d+.\d+/
if (!document.all)
document.write("You are viewing this webpage
with "+navigator.appName+" "+navigator.userAgent)
else
document.write("You are viewing this webpage
with "+navigator.appName+" "+navigator.appVersion.match(version))
</script>
get monitor size
<script language="Javascript">
document.write('Your screen width and height
is ' + screen.width + ' and ' + screen.height + ' pixels.')
</script>
calculator
-
copy the following code into your HEAD tags :
<script language="JavaScript">
var m;
m = 0;
var i;
var mm;
function num (i)
{
var u = new String();
u = text3.value;
if (u == "=")
{
text1.value = text2.value = "";
text1.value = text1.value + i ;
text3.value = "";
return;
}
var s;
var l;
s = text1.value;
l = s.length;
if (l<10)
{
text1.value = text1.value + i;
}
}
function point()
{
var i;
var s = new String();
s = text1.value;
i = s.indexOf(".");
var u = new String();
u = text3.value;
if (u == "=")
{
text1.value = text2.value = "";
text1.value = text1.value + "." ;
text3.value = "";
return;
}
if (i > -1)
{
return;
}
else
{
if (s.length<9)
{
s = s + ".";
text1.value = s;
}
}
}
var cho;
function act(cho)
{
var u = new String();
u = text3.value;
if (u == "")
{
text2.value = text1.value;
text1.value = "";
}
else
{
switch (u)
{
case "+" :
text2.value = (text2.value*1) + (text1.value*1);
text1.value = "";
break;
case "-" :
text2.value = (text2.value*1) - (text1.value*1);
text1.value = "";
break;
case "*" :
text2.value = (text2.value*1) * (text1.value*1);
text1.value = "";
break;
case "/" :
text2.value = (text2.value*1)/(text1.value*1);
text1.value = "";
break;
case "=" :
text2.value = text1.value;
text1.value = "";
break;
}
}
switch (cho)
{
case 1 :
text3.value = "+";
break;
case 2 :
text3.value = "-";
break;
case 3 :
text3.value = "*";
break;
case 4 :
text3.value = "/";
break;
}
}
function eq()
{
switch (text3.value)
{
case "+":
text2.value = (text2.value*1) + (text1.value*1);
text1.value = text2.value;
text2.value = "";
break;
case "-":
text2.value = (text2.value*1) - (text1.value*1);
text1.value = text2.value;
text2.value = "";
break;
case "*":
text2.value = (text2.value*1) * (text1.value*1);
text1.value = text2.value;
text2.value = "";
break;
case "/":
text2.value = (text2.value*1) / (text1.value*1);
text1.value = text2.value;
text2.value = "";
break;
}
text3.value = "=";
}
function clss()
{
text1.value = text2.value = text3.value = "";
m =0;
clear1.blur();
}
function initia()
{
text1.blur();
text2.blur();
}
function clearall()
{
text1.value = "";
}
function madd()
{
m = m + ((text1.value)*1);
text1.value = "";
text3.value = "";
}
function msub()
{
m = m - ((text1.value)*1);
text1.value = "";
text3.value = "";
}
function mrem()
{
if (m != 0)
{
text1.value = m;
text3.value = "";
}
}
function free()
{
if (mm != 1)
{
alert ('JavaScript disables this action!!');
}
}
function frees()
{
mm = 1;
}
function freed()
{
mm = 0;
}
</script>
-
copy the following code into the BODY of your html page :
<table bgcolor=green border=0>
<tr bgcolor=green><input type=text name="text2" style="background-color:black;color:lime;width:150"
onFocus="initia()"><input type=hidden name="text3" style="background-color:black;color:lime;width:25"></tr>
<tr bgcolor=green><input type=text name="text1" style="background-color:black;color:lime;width:150"
onFocus="initia()"></tr>
<tr><td><input type=button value="1" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(1)"></td><td><input
type=button value="2" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(2)"></td><td><input
type=button value="3" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(3)"></td><td><input
type=button value="+" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="act(1)"></td><td><input
type=button value="CE" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="clearall()"></td></tr>
<tr><td><input type=button value="4" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(4)"></td><td><input
type=button value="5" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(5)"></td><td><input
type=button value="6" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(6)"></td><td><input
type=button value="-" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="act(2)"></td><td><input
type=button value="M+" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="madd()"></td></tr>
<tr><td><input type=button value="7" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(7)"></td><td><input
type=button value="8" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(8)"></td><td><input
type=button value="9" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(9)"></td><td><input
type=button value="*" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="act(3)"></td><td><input
type=button value="M-" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="msub()"></td></tr>
<tr><td><input type=button value="." style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="point()"></td><td><input
type=button value="0" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="num(0)"></td><td><input
type=button value="=" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="eq()"></td><td><input
type=button value="/" style="background-color:black;width=25;color:lime"
onMouseOver="frees()" onMouseOut="freed()" onClick="act(4)"></td><td><input
type=button value="M" style="background-color:black;color:lime;width=25"
onMouseOver="frees()" onMouseOut="freed()" onClick="mrem()"></td></tr>
<tr bgcolor=green><input type=button name="clear1" value="Clear
All" style="background-color:black;color:lime;width=150;height=20" onMouseOver="frees()"
onMouseOut="freed()" onClick="clss()"></tr>
</table>
uphill-downhill text
<script>
var fs=1
var direction="right"
function rollertext(whichone){
var thetext=whichone
for (i=0;i<thetext.length;i++){
document.write(thetext.charAt(i).fontsize(fs))
if (fs<7&&direction=="right")
fs++
else if (fs==7){
direction="left"
fs--
}
else if (fs==1){
direction="right"
fs++
}
else if (fs>1&&direction=="left")
fs--
}
}
rollertext("Your message")
</script>
uphill text : copy the following code
into the BODY of your html page.
<script>
function uphilltext(text){
var temptext=text.toUpperCase()
var size=1
for (i=0;i<temptext.length;i++){
document.write(temptext.charAt(i).fontsize(size).bold())
if (size<7)
size++
else
size=1
}
}
uphilltext("Your message")
</script>
backwards text : copy the following
code into the BODY of your html page.
<script language="JavaScript">
var message1="Your message 1";
var before = "<font color=black>";
var after = "</font>";
var message2="Your message 2";
for (count=message1.length; count >= 0; count--)
message2+=message1.substring(count,count-1);
document.write (before,message2,after);
</script>
live one letter effect : changes
one by one the letters of your text into a bigger letter and also changes
the color. Continious.
-
copy the following code into your HEAD tags :
<script language="javascript">
function schrijven(i)
{
message = "Visit Java-scripts.net";
// change the speed, higher number = slower
speed = 100;
lengte = message.length;
document.all.detekst.innerHTML = "";
for(j=0;j<i;j++)
{
document.all.detekst.innerHTML += message.charAt(j);
}
document.all.detekst.innerHTML += "<big><big><font color=red>"
+ message.charAt(i) + "</font></big></big>";
for(k=i+1;k<lengte;k++)
{
document.all.detekst.innerHTML += message.charAt(k);
}
i++;
if(i==lengte){i = 0;}
setTimeout("schrijven(" + i + ")",speed);
}
</script>
-
copy the following code into your BODY tag.
onLoad="schrijven(0)"
-
copy the following code into the BODY of your html page.
<div id="detekst" name=detekst style="position:absolute;visibility:visible;font-size:16;font-family:verdana;"></div>
Chinese Zodiac sign
-
copy the following code into your HEAD tags.
<script LANGUAGE="JavaScript">
function getpet () {
var toyear = 1997;
var birthyear = document.frm.inyear.value;
var birthpet="Ox"
x = (toyear - birthyear)
% 12
if ((x == 1) || (x == -11))
{
birthpet="Mouse" }
else {
if (x == 0)
{
birthpet="Ox"
}
else {
if ((x == 11) || (x == -1)) {
birthpet="Tiger"
}
else {
if ((x == 10) || (x == -2)) {
birthpet="Rabbit" }
else {
if ((x == 9) || (x == -3)) {
birthpet="Dragon" }
else {
if ((x == 8) || (x == -4)) {
birthpet="Snake"
}
else {
if ((x == 7) || (x == -5)) {
birthpet="Horse"
}
else {
if ((x == 6) || (x == -6)) {
birthpet="Sheep"
}
else {
if ((x == 5) || (x == -7)) {
birthpet="Monkey" }
else {
if ((x == 4) || (x == -8)) {
birthpet="Chicken" }
else {
if ((x == 3) || (x == -9)) {
birthpet="Dog"
}
else {
if ((x == 2) || (x == -10)) {
birthpet="Pig"
}
}
}
}
}
}
}
}
}
}
}
}
document.frm.birth.value
= birthpet;
}
</script>
-
copy the following code into the BODY of your html page.
<p>Enter your birth year. For example: "1975"
<form NAME="frm">
<input TYPE="text" SIZE="4" NAME="inyear" value="1975"> <input
TYPE="button" VALUE="My pet, please" onClick="getpet()"><br>
<p><input TYPE="text" SIZE="9" NAME="birth">
</form>
convert Arabian
numbers to Roman numerals
-
M = 1000
-
D = 500
-
C = 100
-
L = 50
-
X = 10
-
V = 5
-
I = 1
-
copy the following code into your HEAD tags.
<script language="JavaScript">
function Roman() {
var Num=document.NumF.Num.value;
var MvC=0
var MvC2=0
var MvX=0
var MvX2=0
var MvI=0
var MvI2=0
var Mvalue=""
var MV1=1000
var DV1=500
var MoreMs=0
var MoreV=""
//Start Big Loop!!
while(Num >= MV1) {
Num=Num - MV1
MoreMs++
}
if(MoreMs >= 4) {
while(MoreMs >= 1000) {
MoreMs=MoreMs - 1000
MoreV+="M"
}
if(MoreMs >= 900 && MoreMs < 1000) {
MoreMs=MoreMs - 900
MoreV+="CM"
}
while(MoreMs >= 500 && MoreMs < 1000) {
MoreMs=MoreMs - 500
MoreV+="D"
}
if(MoreMs >= 400 && MoreMs < 500) {
MoreMs=MoreMs - 400
MoreV+="CD"
}
while(MoreMs >= 100 && MoreMs < 500) {
MoreMs=MoreMs - 100
MoreV+="C"
}
if(MoreMs >= 90 && MoreMs < 100) {
MoreMs=MoreMs - 90
MoreV+="XC"
}
if(MoreMs >= 40 && MoreMs < 50) {
MoreMs=MoreMs - 40
MoreV+="XL"
}
while(MoreMs >= 50 && MoreMs < 100) {
MoreMs=MoreMs - 50
MoreV+="L"
}
if(MoreMs >= 9 && MoreMs < 10) {
MoreMs=MoreMs - 9
MoreV+="IX"
}
while(MoreMs >= 10 && MoreMs < 50) {
MoreMs=MoreMs - 10
MoreV+="X"
}
if(MoreMs == 9) {
MoreMs=MoreMs - 9
MoreV+="IX"
}
while(MoreMs >= 5 && MoreMs < 10) {
MoreMs=MoreMs - 5
MoreV+="V"
}
if(MoreMs == 4) {
MoreMs=MoreMs - 4
MoreV+="IV"
}
if(MoreMs == 3) {
MoreV+="I"
MoreMs--
}
if(MoreMs == 2) {
MoreV+="I"
MoreMs--
}
if(MoreMs == 1) {
MoreV+="I"
MoreMs--
}
}
if(MoreMs == 3) {
Mvalue+="M"
MoreMs--
}
if(MoreMs == 2) {
Mvalue+="M"
MoreMs--
}
if(MoreMs == 1) {
Mvalue+="M"
MoreMs--
}
while(Num < MV1 && Num >= DV1) {
if(Num >= 900) {
Mvalue+="CM"
Num=Num - 900
}
else if(Num < 900 && Num >= DV1) {
Num=Num - DV1
Mvalue+="D"
}
}
while(Num < 500 && Num >= 100) {
Num=Num - 100
MvC2++
}
if(MvC2 == 4) {
Mvalue+="CD"
}
if(MvC2 == 3) {
Mvalue+="C"
MvC2--
}
if(MvC2 == 2) {
Mvalue+="C"
MvC2--
}
if(MvC2 == 1) {
Mvalue+="C"
MvC2--
}
while(Num < 100 && Num >= 50) {
if(Num >= 90) {
Mvalue+="XC"
Num=Num - 90
}
else if(Num < 90 && Num >= 50) {
Num=Num - 50
Mvalue+="L"
}
}
while(Num < 50 && Num >= 10) {
Num=Num - 10
MvX2++
}
if(MvX2 == 4) {
Mvalue+="LX"
}
if(MvX2 == 3) {
Mvalue+="X"
MvX2--
}
if(MvX2 == 2) {
Mvalue+="X"
MvX2--
}
if(MvX2 == 1) {
Mvalue+="X"
MvX2--
}
if(Num == 9) {
Mvalue+="IX"
Num=Num - 9
}
while(Num < 10 && Num >= 5) {
if(Num <= 8 && Num >= 5) {
Num=Num - 5
Mvalue+="V"
}
}
while(Num < 5 && Num >= 1) {
Num=Num - 1
MvI2++
if(MvI2 == 4) {
Mvalue+="IV"
}
}
if(MvI2 == 3) {
Mvalue+="I"
MvI2--
}
if(MvI2 == 2) {
Mvalue+="I"
MvI2--
}
if(MvI2 == 1) {
MvI2--
Mvalue+="I"
}
//End Big Loop!
//Begin Smaller Loops!
while(Num >= 500 && Num < 1000 || Num == 500) {
if(Num >= 900) {
Mvalue+="CM"
Num=Num - 900
}
else if(Num < 900 && Num >= DV1) {
Num=Num - DV1
Mvalue+="D"
}}
while(Num >= 100 && Num < 500 || Num == 100) {
Num=Num - 100
MvC++
}
if(MvC == 4) {
Mvalue+="CD"
}
if(MvC == 3) {
Mvalue+="C"
MvC--
}
if(MvC == 2) {
Mvalue+="C"
MvC--
}
if(MvC == 1) {
Mvalue+="C"
MvC--
}
while(Num >= 50 && Num < 100 || Num == 50) {
if(Num >= 90) {
Mvalue+="XC"
Num=Num - 90
}
else if(Num < 90 && Num >= 50) {
Num=Num - 50
Mvalue+="L"
}
}
while(Num >= 10 && Num < 50 || Num == 10) {
Num=Num - 10
MvX++
}
if(MvX ==4) {
Mvalue+="LX"
}
if(MvX == 3) {
Mvalue+="X"
MvX--
}
if(MvX == 2) {
Mvalue+="X"
MvX--
}
if(MvX == 1) {
Mvalue+="X"
MvX--
}
if(Num == 9) {
Mvalue+="IX"
Num=Num - 9
}
while(Num >= 5 && Num < 10 || Num == 5) {
if(Num <= 8 && Num >= 5) {
Num=Num - 5
Mvalue+="V"
}
}
while(Num >= 1 && Num < 5 || Num == 1) {
Num=Num - 1
MvI++
if(MvI == 4) {
Mvalue+="IV"
}
}
if(MvI == 3) {
Mvalue+="I"
MvI--
}
if(MvI == 2) {
Mvalue+="I"
MvI--
}
if(MvI == 1) {
MvI--
Mvalue+="I"
}
//End Smaller Loops!
MoreV1.innerHTML=MoreV
MoreV2.innerHTML=Mvalue
}
//-->
</script>
-
copy the following code into the BODY of your html page
<form name="NumF">
<input type="text" value="" name="Num"> <input type="button"
value="Translate" onClick="Roman()"> <span id="MoreV1" style="text-decoration:
overline"></span> <span id="MoreV2"></spaN>
</form>
rain background
(not sure it works !): copy the following code into the BODY
of your html page
<SCRIPT LANGUAGE="JavaScript">
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();
}
</script>
status bar scroll message :
-
copy the following code into your HEAD tags.
<SCRIPT LANGUAGE="JavaScript">
<var speed = 50
var pause = 2000
var timerID = null
var bannerRunning = false
var ar = new Array()
ar[0] = "Welcome to my website"
var currentMessage = 0
var offset = 0
function stopBanner() {
if (bannerRunning)
clearTimeout (timerID)
bannerRunning = false
}
function startBanner() { stopBanner()
showBanner()
}
function showBanner() {
var text = ar[currentMessage]
if (offset < text.length) {
if (text.charAt(offset) == " ")
offset++
var partialMessage = text.substring(0, offset + 1)
window.status = partialMessage
offset++
timerID = setTimeout("showBanner()", speed)
bannerRunning = true
} else {
offset = 0
currentMessage++
if (currentMessage == ar.length)
currentMessage = 0
timerID = setTimeout("showBanner()", pause)
bannerRunning = true
}
}
</SCRIPT>
-
copy the following code into your BODY tag : onLoad = "startBanner();"
animated site header : copy the
following code into the BODY of your html page
<script>
if (document.layers)
var ns4def=''
</script>
<h2 id="flyin" style="position:relative;left:-400;font-style:italic"
style=&{ns4def};><font face="Arial">Welcome
to Java-Scripts.net!</font></h2>
<script language="JavaScript1.2">
if (document.getElementById||document.all)
var crossheader=document.getElementById? document.getElementById("flyin").style
: document.all.flyin.style
function animatein(){
if (parseInt(crossheader.left)<0)
crossheader.left=parseInt(crossheader.left)+20
else{
crossheader.left=0
crossheader.fontStyle="normal"
clearInterval(start)
}
}
if (document.getElementById||document.all)
start=setInterval("animatein()",50)
</script>
wand-like effect
around mouse cursor : copy (Ctrl+ C) and paste (Ctrl + V) the following
and paste it between the <head> and </head> tags :
<script language="JavaScript">
if (document.all){
with (document){
write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
write('<div style="position:relative; width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:1px; height:1px; background:#fff000;
font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:1px; height:1px; background:#ffa000;
font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:1px; height:1px; background:#ff00ff;
font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:1px; height:1px; background:#00ff00;
font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:1px; height:1px; background:#0000ff;
font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:1px; height:1px; background:#FF0000;
font-size:1px;visibility:visible"></div>')
write('<div style="position:relative; width:2px; height:2px; background:#ffffff;
font-size:2px;visibility:visible"></div>')
write('<div style="position:relative; width:2px; height:2px; background:#fff000;
font-size:2px;visibility:visible"></div>')
write('<div style="position:relative; width:2px; height:2px; background:#ffa000;
font-size:2px;visibility:visible"></div>')
write('<div style="position:relative; width:2px; height:2px; background:#ff00ff;
font-size:2px;visibility:visible"></div>')
write('<div style="position:relative; width:2px; height:2px; background:#00ff00;
font-size:2px;visibility:visible"></div>')
write('<div style="position:relative; width:2px; height:2px; background:#0000ff;
font-size:2px;visibility:visible"></div>')
write('<div style="position:relative; width:3px; height:3px; background:#FF0000;
font-size:3px;visibility:visible"></div>')
write('</div>')
}
}
var Clrs=new Array(6)
Clrs[0]='ff0000';
Clrs[1]='00ff00';
Clrs[2]='000aff';
Clrs[3]='ff00ff';
Clrs[4]='fff000';
Clrs[5]='fffff0';
if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
if (document.all)
{
function MoveHandler(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers)
{
function xMoveHandler(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all)
{
yBase = window.document.body.offsetHeight/4;
xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
yBase = window.innerHeight/4;
xBase = window.innerWidth/4;
}
if (document.all)
{
for ( i = 0 ; i < starsDiv.all.length ; i++ )
{step=3;
starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep
+ i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep
+ i*3)/10)*Math.sin(8.2+currStep/400);
for (ai=0; ai < Clrs.length; ai++)
{
var c=Math.round(Math.random()*[ai]);
}
starsDiv.all[i].style.background=Clrs[c];
}
}
else if (document.layers)
{
for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!
{step = 4;
var templayer="a"+j
document.layers[templayer].top = Ypos + yBase*Math.sin((currStep
+ j*4)/12)*Math.cos(0.7+currStep/200);
document.layers[templayer].left = Xpos + xBase*Math.sin((currStep
+ j*3)/10)*Math.sin(8.2+currStep/400);
for (aj=0; aj < Clrs.length; aj++)
{
var c=Math.round(Math.random()*[aj]);
}
document.layers[templayer].bgColor=Clrs[c];
}
}
currStep+= step;
setTimeout("animateLogo()", 10);
}
animateLogo();
</script>
countdown timer : copy (Ctrl+
C) and paste (Ctrl + V) the following and paste it between the <head>
and </head> tags :
<form name="counter"><input type="text" size="8"
name="d2"></form>
<script>
var milisec=0
var seconds=30
document.counter.d2.value='30'
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
}
display()
</script> </form>
unspammable email link script
: copy (Ctrl+ C) and paste (Ctrl + V) the following and paste it
between the <head> and </head> tags :
<script language="Javascript">
var name = "webmaster"
var domain = "java-scripts.net"
document.write("<a href='mailto:" + name
+ "@" + domain + "'>")
document.write(name + "@" + domain)
document.write("</a>")
</script>
change mouse cursor : copy the
following code into your HEAD tags.
<style>{cursor:n-resize}</style>
To change the cursor from what you see now, simply replace " n-resize
" with any of the following:
-
hand = hand
-
crosshair = crosshair
-
text = highlight text cursor
-
wait = hour glass
-
move = 4 arrows
-
help = ?. You can use the help cursor when defining a term :
-
<head><style>abbr, acronym, .help { border-bottom: 1px dotted
#333; cursor: help; }</style></head>
.... followed in the HTML by:
-
<a><acronym title="your acronym description."
lang="EN" >your acronym</acronym><a
href ..></a>
-
arrow :
-
n-resize "for up"
-
s-resize "for down"
-
e-resize "for right"
-
w-resize "for left"
-
ne-resize "for upper right"
-
nw-resize "for upper left"
E.g. :
<head><style>
p { cursor: wait; }
h4 { cursor: help; }
h5 { cursor: crosshair; }
{ cursor: text ; }
{ cursor: pointer ; }
{ cursor: default ; }
</style></head>
<body>
<p>....</p>
<h4>....</h4>
dynamic title modification
-
copy (Ctrl+ C) and paste (Ctrl + V) the following and paste it between
the <head> and </head> tags :
<script language="Javascript">
function ChangeTitle() {
var newtitle = document.form1.newtitle.value;
var head1 = document.getElementById("head1");
head1.firstChild.nodeValue=newtitle;
}
</script>
<h1 ID="head1">Dynamic Text in JavaScript</h1>
<p>Using the W3C DOM, you can dynamically
change the heading at the top of this page. Enter a new title and click
the Change button.
-
code into the BODY of your html page
<form name="form1">
<input type="text" name="newtitle" size="25">
<input type="button" value="Change!" onClick="ChangeTitle();">
</form>
quick Go menu and
instant description : copy (Ctrl+ C) and paste (Ctrl +
V) the following and paste it between the <head> and </head> tags
:
<form name="combowithtext">
<select name="example" size="1" onChange="showtext()">
<option value="http://www.....com">Message1</option>
<option value="http://www.....com">Message2</option>
<option value="http://www.....com">Message3</option>
<option value="http://www.....com">Message4</option>
</select>
<input type="button" value="Go!" onClick="gothere()"><br>
<textarea rows=5 cols=21 wrap="virtual" name="text"></textarea>
<script language="javascript">
var shortcut=document.combowithtext
var descriptions=new Array()
//extend this list if neccessary to accomodate
more selections
descriptions[0]="Description1"
descriptions[1]="Description2"
descriptions[2]="Description3"
descriptions[3]="Description4"
shortcut.text.value=descriptions[shortcut.example.selectedIndex]
function gothere(){
location=shortcut.example.options[shortcut.example.selectedIndex].value
}
function showtext(){
shortcut.text.value=descriptions[shortcut.example.selectedIndex]
}
</script>
bust out of frames : this script
helps your page automatically break out of someone else's frames should
it be trapped. Copy (Ctrl+ C) and paste (Ctrl + V) the following and paste
it between the <head> and </head> tags.
<script>
if (window!= top)
top.location.href=location.href
</script>
thank you for viewing
<script language="JavaScript" type="text/javascript">
confirm("Thanks for coming to my page.")
</script>
Windows earthquake copy (Ctrl+
C) and paste (Ctrl + V) the following and paste it between the <head>
and </head> tags.
<script language=javascript>
function earthquake()
{
for (var i=0;i<=10;i++)
{
code(i);
}
for (var i=10;i>=0;i--)
{
code(i);
}
}
function code(i)
{
var z1=Math.round(Math.random());
var z2=Math.round(Math.random());
if (z1==0) var x=-i;
else x=i;
if (z2==0) var y=-i;
else y=i;
for (var c=0;c<=80;c++)
{
if(c==0 &&
i>5) c=50;
self.moveBy(x,y);
self.moveBy(-x,-y);
}
}
</script>
-
copy the following code into the BODY of your html page
<center><input type=button value=Start onClick=earthquake()><center>
field clear script
-
copy (Ctrl+ C) and paste (Ctrl + V) the following and paste it between
the <head> and </head> tags.
<script language="Javascript">
function doClear(theText) {
if (theText.value == theText.defaultValue)
{
theText.value = ""
}
}
</script>
-
copy the following code into the BODY of your html page.
<form>
<input type="text" size=15 value="Enter
name" onFocus="doClear(this)">
</form>
right click :
-
right click menu :
-
copy and paste this code into the HEAD of your HTML document :
<style>
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
</style>
<SCRIPT LANGUAGE="JavaScript1.2">
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
</script>
-
copy this code into the BODY of your HTML document -->
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()"
onClick="jumptoie5();">
<div class="menuitems" url="javascript:history.back();">Go
Back</div>
<div class="menuitems" url="http://javascript.internet.com">Go
Home</div>
<hr>
<div class="menuitems" url="http://forum.javascriptsource.com">JS
Forum</div>
<div class="menuitems" url="http://faq.javascriptsource.com">Site
FAQs</div>
<hr>
<div class="menuitems" url="http://javascript.internet.com/link-us.html">Link
to Us</div>
<div class="menuitems" url="http://javascript.internet.com/feedback.html">Contact
Us</div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
-
prevent people from
right clicking and saving images or viewing your source code you can
copy (CTRL + C) and paste (CTRL + V) the following and paste it between
the <head> and </head> tags.
<script language="JavaScript"> <!--
var message="Right clicking not allowed. All
content is ©opyrighted by Molecular Medicine"; // Message for
the alert box
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
</script>
-
prevent right clicking without alert box : copy the following code
into the BODY of your html page :
oncontextmenu="return false" ondragstart="return false"
onselectstart="return false"
-
4-flasher background color effect at page opening before fixed color
: copy and paste into the head :
<script language="JavaScript">
var backColor = new Array();
var dwellTime = 500; // speed in
ms
backColor[0] = '#FF0000';
backColor[1] = '#008000';
backColor[2] = '#000099';
backColor[3] = '#000000';
backColor[4] = '#FFFFFF';
// fixed color of the page
function flashBG(whichColor){
document.bgColor = backColor[whichColor];
}
var t = null;
var d = dwellTime;
t = setTimeout('flashBG(0)',(d-d));
t = setTimeout('flashBG(1)',(d));
t = setTimeout('flashBG(2)',(d*2));
t = setTimeout('flashBG(3)',(d*3));
t = setTimeout('flashBG(4)',(d*4));
t = null;
</script>
-
right-clicking will launch a window which, in Internet Explorer, can
only be closed one way. The popup will contain text that says "Click
on x to close." Most people will misconstrue this to mean the X at
the upper right of the window -- but you must click on the letter 'x' in
the text itself to close the window. Obviously don't work if one has a
popup blocker installed in the browser.
-
copy and paste in the head
<script language="JavaScript">
PopUpURL = "http://yoursite.com/screamer.html";
isIE=document.all;isNN=!document.all&&document.getElementById;
isN4=document.layers;if (isIE||isNN){
document.oncontextmenu=checkV;}else{
document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
document.onmousedown=checkV;}
function checkV(e){if (isN4){if (e.which==2||e.which==3){
doFlyMe();return false;}}else{doFlyMe();return false;}}
var M=100;var speed=20;var increment=16;
var nowY=M;var nowX=M;var theWidth=window.screen.width;
var theHeight=window.screen.height;
var limitX=theWidth-100-M;var limitY=theHeight-100-M;
var s="width=100,height=100";
function doFlyMe(){P=window.open(PopUpURL,"q",s);
P.moveTo(M,M);P.focus();D();}
function D(){if (nowY<=limitY){P.moveTo(nowX,nowY);P.focus();
nowY+=increment;T=setTimeout("D()",speed);}else{
clearTimeout(T);nowY=limitY;P.moveTo(nowX,nowY);P.focus();R();}}
function R(){if (nowX<=limitX){P.moveTo(nowX,nowY);
P.focus();nowX+=increment;T=setTimeout("R()",speed);
}else{clearTimeout(T);nowX=limitX;P.moveTo(nowX,nowY);P.focus();U();}}
function U(){if (nowY>=M){P.moveTo(nowX,nowY);P.focus();nowY-=increment;
T=setTimeout("U()",speed);}else{clearTimeout(T);nowY=M;
P.moveTo(nowX,nowY);P.focus();L();}}
function L(){if (nowX>=M){P.moveTo(nowX,nowY);P.focus();
nowX-=increment;T=setTimeout("L()",speed);}else{
clearTimeout(T);nowX=M;P.moveTo(nowX,nowY);P.focus();}}
</script>
-
open the screamer.html page with your editor and set the path, as noted,
to the screamer.wav sound file. Again, the
full http:// path is recommended.
-
send your page, screamer.html page, and the screamer.wav file to your server.
-
prevent
right clicking bypassed by pressing the space bar
-
copy the following code into your HEAD tags :
<td><script language=JavaScript>
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all))
{
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script></td>
-
copy the following code into the BODY of your html page :
<td><script language=JavaScript>
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all))
{
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script></td>
-
disabling right-clicks is not as effective as you might think
: visitors can simply click and drag your image up to the browsers URL
Address bar to display it unprotected. Every browser I know off has an
on/off switch for javascript. A better techniques works by displaying a
transparent GIF overlay on top of your real image. When a user right-clicks
to save it they will save the blank GIF file instead of your real image.
Below is the HTML code used to display these images together.
<TABLE border=0 cellpadding=0 cellspacing=0><TR>
<TD background="YourImage.jpg" width="470"
height="270">
<IMG src="blank.gif" width="470"
height="270" hspace=0 vspace=0 border=0></td>
</TR></TABLE>
The table only contains 1 cell. Your real image is displayed as the
table background and the blank overlay is displayed as the cell content.
Since the GIF overlay is considered to be on top, a right click on it will
cause you to save the blank overlay instead of the real image. The blank
overlay (blank.gif) is a 1x1 pixel image that is only 72 bytes in size
so it does not add much overhead. You reuse it for any and all images you
want to protect so you only have to set this up once. Including the width
and height tags when you display the overlay is very important since stretches
the overlay to cover your entire image.
Anyway verything thats viewed on the web will be downloaded to the
Temporary Internet Files. Any jpg no matter what java script is used will
be downloaded there. Its then just a matter of going to temp internet folder
and extracting the photograph from there. Flash, Fireworks don't really
work either. By pressing 'Print Screen' I could then easily crop and re-use
the image if necessary.
e-mail address validation
-
copy the following code into your HEAD tags.
<script language="JavaScript1.2">
var testresults
function checkemail(){
var str=document.validation.emailcheck.value
var filter=/^.+@.+\..{2,3}$/
if (filter.test(str))
testresults=true
else {
alert("Please input a valid
email address!")
testresults=false
}
return (testresults)
}
</script>
<script>
function checkbae(){
if (document.layers||document.all)
return checkemail()
else
return true
}
</script>
-
copy the following code into the BODY of your html page.
<form name="validation" onSubmit="return checkbae()">
Please input a valid email address:<br>
<input type="text" size=18 name="emailcheck">
<input type="submit" value="Submit">
</form>
checks
name field to see if empty, checks e-mail address, which must have "@"
symbol and no spaces, one or more good characters before and after "@",
- .xx country code or .com, .net, .edu, .mil, .gov, .org at end. First
(em) and confirm (emx) email addresses must be equal and name field must
have more than one character to pass the script tests. Copy and paste
the following form and script in the body of your page:
<font size="2" face="Arial" color="#FF0000">
<form name="TheForm">
<input type="text" name="nm" size="33"> Your Name
<br><br>
<input type="text" name="em" size="33"> E-mail address
<br>
<input type="text" name="emx" size="33"> Re-enter to confirm
<br><br>
<input type="button" value="Submit" name="SB" onClick="sendOff();">
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Please enter a valid e-mail
address.')
field.focus()
field.select()
good = false
}
}
function sendOff(){
nmcheck = document.TheForm.nm.value
if (nmcheck.length <1) {
alert('Please enter your name.')
return
}
good = false
checkEmailAddress(document.TheForm.em)
if ((document.TheForm.em.value ==
document.TheForm.emx.value)&&(good)){
// This is where you put your action
// if name and email addresses are good.
// We show an alert box, here; but you
can
// use a window.location=
'http://address'
// to call a subsequent html page,
// or a Perl script, etc.
alert("Name and
email address fields verified good.")
}
if ((document.TheForm.em.value !=
document.TheForm.emx.value)&&(good)){
alert('Both
e-mail address entries must match.')
}
}
</script>
</form>
</font>
form validator :
-
copy the following code into your HEAD tags.
<script language="JavaScript">
function formCheck(formobj){
var fieldRequired = Array("FirstName",
"LastName", "Sex",
"Age", "Address");
var fieldDescription = Array("First Name",
"Last Name", "Sex",
"Age", "Address");
var alertMsg = "Please complete the following
fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text
== ""){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
</script>
-
copy the following code into the BODY of your html page.
<script language="JavaScript">
function formCheck(formobj){
var fieldRequired = Array("FirstName",
"LastName", "Sex",
"Age", "Address");
var fieldDescription = Array("FirstName",
"Last Name", "Sex",
"Age", "Address");
var alertMsg = "Please complete the following
fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text
== ""){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] +
"\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
</script>
select text in a box
-
copy the following code into your HEAD tags.
<script language="Javascript">
function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
</script>
-
copy the following code into the BODY of your html page.
<form name="test">
<a href="javascript:selectAll('test.select1')">Select All</a><br>
<textarea name="select1" rows=5 cols=20>This is some text</textarea>
<p>
<a href="javascript:selectAll('test.select2')">Select All</a><br>
<textarea name="select2" rows=5 cols=20>This is some more text</textarea>
</form>
prevent text selection on your
webpage and copying it : copy (CTRL + C) and paste (CTRL + V)
the following code between your <head> and </head> tags.
<SCRIPT language=JavaScript1.2>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</SCRIPT>
there are also source code tricks you can play on people who try
to view your code.
-
source code trick 1 : at the beginning of your code hold down your return
(or enter) key down for a minute. This will mean when people try to open
your source code all they will see immediatly is a blank page. Most people
don't notice the scrollbar at the side.
-
source code trick 2 : do the same thing as source Code trick 1 but add
the following line of html to the top of your code.
<!-- IP Logged -->
<!-- This page has been specifically protected from html code thieves.
Your IP has been emailed to the admin of this page. -->
This generally scares people out of stealing your code and you can end
up with some very funny emails in your inbox as a bonus.
Please note it doesn't actually log their IP it's just a joke.
prevent the Windows
XP image tool bar : copy (CTRL + C) and paste (CTRL + V) it between
your 2 <head> and </head> tags :
<meta http-equiv="imagetoolbar" content="no">
snake test following
the mouse cursor :
-
copy and paste this between the <head>Here</head> tags of your html
document
<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
font-weight:bold;
color:red;
}
</style>
<script>
var x,y
var step=11
var flag=1
// Your snappy message. Important: the space at the end of the sentence!!!
var message="Your message goes here "
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}
</script>
-
copy and paste this inside the <body Here> Tag of your html document
="makesnake()" style="width:80%;overflow-x:hidden;overflow-y:scroll"
-
copy and paste this between the <body>Here</body> Tags of your html
document
<script>
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>
rotating message
snake following the cursor
-
copy and paste the first part right above the </head> tag. (in the <head>
section of the html document)
<script>
var textfont="Verdana"
var textsize=12
var textcolor="FF0000"
var letterspace=1
var msg=new Array()
msg[0]="FIRST MESSAGE STRING"
msg[1]="SECOND MESSAGE STRING"
msg[2]="THIRD MESSAGE STRING"
msg[3]="FOURTH MESSAGE STRING"
msg[4]="FIFTH MESSAGE STRING""
var maxloop=50
var x,y
var step=20
var flag=0
var timer
var msglength=msg[0].length-1
var i_mes=0
var loopcounter=0
var xpos=new Array()
var ypos=new Array()
for (i=0; i<=msg.length-1;i++) {
msg[i]=msg[i]+" "
}
for (i=1; i<=msg.length-1;i++) {
if(msg[i].length-1 >= msg[i-1].length-1) {msglength=msg[i].length-1}
}
for (i=0; i<=msglength-1;i++) {
xpos[i]=0
ypos[i]=0
}
if (document.layers) {
if (textsize>20) {textsize=6}
else if (textsize>20) {textsize=5}
else if (textsize>14) {textsize=4}
else if (textsize>10) {textsize=3}
else if (textsize>8) {textsize=2}
else if (textsize<=7) {textsize=1}
}
function handlerMM(e){
x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
flag=1
}
function makesnake() {
if (flag==1 && loopcounter<=maxloop) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
if (document.all) {
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
if (document.layers) {
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
loopcounter++
timer=setTimeout("makesnake()",20)
}
else {
clearTimeout(timer)
clearmessage()
}
}
function clearmessage() {
loopcounter=0
if (document.all) {
for (i=0;i<=msglength;i++) {
var thisspan = eval("document.all.span"+i)
thisspan.innerHTML=" "
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=-5000
}
}
if (document.layers) {
for (i=0;i<=msglength;i++) {
var thisspan = eval("document.span"+i+".document")
thisspan.left=-5000
thisspan.write("<p> </p>")
thisspan.clear()
thisspan = eval("document.span"+i)
}
}
changemessage()
}function changemessage() {
var messa=msg[i_mes]
message=messa.split("")
if (document.all) {
for (i=0;i<=message.length-1;i++) {
var thisspan = eval("document.all.span"+i)
thisspan.innerHTML="<p style='font-family:"+textfont+";font-size:"+textsize+";color:"+textcolor+"'>"+message[i]+"</p>"
}
}
if (document.layers) {
for (i=0; i<message.length-1; i++) {
var thisspan=eval("document.span"+i+".document")
thisspan.write("<p><font
size="+textsize+" color="+textcolor+" face="+textfont+">"+message[i]+"</font></p>")
thisspan.clear()
}
}
i_mes++
if (i_mes>=msg.length) {i_mes=0}
i_path=0
timer=setTimeout("makesnake()",50)
}
</script>
-
copy and paste the second part right below the first part (in the <head>
section of the html document)
<STYLE>
.spanstyle {
position:absolute;
left:-5000px;
}
.explainstyle {
position: absolute;
top:140px;
left:80px;
width:400px;
color:FFFFFF;
font-size:8pt;
font-family:Verdana;
}
A {
color:FF0000;
}
A:Hover {
color:FFFF00;
}
</STYLE>
-
copy and paste the third part right below the <body> tag.
<script>
for (i=0;i<=msglength;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>
-
copy and paste the fourth part it inside the <body> tag
onLoad="clearmessage()"
snake images following
the mouse cursor : copy this first part and paste it right below the
<body> tag.
<div style="direction:ltr;">
<div id="dot0" style="position: absolute; visibility: hidden; height:
38; width: 38;">
<img src="trail1.gif" height=38
width=38>
</div>
<div id="dot1" style="position: absolute; height: 38; width: 38;">
<img src="TRAIL1.GIF" height=38
width=38>
</div>
<div id="dot2" style="position: absolute; height: 30; width: 28;">
<img src="TRAIL2.GIF" height=30
width=28>
</div>
<div id="dot3" style="position: absolute; height: 28; width: 27;">
<img src="TRAIL3.GIF" height=28
width=27>
</div>
<div id="dot4" style="position: absolute; height: 40; width: 18;">
<img src="TRAIL4.GIF" height=40
width=18>
</div>
<div id="dot5" style="position: absolute; height: 16; width: 14;">
<img src="TRAIL5.GIF" height=16
width=14>
</div>
<div id="dot6" style="position: absolute; height: 13; width: 13;">
<img src="TRAIL6.GIF" height=13
width=13>
</div>
<script LANGUAGE="JavaScript">
var nDots = 7;
var Xpos = 0;
var Ypos = 0;
// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to
// make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when
// bouncing off a wall
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
if (!isNetscape) {
// I only know how to read
the locations of the
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}
// set their positions
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) {
// start right away since
they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for
a few seconds
// since they're hiding
on the real bullets
setTimeout("startanimate()",
1000);
}
}
function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot"
+ i);
} else {
this.obj = eval("dot" +
i + ".style");
}
}
function startanimate() {
setInterval("animate()", 20);
}
// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i
< (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop
+
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
// just save mouse position for animate() to use
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK *
(len - SEGLEN);
spring.X += (dx / len) *
springF;
spring.Y += (dy / len) *
springF;
}
}
function animate() {
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0,
0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1))
{
springForce(i+1, i, spring);
}
// air resisitance/friction
var resist = new vec(-dots[i].dx
* RESISTANCE,
-dots[i].dy * RESISTANCE);
// compute new accel, including
gravity
var accel = new vec((spring.X
+ resist.X)/MASS + XGRAVITY,
(spring.Y + resist.Y)/ MASS + YGRAVITY);
// compute new velocity
dots[i].dx += (DELTAT *
accel.X);
dots[i].dy += (DELTAT *
accel.Y);
// stop dead so it doesn't
jitter when nearly still
if (Math.abs(dots[i].dx)
< STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + window.pageYOffset;
width = window.innerWidth + window.pageXOffset;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
// bounce off 3 walls (leave
ceiling open)
if (dots[i].Y >= height
- DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width -
DOTSIZE) {
if (dots[i].dx
> 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X
= 0;
}
// move img to new position
dots[i].obj.left = dots[i].X;
dots[i].obj.top =
dots[i].Y;
}
}
</script>
image following the mouse
cursor : put the script between <body>here</body>; put your image
file in the same directory or folder where your html document is. Please
note the image may partially impair clicking or text selection !
-
<body onload="if(brOK) setHandlers()" onunload="if(brOK) {if(tid) clearTimeout(tid);}">
<script>
var brOK=false;
var mie=false;
var ex=0;
var ey=0;
var ae;
var le;
var re;
var x0;
var y0;
var tid;
var realx;
var realy;
var loaded=false;
if(parseInt(navigator.appVersion.charAt(0))>=4)
{brOK=true;}
if(navigator.appName.indexOf("Microsoft")!=-1)
{mie=true; }
function myhandler(e)
{ex=e.pageX;
ey=e.pageY;
moveeye()
return routeEvent(e);
}
function moveeye()
{dy=ey-y0-20;
dx1=ex-x0-20;
dx2=ex-x0-60;
r=Math.sqrt(dx1*dx1+dy*dy);
if(r<20) r=20
dx1=dx1*10/r+x0+10;
dy1=dy*10/r+y0+10;
r=Math.sqrt(dx2*dx2+dy*dy);
if(r<20) r=20
dx2=dx2*10/r+x0+50;
ae.left=x0;
ae.top=y0;
le.left=dx1;
le.top=dy1;
re.left=dx2;
re.top=dy1;
}
function setHandlers()
{if(!mie) {y0=document.eyeballs.top;
x0=document.eyeballs.left;
ae=document.eyeballs;
le=document.lefteye;
re=document.righteye;
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=myhandler;
}
else {y0=document.all.eyeballs.style.pixelTop;
x0=document.all.eyeballs.style.pixelLeft;
ae=document.all.eyeballs.style;
le=document.all.lefteye.style;
re=document.all.righteye.style;
}
realx=x0+0.1;
realy=y0+0.1;
moveall();
loaded=true;
}
function moveall()
{rx=realx+40
ry=realy+40;
rx+=(ex-rx)*0.1;
ry+=(ey-ry)*0.1;
realx=rx-40;
realy=ry-40;
x0=Math.round(realx);
y0=Math.round(realy);
moveeye();
tid=setTimeout('moveall()',100);
}
function placeeyes(x,y)
{if(brOK)
{ex=x+40;
ey=y+40;
s ='<DIV ID="dummy" STYLE="position:absolute; top:'+y+'; left:'+x+';
width:10; height:10;"> </DIV>';
s+='<DIV ID="eyeballs" STYLE="position:absolute; top:'+y+'; left:'+x+';
width:80; height:40;" > </DIV>';
s+='<DIV ID="lefteye" STYLE="position:absolute; top:'+(y+10)+';
left:'+(x+10)+'; width:20; height:20;" ><IMG SRC="YOUR
IMAGE GOES HERE" border=0></DIV>';
s+='<DIV ID="righteye" STYLE="position:absolute; top:'+(y+10)+';
left:'+(x+50)+'; width:20; height:20;" > </DIV>';
document.writeln(s);
}
}
</script> <script for="document" event="onmousemove()">
if((mie==true)&&(brOK)&&loaded)
{ex=document.body.scrollLeft+event.x;
ey=document.body.scrollTop+event.y;
moveeye();
}
</script>
<script>
if (document.all||document.layers)
placeeyes(200,100);
</script>
floating image :
-
copy and paste this between the <head>Here</head> tags of your html
document :
<SCRIPT >
var brOK=false;
var mie=false;
var rank;
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
if(parseInt(navigator.appVersion.charAt(0))>=4)
{brOK=true;}
if(navigator.appName.indexOf("Microsoft")!=-1)
{mie=true; }
function Chip(chipname,width,height)
{this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname)
{
if(brOK)
{eval("chip="+chipname);
if(!mie)
{pageX=window.pageXOffset;
pageW=window.innerWidth;
pageY=window.pageYOffset;
pageH=window.innerHeight;
}
else
{pageX=window.document.body.scrollLeft;
pageW=window.document.body.offsetWidth;
pageY=window.document.body.scrollTop;
pageH=window.document.body.offsetHeight;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX)
{chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w)
{chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
if(!mie)
{eval('document.'+chip.named+'.top ='+chip.yy);
eval('document.'+chip.named+'.left='+chip.xx);
}
else
{eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);
}
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}
function stopme(chipname)
{if(brOK)
{eval("chip="+chipname);
if(chip)
{if(chip.timer1!=null)
{clearTimeout(chip.timer1);}
}
if(tid!=null) clearTimeout(tid);
}
}
function pagestart()
{rank=new Chip("rank",60,80);
if(brOK) { movechip("rank");
}
}
</script>
-
copy and paste this inside the <body Here> Tag of your html document
onUnload='if(brOK) {stopme("rank");}'
-
copy and paste this between the <body>Here</body> Tags of your html
document
<DIV ID="rank" STYLE="position:absolute; width:60; height:80;"><IMG
SRC="The image file you want to be floating goes
here" BORDER=0>
</DIV>
<script>pagestart();</script>
fading out page when the veiwer clicks
onto another page :copy (CTRL + C) and paste (CTRL + V) it into the top
of your page between the <head> and the </head> tags.
<meta http-equiv="Page-Exit" content="blendTrans(Duration=5)">
The bigger the number the longer the transition will take, the smaller
the number the shorter the transition will take.
defining styles for links :
-
A:link : defines the style for normal unvisited
links
-
A:visited : defines the style for visited
links
-
A:active : defines the style for active links.
A link becomes active once you click on it
-
A:hover : defines the style for hovered links.
A link is hovered when the mouse moves over it. Not supported by Netscape
browsers prior to version 6.
-
targeting a link to open a link into
a new page
<a href="http://www.url.com" target="new">
link </a>
OR
<a href="http://www.url.com" target="_blank">
link </a>
-
put your web
page upside down and backwards
-
copy and paste this script between the <head>and</head> Tags.
<script language=javaScript>
<!-- Beginning of JavaScript -
function flipVertical() {
if(document.all) {
document.all.mainbody.style.filter="flipV()"
var timer=setTimeout("flipHori()",3000)
}
}
function flipHori() {
document.all.mainbody.style.filter="flipH()"
var timer=setTimeout("flipRestore()",3000)
}
function flipRestore() {
history.go(0)
}
// - End of JavaScript - -->
</script>
-
copy and paste this 2nd part between the <body>and </body> tags :
<div id="mainbody" style="position:absolute; visibility:visible">
<table cellpadding=7>
<tr>
<td colspan=3 align=center height=100><font size=2 face="Verdana"><b><a
href="#" onMouseOver="flipVertical()"> Pass your mouse over this link </A></B></font></td>
</tr>
</table>
</div>
Notice that what ever you put between the <table>and </table> tags
is what will flip over.
-
upside down all
links when mouse hover :
<style type="text/css">
<!--
a:hover {
filter: flipv();
height: 0;
}
-->
</style>
-
link
color, background, and underline before and after hovering :
<style type="text/css">
.menu {color: #000000; text-decoration:
none;
background-color:#FFFF00}
.menu:hover {color: #000000; text-decoration:
underline;
background-color:#FFFF00}
</style>
<a href="#" class="menu">.........</a>
-
removing underlines from all links on a page : <style><!--a
{text-decoration: none}--></style>
-
changing page colors :
-
background color : bgcolor="#color"
-
text color : text= "#color"
-
active link color : alink="#color"
-
visited link color : vlink="#color"
-
hover text on images : <img
src="...." alt="...">
dragable image :
<style> .drag{position:relative;cursor:hand}</style>
<script language="JavaScript1.2">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
The piece of code above goes between the <head> and </head>
The images that you then want to be able to drag around add the following
piece of coding.
<img src="http://www.mydomain.com/image.jpg" class="drag">
Dynamic Drive
drag-n-drop images
-
copy (ctrl + c) and paste (ctrl + v) the code in the textbox between your
<head> and </head> tags.
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
-
copy (ctrl + c) and paste (ctrl + v) the code in the textbox between your
<BODY> and </BODY> tags.
<div id="s" style="position:absolute;left:50;top:300;">
<img src=http://www....copm/your-image.gif
name="s">
</div>
resizeable
image(s) via click, hold, and drag; and back to default size via left clicking
:
-
copy ad paste between <head> and </head> tags :
<script>
defaultXsize = 100;
defaultYsize = 100;
minimumXsize = 50;
minimumYsize = 50;
maximumXsize = 250;
maximumYsize = 250;
iBeReady = false;
function dragResizeImage(dragEvent,which){
if (iBeReady){
posX = eval("document."+which+".offsetLeft");
posY = eval("document."+which+".offsetTop");
newXsize = dragEvent.x;
newYsize = dragEvent.y;
newXsize = newXsize - posX;
newYsize = newYsize - posY;
if (newXsize >= maximumXsize) newXsize = maximumXsize;
if (newYsize >= maximumYsize) newYsize = maximumYsize;
if (newXsize <= minimumXsize) newXsize = minimumXsize;
if (newYsize <= minimumYsize) newYsize = minimumYsize;
eval("document."+which+".width=newXsize");
eval("document."+which+".height=newYsize");
}
}
function clickResetImageSize(which){
if (iBeReady){
eval("document."+which+".width=defaultXsize");
eval("document."+which+".height=defaultYsize");
}
}
</script>
-
in the body, give each image a unique name and attach the functions as
shown:
<img src="someimage.jpg"
name="imageOne"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">
<img src="anotherimage.jpg"
name="imageTwo"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">
Any number of images may be used; however, all should usually be the
same default size.
-
add the iBeReady variable to an onload event
in the body tag:
<body onload="iBeReady=true;">
slideshows
-
slideshow without captions
-
copy and paste the following script in the head of your page:
<script>
var slideShowSpeed = 5000
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
-
copy and paste this onload event call in your body tag: <body onload="runSlideShow()">
-
copy and paste this in the body of your page where you want the slide show
to appear.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>
-
push-button slideshow with captions & cross-fade for unlimited images
and captions :
-
copy and paste into the head
<title>PushButton SlideShow</title>
<style>
.Caption {
font-family: Arial;
font-weight: normal;
font-size: 12pt;
color: #FF3300; }
A.Controls:link { color:#666666;
text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
A.Controls:visited { color:#666666; text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
A.Controls:active { color:#666666; text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
A.Controls:hover { color:#00FF00; text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
</style>
<script>
var SlideShowSpeed = 3000;
var CrossFadeDuration = 2;
var Picture = new Array();
var Caption = new Array();
var showHot = false;
Picture[1] = 'Nebula01.jpg';
Picture[2] = 'Nebula02.jpg';
Picture[3] = 'Nebula03.jpg';
Picture[4] = 'Nebula04.jpg';
Picture[5] = 'Nebula05.jpg';
Picture[6] = 'Nebula06.jpg';
Picture[7] = 'Nebula07.jpg';
Picture[8] = 'Nebula08.jpg';
Picture[9] = 'Nebula09.jpg';
Picture[10] = 'Nebula10.jpg';
Caption[1] = "This is the first caption.";
Caption[2] = "This is the second caption.";
Caption[3] = "This is the third caption.";
Caption[4] = "This is the fourth caption.";
Caption[5] = "This is the fifth caption.";
Caption[6] = "This is the sixth caption.";
Caption[7] = "This is the seventh caption.";
Caption[8] = "This is the eighth caption.";
Caption[9] = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";
var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML=
Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}
</script>
-
copy and paste into the body tag :
<body onload='showHot=true;self.focus();'
bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">
-
copy and paste into the body :
<div align="center">
<center>
<table border=0 cellpadding=10 cellspacing=0>
<tr>
<td width=350 height=280 colspan="3">
<img src=Nebula00.gif
name=PictureBox width=350 height=280>
</td>
</tr>
<tr>
<td id=CaptionBox class=Caption align=center
colspan="3">
This is the default caption.
</td>
</tr>
<tr>
<td align="center">
<a class=Controls href="#" onClick="javascript:control('B');"><
<</a>
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:control('H');">|
| |</a>
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:control('F');"><b>>
></b></a>
</td>
</tr>
</table>
</center>
</div>
-
slideshow with captions & cross-fade adjustable timing and unlimited
images and captions
-
copy and paste in the head :
<style>
.Caption {
font-family: Arial;
font-weight: bold;
color: #123456;
}
</style>
<script>
var SlideShowSpeed = 3000;
var CrossFadeDuration = 3;
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
Picture[1] = 'Image001.jpg';
Picture[2] = 'Image002.jpg';
Picture[3] = 'Image003.jpg';
Picture[4] = 'Image004.jpg';
Picture[5] = 'Image005.jpg';
Picture[6] = 'Image006.jpg';
Picture[7] = 'Image007.jpg';
Picture[8] = 'Image008.jpg';
Picture[9] = 'Image009.jpg';
Picture[10] = 'Image010.jpg';
Caption[1] = "This is the first caption.";
Caption[2] = "This is the second caption.";
Caption[3] = "This is the third caption.";
Caption[4] = "This is the fourth caption.";
Caption[5] = "This is the fifth caption.";
Caption[6] = "This is the sixth caption.";
Caption[7] = "This is the seventh caption.";
Caption[8] = "This is the eighth caption.";
Caption[9] = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML=
Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
</script>
-
copy and paste into the body :
<body onload=runSlideShow() bgcolor=#000000>
-
copy and paste in the body :
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=350 height=280>
<img src=Image001.jpg
name=PictureBox width=350 height=280>
</td>
</tr>
<tr>
<td id=CaptionBox class=Caption align=center
bgcolor=#fedcba>
This is the default caption.
</td>
</tr>
</table>
</body>
</html>
-
draggable slideshow with layer filters :
-
copy and paste in the head section
<script language="JavaScript1.2">
var slideShowSpeed = 3000
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = 'SS1.jpg'
Pic[1] = 'SS2.jpg'
Pic[2] = 'SS3.jpg'
Pic[3] = 'SS4.jpg'
Pic[4] = 'SS5.jpg'
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe(){
if (isIE||isNN) whichDog.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}
function showMe(){
if (isIE||isNN) whichDog.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
if (!isN4) document.images.SlideShow.src = preLoad[j].src;
if (isN4) document.layers['theLayer'].document.images['SlideShow'].src
= preLoad[j].src;
if (document.all){
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p-1)) j=0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
-
copy and paste into the body tag : <body onload="runSlideShow()">
-
copy and paste in the body
<div> tag.
<div id="theLayer" style="position:absolute;left:100;top:100;visibility:visible">
<table border="0" bgcolor="#CCCCFF"
cellspacing="0" cellpadding="2">
<tr>
<td>
<table border="0" bgcolor="#8080FF"
cellspacing="0" cellpadding="5">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="titleBar" style="cursor:move">
<ilayer onSelectStart="return false">
<layer onMouseover="isHot=true;if (isN4) ddN4(theLayer)"
onMouseout="isHot=false">
<font face="Arial" color="#FFFFFF">Draggable Slide Show</font>
</layer>
</ilayer>
</td>
<td style="cursor:hand" align="right">
<a style="text-decoration:none" href="#" onClick="hideMe();return
false"><font color=#ffffff size=2 face=arial>X </font></a>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:0px" colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU">
<img src="SS1.jpg" name='SlideShow'
width=200 height=300></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
-
the slideshow can be shown or hidden via simple function calls.
-
to show the layer: <a href="javascript:showMe();">show</a>
-
to hide the layer: <a href="javascript:hideMe();">hide</a>
-
floating transparent slideshow (with fade transitions) : copy and
paste in the body :
<div id="FloatSlideShow" style="position:absolute;z-index:1000000">
<a href="http://www.codebrain.com" target=_new>
<img border=0 src="image_1.gif" name='SlideShow' width=200 height=200></a>
</div>
<script>
var slideShowSpeed = 3000
var crossFadeDuration = 3
var whereX = 40;
var whereY = -233;
var Pic = new Array()
Pic[0] = 'image_1.gif'
Pic[1] = 'image_2.gif'
Pic[2] = 'image_3.gif'
Pic[3] = 'image_4.gif'
Pic[4] = 'image_5.gif'
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var t;var j=0;var p=Pic.length;var preLoad=new Array();
for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();}
if (document.all || document.getElementById){document.images.SlideShow.src
= preLoad[j].src;}else{
document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;}
if (document.all){document.images.SlideShow.filters.blendTrans.Play();}
j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);}
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatSS(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var
pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fss()',33);};return L;}
floatSS(whereX,whereY,'FloatSlideShow').Fss();
</script>
instant image zoom in and
out :
-
copy and paste the following script in the <head>...</head> :
<script>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;}
</script>
-
attach the function to your image with an onclick event :
<img border="0" src="yourimage.gif" width="100" height="100" onclick="zoomToggle('100px','100px','200px','200px',this);">
hover fade in & out : this
code will make your image appear faded until you hover over the image with
your mouse. To use this code all you have to do is copy (ctrl + c) and
paste (ctrl + v) the code in the textbox between your <head> and </head>
tags.
<script>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly
solid)
* rate - time in milliseconds between trasparency
changes (best under 100)
* delta - amount of change each time (ie 5, for 5% change
in transparency)
*/
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I
can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>
Then where you want your image to appear faded use the following piece
of code.
<img src="http://www.mydomain.com/image1.gif" style="filter:alpha(opacity=30)"
onmouseover="nereidFade(this,100,70,20)"
onmouseout="nereidFade(this,20,50,10)">
All you really have to do is to copy (ctrl + c) and paste (ctrl + v)
this code into your page and change the url to the url of your image.
But I have an urge to explain futher.
The code highlighted in purple refers to your
mouse.
-
onmouseover means when the mouse is over this image.
-
onmouseout Means once this mouse has left the image.
You do not need to edit either of these.
NB. [opacity= transparency of the picture]
The code highlighted in blue refers to the opacity
of the image.
The very first number is the opacity of the image
before the mouse is hovering over the image.
The second number in blue is the opacity of the
image while the mouse is hovering over the image.
The third number in blue is the opacity of the
image after the mouse has hovered over the image.
The code highlighted in red refers to the speed
at which the transition occurs.
The Larger the number the faster the transition
will go.
The Smaller the number the slower the transition
will go.
To do the complete opposite and make the image fade when the mouse
hovers over it all you have to do is to is use the following piece of code
for your image instead.
<img src="http://www.mydomain.com/image1.gif" style="filter:alpha(opacity=100)"
onmouseover="nereidFade(this,30,50,10)"
onmouseout="nereidFade(this,100,70,20)">
hover greyscale to colour :
<img src="http://www.mydomain.com/image1.gif"
style= "filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=
1)"
onmouseover= "this.style.filter= 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=
0)'"
onmouseout= "this.style.filter= 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=
1)'">
hover from colour to greyscale
<img src="http://www.mydomain.com/image1.gif"
style= "filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=
0)"
onmouseover= "this.style.filter= 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=
1)'"
onmouseout= "this.style.filter= 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=
0)'">
put the scroll bar
on the left side : added between the <head> and </head> tags
<style type="text/css">
body {direction:rtl;
}
</style>
<div style="direction:ltr;">
remove scrollbars
-
remove horizontal scrollbar
<body style="overflow-x:hidden;overflow-y:scroll" style="overflow:-moz-scrollbars-vertical;">
-
remove vertical scrollbar
<body style="overflow-y:hidden;overflow-x:scroll" style="overflow:-moz-scrollbars-horizontal;">
-
remove both scrollbars
change
the colors on your scrollbar
-
copy the following code into the heads of your html page :
<STYLE type="text/css">
BODY {scrollbar-face-color: #000000; scrollbar-shadow-color:
#800000; scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #800000; scrollbar-darkshadow-color:
#000000; scrollbar-track-color: #FF0000;
scrollbar-arrow-color: #000000}
</STYLE>
-
change the color of the scrollbars in a page dynamically :
-
copy and paste this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
function changeScrollbarColor(C) {
if (document.all) {
document.body.style.scrollbarBaseColor = C;
}
}
</script>
-
copy and paste this code into the BODY of your HTML document -->
Drag cursor over links to change scrollbar color.
<br>
<a href="#" onMouseOver="changeScrollbarColor('#FF0000')">Red</a>
|
<a href="#" onMouseOver="changeScrollbarColor('#FF8000')">Orange</a>
|
<a href="#" onMouseOver="changeScrollbarColor('#FFFF00')">Yellow</a>
|
<a href="#" onMouseOver="changeScrollbarColor('#00FF00')">Green</a>
|
<a href="#" onMouseOver="changeScrollbarColor('#4444FF')">Blue</a>
-
blinking scrollbar : the following
nifty little script will make your scrollbar blink.
<script>
var mode=0
function blinkscroll(){
if (mode==0)
document.body.style.scrollbarFaceColor="hotpink"
else
document.body.style.scrollbarFaceColor="white"
mode=(mode==0)? 1 : 0
}
setInterval("blinkscroll()",1000)
</script>
With a bit more imagination and editing you can make the arrows blink
or any other part of the scrollbar blink. For example the following code
makes the arrows blink.
<script>
var mode=0
function blinkscroll(){
if (mode==0)
document.body.style.scrollbarArrowColor="hotpink"
else
document.body.style.scrollbarArrowColor="white"
mode=(mode==0)? 1 : 0
}
setInterval("blinkscroll()",1000)
</script>
fix page backgroud
while scrolling
<body style="background-attachment: fixed; background-repeat: no-repeat;"
background="YOUR BACKGROUND FILE NAME GOES HERE">
select automatic
view in a maximized browser : added between the <head> and </head>
tags
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
if (window != top) top.location.href = location.href;
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</SCRIPT>
change background
-
copy and paste between <body>here</body> tags
<p><style>.bgimages img {cursor:hand} </style> <script
language="JavaScript1.2">
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}
function restore(){
document.body.style.backgroundImage=''
}
document.body.onclick=restore
</script>
</p>
-
copy and paste between <body>here</body> tags
<span class="bgimages" onClick="tile();event.cancelBubble=true"><img
src="Your image file jpg or gif goes here"
width="64" height="64">
For every background image you want as a sample to be clicked, you add
<span class="bgimages" onClick="tile();event.cancelBubble=true"> and
then your image background file.
popup windows : copy and
paste the script in your html document between <body>here</body>
-
<a href="#" onClick="javascript:window.open('THE
URL OF POPUP WINDOW GOES HERE', 'pop1win', 'toolbar=no
scrollbars=yes')">NAME
OF THE LINK GOES HERE</a>
-
mouse over and popup a window
-
copy and paste the first part between the <head> here </head> tags
:
<script language="JavaScript"> function overpop() { window.open('YOUR
FILE NAME OR URL HERE','doitnow','toolbar=yes,location=no,
directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars=yes,width
=500,height=300'); }
</script>
-
copy and paste the second part between the <body> here </body> tags
:
<a href="FAKE URL HERE" onMouseOver="parent.location='javascript:overpop()'
">YOUR LINK MESSAGE- MOUSE OVER HERE</a>
-
a window
that pops Up when you leave the page
-
copy and past the first part between <head>and</head> tags
<script language="JavaScript">
function justpop() {
var popunder= "THE URL GOES HERE";
var width = 788;
var height = 480;
var left = screen.width - width + 60;
var p = 'scrollbars=yes,resizable=yes,toolbar=yes,' + 'menubar=no,status=no,location=no,left='
+ left + ',top=0,height=' + height + ',width=' + width;
win2=window.open(popunder,"",p);
win2.blur();
win2.width = 788 ;
win2.height = 480 ;
win2.left = left ;
}
</script>
-
copy and paste the second part into the <body here> Tag
<body topmargin="0" leftmargin="0" onunload="justpop()">
-
a window
that pops up when you enter to the web page
<SCRIPT>
var popupurl="the URL of the webpage that will
be displayed in the popupwindow"
var popupwidth=400
var popupheight=300
var maximumpopups=10
var countpopups=0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
function startpopup() {
if (ns6 || ie) {
countpopups=0
var popuptop=Math.floor(400*Math.random())
var popupleft=Math.floor(600*Math.random())
window.open(popupurl, "", "toolbar=no,width=
"+popupwidth+",height="+popupheight+",top=
"+popuptop+",left="+popupleft+"");
}
}
function openpopup() {
if (countpopups<maximumpopups && (ns6 || ie)) {
for (i=0;i<=1;i++) {
var popuptop=Math.floor(400*Math.random())
var popupleft=Math.floor(600*Math.random())
window.open(popupurl, "", "scrollbars=yes,toolbar=no,width="+popupwidth+",height=
"+popupheight+",top="+popuptop+",left=
"+popupleft+"");countpopups++
}
}
}
window.onload=startpopup
</SCRIPT>
A high number of popupus appearing before the script stops might crash
the PC of your visitors
-
simple flying pop-up-window
-
copy and paste the first part between <head>and</head> tags :
<script>
var popwindow
var popwindowwidth=200
var popwindowheight=150
var popwindowtop=20
var popwindowURL="You-popup-webpage-here.htm"
var waitingtime=4
var pause=20
var step=40
var popwindowleft=-popwindowwidth-50
var marginright
var pagecenter
var timer
waitingtime= waitingtime*1000
function showWindow() {
popwindow = window.open(popwindowURL, "popwindow", "toolbar=no,width="+popwindowwidth+",height="+popwindowheight+",top="+popwindowtop+",left="+(-popwindowwidth)+"");
if (document.all) {
marginright = screen.width+50
}
if (document.layers) {
marginright = screen.width+50
}
pagecenter=Math.floor(marginright/2)-Math.floor(popwindowwidth/2)
movewindow()
}
function movewindow() {
if (popwindowleft<=pagecenter) {
popwindow.moveTo(popwindowleft,popwindowtop)
popwindowleft+=step
timer= setTimeout("movewindow()",pause)
}
else {
clearTimeout(timer)
timer= setTimeout("movewindow2()",waitingtime)
}
}
function movewindow2() {
if (popwindowleft<=marginright) {
popwindow.moveTo(popwindowleft,popwindowtop)
popwindowleft+=step
timer= setTimeout("movewindow2()",pause)
}
else {
clearTimeout(timer)
popwindow.close()
}
}
</script>
-
copy and paste ther second part inside the <body here > tag
onLoad="showWindow()"
-
full screen
window to block visitors into your webpage (press Alt+F4 keys to
close the window)
<script type="text/javascript">
function fullwin(targeturl){
window.open(targeturl,"","fullscreen,scrollbars")
}
</script>
<form>
<input type="button" onClick="fullwin('file
name')" value="Lock me in">
</form>
-
little flying window pops
up
-
copy the first part between the <head>and</head> tags.
<script>
var popwindow
var popwindowwidth=200
var popwindowheight=150
var popwindowtop=20
var popwindowURL="You-popup-webpage-here.htm"
var waitingtime=4
var pause=20
var step=40
var popwindowleft=-popwindowwidth-50
var marginright
var pagecenter
var timer
waitingtime= waitingtime*1000
function showWindow() {
popwindow = window.open(popwindowURL, "popwindow", "toolbar=no,width="+popwindowwidth+",height="+popwindowheight+",top="+popwindowtop+",left="+(-popwindowwidth)+"");
if (document.all) {
marginright = screen.width+50
}
if (document.layers) {
marginright = screen.width+50
}
pagecenter=Math.floor(marginright/2)-Math.floor(popwindowwidth/2)
movewindow()
}
function movewindow() {
if (popwindowleft<=pagecenter) {
popwindow.moveTo(popwindowleft,popwindowtop)
popwindowleft+=step
timer= setTimeout("movewindow()",pause)
}
else {
clearTimeout(timer)
timer= setTimeout("movewindow2()",waitingtime)
}
}
function movewindow2() {
if (popwindowleft<=marginright) {
popwindow.moveTo(popwindowleft,popwindowtop)
popwindowleft+=step
timer= setTimeout("movewindow2()",pause)
}
else {
clearTimeout(timer)
popwindow.close()
}
}
</script>
-
copy and paste the second part inside the <body here > tag
onLoad="showWindow()"
-
click on the link and open a new window with no navigation bar : instead
of using a frame for that url, use a new window and as this one has not
navigation bars, visitors will be back to your web site
<a href="#" onclick="javascript:window.open('You-popup-webpage-here.htm',
'anyname', 'toolbar=yes scrollbars=yes')">popup-webpage-name
</a>
-
a small pop-up-window that rushes right around the screen, pops up when
a visitor enters in the web page, and appears on the top left corner, goes
to the bottom, then to the right, then to the top and to the left back
to the left top of the window and it is
-
list all links
of a webpage into a popup
-
copy and paste first part between the <head>and</head> tags
<SCRIPT LANGUAGE="JavaScript">
function LinkList() {
var myheader = "<head><title>Links In "+document.title+"</title></head>";
myheader = myheader + "<body>";
var myfont = "<font style=\"font: 8pt Verdana, Arial, Helvetica,
Sans-serif; line-height:18pt;\" face=\"verdana, tahoma, geneva\" size=\"-1\"
>";
var mytext = "<center><b>Links in "+document.title+"</b><ol></center>";
var myendfont = "</font>";
var myendheader = "</body>";
windowprops = "menubars=no,location=no,toolbars=no,scrollbars=yes,"+"width=350,height=400,top=50,left=50";
self.name = "main";
if(document.all) {
for (i=0; i<document.links.length; i++) {
if(document.links[i].innerText)
if(document.links[i].innerText != " ")
mytext += "<li><a target='_new' href="+document.links[i]+">"+document.links[i].innerText+"</a><br>";
else
mytext += "<li><a target='_new' href="+document.links[i]+">"+document.links[i]+"</a><br>"
;
}
}
else {
for (i=0; i<document.links.length; i++) {
if(document.links[i].text) {
if(((document.links[i].text).indexOf("javascript:")) == -1) {
mytext += "<li><a target='_new' href="+document.links[i]+">"+document.links[i].text+"</a><br>"
;
}
}
else { }
}
}
mytext = mytext + "</ol><center><a href='javascript:window.close()'>close</a></center><BR>";
linkswin = window.open("","",windowprops);
with (linkswin.document) {
open();
write(myheader + myfont + mytext + myendfont + myendheader);
close();
}
}
</script>
-
copy and paste the second part inside the <body> and </body> where
you want the link to appear.
<a href="javascript:LinkList();">List
all links of this page</a>
set as home page : copy the following
code into the BODY of your html page.
<a HREF onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.mm.interhealth.info');">Make
Molecular Medicine your default homepage!</a>
bookmark via link clicking
: copy the following code into the BODY of your html page.
-
bookmark a defined webpage
<a href="javascript:window.external.AddFavorite('http://www.mm.interhealth.info',
'Molecular Medicine)">Click
here to add Molecular Medicine to your favorites</a>
...or.... :
<script>
var txt = "Bookmark Us!"
var url = "http://www.codelifter.com";
var who = "CodeLifter.com Software and Scripts"
var ver = navigator.appName
var num = parseInt(navigator.appVersion)
if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {
document.write('<A HREF="javascript:window.external.AddFavorite(url,who);"
');
document.write('onMouseOver=" window.status=')
document.write("txt; return true ")
document.write('"onMouseOut=" window.status=')
document.write("' '; return true ")
document.write('">'+ txt + '</a>')
}else{
txt += " (Ctrl+D)"
document.write(txt)
}
</script>
Addendum: you can use an image instead of the text for this link by
using the following in the txt variable:
var txt = "<img src='some.gif' width='100'
height='30' border='0'>"
-
bookmark the current webpage
<a HREF=index.html#" ONDRAGSTART="return false" ONCLICK="window.external.AddFavorite(location.href,
document.title);return false" ONMOUSEOVER="window.status='Add to Favorites';return
true">BookMark</a>
...or.... :
Add this Page to your Favorites</a>
<br><br>
<a HREF=index.html#" ONDRAGSTART="return false" ONCLICK="window.external.AddFavorite(location.href,
document.title);return false" ONMOUSEOVER="window.status='Add to Favorites';return
true">BookMark</a>
frames :
-
index.html coding
<FRAMESET border=0
frameSpacing=0 cols=15%,* frameBorder=0>
The frameset line of the coding tells us how wide the frames are going
to be. You can do it in pixels or screen percentages. It also tells us
whether there will be any spacing between frames or any border.
The section in Orange determines if there
is a border around BOTH frames or not and how thick the border will be.
(0 = no border, 1 = 1px thick border, 2 = 2px thick border etc).
The section in Bright Green determines
how much space there is between the two frames. If this is set to 0 there
is no space between the frames. If it is set to 1 that means there will
be 1px of space between the two frames.
The section in Dark Green decides the
width of each of the frames. In this example it is set to 15%,*.
This means that the first frame listed will take up 15% of the screen while
the other frame will take up the rest of the space. * in this context means
all the rest. it can be also set up as cols=180px,*
or if your frames are in rows ie like the image below:
Then you will need that section to like this: rows=15%,*
The section in Blue determines if the
frame has a border or not and how thick the border will be. (0 = no border,
1 = 1px thick border, 2 = 2px thick border etc).
-
menu frame
<FRAME name=menu src="menu.html">
This section of coding is for the first frame which will be our menu
page. All frames must have a name and if there is more than one frame on
the page it must be a different name to the other frames.
menu.html you can replace with the url of the page you want to load
into the frame.
<FRAME name=content marginWidth=20 marginHeight=10
src="content.html" scrolling=auto>
This section of coding is for the secound frame which will be our content
page. The name must be different to the first frame. marginWidth=20
marginHeight=10 These two settings set the width or height of space
from the edge of the frame to the begining of the content in the frame.
content.html you can replace with the url of the page you want to load
into the frame.
scrolling=auto this is where you choose
weather it has no scrolling auto scrolling or yes for scrolling.
</FRAMESET>
End of frameset.
<noframes>
Sorry your browser doesn't support frames
</noframes>
This is so people whose computers don't support frames for some wierd
reason know why their computers haven't loaded the page in question.
-
inline frames (iFrames) are a little bit different to normal frames.
They have some advantages in the fact that they can be placed anywhere
on a page along with other html. They can overlap and placed in tables.
They do however follow a simple rule in the fact that if there are > 1
iframes on a page the frames must have different names.
<iframe width="122"
height="290" scrolling="no" frameborder="no"src="menu.html"
title="menu"
name="menu"
marginwidth="
" marginheight=" " align=" " vspace=" " hspace=" " allowtransparency="
"></iframe>
scrolling="no" or "0", "yes" or "1", or auto or "auto"
However the latter parameter only works if you have the following parameter
in the <body> tag. <body style="background-color: transparent">
Finally, what if the persons browser doesn't support IFrames, you can
let them know by doing the following
<iframe name="myIFrame" src="test.html" width="250" height="100"
scrolling="1"> Your browser doesn't support IFrames. If you are using Netscape
Navigator, version 4 or older will not work with IFrames, please get newest
version.</iframe>
The
JavaScript Source
JavaFile.com
Java-Scripts
April's
A1 JavaScripts(TM) Resources
PerlAccess.com
Java Applet
Collection by Gokhan Dagli
GetCruising.com by Joe
DePaquale
Dynamic Drive DHTML
Scriptocean.com
Open Source Web Design (OSWD)
endpage bar
-
save the webpage
as when completely loaded
copy and paste between head tags :
<script language="JavaScript">
var isReady = false;
function doSaveAs(){
if (document.execCommand){
if (isReady){document.execCommand("SaveAs");}
}else{
alert('Feature available only in Internet Exlorer
4.0 and later.');
}
}
</script>
<body onload="isReady=true">
<a href="javascript:doSaveAs()">
Click Here To Save This Page
</a>
-
a link
in one page in the frameset to print out the content from a page in another
frame
-
copy and paste the following script in the <head>...</head> section
of your page. The script belongs in the page where the print link
is located -- *not* in the page to be printed.
<script>
function framePrint(whichFrame){
parent[whichFrame].focus();
parent[whichFrame].print();
}
</script>
<a href="javascript:framePrint('FRAMENAME');">
CLICK TO PRINT
</a>
Many editors (FrontPage, i.e.) automatically insert base= in frameset pages
and target= in the frameset code. It's a common problem for this
to cause JavaScript scripts to fail on error. If you run into an unaccountable
error, check the pages in the framesets, and remove the <base=etc.>
tag and also remove the target="whatever" from the framset page code.
Copyright © 2001-2005 Daniele
Focosi. All rights reserved | Terms
of use | Legal
notices
Add
this page to your favourites | About
this site | Acknowledgements
| Open forum
| Tell
a friend about this site | Current
link partners
Abbreviations
and acronyms | Medical
terminology | Add
a link | Translate
this site into your favourite language | Softwares
Comment
on the story
Tell
a friend
Print
friendly format
Save
this
