Marquee Script

**Webiter** · 11-07-2012, 06:04 PM

1) Script Title: Cross browser Marquee script-

2) Script URL (on DD):

3) Describe problem: No Problem. Just wondering if this script can drag an image across the screen?

**djr33** · 11-07-2012, 06:32 PM

Have you tried putting an <img> tag in the contents?

**Webiter** · 11-08-2012, 12:09 PM

Originally Posted by djr33

Have you tried putting an <img> tag in the contents?

Yes, I have now got it working in the main content area of the page. The image is a train with carriages moving across the screen. It is in .gif format thus everything else around the image has been removed by means of using a transparent image. Likewise the windows are transparent.

What I seek to do now is have the train move across the header image in the banner by using the marquee. Can this be made to work?

The banner code is as per the following:

HTML Code:

<div id="banner">
            <img src="album/hills.jpg" alt="Header Image" width="950"/>			
        </div>

**Beverleyh** · 11-08-2012, 01:18 PM

I think you've answered your own question. You've got it working in the content area so it will work in a header position too - all you've got to do is put it there (think absolute positioning and z-index in the CSS to keep it in the foreground).

**Webiter** · 11-08-2012, 03:55 PM

Originally Posted by Beverleyh

I think you've answered your own question. You've got it working in the content area so it will work in a header position too - all you've got to do is put it there (think absolute positioning and z-index in the CSS to keep it in the foreground).

Thanks for responding. I have tried this in some different ways but without success.

The Marquee is controlled in the Dynamic Drive Script by the following:

Code:

var marqueewidth="600px"
var marqueeheight="65px"
var marqueespeed=2
var marqueebgcolor=""
var pauseit=1
var marqueecontent='<img src="album/marquee.gif"/>'

and its position on the page is a s follows:

HTML Code:

<div id="banner">
            <img src="album/hills.jpg" alt="Header Image" width="950"/>	

			<script src="my_js/cross_marq.js" type="text/javascript">
/*Cross browser Marquee script- (c) 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*/
</script>
</div>

I am not getting where the positioning and the z-index is to be installed.

**jscheuer1** · 11-09-2012, 03:49 AM

Do you mean something like this:

http://www.dynamicdrive.com/dynamicindex4/flyimage.htm

?

**vwphillips** · 11-09-2012, 10:42 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#marquee {
 position:absolute;visibility:hidden;left:100px;top:100px;width:800px;height:100px;border:solid red 1px;
}

#marquee DIV {
 visibility:visible;
}

#marquee2 {
 position:absolute;left:100px;top:200px;width:100px;height:500px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<div id="marquee" onmouseover="zxcMarquee('marquee',0);" onmouseout="zxcMarquee('marquee',-1);" >
 <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
</div>

<div id="marquee2" onmouseover="zxcMarquee('marquee2',0);" onmouseout="zxcMarquee('marquee2',2);" >
 <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Simple Marquee (09-November-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcMarquee(id,spd,mde){
 var o=zxcMarquee['zxc'+id],obj=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
 if (obj&&!o){
  var s=obj.getElementsByTagName('DIV')[0],clds=s.childNodes,lst=clds[clds.length-1],mde=mde=='top'?['top','offsetTop','offsetHeight']:['left','offsetLeft','offsetWidth'];
  if (lst.nodeType!=1){
   lst=lst.previousSibling;
  }
  obj.style.overflow='hidden';
  s.style.position='absolute';
  if (mde[0]=='left'){
   s.style.width='30000px';
  }
  o=zxcMarquee['zxc'+id]={
   mde:mde[0],
   s:s,
   sz:lst[mde[1]]+lst[mde[2]],
   lft:s[mde[1]],
   w:obj[mde[2]]
  }
 }
 if (o){
  o.lft+=spd;
  if ((spd>0&&o.lft>o.w)||(spd<0&&o.lft<-o.sz)){
   o.lft+=(o.w+o.sz)*(spd<0?1:-1);
  }
  o.s.style[o.mde]=o.lft+'px';
  clearTimeout(o.to);
  o.to=setTimeout(function(){ zxcMarquee(id,spd); },30);
 }
}

zxcMarquee('marquee',-1);
zxcMarquee('marquee2',2,'top');

/*]]>*/
</script>

</body>

</html>

or maybe

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#marquee {
 position:absolute;visibility:hidden;left:20px;top:100px;width:800px;height:100px;border:solid red 1px;
}

#marquee DIV {
 visibility:visible;
}

#marquee2 {
 position:absolute;left:20px;top:300px;width:800px;height:100px;border:solid red 1px;
}

#marquee3 {
 position:absolute;left:850px;top:20px;width:100px;height:500px;border:solid red 1px;
}

#marquee4 {
 position:absolute;left:960px;top:20px;width:100px;height:500px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<div id="marquee" onmouseover="zxcMarquee('marquee',0);" onmouseout="zxcMarquee('marquee',-1);" >
 <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
</div>

<div id="marquee2" onmouseover="zxcMarquee('marquee2',0);" onmouseout="zxcMarquee('marquee2',-1);" >
 <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
</div>

<div id="marquee3" onmouseover="zxcMarquee('marquee3',0);" onmouseout="zxcMarquee('marquee3',2);" >
 <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
</div>

<div id="marquee4" onmouseover="zxcMarquee('marquee4',0);" onmouseout="zxcMarquee('marquee4',2);" >
 <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
</div>


<script type="text/javascript">
/*<![CDATA[*/
// Simple Marquee (09-November-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcMarquee(id,spd,mde,fill){
 var o=zxcMarquee['zxc'+id],obj=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
 if (obj&&!o){
  var s=obj.getElementsByTagName('DIV')[0],clds=s.childNodes,lst=clds[clds.length-1],mde=mde=='top'?['top','offsetTop','offsetHeight','left']:['left','offsetLeft','offsetWidth','top'],sz,fill=fill===true,nu,c,z0=1;
  if (lst.nodeType!=1){
   lst=lst.previousSibling;
  }
  obj.style.overflow='hidden';
  s.style.position='absolute';
  if (mde[0]=='left'){
   s.style.width='30000px';
  }
  sz=lst[mde[1]]+lst[mde[2]];
  if (fill){
   nu=Math.ceil(obj[mde[2]]/sz)+1;
   c=s.cloneNode(true);
   for (;z0<nu;z0++){
    c=c.cloneNode(true);
    c.style[mde[0]]=sz*z0+'px';
    c.style[mde[3]]='0px';
    s.appendChild(c);
   }
  }
  o=zxcMarquee['zxc'+id]={
   mde:mde[0],
   s:s,
   sz:sz,
   lft:s[mde[1]],
   w:obj[mde[2]],
   fill:fill
  }
 }
 if (o){
  o.lft+=spd;
  if ((spd>0&&o.lft>(o.fill?0:o.w))||(spd<0&&o.lft<-o.sz)){
   o.lft+=(o.fill?o.sz:(o.w+o.sz))*(spd<0?1:-1);
  }
  o.s.style[o.mde]=o.lft+'px';
  clearTimeout(o.to);
  o.to=setTimeout(function(){ zxcMarquee(id,spd); },30);
 }
}

zxcMarquee('marquee',-1);
zxcMarquee('marquee2',1,'left',true);
zxcMarquee('marquee3',2,'top');
zxcMarquee('marquee4',-2,'top',true);

/*]]>*/
</script>

</body>

</html>

**Webiter** · 11-09-2012, 08:08 PM

Originally Posted by jscheuer1

Do you mean something like this:

http://www.dynamicdrive.com/dynamicindex4/flyimage.htm

?

I am seeking to have the Dynamic Drive marquee code drive the train in the header space just on top of the navigation at this position.

**ajfmrf** · 11-10-2012, 01:49 AM

Is this more or less what you are trying to do:
http://www.web-user.info/test/marquee/index.html

If it is just grab my files-css, myStyle.css and the, cross_marq.js file

**Webiter** · 11-10-2012, 12:55 PM

Originally Posted by ajfmrf

Is this more or less what you are trying to do:
http://www.web-user.info/test/marquee/index.html

If it is just grab my files-css, myStyle.css and the, cross_marq.js file

Yes, that is the result that I required. Have changed myStyle.css and index.html as required. When I click on cross_marq.js I get the following 404 page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>404 - File or directory not found.</title>
<style type="text/css">
<!--
body{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}
fieldset{padding:0 15px 10px 15px;} 
h1{font-size:2.4em;margin:0;color:#FFF;}
h2{font-size:1.7em;margin:0;color:#CC0000;} 
h3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} 
#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:"trebuchet MS", Verdana, sans-serif;color:#FFF;
background-color:#555555;}
#content{margin:0 0 0 2%;position:relative;}
.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}
-->
</style>
</head>
<body>
<div id="header"><h1>Server Error</h1></div>
<div id="content">
 <div class="content-container"><fieldset>
  <h2>404 - File or directory not found.</h2>
  <h3>The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.</h3>
 </fieldset></div>
</div>
</body>
</html>

I assume that some changes have been made to the cross_marq.js file but it will not present!

Is it the system or am i doing something incorrectly?