jQuery Scrollable Center Active Frame

Question

I'm using jQuery Tools Scrollable plugin. I'm trying to make it so that the active frame is in the center of the screen.

I have the Scrollable wrapper set to 100% width and it works great, but the active frame is aligned to the left. What I want is for the active frame to be center. For a better explanation, see this mockup of what I'm trying to achieve.

How do I center the active frame?

FYI: This is my structure:

<div class="scrollable">
    <div class="prev browse left disabled"></div>

    <div class="items">
        <div class="pane">
            Content
        </div>
        <div class="pane">
            Content
        </div>
    </div>

    <div class="next browse left"></div>
</div>

Thanks!

Not related - but what the heck is that photo of? – Craig Shearer Dec 21 '11 at 18:30 — Craig Shearer, Dec 21 '11 at 18:30

score 0 · Answer 1 · answered Dec 21 '11 at 07:59

0

From my assumption, you can try putting this for the CSS:

.items { margin:0 auto; }

answered Dec 21 '11 at 07:59

Calvin

1,305
8
17

score 0 · Answer 2 · answered Dec 21 '11 at 08:39

Code by Calvin works, but again it could be better if you provide approximate width to the content, where you want to show the photos. because, It makes the items at the center unless we give left/right margin.

.scrollable {
    background-color: black;
    width: 100%;
}
.items {
    margin: 0 auto;
    width: 400px;
}

score 0 · Accepted Answer · answered Dec 21 '11 at 18:28

I figured it out. You can't use margin: 0 auto on .items because .items is too wide. Umesh tried to address this by providing a width it .items, but this is not dynamic. Also, jQuery Tools Scrollable still tries to position the active frame to the left anyway.

Here is what i did.

I setup the scrollable as 100% width of the browser. The .pane is 800px wide all the time.

Then I wrote this JavaScript:

// Get window width
var winWidth = jQuery(window).width();

// winWidth divided by 2, subtract half the width of .pane
var itemsMargin = (winWidth/2)-400;

// Resize the homepage scrollable panes
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px');

This has the center of the active .pane allways in the center of the screen. I then setup a .resize() call back to reclaculate the left margin when the browse is resized. It works great!

jQuery Scrollable Center Active Frame

3 Answers3