Java Scripts, DHTML and CGI Scripts V

SCROLLING BANNER

<script language="JavaScript">
// Modified by CoffeeCup Software

var id,pause=0,position=0,revol=9;

function banner()
{
var i,k;
var msg=" Your Text Here ";
var speed=10;
document.thisform.thisbanner.value=msg.substring(position,position+50);

if(position++==msg.length)
{
if (revol-- < 2) return;
position=0;
}

id=setTimeout("banner()",1000/speed);
}

</script>

</head>
<body bgcolor="ffffff" onload="banner()">
<CENTER><form name="thisform">

STATUS BAR MESSAGE

<SCRIPT LANGUAGE="JavaScript">
//Modified by Coffeecup.com

function infoscroll(seed,looped)
{
var text1 = " Your Text Here ";
var text2 = " and more here.............. ";
var msg=text1+text2;
var putout = " ";
var c = 1;

if (looped > 10)
{ window.status="<Thanks !>"; }
else if (seed > 100)
{
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0)
{
for (c=0 ; c < seed ; c++)
{ putout+=" "; }
putout+=msg.substring(0,100-seed);
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0)
{
if (-seed < msg.length)
{
putout+=msg.substring(-seed,msg.length);
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100); // 100
}
else
{
window.status=" ";
looped += 1;
var cmd = "infoscroll(100," + looped + ")";
timerTwo=window.setTimeout(cmd,75); // 75
}
}
}
// -->

</SCRIPT>

</BODY>
</HTML>

SLIDE MENU

<!-- 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;
}
}

function checkFocus(x,y) {
var totalY, totalX;
floatx = document.slide.pageX;
floaty = document.slide.pageY;
floatwidth = document.slide.clip.width;
floatheight = document.slide.clip.height;

if(20 == 0) totalY = floatheight;
else totalY = 20;
if(0 == 0) totalX = floatwidth;
else totalX = 0;
if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true;
else return false;
}

function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("slide") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);

if(20 == 0) totalY = whichIt.style.pixelHeight;
else totalY = 20;
if(0 == 0) totalX = whichIt.style.pixelWidth;
else totalX = 0;
if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) ||
!(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null;
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.slide;
FloatTouchedX = e.pageX-document.slide.pageX;
FloatTouchedY = e.pageY-document.slide.pageY;
}
}
return true;
}

function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}

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>

</BODY>
</HTML>

SLIDE OUT

<!-- SUMMARY BRIEFS

This DHTML script is an entire webpage by itself. Open it
up into a blank webpage and try it out. You can then add
your content around it. Basically, you can have 5 different
"layers" which switch when the user clicks on the appropriate
links. You can adjust the links, colors, and text below.

IMPORTANT

This example has an image. It is found in the CoffeeCup
Software folder on your hard drive.
-->

<SCRIPT LANGUAGE="JavaScript">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
slideoutActive = 0
if (n) {
slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
}

if (ie) {
slideout1 = slideoutContent1.style
slideout2 = slideoutContent2.style
slideout3 = slideoutContent3.style
slideout4 = slideoutContent4.style
slideout5 = slideoutContent5.style
}
slideoutShown = slideout1
slideoutShown.xpos = 0
slideoutNew = "none"
slideoutNew.xpos = -285
}

function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1
slideoutNew = which
slideoutNew.xpos = -285
slideoutLeft()
}
}

function slideoutLeft() {
if (slideoutShown.xpos > -285) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}

function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0 // stops the sequence
}
}

function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}

#slideoutInterface {position:absolute; left:50; top:50; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}

#slideoutContent {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#slideoutContent1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#slideoutContent2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}

//-->
</STYLE>
</HEAD>

<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">Contact Us</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">Help</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">Services</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">Products</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">Order</A></P></DIV>

<DIV ID="slideoutContent1">
<P ALIGN="CENTER"><STRONG>Contact Us</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent2">
<P ALIGN="CENTER"><STRONG>Help</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent3">
<P ALIGN="CENTER"><STRONG>Services</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent4">
<P ALIGN="CENTER"><STRONG>Products</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent5">
<P ALIGN="CENTER"><STRONG>Order</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.coffeecup.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

</DIV>

</BODY>
</HTML>

</BODY>
</HTML>