• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 370
  • Last Modified:

Need help controlling placement of javascript-based horizontal image scroller (or with finding replacement)

I found the following javascript-based horizontal image scroller recently, and need some help controlling the placement of it within my client's website:

http://www.fortochka.com/JavaScript/HorScroller/

No matter what I try, .. I can't seem to be able to scroll my images inside a 1000px wide centered DIV in the middle of my page.  It seems that the only way I can get the images to scroll properly, is to have the scroller javascript be the only thing in the page -- and for me to also exclude the doctype type declaration.

Can anyone here either assist me with updating this javacript so that it's more XHTML compliant, .. or maybe reccommend something more current that achieves a similar effect?

What's unique about this javascript is that it "loops" through the images, .. meaning that when the full list of images within the array has been cycled through already, .. it then starts over, by dynamically appending images to the end of the array.

Any help would be appreciated.

Thanks!
- Yvan
0
egoselfaxis
Asked:
egoselfaxis
  • 3
  • 3
  • 3
1 Solution
 
HainKurtSr. System AnalystCommented:
if you look at scroller.htm file from download you will need this

I made some changes, have a look at this

onLoad="setScroller('frmScroll')"

this is saying, set the scroll into this element and it is called when page is loaded...
this way, you can add all your stuff to to this page after...
<script>
var pic = new Array()

function banner(name, width, link){
	this.name = name
	this.width = width
	this.link = link
}

pic[0] = new banner('http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg',102,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')
pic[1] = new banner('http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg',102,'http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg')
pic[2] = new banner('http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg',102,'http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg')
pic[3] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg')
pic[4] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg')
pic[5] = new banner('http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg',102,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')
pic[6] = new banner('http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg',102,'http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg')
pic[7] = new banner('http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg',102,'http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg')

var speed = 50

var kk = pic.length
var ii
var hhh
var nnn
var myInterval
var myPause
var mode = 0


var imgArray = new Array(kk)
var myLeft = new Array(kk)

for (ii=0;ii<kk;ii++){
imgArray[ii] = new Image()
imgArray[ii].src = pic[ii].name
imgArray[ii].width = pic[ii].width

	hhh=0 
	for (nnn=0;nnn<ii;nnn++){
		hhh=hhh+pic[nnn].width
	}
	myLeft[ii] = hhh
}

function ready(){
	for (ii=0;ii<kk;ii++){ 
		if (document.images[ii].complete == false){
			return false	
			break
		}
	}
return true
}


function startScrolling(){
	if (ready() == true){		
		window.clearInterval(myPause)
		myInterval = setInterval("autoScroll()",speed)	
	}
}	
	

function autoScroll(){
	for (ii=0;ii<kk;ii++){
		myLeft[ii] = myLeft[ii] - 1
		
	if (myLeft[ii] == -(pic[ii].width)){
		hhh = 0
		for (nnn=0;nnn<kk;nnn++){
			if (nnn!=ii){
				hhh = hhh + pic[nnn].width
			}			
		}
		myLeft[ii] =  hhh
	}
		
				
		document.images[ii].style.left = myLeft[ii]
	}
	mode = 1
}

function stop(){
	if (mode == 1){
		window.clearInterval(myInterval)
	}
	if (mode == 0){
		window.clearInterval(myPause)
	}	
}

function go(){
	if (mode == 1){
		myInterval = setInterval("autoScroll()",speed)
	}
	if (mode == 0){
		myPause = setInterval("startScrolling()",3000)
	}	
}

myPause = setInterval("startScrolling()",3000)

function setScroller(elmID){
  var target = document.getElementById(elmID);
  var html;
	for (ii=0;ii<kk;ii++){
		html += '<a href = ' + pic[ii].link + ' target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=75 style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>';
	}
	target.innerHTML = html;
}
</Script>

<body onLoad="setScroller('frmScroll')">
Scroller demo
<div id=frmScroll style="border:1px solid gray; width:120"></div>
</body>

Open in new window

0
 
egoselfaxisAuthor Commented:
It doesn't work.  At least -- try positioning the div somewhere else on the page, .. and you'll see that the scroller doesn't budge.

<div id="frmScroll" style="width:500px;margin-top:100px;"></div>

- yg

 
0
 
jonahzonaCommented:
Well, from what I can tell, the script gives it a style of position: absolute; top: 0;

This is going to always leave it at the top. Can you remove the top: 0 in the script? This may let you  move it around.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
jonahzonaCommented:
I went ahead and removed all the top: 0pt from each embedded image. I was then able to move it around with a simple styled div.

Here is the code.

 
<div style="margin-top: 200px;">
<script>
for (ii=0;ii<kk;ii++){
document.write('<a href = ' + pic[ii].link + ' target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=75 style=top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')
}
</script><a href="http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg" target="_blank"><img space="0" style="position: absolute;  left: 1108px;" src="http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg" target="_blank"><img space="0" style="position: absolute;  left: 1210px;" src="http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg" target="_blank"><img space="0" style="position: absolute;  left: 1312px;" src="http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg" target="_blank"><img space="0" style="position: absolute;  left: 1414px;" src="http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg" target="_blank"><img space="0" style="position: absolute;  left: -14px;" src="http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg" target="_blank"><img space="0" style="position: absolute;  left: 88px;" src="http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg" target="_blank"><img space="0" style="position: absolute;  left: 190px;" src="http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg" target="_blank"><img space="0" style="position: absolute;  left: 292px;" src="http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg" target="_blank"><img space="0" style="position: absolute;  left: 394px;" src="http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg" target="_blank"><img space="0" style="position: absolute;  left: 496px;" src="http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg" target="_blank"><img space="0" style="position: absolute;  left: 598px;" src="http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg" target="_blank"><img space="0" style="position: absolute;  left: 700px;" src="http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg" target="_blank"><img space="0" style="position: absolute;  left: 802px;" src="http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg" target="_blank"><img space="0" style="position: absolute;  left: 904px;" src="http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a><a href="http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg" target="_blank"><img space="0" style="position: absolute;  left: 1006px;" src="http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg" onmouseover="stop()" onmouseout="go()" vspace="0" border="0" height="75" hspace="0"></a>

</div>

Open in new window

0
 
jonahzonaCommented:
Sorry about not having word wrap turned on...

Here is a screenshot of the scroller in the middle of the screen with the code above.

 Screenshot
0
 
HainKurtSr. System AnalystCommented:
you should use

style=position:absolute

-->

style=position:relative

or just remove it, so images will adjust themselves in the div element in my sample... and you can put that div anywhere...
0
 
egoselfaxisAuthor Commented:
Although it's true that removing "top:0;" allows me to change the vertical placement of the scroller, ..  changing "position:absolute" to "position:relative" breaks the scroller.

Additionally, it appears to not be possible to center the scroller horizontally within the page --- it always behaves as though I have it set to "left:0;".

Lastly -- the scroller stops working entirely as soon as I add a doctype declaration:

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

As I mentioned in my original post, .. this code appears to not be XHTML compliant.

- Yvan
0
 
HainKurtSr. System AnalystCommented:
put an iframe and put your scroller inside

<iframe src="srcoller.htm" style="...."></iframe>

all your problems will be gone :)
0
 
egoselfaxisAuthor Commented:
HainKurt -- that's actually what I ended up doing :)

http://67.137.35.175/

Thanks!
- yg
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now