scrolling image marquee/javascript

**blur** · Sep 20th, 2004, 03:46 AM

I have a rather long scrolling marquee with pictures, scrolling from the right to the left of my screen. After the last picture there is a blank and the marquee only starts again when the last picture disappeared.
Is there a code that starts the marquee again BEFORE finishing the previous loop, so there is no blank space?

**CornedBee** · Sep 20th, 2004, 07:29 AM

No, there isn't. That's not the way MARQUEE (a stupid non-standard tag btw) works.

If you implemented the whole thing in JavaScript, then there might be a way.

**blur** · Sep 20th, 2004, 08:00 AM

Oh cool... Javascript... hmmm... ok. I'll post my javascript tomorrow on this topic (it's not in this computer now) and I need anyone here to help me something about it coz I'm out of idea on how to implement it. That's why I resorted to marquee but this stupid marquee have another problem, sigh...

**blur** · Sep 20th, 2004, 07:35 PM

Code:

var largvisio=330
var hautvisio=145
var vitessevisio=4

var visio_gd=new Array()

visio_gd[0]='<a href="http://"><img src="1.gif" border=1 alt="This is one" ></a>'
visio_gd[1]='<a href="http://"><img src="2.gif" border=1 alt="This is two"></a>'
visio_gd[2]='<a href="http://"><img src="3.gif" border=1 alt="This is three"></a>'
visio_gd[3]='<a href="http://"><img src="1.gif" border=1 alt="This is four"></a>'
visio_gd[4]='<a href="http://"><img src="2.gif" border=1 alt="This is five"></a>'

var visio_final=''
for (i=0;i<visio_gd.length;i++)
  visio_final = visio_final + visio_gd[i] + "  "

var vitessevisio=4
if (document.all)
{
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+largvisio+'">'+visio_final+'</marquee>')
ieslider.scrollAmount=0
ieslider.scrollAmount=vitessevisio

ieslider.onmouseover=new Function("ieslider.scrollAmount=0")

ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=vitessevisio")
}

This effect scroll from one end of the browser to another, I don't want this to happen, I just want it to scroll in specified width. What should I modified??? Just like what marquee allow me to do. This code also left a blank like what I had describe in the 1st post.

By the way, I want it to display somewhere in between the body but this one display at the top. What should I do to allow me to display it anywhere in the body. I tried to put in the body with [code]<script language="javascript">[code] but nothing display.

My javascript skill is somehow wiped out already, can't seemed to get anything back, plz help.

**blur** · Sep 21st, 2004, 08:35 PM

Can anyone help???

**Ecniv** · Sep 23rd, 2004, 09:19 AM

A bit of Javascript and some Css (Dhtml?) might work... Better if you did it in flash though - smoother

You'd need to create the array (you've done that)
either grab elements and move them around or replace the insides of an element (.innerHTML) with the new movement every so often as fast as the scroll you want.

Flash would be smoother, but may take you longer to make.... dunno otherwise.

Vince

**Acidic** · Sep 23rd, 2004, 09:26 AM

Ages ago I made this script:

Code:

<html>
<head>
<title>Scrolling news :: Acid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

news = new Array()
news[0] = ["BBC","http://www.bbc.co.uk"] //This will be the last one
news[1] = ["VBforums","http://www.vbforums.com"] //This is the first one
news[2] = ["Hotmail","http://www.hotmail.com"] //The second one
news[3] = ["Altavista","http://www.altavista.com"]
news[4] = ["Google","http://www.google.com"]
news[5] = ["Js-X","http://www.js-x.com"]
news[6] = ["MSN","http://www.msn.com"] //The last but one news item.
function scrollit() {
for (i=0; i<news.length; i++)
	{
	var temp = parseInt(document.getElementById("Div" + i).style.top)-1
	var temp = temp + "px"
	document.getElementById("Div" + i).style.top = temp
	document.getElementById('topval').value = temp
	document.getElementById('divval').value = "Div" + i
	if (parseInt(document.getElementById('topval').value) < 0) //This zero says how high the DIVs go before sent back down
		{
		var temp2 = 50+20*news.length //Change this fifty to change how far down the news items go.
		var temp2 = temp2 + "px"
		document.getElementById(document.getElementById('divval').value).style.top = temp2
		}
	}
}
</script>
</head>

<body>
<input type="hidden" value="0" id="topval">
<input type="hidden" value="0" id="divval">
<script language="JavaScript">
for (i=0; i<news.length; i++)
	{
	document.write("<div id='Div" + i + "' style='position:absolute; left:20px; top:" + (50+20*i) + "px; width:250px; height:12px; z-index:1'><a href='" + news[i][1] + "'>" + news[i][0] + "</a></div>") //Change this fifty to change how far down the news go.
	}
setInterval('scrollit()','50')
</script>
</body>
</html>

That will scroll text upwards. You will have to change it slightly a couple of times. Once to allow images to be scrolled, and once more to make it scroll sideways. See if you can do it yourself first.

**blur** · Sep 24th, 2004, 04:22 AM

Thanks

I'll try the code.
By the way I did use flash and also siwsh to do that but the problem is that it cannot display "alt" on each picture.

By the way scrolling it upward is actually what i wanted. Thanks again.

**blur** · Sep 24th, 2004, 08:36 PM

This is werid, ok, I got the text scroll directly from your code, but I can't seemed to put it anywhere in the BODY I wanted, Let's say I have a table with 2 rows and I want my normal text to appear in first row, then the scrolling in the second row, but it doesn't dislay there even when i put the code in the second row. It always appeared at the top left. Anything need to be added in there?

Oh and this is very embarassing, I don't know how to replace the "words" with pictures/images.

And, if i want it to stop when mouseover it and display "alt", what should I add in?

**Acidic** · Sep 25th, 2004, 07:14 AM

yeah, the positioning is due to my CSS. I'll change the code today to how you want it. Though I'm not sur how to stop onMouseOver. I'll give it a try though.

**Acidic** · Sep 25th, 2004, 09:24 AM

OK. almost done. First I'll give the code then say what I couldn't figure out.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scrolling news :: Acid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.scrollImg {
	position:relative;
	height:0px;
	z-index:1
}
</style>
<script language="JavaScript" type="text/JavaScript">

var width = 50 //Change this to change how far down the news items go.
var img_width = 80 //Change this to the height of the images.
var leftval
var divval
var flag = true

imgs = new Array()
imgs[0] = "<img src='1.jpg' alt='last image' />" //This is the last image
imgs[1] = "<img src='2.jpg' alt='first image' />" //This is the first one
imgs[2] = "<img src='3.jpg' alt='second image' />" //The second one
imgs[3] = "<img src='4.jpg' alt='third image' />"
imgs[4] = "<img src='5.jpg' alt='fourth image' />"
imgs[5] = "<img src='6.jpg' alt='fifth image' />"
imgs[6] = "<img src='7.jpg' alt='last but one image' />" //The last but one news item.
function scrollit() {
if (flag)
	{
	for (i=0; i<imgs.length; i++)
		{
		var temp = parseInt(document.getElementById("Div" + i).style.left)-1
		var temp = temp + "px"
		document.getElementById("Div" + i).style.left = temp
		leftval = temp
		divval = "Div" + i
		if (parseInt(leftval) <= 0) //This zero says how far left the DIVs go before sent back
			{
			var temp2 = width+img_width*imgs.length 
			var temp2 = temp2 + "px"
			document.getElementById(divval).style.left = temp2
			}
		}
	}
}

function set_flag(bool)	{
flag = bool
}
</script>
</head>

<body>
<script language="JavaScript">
document.write("<div onmouseover='set_flag(false)' onmouseout='set_flag(true)'>")
for (i=0; i<imgs.length; i++)
	{
	document.write("<div class='scrollImg' id='Div" + i + "' style='left:" + (width+img_width*i) + "px;'>" + imgs[i] + "</div>")
	}
setInterval('scrollit()','50')
document.write("</div>")
</script>
</body>
</html>

OK, now it scrolls horizontally, it stop when you move your mouse over it and it start again when you move your mouse off it. Also it won't automatically jump to the top left of the screen.

The only thing I can't figure out is why the images don't show the alt text when the mouse is over them. Anyways, I hope that this will do the trick.

Edit: I've edited the code to fix a few typos. Make sure you have the new code.

**blur** · Sep 25th, 2004, 10:46 PM

Acidic,

It's so kind of you

really appreciate it, I haven't tried it out yet but it looks "delicious" coz everything is in the other computer that i cannot access until tomorrow. Will try it out.

I've been stucked in this scrolling thinggy for 2 weeks plus, hopefully this will end soon. Really almost knock my head to the wall LOL...

**blur** · Sep 26th, 2004, 09:58 PM

Acidic,

I've tried out ur code and it works, well.. horizontally... then i tried to modified the code to make it go vertically, upward(I tried to refer to the vertical scrolling text code that u provided, and of course change whatever it needed), the whole thing become "undefined" and could not even scroll

.

I don't know am I asking too much or what, hmmm... mind to tell me where to change? I might have missed out or changed the wrong thing.

I'm so blur...

The display position is fine, mouseover and alt displayed too. It appeared where i wanted, basically this is solved. Thanks for it.

Thank you... thank you very much!!!

**Acidic** · Sep 27th, 2004, 06:06 AM

This is the same thing but vertical scroll. I've commented in what I changed.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scrolling news :: Acid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.scrollImg {
	position: relative;
	height: 0px;
	width: 0px; /*new line, maybe not needed */
	z-index: 1;
}
</style>
<script language="JavaScript" type="text/JavaScript">

var height = 50 //Change this to change how far down the news items go. //renamed variable
var img_height = 80 //Change this to the height of the images. //renamed variable
var topval //renamed variable
var divval
var flag = true

imgs = new Array()
imgs[0] = "<img src='1.jpg' alt='last image' />" //This is the last image
imgs[1] = "<img src='2.jpg' alt='first image' />" //This is the first one
imgs[2] = "<img src='3.jpg' alt='second image' />" //The second one
imgs[3] = "<img src='4.jpg' alt='third image' />"
imgs[4] = "<img src='5.jpg' alt='fourth image' />"
imgs[5] = "<img src='6.jpg' alt='fifth image' />"
imgs[6] = "<img src='7.jpg' alt='last but one image' />" //The last but one news item.
function scrollit() {
if (flag)
	{
	for (i=0; i<imgs.length; i++)
		{
		var temp = parseInt(document.getElementById("Div" + i).style.top)-1 //changed .left to .top
		var temp = temp + "px"
		document.getElementById("Div" + i).style.top = temp//changed .left to .top
		topval = temp //used renamed variable
		divval = "Div" + i
		if (parseInt(topval) <= 0) //This zero says how far left the DIVs go before sent back //used renamed variable
			{
			var temp2 = height+img_height*imgs.length //used renamed variable (x2)
			var temp2 = temp2 + "px"
			document.getElementById(divval).style.top = temp2 //changed .left to .top
			}
		}
	}
}

function set_flag(bool)	{
flag = bool
}
</script>
</head>

<body>
<script language="JavaScript">
document.write("<div onmouseover='set_flag(false)' onmouseout='set_flag(true)'>")
for (i=0; i<imgs.length; i++)
	{
	document.write("<div class='scrollImg' id='Div" + i + "' style='top:" + (height+img_height*i) + "px;'>" + imgs[i] + "</div>") //used renamed variable (x2), changed left to top
	}
setInterval('scrollit()','50')
document.write("</div>")
</script>
</body>
</html>

**blur** · Sep 27th, 2004, 09:41 PM

Acidic,
I had put the result in my temporary page:
http://www.angelfire.com/on3/brieflash/temp/temp2.html
Plz have a look. Did u encounter this problem with your code? The code i used it copy directly from what i u gave me.

**Acidic** · Sep 28th, 2004, 07:06 AM

I cannot make images slit up like that in JavaScript. You'll need to use flash for that, but I don't know how to do it there. sorry

**blur** · Sep 28th, 2004, 08:33 AM

Thanks anyway Acidic, it's very kind of you, I had came across websites that can do it (too bad i lost all the links) but i tried to find everywhere in the net for the code and couldn't find any. It's all right, u've been very helpful, at least for the scrolling text is successful

and this is pretty useful for me too.
Thanks again!

Thread: scrolling image marquee/javascript

Thread Tools

Display

scrolling image marquee/javascript

Posting Permissions