?
Solved

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

Posted on 2011-05-12
9
Medium Priority
?
364 Views
Last Modified: 2012-05-11
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
Comment
Question by:egoselfaxis
  • 3
  • 3
  • 3
9 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 35750131
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
 

Author Comment

by:egoselfaxis
ID: 35750189
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35750621
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:jonahzona
ID: 35750789
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35750840
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35751637
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
 

Author Comment

by:egoselfaxis
ID: 35753318
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
 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 35754704
put an iframe and put your scroller inside

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

all your problems will be gone :)
0
 

Author Comment

by:egoselfaxis
ID: 35755057
HainKurt -- that's actually what I ended up doing :)

http://67.137.35.175/

Thanks!
- yg
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question