Compare Page Revisions
« Older Revision - Back to Page History - Current Revision
Table of Contents [Hide/Show]
Horizonal Marquee HTML Document Marquee.js Vertical Marquee CSS Code VERTICAL.JS HTML Document, Head HTML Document, Body
<script language="JavaScript1.2" type="text/javascript" src="marquee.js">
marquee.js
/* Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com Credit MUST stay intact */ //Specify the marquee's width (in pixels) var marqueewidth="300px" //Specify the marquee's height var marqueeheight="25px" //Specify the marquee's marquee speed (larger is faster 1-10) var marqueespeed=2 //configure background color: var marqueebgcolor="#DEFDD9" //Pause marquee onMousever (0=no. 1=yes)? var pauseit=1 //Specify the marquee's content (don't delete <nobr> tag) // Be sure to backslash any single quotations (e.g., that\'s great): var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dynamicdrive.com">' + 'Dynamic Drive.</a> If you find this script useful, please consider linking to us by clicking ' + '<a href="../link.htm">here.</a> Enjoy your stay!</font></nobr>' ////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 if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>') var actualwidth='' var cross_marquee, ns_marquee function populate(){ if (iedom){ cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee cross_marquee.style.left=parseInt(marqueewidth)+8+"px" cross_marquee.innerHTML=marqueecontent actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_marquee=document.ns_marquee.document.ns_marquee2 ns_marquee.left=parseInt(marqueewidth)+8 ns_marquee.document.write(marqueecontent) ns_marquee.document.close() actualwidth=ns_marquee.document.width } lefttime=setInterval("scrollmarquee()",20) } window.onload=populate function scrollmarquee(){ if (iedom){ if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8)) cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px" else cross_marquee.style.left=parseInt(marqueewidth)+8+"px" } else if (document.layers){ if (ns_marquee.left>(actualwidth*(-1)+8)) ns_marquee.left-=copyspeed else ns_marquee.left=parseInt(marqueewidth)+8 } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">') write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">') write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>') write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } }
#jump_base { overflow-y:hidden; width: 200px; height: 100px; border: 2px dotted #000099; margin: auto; padding: 0 10px 0 10px; font-size: .9em; font-family: Verdana, Arial, sans-serif; } #jump_base a { color: #000099; background-color: inherit; } .news { background-color: #DDDDDD; color: inherit; }
vertical.js
/* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Mike Hudson :: http://www.afrozeus.com */ /* To change the values in the setupLinks function below. You will notice there are two arrays for each of Titles and Links. Currently there are 3 items in each array, but you can easily expand on that by adding to the array. For example, to add a 4th record, you would simply include the following 2 lines at the end of setupLinks function: arrLinks[3] = "someURL.htm"; arrTitles[3] = "Some title"; */ function setupLinks() { arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3"; arrTitles[0] = "If you have any questions, be sure to visit our forums."; arrLinks[1] = "http://javascript.internet.com/new/"; arrTitles[1] = "Don't miss anything — check our new additions."; arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/"; arrTitles[2] = "Want to learn JavaScript? Start at the beginning."; } var m_iInterval; var m_Height; //window.onload = wl; var iScroll=0; var arrLinks; var arrTitles; var arrCursor = 0; var arrMax; window.onload=wl; function wl() { m_iInterval = setInterval(ontimer, 10); var base = document.getElementById("jump_base"); m_Height = base.offsetHeight; var divi = parseInt(m_Height/5); m_Height = divi*5; var td1 = document.getElementById("td1"); var td2 = document.getElementById("td2"); var td3 = document.getElementById("td3"); td1.height = m_Height-5; td2.height = m_Height-5; td3.height = m_Height-5; arrLinks = new Array(); arrTitles = new Array(); setupLinks(); arrMax = arrLinks.length-1; setLink(); } function setLink() { var ilink = document.getElementById("jump_link"); ilink.innerHTML = arrTitles[arrCursor]; ilink.href = arrLinks[arrCursor]; } function ontimer() { var base = document.getElementById("jump_base"); iScroll+=5; if (iScroll>(m_Height*2)) { iScroll=0; arrCursor++; if (arrCursor>arrMax) arrCursor=0; setLink(); } if (iScroll==m_Height) { pause(); m_iInterval = setTimeout(resume, 4000); } base.scrollTop=iScroll; } function pause() { clearInterval(m_iInterval); } function resume() { m_iInterval = setInterval(ontimer, 10); }
<script type="text/javascript" src="vertical.js">
<div id="jump_base" class="news" onmouseover="pause()" onmouseout="resume()"> <table class="news"> <tr> <td id="td1"> </td></tr> <tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr> <tr><td id="td3"> </td></tr> </table> </div> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p>
ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.