PDA

View Full Version : 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
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:


<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
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:


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:




<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
<!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


<!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
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 (http://www.train.webitry.net).

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
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:


<!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?

Beverleyh
11-10-2012, 05:01 PM
The script is there - we can see it working - so view the source code of the page that ajfmrf has kindly prepared for you and copy the script path into your browser to download the js file.

Webiter
11-10-2012, 05:28 PM
The script is there - we can see it working - so view the source code of the page that ajfmrf has kindly prepared for you and copy the script path into your browser to download the js file.

Thanks Beverleyh and ajfmrf and all others who contributed to the tread. I can see the script working and it is working perfectly. When I click on the page I go to View Page Source. When I click on the "marquee.js" it goes over to the 404 page code as I indicated. I have not seen this before - am I missing something?

jscheuer1
11-10-2012, 05:35 PM
Yes. You're not using that script, its tag may be removed. The marquee is being driven by another script. On your current as of this typing:

train.webitry.net/

page, it's using this script:

train.webitry.net/my_js/cross_marq.js

Webiter
11-10-2012, 06:35 PM
Yes. You're not using that script, its tag may be removed. The marquee is being driven by another script. On your current as of this typing:

train.webitry.net/

page, it's using this script:

train.webitry.net/my_js/cross_marq.js

This is :o train now thinks it is an aircraft!

ajfmrf
11-10-2012, 07:51 PM
it is not at the top unless you got the wrong script in use.


Okay here are all the files for the page:


http://www.web-user.info/test/marquee/cross_marq.js
http://www.web-user.info/test/marquee/myStyle.css
http://www.web-user.info/test/marquee/background.jpg
http://www.web-user.info/test/marquee/hills.jpg
http://www.web-user.info/test/marquee/marquee.gif

This is there but not for what I was working on it must
be for something else you want .
http://www.web-user.info/test/marquee/popup.js

If you don't use my css file(myStyle.css) it will not appear
as you want it

Webiter
11-10-2012, 08:28 PM
I have used your css page and it still flies around in the clouds! The only thing I had to change was the path to the hills.jpg
It effect is working as required in your test arrangement but somehow I cannot get it to transfer.
http://www.web-user.info/test/marquee/myStyle.css

ajfmrf
11-10-2012, 10:05 PM
Well the page is there and if you can't transfer it copy and paste it............

Webiter
11-11-2012, 11:07 AM
Well the page is there and if you can't transfer it copy and paste it............

Yes, I copied and pasted the css file and the .js file but no go. That is what I mean by the can't transfer.... it has me foxed.

Beverleyh
11-11-2012, 01:57 PM
I think this might be a good time for you to look at a basic CSS tutorial - you've been provided with all the materials but now you need a better understanding of how to use them. Unfortunately, we cannot do that for you. I appreciate that this is probably not what you want to hear but learning how to manipulate HTML and CSS for yourself will put you in much better stead in the future.

jscheuer1
11-11-2012, 04:16 PM
Actually, what you have up at:

train.webitry.net/

looks pretty good now. Just get rid of:


<script type="text/javascript" src="my_js/marquee.js"></script>

and in my_js/cross_marq.js change:


var marqueecontent='<img src="marquee.gif"/>'

to:


var marqueecontent='<img src="album/marquee.gif"/>'

The only remaining issue at that point should be that the train disappears suddenly as it nears the left side of the banner. I think that might be able to be fixed by changing the marqueecontent variable to include two train images with a lot of space between them, something like:


var marqueecontent='<img src="album/marquee.gif" style="padding-right: 850px"/><img src="album/marquee.gif" style="padding-right: 850px"/>'

You can play around with that 850px figure (two places) to get just the sort of effect you want.

Webiter
11-11-2012, 09:00 PM
Thanks guys a great result. :) I note that when the mouse goes over the train it stops. Can the marquee be fiddled to disable this unwanted mouse control?

jscheuer1
11-12-2012, 01:03 PM
Using a text only editor like NotePad, near the top of my_js/cross_marq.js find:


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

Change the highlighted:


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