Reputation: 456

Horizontal Div Scroll

I'm quite new to Jquery, I'm trying to implement horizontal scrolling on a div using the scrollLeft property, I'm not getting any error messages and nothing seems to be working, could someone explain why? Thanks in advance this is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
        $(document).ready (function(){
            var pos  = $("#container").scrollLeft();
            $(".prev").click(function(){
                $("#container").animate({
                    scrollLeft: pos - 200;
                });
            }); 
        });
    
        
        
  </script>

<style>
        #container{
            max-width: 938px;
            height: 500px;
            border: 2px solid black;
            margin-left: auto;
            margin-right: auto;
            overflow: scroll;
            /*display: table;*/
        }
        .picsdiv{
            display: table-cell;
            min-width: 286px;
            padding-right: 80px;
            height: 508px;
            border: 2px solid pink;
            
        }
        
        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 250px;
          width: auto;
          margin-top: -22px;
          padding: 16px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
            border: 2px solid pink;
        }

        .next {
          right: 170px;
          border-radius: 3px 0 0 3px;
        }
        .prev{
            left: 170px;
        }

        .prev:hover, .next:hover {
          background-color: rgba(0,0,0,0.8);
        }
    </style>

  
<body>
   <div id="container">
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <a class="prev">&#10094;</a>
      <a class="next">&#10095;</a>
    </div> 
    
</body>

Upvotes: 1

Answers (4)

Kamal Singh

Reputation: 1000

You have done 2 mistakes in your code:

scrollLeft: pos - 200; should be like scrollLeft: (pos - 200), because you are passing an object as parameter
Write two <script> tags, one for jQuery, like below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javacsript"></script>

And another for your custom java-script

<script type="text/javascript">    
    $(document).ready (function(){
        var pos  = $("#container").scrollLeft();
        $(".prev").click(function(){
            $("#container").animate({
                scrollLeft: (pos - 200)
            });
        }); 
    });

Because you can not write code inside element if you are using ths element as external reference.

Here is your complete running code

<html>
<head>
<style>    
    #container{
    max-width: 938px;
    height: 500px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
    /*display: table;*/
    }
    .picsdiv{
    display: table-cell;
    min-width: 286px;
    padding-right: 80px;
    height: 508px;
    border: 2px solid pink;
    }
    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 250px;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    border: 2px solid pink;
    }
    .next {
    right: 170px;
    border-radius: 3px 0 0 3px;
    }
    .prev{
    left: 170px;
    }
    .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    }
</style>
</head>
<body>
    <div id="container">
        <div class="picsdiv">
        </div>
        <div class="picsdiv">
        </div>
        <div class="picsdiv">
        </div>
        <div class="picsdiv">
        </div>
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">    
    $(document).ready (function(){
            var pos  = $("#container").scrollLeft();
            $(".prev").click(function(){
                $("#container").animate({
                    scrollLeft: (pos - 200)
                });
            }); 
        });
</script>
</html>

Upvotes: 0

MGS

Reputation: 456

I just added a seperate script tag for the Jquery code and used the first one to only refer to the library and it now works. Thanks for all your help

Upvotes: 0