desplazamiento horizontal DIV con botones

Not sure what I am doing wrong, I want de content of this DIV scroll horizontaly when I press the buttons. Got a lot of code from here, but now i'm stuck.....

<!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>Naamloos document</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<style>
#browser { float: left; width: 400px; overflow: auto; white-space: nowrap; }


</style>
</head>

<body>
<input type="button" class="leftArrow" value="left">

This is the DIV that should scroll

<div id="browser">
  <div class="innerWrapper">
      <div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
      <div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
      <div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
      <div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
      <div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
      <div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
      <div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
  </div>
</div>
<input type="button"  class="rightArrow" value="right">

I'm not sure if I should put my script here

<!--
<script>
   $('#right-button').click(function() {
      var leftPos = $('#content').scrollLeft();
      $('#content').animate({scrollLeft: leftPos - 200}, 800);
   });

      $('#left-button').click(function() {
        var leftPos = $('#content').scrollLeft();
      $('#content').animate({scrollLeft: leftPos + 200}, 800);
   });
</script>
-->

</body>
</html>

ligarse a DEMO

preguntado el 12 de junio de 14 a las 10:06

4 Respuestas

I got this working. New mark-up and script below.

Some issues you had:

  • The jQuery script was not wrapped in a "document ready" handler.
  • Various mismatched naming issues between your classes and ids.

Hope this helps (tested it locally):

  <div id="outer">
     <div id="inner">
        <div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
        <div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
        <div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
        <div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
        <div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
        <div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
        <div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
     </div>
  </div>
  <input type="button" id="left-button" class="leftArrow" value="left">
  <input type="button" id="right-button" class="rightArrow" value="right">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

  <script>
     $(function () {
        var outer = $('#outer');

        $('#right-button').click(function () {
           var leftPos = outer.scrollLeft();
           outer.animate({ scrollLeft: leftPos - 200 }, 800);
        });

        $('#left-button').click(function () {
           var leftPos = outer.scrollLeft();
           outer.animate({ scrollLeft: leftPos + 200 }, 800);
        });
     });
  </script>

And slightly renamed style:

<style>
   #outer {
      float: left;
      width: 400px;
      overflow: auto;
      white-space: nowrap;
   }
</style>

Respondido el 12 de junio de 14 a las 11:06

You may need to flip the "left" and "right" button logic. Currently at startup, if you click "Left" it scrolls the viewport to the right. - mario jorge

1)#right-button and #left-button missing in your both buttons.so use with class

2)use ready function for event handler.

3)use #browser instead #conten.because there is no id with this name.

4)use +200 for right and -200 for left in animate.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>
      $(document).ready(function () {
       $('.rightArrow').click(function() {
          var leftPos = $('#content').scrollLeft();
          $('#browser').animate({scrollLeft: leftPos + 200}, 800);
       });

          $('.leftArrow').click(function() { 
            var leftPos = $('#content').scrollLeft();
          $('#browser').animate({scrollLeft: leftPos - 200}, 800);
       });
          });
    </script> 

Respondido el 12 de junio de 14 a las 11:06

It seems that you have your script commented and it's also not pointing to the correct ids/classes. Also, you had the arrows going the opposite ways.

Here's how it should look like for the HTML you posted

<script>
   $('.rightArrow').click(function() {
      var leftPos = $('#browser').scrollLeft();
      $('#browser').animate({scrollLeft: leftPos + 200}, 800);
   });

      $('.leftArrow').click(function() {
      var leftPos = $('#browser').scrollLeft();
      $('#browser').animate({scrollLeft: leftPos - 200}, 800);
   });
</script>

Also, while you can put <script> elementos dentro del body, it would be better to add them to the head en su lugar.

Respondido el 12 de junio de 14 a las 10:06

#right-button would refer to a tag with id='#right-button' try '.rightArrow' instead ;) (or change in the input tag class by id, and use the right names)

Then put your script in the between <head></head>

Also, you are using scrollLeft, wich control the "scroll" that's means tou can use it on elements with overflow to scroll.

If you want to move, you should consider .offset or .position, y también .animate to add a visual effect

Respondido el 12 de junio de 14 a las 12:06

Estoy de acuerdo que puedes usar .offset e .position, but it also works with .animate e .scrollLeft - catalin deaconescu

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.