DHTML A Slackers Guide

web-developer

The information on this site was appropriated from A Slacker's Guide to DHTML and is inteded for our development efforts. None of the demonstrations of these capabilities work on this page so click here and visit the real site for examples.

Kwik Keys

Instructions: -The kwik key for this example is "h". So when you hit 
the "h" on the keyboard you will go to the designated page.

If you want to use a different key on the keyboard, check out this link. 


This goes in the HEAD of your document.

Find in Page

Instructions: 

This goes in the BODY of your document, wherever you want the search box to be.

/*
Find In Page Script- 
By Mike Hall (MHall75819@aol.com)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code, visit http://dynamicdrive.com
*/

var NS4 = (document.layers);    // Which browser?
var IE4 = (document.all);

var win = window;    // window to search.
var n   = 0;

function findInPage(str) {

var txt, i, found;

if (str == "")
    return false;

// Find next occurance of the given string on the page, wrap around to the
  // start of the page if necessary.

if (NS4) {

// Look for match starting at the current point. If not found, rewind
    // back to the first match.

if (!win.find(str))
      while(win.find(str, false, true))
        n++;
    else
      n++;

// If not found in either direction, give message.

if (n == 0)
      alert("Not found.");
  }

if (IE4) {
    txt = win.document.body.createTextRange();

// Find the nth match from the top of the page.

for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
      txt.moveStart("character", 1);
      txt.moveEnd("textedit");
    }

// If found, mark it and scroll it into view.

if (found) {
      txt.moveStart("character", -1);
      txt.findText(str);
      txt.select();
      txt.scrollIntoView();
      n++;
    }

// Otherwise, start over at the top of the page and find first match.

else {
      if (n > 0) {
        n = 0;
        findInPage(str);
      }

// Not found anywhere, give message.

else
        alert("Not found.");
    }
  }

return false;
}

</script>

Dynamic Slide In Menu

Instructions: 
You can alter the files in the zip that you should download. The zip file 
you need to download is right here.


This goes in the HEAD of your document.

Auto Scroll

Instructions: 

This goes in the BODY of your document

Manual Pull Out Nav Menu
Instructions: 

This goes in the HEAD of your document.

This goes in the BODY of your document, right after the BODY tag.

/*
Sliding Menu Bar Script 3- © Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, and TOS
Visit http://dynamicdrive.com
*/

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

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-150">')
else
document.write('<layer id="slidemenubar">')

var sitems=new Array()
var sitemlinks=new Array()

///////////Edit below/////////////////////////////////

//extend or shorten this list
sitems[0]="Home"
sitems[1]="Take our survey!"
sitems[2]="Menus And Navigation"
sitems[3]="Document Effects"
sitems[4]="Scrollers"
sitems[5]="Image Effects"
sitems[6]="Links And Buttons"
sitems[7]="Dynamic Clocks & Dates"
sitems[8]="Text Animations"
sitems[9]="Browser Window"
sitems[10]="User System Information"
sitems[11]="Cascading Style Sheets"
sitems[12]="Other"

//These are the links pertaining to the above text.
sitemlinks[0]="../test.htm"
sitemlinks[1]=".."
sitemlinks[2]="../dynamicindex1/index.html"
sitemlinks[3]="../dynamicindex3/index.html"
sitemlinks[4]="../dynamicindex2/index.html"
sitemlinks[5]="../dynamicindex4/index.html"
sitemlinks[6]="../dynamicindex5/index.html"
sitemlinks[7]="../dynamicindex6/index.html"
sitemlinks[8]="../dynamicindex10/index.html"
sitemlinks[9]="../dynamicindex8/index.html"
sitemlinks[10]="../dynamicindex9/index.html"
sitemlinks[11]="../dynamicindex7/index.html"
sitemlinks[12]="../dynamicindex11/index.html"

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""

/////////////////////////////////////////////////////////

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' target="'+target+'">'+sitems[i]+'</a><br>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
document.write('</layer>')
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
var dragapproved=false
var x1,x2
if (ns4)
themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

function move(e){
if (ie4&&event.button==1&&dragapproved){
if(temp1+event.clientX-x1>leftboundary)
themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1)
else
themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1)
}
else if (ns6&&dragapproved){
if(parseInt(themenu.left)+e.clientX-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,temp1+e.clientX-x2)
else
themenu.left=Math.max(leftboundary-2,temp1+e.clientX-x2)
}

else if (ns4){
if(themenu.left+e.x-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2)
else
themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2)
}
}

function drags(e){
if (ie4){
dragapproved=true
temp1=themenu.pixelLeft
x1=event.clientX
document.onmousemove=move
}
else if (ns6){
dragapproved=true
temp1=parseInt(themenu.left)
x2=e.clientX
document.getElementById("slidemenubar2").onmousemove=move
}
else{
themenu.captureEvents(Event.MOUSEMOVE)
x2=e.x
}
}

function stopit(){
if (ie4||ns6){
dragapproved=false
}
if (ns4)
themenu.releaseEvents(Event.MOUSEMOVE)
}

if (ie4){
document.all.slidemenubar2.onmousedown=drags
document.all.slidemenubar2.onmouseup=new Function("dragapproved=false")
document.onselectstart=new Function("return false")
}
else if (ns6){
document.getElementById("slidemenubar2").onmousedown=drags
document.getElementById("slidemenubar2").onmouseup=new Function("dragapproved=false")
}
else if (ns4){
themenu.onmousedown=drags
themenu.onmousemove=move
themenu.onmouseup=stopit
}
</script>

So now what?


To change the contents of the menu to your own, edit the text inside 
variables sitems[ ] and sitemlinks[ ] in the code of Step 2. You may now 
also specify a target for the links, if you wish them to be loaded in a new
window or frame. To change the appearance of the menu, edit the code in 
Step 1. Below lists the part you can edit:

top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;

The first line determines the vertical offset of the menu (adjust 170px to
any pixel desired). The second line determines the appearance of the border
that surrounds the menu (change 1.5px and green as desired). The third and 
fourth line effects the background color of the menu. The fifth 
line determines the font of the menu (change 12px and Verdana as desired). 
The last line deterines the spacing between each line of text in the menu.

Static Pop-out Menu

Instructions: 

This goes in the HEAD of your document.

This goes in the BODY of your document.

<LAYER visibility="hide" top="20" name="object1" bgcolor="black" left="0" onmouseover="move(132)" onmouseout="move(-132)">
<script language="JavaScript1.2">function positionmenu(){move(-132)}if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 20px ;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')}</script>
<table border="0" cellpadding="0" cellspacing="1" width="150" bgcolor="#000000">
<tr>
<td bgcolor="#0099FF"> <font size="4" face="Arial">
<b>Menu</b>
</font>
</td>
<script language="JavaScript1.2">document.write('<td align="center" rowspan="100" width="16" bgcolor="#FF6666">
<span style="font-size:13px">
<p align="center">
<font face="Arial Black">S<br />I<br />D<br />E<br />M<br />E<br />N<br />U</font>
</p>
</span>
</td>')</script>
</tr>
<script language="JavaScript1.2">

</script>
<tr>
<td bgcolor="#0099FF">
<font size="1" face="Arial"> </font>
</td>
</tr>
</table>
<script language="JavaScript1.2">if (document.all) {document.write('</DIV>')}window.onload=positionmenu</script>
</LAYER>

KB-Controlled slide In Nav Menu

Instructions: To bust it out hit "x", to close it hit "z", otherwise, look 
down. 

This goes in the HEAD of your document.

This goes in the BODY of your document, just after the BODY tag.

/*
Sliding Menu Bar Script 2- © Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, and TOS
Visit http://www.dynamicdrive.com
*/

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

function showtip(nulling){
if (ie4){
if (nulling==0&&slidemenubar2.style.pixelLeft==-150)
slidemenubar2.title='Press "x" to expand the menu, "z" to contract it'
else
slidemenubar2.title=''
}
else if (ns6){
if (nulling==0&&parseInt(document.getElementById("slidemenubar2").style.left)==-150)
document.getElementById("slidemenubar2").title='Press "x" to expand the menu, "z" to contract it'
else
document.getElementById("slidemenubar2").title=''
}
else if (ns4){
if (nulling==0&&!window.pullit)
window.status='Press "x" to expand the menu, "z" to contract it'
else
window.status=''
}
}
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="showtip(0)" onMouseout="showtip(1)">')
else
document.write('<layer id="slidemenubar" onMouseover="showtip(0)" onMouseout="showtip(1)">')

var sitems=new Array()
var sitemlinks=new Array()

///////////Edit below/////////////////////////////////

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""

/////////////////////////////////////////////////////////

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' target="'+target+'">'+sitems[i]+'</a><br>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
document.write('</layer>')
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (ie4&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if (ns6&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+5
else if(ns4&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (ie4&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if (ns6&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-5
else if(ns4&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}

if (ns4)
document.captureEvents(Event.KEYPRESS)
function menuengine(e){
if (ns4||ns6){
if (e.which==120)
pull()
if (e.which==122)
draw()
}
else if (ie4){
if (event.keyCode==120)
pull()
if (event.keyCode==122)
draw()
}
}
document.onkeypress=menuengine
</script>

All of these things can be changed:

top
border
background-color
layer-background-color
font:bold
line-height

Right Click Menu

Instructions: 

This goes in the HEAD of your document.

<STYLE> 
#contextMenu { 
  position: absolute; 
  visibility: hidden; 
  width: 120px; 
  background-color: lightgrey; 
  layer-background-color: lightgrey; 
  border: 2px outset white; 
}

.A:Menu { 
   color: black; 
   text-decoration: none; 
  cursor: default; 
   width: 100% 
  }

.A:MenuOn { 
   color: white; 
   text-decoration: none; 
   background-color: darkblue; 
  cursor: default; 
   width: 100% 
  } 
</STYLE>

<SCRIPT> 
var menu; 
function showMenu (evt) { 
  if (document.all) { 
    document.all.contextMenu.style.pixelLeft = event.clientX; 
    document.all.contextMenu.style.pixelTop = event.clientY; 
    document.all.contextMenu.style.visibility = 'visible'; 
    return false; 
  } 
  else if (document.layers) { 
    if (evt.which == 3) { 
      document.contextMenu.left = evt.x; 
      document.contextMenu.top = evt.y; 
      document.contextMenu.onmouseout = 
        function (evt) { this.visibility = 'hide'; }; 
      document.contextMenu.visibility = 'show'; 
      return false; 
    } 
  } 
  return true; 
} 
if (document.all) 
  document.oncontextmenu =showMenu; 
if (document.layers) { 
  document.captureEvents(Event.MOUSEDOWN); 
  document.onmousedown = showMenu; 
} 
</SCRIPT>

This goes in the BODY of your document.

Browser Detection & Redirection

Instructions: - change the stuff that goes in your body tag so that instead 
of nn4.html, for example, it would include the pathname of the page viewers 
with Netscape Navigator 4 would be sent to.

This goes in the HEAD of your document.

<SCRIPT language="JavaScript">
<!--
/*
Browser Sniffer Script-
© Eddie Traversa (nirvana.media3.net)
To add more shock to your site, visit www.DHTML Shock.com
*/

This goes in the BODY tag of your document, as an actual part of the BODY tag.

Bouncy Trails

Instructions: 
This goes in the BODY of your document, right after the BODY tag finishes 
opening.

/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL: http://www.geocities.com/pwinston/)
Script featured on Dynamicdrive.com
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

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

// end code hiding -->
</script>

Auto Select & Copy

This goes in the HEAD of your document.

This goes in the BODY of your document.

Instructions: 

The key to adding the "Highlight" feature to your form elements, as 
illustrated in the code of Step 2, are:
1) Giving your form a name (ie: 
2) Giving the form element in question a name 
   (ie: 3) Adding the <a> code:

<a class="highlighttext" href="javascript:HighlightAll('test.select1')">Select All</a>

directly above the form element, where the part in red references the form, 
then the element to highlight's name (note the quotation marks around it). 

</PRE>
</TD></TR>
<TR><TD valign='top'>
<HR>
</TD></TR>
<TR><TD valign='top'>
<PRE>
<H1>Agree Before Entry</H1>
Instructions: 

This goes in the HEAD of your document.
</PRE>
<TEXTAREA style="Width: 480; Height: 80">
<script>

//"Accept terms" form submission- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var checkobj

function agreesubmit(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){  //hunt down submit button
var tempobj=checkobj.form.elements[i]
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked
}
}
}

function defaultagree(el){
if (!document.all&&!document.getElementById){
if (window.checkobj&&checkobj.checked)
return true
else{
alert("Please read/accept terms to submit form")
return false
}
}
}

</script>


This goes in the BODY of your document.

<form name="agreeform" onSubmit="return defaultagree(this)">
Put your form right here<br>
<input name="agreecheck" type="checkbox" onClick="agreesubmit(this)"><b>I agree to the above terms</b><br>
<input type="Submit" value="Submit!" disabled>
</form>

<script>
//change two names below to your form's names
document.forms.agreeform.agreecheck.checked=false
</script>

Announcement Box

Instructions: 
Modify announcement. Shake well. Serve chilled. 

This goes in the HEAD of your document.

/*
DHTML Announcement Box- By Jim Silver @ jimsilver47@yahoo.com
Exlusive permission granted to Dynamic Drive (http://dynamicdrive.com) to 
include this script in their DHTML archive.
For full source code, terms of use, and 100's more scripts, visit 
http://dynamicdrive.com
*/

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for IE 4+////
/////////////////////////////////

var dragapproved=false

function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}

function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}

if (document.all){
document.onmouseup=new Function("dragapproved=false")
}

////drag drop functions end here//////

function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}

</script>

This goes in the BODY of your document, right before the closing BODY tag.

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
  <tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36">
      <tr>
        <td onMousedown="initializedragie()" style="cursor:hand" width="100%"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
        color="#FFFFFF"><strong><small>Announcement Box</small></strong></font></layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16"
        height="14" border=0></a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<small><strong><font face="Verdana">Feature Script- <a
href="http://www.dynamicdrive.com/dynamicindex3/snow.htm">Snow Effect</a></font></strong></small><br>
<small><font face="Verdana">Watch as snow gently trickles down the page, then disappear,
with this great document effect!</font></small>

</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>