Question

I’m writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.

The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I’d like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?

I was attempting to use the following code:

(where my buttons are labeled “#Nav1”, “#Nav2”, etc…)

if (currentPage < 7) {
    newPos = 0;
}
else {
    newPos = $('#Nav' + (currentPage-5)).position().left;
}

$('#reel').animate({left: newPos*-1}, 700);  

But the #reel div is wrapping so position().left doesn’t return the position I need.

Suggestions?

Here is my HTML/CSS markup:

<style type="text/css">    
    div#pager div
    {
        display: inline-block;
    }

    #navContainer
    {
        width: 340px;
        height: 28px;                
        overflow: hidden;   
        position: relative;     
    }

    #reel
    {
        position: absolute;
        top: 0;
        left: 0;        
    }

</style>
<div id="pager" class="buttons">
    <div id="preButtons"></div>
    <div id="navContainer">
        <div id="reel">
        </div>
    </div>
    <div id="postButtons"></div>
</div>

Answer 1

You’ll need to manually give #reel a width equivalent to the number of items * the width of each item.

A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.

Try this before your carousel code:

var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});

This will allow you to dynamically set the width of the #reel div so it doesn’t wrap without knowing the exact size of the contents statically.