DJ Gamerz

Basics

Tables

Frames

HTML

Javascript

Fun Stuff

Colors

DHTML

Copy and paste the text in the script areas into your page. These scripts are from CoffeeCup Html Editor. If the script needs to be changed to be viewed on your webpage do so. Do NOT change the script is says not to change!

<!-- SUMMARY BRIEFS
	This DHTML script will give a "curtain" effect displaying
	your webpage.  You can adjust the color by changing the 
	HEX code below and the word "PURPLE".

Place this after the <BODY> tag.
-->

function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].bottom-=speed
temp[2].top+=speed
if (temp[1].bottom<=0)
clearInterval(stopit)
}
else if (document.all){
curtainbottom-=speed
temp[1].clip="rect(0 auto+"+curtainbottom+" 0)"
curtaintop+=speed
temp[2].clip="rect("+curtaintop+" auto auto)"
if (curtainbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()

</script>

<!-- SUMMARY BRIEFS
	This DHTML script will create a drop down link box out of
	an ordinary link.  VERY COOL!!!!

The top portion of this script goes above the <BODY> tag.
	The second portion goes where you want the drop down link
	box to be.
-->

#wrapper2{
position:absolute
}

#coffeemenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}

-->
</style></HEAD>

<BODY>

<ilayer id="coffeemenu01" height=35px>
<layer id="coffeemenu02" visibility=show>
<span id="wrapper">
<span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="notthisbrowser.html">Click Here To Navigate</a></b></font>
</span>
</span>
</layer>
</ilayer>

var enableeffect=true

var selection=new Array()
selection[0]='<font face="ARIAL BLACK"><a href="http://www.coffeecup.com">Order Our Stuff</a><br>'
selection[1]='<a href="http://www.coffeecup.com">Contact Us via E-mail</a><br>'
selection[2]='<a href="http://www.coffeecup.com">Help With Our Items</a><br>'
selection[3]='<a href="http://www.coffeecup.com">Products We Have</a><br>'
selection[4]='<a href="http://www.coffeecup.com">Services We Offer</a><br></font>'

if (document.layers)
document.coffeemenu01.document.coffeemenu02.visibility='show'

function dropit2(){
if (document.all){
coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (coffeemenu03.style.visibility=="hidden"){
if (enableeffect)
coffeemenu03.filters.revealTrans.apply()
coffeemenu03.style.visibility="visible"
if (enableeffect)
coffeemenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}

function dropit(e){
if (document.coffeemenu03.visibility=="hide")
document.coffeemenu03.visibility="show"
else
document.coffeemenu03.visibility="hide"
document.coffeemenu03.left=e.pageX-e.layerX
document.coffeemenu03.top=e.pageY-e.layerY+19
return false
}

function hidemenu(){
if (enableeffect)
coffeemenu03.filters.revealTrans.stop()
coffeemenu03.style.visibility="hidden"
}

function hidemenu2(){
document.coffeemenu03.visibility="hide"
}

if (document.layers){
document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK)
document.coffeemenu01.document.coffeemenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu

</script>

<div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
coffeemenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>

<!-- SUMMARY BRIEFS
	This DHTML script will give pop up tips on any link.
	You can adjust the font, the content, and even the 
	background color of the tool tips.

Place this script anywhere within the <BODY> tags.
-->

if (!document.layers&&!document.all)
event="test"
function showtip(current,e,text){

if (document.all){
thetitle=text.split('<br>')
if (thetitle.length>1){
thetitles=''
for (i=0;i<thetitle.length;i++)
thetitles+=thetitle[i]
current.title=thetitles
}
else
current.title=text
}

else if (document.layers){
document.linktips.document.write('<layer bgColor="yellow" style="border:1px solid black;font-family:arial;font-size:12px;">'+text+'</layer>')
document.linktips.document.close()
document.linktips.left=e.pageX+5
document.linktips.top=e.pageY+5
document.linktips.visibility="show"
}
}
function hidetip(){
if (document.layers)
document.linktips.visibility="hidden"
}

</script>
<div id="linktips" style="position:absolute;visibility:hidden"></div>

<a href="http://www.coffeecup.com"
         onMouseover="showtip(this,event,'Please Visit the CoffeeCup Software Web Site!')" onMouseout="hidetip()">Visit Our Site</a>
<P>

<a href="http://www.coffeecup.com"
         onMouseover="showtip(this,event,'Learn More About Style Sheets and DHTML')" onMouseout="hidetip()">Learn More</a>
<P>

<a href="http://www.coffeecup.com"
         onMouseover="showtip(this,event,'Contact Us via E-mail...<BR>or by Snail Mail if you Wish')" onMouseout="hidetip()">Contact Us</a>

<P>

<a href="http://www.coffeecup.com/order"
         onMouseover="showtip(this,event,'Order One the Coolest Tools on the Web Now!')" onMouseout="hidetip()">Order Software</a>

<!-- SUMMARY BRIEFS
	Put this DHTML after the </HEAD> tag but before the 
	<BODY> tag.  This DHTML script will create a small
	layer that hovers around the mouse pointer.  The
	current image being used is called "smile.gif" and
	has a size of HEIGHT 11 and WIDTH 11.  To place your
	own image in place of the current one, rename "smile.gif"
	and change the HEIGHT and WIDTH specs in the CLIP 
	attribute.  (This is in the first line of code.)

-->

<layer NAME="a" LEFT="10" TOP="10" VISIBILITY="SHOW"
CLIP="0,0,11,11" background="smile.gif">
</layer>
<script LANGUAGE="JavaScript1.2">
var userAgent=navigator.appName + " " + navigator.appVersion;
var agentInfo=userAgent.substring(0, 12);
if(agentInfo >= "Netscape 4.0")
{
window.captureEvents(Event.MOUSEMOVE);
// Logo animation
var yBase = window.innerHeight/2;
var xBase = window.innerWidth/2;
var delay = 50;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 50;
var Ypos = 50;
var b = 0;
function MoveHandler(evnt) {
  Xpos = evnt.pageX ;
  Ypos = evnt.pageY ;
}
window.onMouseMove = MoveHandler;
function animateLogo() {
  yBase = window.innerHeight/4 ;
  xBase = window.innerWidth/4;
  for ( b = 0 ; b < 1 ; b++ ) {
    document.layers[b].top = Ypos +
Math.cos((20*Math.sin(currStep/(20+b)))+b*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + b*25)/10);
    document.layers[b].left =Xpos +
Math.sin((20*Math.sin(currStep/20))+b*70)*xBase*(Math.sin(10+currStep/(10+b))+0.2)*Math.cos((currStep + b*25)/10);
  }
  currStep += step;
  setTimeout("animateLogo()", delay) ;
}
animateLogo()
}
// -->

</script>
</LAYER>

var scrollerwidth=330
var scrollerheight=25
var speed=6

if (document.all)
document.write('<scroller scrollAmount='+speed+' style="width:'+scrollerwidth+'">'+scrollercontents+'</scroller>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializescroller()
}
}

function intializescroller(){
document.cscroller01.document.cscroller02.document.write('<nobr>'+scrollercontents+'</nobr>')
document.cscroller01.document.cscroller02.document.close()
thelength=document.cscroller01.document.cscroller02.document.width
scrollit()
}

function scrollit(){
if (document.cscroller01.document.cscroller02.left>=thelength*(-1)){
document.cscroller01.document.cscroller02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cscroller01.document.cscroller02.left=scrollerwidth
scrollit()
}
}

window.onload=regenerate2
</script>

<!-- SUMMARY BRIEFS
	Place this DHTML script after the </HEAD> tag and before
	the <BODY> tag.  In this DHTML script, there are five links
	that constantly remain in the upper left hand corner.  You
	can change these links to meet your own.  The Style Sheet 
	has been adjusted to "push" your webpage 120 pixels to the
	right so that the links do not touch any of your text/images.
	You can adjust this by changing the pixel amount in the BODY
	section of the below Style Sheet.

-->

A:LINK		{text-decoration: none;}
A:VISITED	{text-decoration: none;}
TD		{font-family:arial;}
BODY		{Margin-Left: 120;}

</style>
<span ID="slide">

<table CELLSPACING="0" BORDER="0" CELLPADDING="0" ALIGN="LEFT" >
<TR><td><HR NOSHADE></TD></tr>
<tr>
<td><A HREF="http://www.coffeecup.com">CONTACT US</A><BR></td>
</TR>
<tr>
<td><A HREF="http://www.coffeecup.com">HELP</A><BR></td>
</tr>
<tr>
<td><A HREF="http://www.coffeecup.com">SERVICES</A><br></td>
</tr>
<tr>
<td><A HREF="http://www.coffeecup.com">PRODUCTS</A><br></td>
</tr>
<tr>
<td><A HREF="http://www.coffeecup.com/order">ORDER</A><br></td>
</tr>
<TR><td><HR NOSHADE></TD></tr>
</table>
</span>

self.onError=null;
        
        currentX = currentY = 0;  
        whichIt = null;           
        lastScrollX = 0; lastScrollY = 0;
        
        NS = (document.layers) ? 1 : 0;
        IE = (document.all) ? 1: 0;
        
        function heartBeat() {
        
                if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
            if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
                
                if(diffY != lastScrollY) {
                        percent = .1 * (diffY - lastScrollY);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                                        if(IE) document.all.slide.style.pixelTop += percent;
                                        if(NS) document.slide.top += percent; 
                        lastScrollY = lastScrollY + percent;
            }
                if(diffX != lastScrollX) {
                        percent = .1 * (diffX - lastScrollX);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                        if(IE) document.all.slide.style.pixelLeft += percent;
                        if(NS) document.slide.left += percent;
                        lastScrollX = lastScrollX + percent;
                }       
        }

if(NS) {
                window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
                window.onmousedown = grabIt;
                window.onmousemove = moveIt;
                window.onmouseup = dropIt;
        }
        if(IE) {
                document.onmousedown = grabIt;
                document.onmousemove = moveIt;
                document.onmouseup = dropIt;
        }
        
        
        if(NS || IE) action = window.setInterval("heartBeat()",1);

</script>

<!-- SUMMARY BRIEF

This code will allow you to put a link on your
	page that, when clicked, will add a URL to the
	user's Favorites.

NOTE: This will only work for IE users. It will
	NOT work for users using Netscape.

You can change the bookmark link and text in the
	var bookmarkurl and var bookmarktitle attributes
	below.

You can change the text of the actual link in the
	<A HREF> code that you will place for your link
	to appear in your page. It is located at the
	bottom of this page.

-->

var bookmarkurl="http://www.coffeecup.com/"
var bookmarktitle="-=[ CoffeeCup Software ]=-"

function ccaddbookmark() {
	if (document.all)
	window.external.AddFavorite(bookmarkurl,bookmarktitle)
}

//-->
</script>

<a href="javascript:ccaddbookmark()" target="_self">
<font size="1" face="Arial">[ Add CoffeeCup Software to your Favorites ]</font>
</a>

<!-- SUMMARY BRIEF

This code will allow you to add a nifty
	and useful countdown timer to your page.

Refer to comments in the script to see
	where and how to customize this script.

-->

function setcountdown(theyear,themonth,theday) {
	yr=theyear;mo=themonth;da=theday
}

// ------ SCRIPT CONFIGURATION ------ //

// Comment: Configure the date that you are counting down to...in the format year, month, day:

setcountdown(2001,10,31)

// Comment: Change the two variables below to reflect the occasion, and message to display on that occasion, respectively

var occasion="Foo Foo's Birthday!"
var message_on_occasion="Happy Birthday, Foo Foo!"

// Comment: Configure the following variables to set the width, height, background color, and text style of the countdown area

var countdownwidth='510px'
var countdownheight='20px'
var countdownbgcolor='#FF0000'
var opentags='<font face="Verdana" size="2" color="#FFFFFF">'
var closetags='</font>'

// --------------- Do NOT edit anything after this line. --------------- //

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown

function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Occasion already passed! "+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"Occasion already passed! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>

<!-- SUMMARY BRIEF

This code will allow you to add cool little
	fireworks on your page.

There is nothing to edit. Just place the code
	inside of the <HEAD> tag on your page.

-->

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

amount=14;
if (ns){
for (i=0; i < amount; i++)
document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
else if (ie4||ns6){
document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i=0; i < amount; i++)
document.write("<div id='iestars"+i+"' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;font-size:1;z-index:10'></div>");
document.write("</div></div>");
}
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
sClrs=new Array('ffa500','00ff00','FFAAFF','fff000','fffffF')
Xpos=300;
Ypos=150;
initialStarColor='00ff00';
step=5;
currStep=0;
explosionSize=120;
function Fireworks(){
var WinHeight=(ns||ns6)?window.innerHeight-100:window.document.body.clientHeight-100;
var WinWidth=(ns||ns6)?window.innerWidth-100:window.document.body.clientWidth-100;
var Yscroll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
for (i=0; i < amount; i++){
if (ie4||ns6)
var layer=ns6?document.getElementById("iestars"+i).style : eval("iestars"+i).style;
else if (ns)
var layer=document.layers["nsstars"+i]
var randCol=Math.round(Math.random()*8);
var randSz=Math.round(Math.random()*2);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100)
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100)
if (currStep < 110){
 if (ns){layer.bgColor=initialStarColor;layer.clip.width=1;layer.clip.height=1}
 else{layer.background=initialStarColor;layer.width=1;layer.height=1;layer.fontSize=1}
 }
else{
 if (ns){layer.bgColor=Clrs[randCol];layer.clip.width=randSz;layer.clip.height=randSz}
 else{layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz}
 }
}
if (currStep > 220) 
{
 currStep=0;
 Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
 Xpos = 50+Math.round(Math.random()*WinWidth);
 for (i=0; i < sClrs.length; i++)
  {
  var newIcol=Math.round(Math.random()*i);
  }
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}
currStep+=step;
setTimeout("Fireworks()",20);
}
Fireworks();
// -->
</script>

<!-- SUMMARY BRIEF

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

-->

<script>
<!--

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

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

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

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

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

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

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

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

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

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

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

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

//-->
</script>

<!-- SUMMARY BRIEF

This DHTML script will make a text message follow
	your cursor around the screen. You can change the
	message to say whatever you want.

You can change the font face, color and size in
	the .trailersytle tag below. You can change the message
	in the javascript below that. Just look for the 
	comment that says "Insert your personal message below."

-->

<script>
<!--

var x,y
var step=20
var flag=0

// Insert your personal message below.
// Important: Do NOT remove the space at the end of the sentence!!!

var message="YOUR MESSAGE 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
}

//-->
</script>

<script>
<!--

for (i=0;i<=message.length-1;i++) {
    document.write("<span id='span"+i+"' class='trailerstyle'>")
	document.write(message[i])
    document.write("</span>")
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

//-->
</script>

example:
<body onLoad="mousetrailer()" style="width:100%;overflow-x:hidden;overflow-y:scroll">