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?
Printable View
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?
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.Quote:
Originally Posted by djr33
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>
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.Quote:
Originally Posted by Beverleyh
The Marquee is controlled in the Dynamic Drive Script by the following:
and its position on the page is a s follows:Code:var marqueewidth="600px"
var marqueeheight="65px"
var marqueespeed=2
var marqueebgcolor=""
var pauseit=1
var marqueecontent='<img src="album/marquee.gif"/>'
I am not getting where the positioning and the z-index is to be installed.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>
Do you mean something like this:
http://www.dynamicdrive.com/dynamicindex4/flyimage.htm
?
or maybeCode:<!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>
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>
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.Quote:
Originally Posted by jscheuer1
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:Quote:
Originally Posted by ajfmrf
I assume that some changes have been made to the cross_marq.js file but it will not present!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>
Is it the system or am i doing something incorrectly?
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?Quote:
Originally Posted by Beverleyh
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!Quote:
Originally Posted by jscheuer1
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
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
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.Quote:
Originally Posted by ajfmrf
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.
Actually, what you have up at:
train.webitry.net/
looks pretty good now. Just get rid of:
and in my_js/cross_marq.js change:Code:<script type="text/javascript" src="my_js/marquee.js"></script>
to:Code:var marqueecontent='<img src="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:Code:var marqueecontent='<img src="album/marquee.gif"/>'
You can play around with that 850px figure (two places) to get just the sort of effect you want.Code:var marqueecontent='<img src="album/marquee.gif" style="padding-right: 850px"/><img src="album/marquee.gif" style="padding-right: 850px"/>'
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?
Using a text only editor like NotePad, near the top of my_js/cross_marq.js find:
Change the highlighted:Code:var marqueewidth="945px"
var marqueeheight="65px"
var marqueespeed=2
var marqueebgcolor=""
var pauseit=1
var marqueecontent='<img src="album/marquee.gif"/>'
Code:var marqueewidth="945px"
var marqueeheight="65px"
var marqueespeed=2
var marqueebgcolor=""
var pauseit=0
var marqueecontent='<img src="album/marquee.gif"/>'