CODEWITHSUNDEEP
jquerycss
Ruther Bergonia
Ruther Bergonia

Reputation: 137

How to make a div scrollable from left to right

So heres the css for the div that should be scrollable 

.form-holder{
        padding-left: 20px;
        width: auto;
        background: ;
        overflow: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

each time I upload image preview is available and i wanted those image be viewed horizontally not vertically. so I wanted the div to be scrollable left to right

heres the fiddle : http://jsfiddle.net/roowako/AZvuL/

Upvotes: 1

Views: 1154

Answers (4)

web-tiki
web-tiki

Reputation: 103750

I am assuming this is what you want to create :

FIDDLE

HTML :

<div class="form-holder">
    <div class="img_wrap">
        <img src="http://lorempixel.com/output/nature-q-c-280-280-4.jpg" />
        <img src="http://lorempixel.com/output/sports-q-c-280-280-2.jpg" />
        <img src="http://lorempixel.com/output/city-q-c-280-280-9.jpg" />
        <img src="http://lorempixel.com/output/fashion-q-c-280-280-1.jpg" />
    </div>
</div>

CSS :

.form-holder {
    padding-left: 20px;
    width: 300px;
    background: grey;
    overflow: auto;
    max-height: 300px;
    padding-bottom: 30px;
}
.img_wrap {
    width: 1120px;  /*width of all images */
}
.form-holder img {
    float:left;
}

Upvotes: 1

Qussay Najjar
Qussay Najjar

Reputation: 591

Use jQuery and Mouse Wheel Plugin to bind a mousewheel event on the div you want to have a horizontal scrolling on.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(document).ready(function() {
$('#divId').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 30);
    e.preventDefault();
});
});
</script>

You can change the number multiplied by delta (30 in my example) to set the number of pixels moved on each scroll.

Upvotes: 1

naoxink
naoxink

Reputation: 597

Fiddle: http://jsfiddle.net/s6AsC/

You have to limit the size and set the overflow-x to auto

.form-holder{
        padding-left: 20px;
        height: 300px; /* if you want to set the height */
        width: 300px;
        background: ;
        overflow-y: hidden;
        overflow-x: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

Upvotes: 0

Thomas
Thomas

Reputation: 1420

Limit the width of your div if you want to scroll horizontally

.form-holder{
        padding-left: 20px;
        width: 300px;
        background: ;
        overflow: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

Upvotes: 0

Related Questions