Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How the get scroll the div horizontal using left and right buttons

I have a class called portfolio-items where it will scroll horizontal. I need jQuery which helps me to scroll to the next and previous closest classes using my next and previous buttons. Need it more specific like on click my buttons it need the get the position of my closest div and scroll accordingly left or right.

Below Is my code

MARKUP

<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
    <div class='offer-pg'>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
    </div>
</div>

CSS

.offer-pg-cont{
    width: 100%;
    overflow-x: auto;
    margin: 0px;
}
span.arrow-left,span.arrow-right{
    display: block;
    position: absolute;
    background-color: #555;
    top: 40px;
    color:white;
    z-index: 2;
    cursor: pointer;
}
span.arrow-left{
    left: 0px;
}
span.arrow-right{
    right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
    background-color: #333;
}
.offer-pg{
    width: 1500px;
}
.item-wrapper.offer-con{
    background-color: #333 !important;
}
.offer-con .left-item h4 {
    color: #fff;
    font-weight: normal;
    margin: 0px;
}
.offer-con .right-item{
    float: right;
    padding: 10px;
}
.offer-con .right-item h5{
    color: #cb9944;
    margin: 0px;
    font-size: 14px;
}
.offer-pg > .portfolio-item{
    width: 100px;
    background-color:blue;
    margin-left:10px;
    float:left;
}

Please check my fiddle DEMO

Thanks.

like image 548
Benjamin Avatar asked Aug 01 '14 09:08

Benjamin


People also ask

How do I make a div scrollable horizontally?

For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.

How do I make a horizontal scroll?

Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.

How do I make Div scroll automatically?

Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do you use the scroll wheel horizontally?

Scroll horizontally using a keyboard and mousePress and hold SHIFT. Scroll up or down using your mouse wheel (or another vertical scrolling function of your mouse).


2 Answers

try

$(document).ready(function(){
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+100});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+100});
    });        
});

demo http://jsfiddle.net/xQh5J/177/

exactly you can detect width one item by :

var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));

And edit code

$(document).ready(function(){
    var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+widthOneItem});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+widthOneItem});
    });        
});

demo http://jsfiddle.net/xQh5J/180/

like image 117
HDT Avatar answered Oct 09 '22 18:10

HDT


I wrote a few lines and forked your fiddle: http://jsfiddle.net/jbrosi/c6kf2/ (I also accidentally updated yours - sorry for that).

This solution won't break if you manually scroll via mousewheel or keyboard in the container and it should respect items with varying sizes, too (just make sure your container is big enough for them to stay in one line).

$(document).ready(function() {

    //cache our items and containers
    var items = $(".portfolio-item");
    var scrollContainer = $(".offer-pg-cont");


    /**
     * Fetches the next or previous item from items
     *
     * @param conntainer {JQueryElement} scroll-container in which the items can be found
     * @param items {Array} items to be searched through
     * @param isNext {boolean} set to true (default) if you want the next item, to false if you want the previous one
     * @returns {*}
     */
    function fetchItem(container, items, isNext) {
        var i,
            scrollLeft = container.scrollLeft();

        //set isNext default to true if not set
        if (isNext === undefined) {
            isNext = true;
        }

        if (isNext && container[0].scrollWidth - container.scrollLeft() <= container.outerWidth()) {
            //we reached the last one so return the first one for looping:
            return $(items[0]);
        }

        //loop through items
        for (i = 0; i < items.length; i++) {

            if (isNext && $(items[i]).position().left > 0) {
                //this item is our next item as it's the first one with non-negative "left" position
                return $(items[i]);
            } else if (!isNext && $(items[i]).position().left >= 0) {
                //this is our previous item as it's the one with the smallest negative "left" position
                //if we're at item 0 just return the last item instead for looping
                return i == 0 ? $(items[items.length - 1]) : $(items[i-1]);
            }
        }

        //nothing found
        return null;
    }

    /**
     * Moves the scrollcontainer to the next/previous item (depending on event.data.direction).
     *
     * @param event
     */
    function moveToItem(event) {
        //fetch the next/previous item:
        var isNext = event.data.direction == "next";
        var item = isNext ? fetchItem(scrollContainer, items, true) : fetchItem(scrollContainer, items, false);

        if (item) {
            //scroll to item
            scrollContainer.animate({"scrollLeft": item.position().left + scrollContainer.scrollLeft()}, 400);
        }
    }

    //bind events
    $(".arrow-left").click({direction: "prev"}, moveToItem);
    $(".arrow-right").click({direction: "next"}, moveToItem);


});

Update: Edited the code so it loops when reaching first / last item

like image 27
jbrosi Avatar answered Oct 09 '22 18:10

jbrosi