CODEWITHSUNDEEP
jqueryhtmlcss
Shir Gans
Shir Gans

Reputation: 2027

Move div scroll from right to left side of the scroll area

I'm looking for a solution of changing the location of a scroll for a div: http://neutrinoteam.com/clients/sezer-tech.com/?page_id=32

I want to move the scroll to be to the left of the items instead of the right side. Is there a solution for that ?

Thanks

Upvotes: 1

Views: 4125

Answers (5)

The Dark Knight
The Dark Knight

Reputation: 5585

The best way to do this will be to use : jscrollpane. See my code below :

JS :

$(function()
{
$('.scroll-pane').jScrollPane();
});

CSS :

/* Force the scroll bar to the left hand side of the screen */
.jspVerticalBar
{
    left: 0;
}

.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}

Find the WORKING SOLUTION HERE : http://jsfiddle.net/hDSnw/1/

I have developed the fiddle based on this RESOURCE. You can try this one out to see the various stuff you can do with jscrollpane .

Upvotes: 0

avrahamcool
avrahamcool

Reputation: 14094

try 'direction: rtl;' in the div css. but it will also affect the inner text, so put all the content in a wrapper div, and for the wrapper, change the direction back to ltr. Html:

<div id="Container">
    <div id="Content">
        bla bla
    </div>
</div>

CSS:

#Container
{
    direction: rtl;
}
#Content
{
    direction: ltr;
}

or combined

<div style="direction: rtl;">
    <div style="direction: ltr;">
        bla bla
    </div>
</div>

Upvotes: 2

dba
dba

Reputation: 240

Use the direction property for the main div (rtl), then for the items use ltr.

.career-list {
  height: 300px;
  width: 1000px;
  direction: rtl;
  overflow: auto;
}
.career-list-item{
  ...
  direction: ltr;
}

Upvotes: 1

Clem
Clem

Reputation: 11824

direction: rtl should work, but in this case whole text inside element and it's child elements will move to the right side I think, so you will have to add ltr direction to child elements.

Upvotes: 2

Kiran
Kiran

Reputation: 20313

Try direction:rtl; in your css.

#PARENT_DIV_ID{
    direction:rtl; 
    overflow:auto;
}

#PARENT_DIV_ID div{
    direction:ltr;
}

NOTE: I just considered inner text is in div.

Upvotes: 1

Related Questions