Marquee help

**Bobsnox** · 11-16-2005, 01:16 AM

I want a marquee with scroll buttons on the side which control the direction of the content on mouseover. The content will be link buttons and move from left to right at a slow pace when the mouse isn't over the buttons, then move at a slightly faster rate in whichever direction the arrow points that the mouse is over, then pause when the mouse is over the content.

Can anyone help me out with either making or finding a similar code to this idea?

**jscheuer1** · 11-16-2005, 08:11 PM

Buggy in IE when using a doctype, otherwise fits the bill:

Code:

<html>
<head>
<title>Reverse, Alternate, Percentage Width, Height Adjust Marquee - Demo</title>
</head>
<body>
<center>
<script type="text/javascript">

/*
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
Reverse, controls, percentage width, alternate & Height Adjustment
courtesy of jscheuer1 in http://www.dynamicdrive.com/forums
*/

//Set Height Adjustment to center marquee vertically within its cell
var hgtAdj=3
//Specify the marquee's width (in pixels or percentage)
var marqueewidth="80%"
//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
//Set initial direction 'forward' or 'reverse'
var direction='reverse'
//Set direction to alternate 0 for no 1 for yes
var alternate=0

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: 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 <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'


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

function altM(){
direction=(direction=='reverse')? 'forward' : 'reverse'
}

var ie=document.all && !window.opera
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

if (((typeof(window.onresize))==('object')||('undefined'))&&(marqueewidth.indexOf('%')!==-1))
window.onresize=refresh;
function refresh() {
setTimeout("doit()",1)
}
function doit(){
if (window.location.reload)
window.location.reload( true );
else if (window.location.replace)
window.location.replace(unescape(location.href))
else
window.location.href=unescape(location.href)
}

if (marqueewidth.indexOf('%')!==-1)
var marqueewidth=ie? (iecompattest().clientWidth*parseInt(marqueewidth)/100)-20+'px' : (window.innerWidth*parseInt(marqueewidth)/100)-20+'px'


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.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
if (direction=='reverse')
cross_marquee.style.left=8-actualwidth+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
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){
var c1=(direction=='reverse')? (parseInt(cross_marquee.style.left)<parseInt(marqueewidth)) : (parseInt(cross_marquee.style.left)>(actualwidth*(-1)-18));
if (c1)
(direction=='reverse')? cross_marquee.style.left=parseInt(cross_marquee.style.left)+copyspeed+"px" : cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else{
if (alternate)
altM();
(direction=='reverse')? cross_marquee.style.left=8-actualwidth+"px" : cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
}
else if (document.layers){
var c1=(direction=='reverse')? (ns_marquee.left<parseInt(marqueewidth)) : (ns_marquee.left>(actualwidth*(-1)-18))
if (c1)
(direction=='reverse')? ns_marquee.left+=copyspeed : ns_marquee.left-=copyspeed
else{
if (alternate)
altM();
(direction=='reverse')? ns_marquee.left=8-actualwidth : ns_marquee.left=parseInt(marqueewidth)+8
}
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td><span style="cursor:pointer;" onmouseover="direction=\'forward\';copyspeed++" onmouseout="copyspeed--"><<&nbsp;</span></td><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:'+hgtAdj+'px"></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='+hgtAdj+' onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td><td><span style="cursor:pointer;" onmouseover="direction=\'reverse\';copyspeed++" onmouseout="copyspeed--">&nbsp;>></span> </td></table>')
}
}
</script>
</center>
</body>
</html>

**Bobsnox** · 11-16-2005, 10:23 PM

Thanks a lot. If I want two of these marquees on my page at one time - what do I need to edit? So far that hasn't worked for me.

**jscheuer1** · 11-16-2005, 11:05 PM

The easiest way is to put one of them on a separate page and have it show through onto the main page via an iframe.

**jscheuer1** · 11-17-2005, 09:08 AM

I discovered why the marquee was buggy under IE when using a DOCTYPE. The problem was that it could not determine its own internal positioning properly if a DOCTYPE and the <center> tag were both used. This would also be true of using any type of centering 'container' tags. I've made a fix (added an alignment variable so that tags are not needed to center it) and a number of other enhancements, most of which are transparent.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Optional Reverse, Alternate, Percentage Width, Controls and Height Adjust Marquee - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">

/* NOTES: If your page uses a DOCTYPE, DO NOT use
  <center></center> or any type of centering 'container' tags
  around the marquee.  This will cause problems in IE.  Use the
  'alignmarquee' variable in the below configuration instead.

   ALSO: If using the percentage width feature, the page will reload
  onresize.  DO NOT use this feature if your page also contains
  content that could be lost on reload like, forms data. */

/* 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  This Credit MUST stay Intact.
   Reverse, controls, percentage width, alternate & Height Adjustment
  courtesy of jscheuer1 in http://www.dynamicdrive.com/forums  */

//Use Controls? Set to 0 for no, 1 for yes
var controls=1
//Set Height Adjustment to center marquee vertically within its cell
var hgtAdj=3
//Specify the marquee's width in pixels or percentage (see above note)
var marqueewidth="80%"
//Specify the marquee's height in pixels
var marqueeheight="25px"
//Align marquee - use 'left' 'center' or 'right'
var alignmarquee='center'
//Specify the marquee's speed (whole numbers, larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#DEFDD9"
//Pause marquee onMousever (0=no, 1=yes)?
var pauseit=1
//Set initial direction 'forward' or 'reverse'
var direction='reverse'
//Set direction to alternate (0 for no, 1 for yes)
var alternate=0

//Specify the marquee's content below.  Keep all content on ONE line.
// Backslash any single quote (') (ie: that\'s great):

var marqueecontent='<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 <a href="../link.htm">click here.</a> Enjoy your stay!</font>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueecontent='<nobr>'+marqueecontent+'</nobr>'

function altM(){
direction=(direction=='reverse')? 'forward' : 'reverse'
}

var ie=document.all && !window.opera
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

if (((typeof(window.onresize))==('object')||('undefined'))&&(marqueewidth.indexOf('%')!==-1))
window.onresize=refresh;
function refresh() {
setTimeout("doit()",1)
}
function doit(){
if (window.location.reload)
window.location.reload( false );
else if (window.location.replace)
window.location.replace(unescape(location.href))
else
window.location.href=unescape(location.href)
}

if (marqueewidth.indexOf('%')!==-1)
var marqueewidth=ie? (iecompattest().clientWidth*parseInt(marqueewidth)/100)-20+'px' : (window.innerWidth*parseInt(marqueewidth)/100)-20+'px'

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.innerHTML=marqueecontent
actualwidth=cross_marquee.firstChild.offsetWidth
if (direction=='reverse')
cross_marquee.style.left=8-actualwidth+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
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){
var c1=(direction=='reverse')? (parseInt(cross_marquee.style.left)<parseInt(marqueewidth)) : (parseInt(cross_marquee.style.left)>(actualwidth*(-1)-18));
if (c1)
(direction=='reverse')? cross_marquee.style.left=parseInt(cross_marquee.style.left)+copyspeed+"px" : cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else{
if (alternate)
altM();
(direction=='reverse')? cross_marquee.style.left=8-actualwidth+"px" : cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
}
else if (document.layers){
var c1=(direction=='reverse')? (ns_marquee.left<parseInt(marqueewidth)) : (ns_marquee.left>(actualwidth*(-1)-18))
if (c1)
(direction=='reverse')? ns_marquee.left+=copyspeed : ns_marquee.left-=copyspeed
else{
if (alternate)
altM();
(direction=='reverse')? ns_marquee.left=8-actualwidth : ns_marquee.left=parseInt(marqueewidth)+8
}
}
}

if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0" align="'+alignmarquee+'"><td>')
if (controls)
write('<span style="cursor:pointer;" onmouseover="direction=\'forward\';copyspeed++" onmouseout="copyspeed--"><<&nbsp;</span></td><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:'+hgtAdj+'px"></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='+hgtAdj+' onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
write('</td>')
if (controls)
write('<td><span style="cursor:pointer;" onmouseover="direction=\'reverse\';copyspeed++" onmouseout="copyspeed--">&nbsp;>></span></td>')
write('</table>')
}
}
</script>
</body>
</html>

Thread: Marquee help

Thread Tools

Search Thread

Marquee help

Bookmarks

Bookmarks

Posting Permissions