Printable View
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?
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.
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...
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.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")
}
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.
Can anyone help???
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
Ages ago I made this script:
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.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>
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.
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.:blush:
And, if i want it to stop when mouseover it and display "alt", what should I add in?
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.
OK. almost done. First I'll give the code then say what I couldn't figure out.
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.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>
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.
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...:D
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 :sick: .
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. :confused: 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.:thumb: Thank you... thank you very much!!!
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>
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.:confused:
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
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!