[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I get buttons to control the scroll?

Posted on 2012-08-27
12
Medium Priority
?
532 Views
Last Modified: 2012-10-15
Hello,

I want the left button to move the pictures one to the left, and the right button to move the pictures one to the right.  How do I do that?  Below is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function scrollImages() {
 var images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
  var  left = images[i].style.left.substr(0, images[i].style.left.length - 2);
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 8) + 'px';
  }
}
  setInterval("scrollImages()", 100);
</script>
<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute; padding-left:260px;}
#move_right {float:right; padding-right:500px;}
#move_left {float:left; padding-left: 40px;}
</style>
</head>

<body>

 <a href="#" id="move_left"> < </a>
<div id="coverBar">
<img width="82" height="115" style="left: 0px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverMatrix.jpg">
<img width="82" height="115" style="left: 88px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverHolyGrail.jpg">
<img width="82" height="115" style="left: 176px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverFuturama.jpg">
<img width="82" height="115" style="left: 264px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDrStrangelove.jpg">
<img width="82" height="115" style="left: 356px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDeadRingers.jpg">
<img width="82" height="115" style="left: 444px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRobotChicken.jpg">
<img width="82" height="115" style="left: 532px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRaisingArizona.jpg"> 
</div>
<a href="#" id="move_right"> > </a>
</body>
</html>
                                  

Open in new window

0
Comment
Question by:NewWebDesigner
  • 5
  • 4
10 Comments
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1336 total points
ID: 38341676
1) remove the setinterval and add
return false to the end of that function
2) add onclick="return scrollimages(-1)" to the left button and
onclick="return scrollimages(1)"
to the right

Then where it says -2 you change to
+(dir*imageWidth) where imageWidth is a var that holds the witdth of one Image assuming they all have same width

If you need animation we need more code and there likely need to be an additional if to handle when you are extreme right but I'm on my iPhone and cannot test easily
0
 

Author Comment

by:NewWebDesigner
ID: 38342744
Thanks for the response.  I added the code to where you suggested.  I see where you going with this, but it is still not working.  Am I adding the code in the wrong places?  Do you know why my left "<"  does not turn to a hand when you hover over it and the right ">" does?

Thanks,

Here is the updated 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function scrollImages() {
 var images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
  var  left = images[i].style.left.substr(0, images[i].style.left.length +(dir*imageWidth));
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 8) + 'px';
  }
  return false;
}
  
</script>
<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute; padding-left:260px;}
#move_right {float:right; padding-right:500px;}
#move_left {float:left; padding-left: 40px;}
</style>
</head>

<body>

 <a href="#" id="move_left" onclick="return scrollimages(-1)" > < </a>
<div id="coverBar">
<img width="82" height="115" style="left: 0px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverMatrix.jpg">
<img width="82" height="115" style="left: 88px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverHolyGrail.jpg">
<img width="82" height="115" style="left: 176px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverFuturama.jpg">
<img width="82" height="115" style="left: 264px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDrStrangelove.jpg">
<img width="82" height="115" style="left: 356px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDeadRingers.jpg">
<img width="82" height="115" style="left: 444px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRobotChicken.jpg">
<img width="82" height="115" style="left: 532px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRaisingArizona.jpg"> 
</div>
<a href="#" id="move_right" "return scrollimages(1)"> > </a>
</body>
</html>
                                  

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1336 total points
ID: 38342805
Please pass dir in
function scrollimages(dir)
0
Independent Software Vendors: 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!

 

Author Comment

by:NewWebDesigner
ID: 38343288
thanks,


I added "dir" and it is still not moving.  anything else to try?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function scrollImages(dir) {
 var images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
  var  left = images[i].style.left.substr(0, images[i].style.left.length +(dir*imageWidth));
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 8) + 'px';
  }
  return false;
}
  
</script>
<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute; padding-left:260px;}
#move_right {float:right; padding-right:500px;}
#move_left {float:left; padding-left: 40px;}
</style>
</head>

<body>

 <a href="#" id="move_left" onclick="return scrollimages(-1)" > < </a>
<div id="coverBar">
<img width="82" height="115" style="left: 0px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverMatrix.jpg">
<img width="82" height="115" style="left: 88px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverHolyGrail.jpg">
<img width="82" height="115" style="left: 176px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverFuturama.jpg">
<img width="82" height="115" style="left: 264px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDrStrangelove.jpg">
<img width="82" height="115" style="left: 356px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDeadRingers.jpg">
<img width="82" height="115" style="left: 444px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRobotChicken.jpg">
<img width="82" height="115" style="left: 532px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRaisingArizona.jpg"> 
</div>
<a href="#" id="move_right" "return scrollimages(1)"> > </a>
</body>
</html>
                                  

Open in new window

0
 

Author Comment

by:NewWebDesigner
ID: 38347157
any other suggestions?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38347301
A few issues from my side

Missed setting imageWidth and added the width in the wrong place

http://jsfiddle.net/mplungjan/td5Zk/

Is the fiddle I am working on, but I seriously cannot work from my vacation using only an iPad with rudimentary error handling and no console.

I'll get back in a few days, but let's see who else can help
0
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 664 total points
ID: 38357343
Not sure if this is an academic project to learn JS or a "real" task, but if it is the latter, this might be interesting:
http://wowslider.com/index.html#overview
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38360142
This works better

http://jsfiddle.net/mplungjan/td5Zk/

1) changed scrollimages to scrollImages
2) moved the div which was covering the links so they now can be clicked
0
 

Author Comment

by:NewWebDesigner
ID: 38400268
mplungjan,

The right ">" link doesn't move the books, but otherwise it works.  Any idea why that is?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38400454
No, not really.

I can look on Monday or later this weekend
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…
Suggested Courses

834 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