Saint Michaels Dhtml Issue #1 the ever popular series is back in dhtml

[Saint_Michael 3]

well since my series is becoming such a big hit im going to go into dhtml and lets start of with some beginner stuff so to speak.

 

all scripts are coming from dynamic drive

 

Ok menu and navagation is a big part of your website now for those who have lots of info the requires the user to scroll down this menu will help out when you scroll the menu goes down with it so heres the script.

<script>

if (!document.layers)

document.write('<div id="divStayTopLeft" style="position:absolute">')

</script>

 

<layer id="divStayTopLeft">

 

<!--EDIT BELOW CODE TO YOUR OWN MENU-->

<table border="1" width="130" cellspacing="0" cellpadding="0">

  <tr>

    <td width="100%" bgcolor="#FFFFCC">

      <p align="center"><b><font size="4">Menu</font></b></td>

  </tr>

  <tr>

    <td width="100%" bgcolor="#FFFFFF">

      <p align="left"> <a href="http://www.dynamicdrive.com/ Drive</a><br>

      <a href="http://www.dynamicdrive.com/new.htm New</a><br>

      <a href="http://www.dynamicdrive.com/hot.htm Hot</a><br>

      <a href="http://www.dynamicdrive.com/faqs.htm;

      <a href="http://www.dynamicdrive.com/morezone/ Zone</a></td>

  </tr>

</table>

<!--END OF EDIT-->

 

</layer>

 

 

<script type="text/javascript">

 

/*

Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)

Script featured on/available at http://www.dynamicdrive.com/

This notice must stay intact for use

*/

 

//Enter "frombottom" or "fromtop"

var verticalpos="frombottom"

 

if (!document.layers)

document.write('</div>')

 

function JSFX_FloatTopDiv()

{

var startX = 3,

startY = 150;

var ns = (navigator.appName.indexOf("Netscape") != -1);

var d = document;

function ml(id)

{

  var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id];

  if(d.layers)el.style=el;

  el.sP=function(x,y){this.style.left=x;this.style.top=y;};

  el.x = startX;

  if (verticalpos=="fromtop")

  el.y = startY;

  else{

  el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

  el.y -= startY;

  }

  return el;

}

window.stayTopLeft=function()

{

  if (verticalpos=="fromtop"){

  var pY = ns ? pageYOffset : document.body.scrollTop;

  ftlObj.y += (pY + startY - ftlObj.y)/8;

  }

  else{

  var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

  ftlObj.y += (pY - startY - ftlObj.y)/8;

  }

  ftlObj.sP(ftlObj.x, ftlObj.y);

  setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("divStayTopLeft");

stayTopLeft();

}

JSFX_FloatTopDiv();

</script>

The next menu/navagation is good for those who have small sites. this one uses a drop down menu but also gives a brief description on what the link contains so here we go also this comes into 2 parts so read the directions carefully.

<!--Example drop down menu 1-->

 

<form name="form1">

<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">

<option selected value="http://www.javascriptkit.com/ Kit </option>

<option value="http://www.freewarejava.com/;

<option value="http://www.wired.com/; target="newwin">Wired News</option>

<option value="https://www.cnet.com/news/;

<option value="http://www.codingforums.com/; target="newwin">Coding Forums</option>

</select>

<input type="button" value="Go"

onClick="jumptolink(document.form1.select1)"><br>

<span id="textcontainer1" align="left" style="font:italic 13px Arial">

</span>

</form>

 

<!--Example drop down menu 2-->

 

<form name="form2">

<select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">

<option selected value="http://edition.cnn.com/;

<option value="http://www.msnbc.com/;

<option value="http://www.bbc.co.uk/news News</option>

<option value="http://www.theregister.co.uk/ Register</option>

</select>

<input type="button" value="Go"

onClick="jumptolink(document.form2.select2)"><br>

<span id="textcontainer2" align="left" style="font:italic 13px Arial">

</span>

</form>

 

<!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->

<!--To be safe, just add below script at the end of your page-->

 

<script type="text/javascript">

 

/***********************************************

* Drop down menu w/ description- © Dynamic Drive (http://www.dynamicdrive.com/)

* This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

 

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE

var thetext1=new Array()

thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"

thetext1[1]="Direct link to hundreds of free Java applets online!"

thetext1[2]="Up to date news on the technology front"

thetext1[3]="News.com- The #1 technology News site."

thetext1[4]="Web Coding and development forums"

 

/// You may define additional text arrays if you have multiple drop downs:

var thetext2=new Array()

thetext2[0]="CNN- US and World News."

thetext2[1]="MSNBC- NBC News online."

thetext2[2]="BBC News- Updated every minute of every day."

thetext2[3]="TheRegister- Daily IT news."

 

// Now, see 2) below for final customization step

 

function displaydesc(which, descriptionarray, container){

if (document.getElementById)

document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]

}

 

function jumptolink(what){

var selectedopt=what.options[what.selectedIndex]

if (document.getElementById && selectedopt.getAttribute("target")=="newwin")

window.open(selectedopt.value)

else

window.location=selectedopt.value

}

 

//2) Call function displaydesc() for each drop down menu you have on the page

//  This function displays the initial description for the selected menu item

//  displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):

//  Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

 

displaydesc(document.form1.select1, thetext1, 'textcontainer1')

displaydesc(document.form2.select2, thetext2, 'textcontainer2')

 

</script>[/color]

ok next we are going to into scrollers or marquee news for the website, lettings people know any updates to the website in cool fashion so lets check this one out

<script language="JavaScript1.2">

 

/*

Cross browser Marquee II- © Dynamic Drive (http://www.dynamicdrive.com/)

For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com/

Credit MUST stay intact

*/

 

//Specify the marquee's width (in pixels)

var marqueewidth="200px"

//Specify the marquee's height

var marqueeheight="150px"

//Specify the marquee's marquee speed (larger is faster 1-10)

var marqueespeed=2

//Pause marquee onMousever (0=no. 1=yes)?

var pauseit=1

 

//Specify the marquee's content

//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

 

var marqueecontent='<font face="Verdana">Thank you for visiting <a href="http://www.dynamicdrive.com/ Drive.</a><p>If you find this script useful, please consider linking to us by <a href="../link.htm">clicking here.</a><p>Visit our partner <a href="http://www.javascriptkit.com/ Kit</a> for JavaScript tutorials.</font>'

 

 

////NO NEED TO EDIT BELOW THIS LINE////////////

 

marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS

var copyspeed=marqueespeed

var pausespeed=(pauseit==0)? copyspeed: 0

var iedom=document.all||document.getElementById

var actualheight=''

var cross_marquee, ns_marquee

 

function populate(){

if (iedom){

cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee

cross_marquee.style.top=parseInt(marqueeheight)+8+"px"

cross_marquee.innerHTML=marqueecontent

actualheight=cross_marquee.offsetHeight

}

else if (document.layers){

ns_marquee=document.ns_marquee.document.ns_marquee2

ns_marquee.top=parseInt(marqueeheight)+8

ns_marquee.document.write(marqueecontent)

ns_marquee.document.close()

actualheight=ns_marquee.document.height

}

lefttime=setInterval("scrollmarquee()",20)

}

window.onload=populate

 

function scrollmarquee(){

 

if (iedom){

if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))

cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"

else

cross_marquee.style.top=parseInt(marqueeheight)+8+"px"

}

else if (document.layers){

if (ns_marquee.top>(actualheight*(-1)+8))

ns_marquee.top-=copyspeed

else

ns_marquee.top=parseInt(marqueeheight)+8

}

}

 

if (iedom||document.layers){

with (document){

if (iedom){

write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')

write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')

write('</div></div>')

}

else if (document.layers){

write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')

write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')

write('</ilayer>')

}

}

}

</script>

this next script is for form this script let user know what fields are important to fill out yeah their are scripts mostly php that make fill out the info before click or your brought back but what they its scriptig at its best. also this is a two step process so read carefully

<script language="JavaScript1.2">

 

/*

Flashing form element Script- © Dynamic Drive (http://www.dynamicdrive.com/)

For full source code, visit http://www.dynamicdrive.com/

This credit MUST stay intact for use

*/

 

var flashcolor="red"

var flashinterval=1000 //flash interval in miliseconds (1000=1 sec)

 

var formcollect=document.getElementsByTagName? document.getElementsByTagName("FORM") : document.all? document.all.tags("FORM") : new Array()

var flashcollect=new Array()

 

for (i=0; i<formcollect.length; i++){

for (e=0; e<formcollect.elements.length; e++){

if (formcollect.elements[e].className=="flashit")

flashcollect[flashcollect.length]=formcollect.elements[e]

}

}

 

function flashelements(){

for (f=0; f<flashcollect.length; f++){

if (flashcollect[f].style.color=='')

flashcollect[f].style.color=flashcolor

else

flashcollect[f].style.color=""

}

}

 

if (flashcollect.length>0)

setInterval("flashelements()",flashinterval)

 

</script>

the nex part is simple just add the following

Having done the above, you're now ready to give any form element a flashing personality. Just add:

 

class="flashit"

 

inside the element's tag you wish to flash. Here's an example:

 

<form>

<input type="submit" value="Submit" class="flashit">

</form>

 

this next dhtml script is use for link/tooltip, basical its like a floating text giving you some info on the link a lot of sites use this kind and many other variations of it as well so hers one for you people to chomp down on

 

first part you had in the <head> tag area

<style type="text/css">

 

#dhtmlfloatie{

position: absolute;

left: 0;

left: -900px;

filter:alpha(opacity=0);

-moz-opacity:0;

border: 2px solid black;

padding: 5px;

z-index: 100;

}

 

</style>

 

<script type="text/javascript">

 

/***********************************************

* Link Floatie script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com/)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

 

var floattext=new Array()

floattext[0]='- <a href="http://www.javascriptkit.com/cutpastejava.shtml JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex.shtml Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutors/index.shtml CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/ Reference</a><br><div align="right"><a href="javascript:hidefloatie()">Hide Box</a></div>'

floattext[1]='Some other floatie text'

 

var floatiewidth="250px" //default width of floatie in px

var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.

var floatiebgcolor="lightyellow" //default bgcolor of floatie

var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

 

var baseopacity=0

function slowhigh(which2){

imgobj=which2

browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""

instantset(baseopacity)

highlighting=setInterval("gradualfade(imgobj)",fadespeed)

}

 

function instantset(degree){

cleartimer()

if (browserdetect=="mozilla")

imgobj.style.MozOpacity=degree/100

else if (browserdetect=="ie")

imgobj.filters.alpha.opacity=degree

}

 

function cleartimer(){

if (window.highlighting) clearInterval(highlighting)

}

 

function gradualfade(cur2){

if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)

cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)

else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)

cur2.filters.alpha.opacity+=10

else if (window.highlighting)

clearInterval(highlighting)

}

 

function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

 

function paramexists(what){

return(typeof what!="undefined" && what!="")

}

 

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){

var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;

var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;

var floatobj=document.getElementById("dhtmlfloatie")

floatobj.style.left="-900px"

floatobj.style.display="block"

floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor

floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth

floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""

floatobj.innerHTML=thetext

var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width

var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width

var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20

var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight

e=window.event? window.event : e

floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"

if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)

floatobj.style.top=dsocy+5+"px"

else

floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"

slowhigh(floatobj)

}

 

function hidefloatie(){

var floatobj=document.getElementById("dhtmlfloatie")

floatobj.style.display="none"

}

 

</script>

next you add this is the <body> tag area

<div id="dhtmlfloatie" ></div>

 

<a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more.', event)" onMouseout="hidefloatie()">Coding Forums</a> | <a href="#" onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100)">JavaScript Kit</a>

now for this this floating tooltip other options can be done but to make it siomple heres the link for that infoclick here

 

well that for the day look for issue #2 as well cover more things dhtml

[tom169 0]

I use dynamic drive alotvery good script website