Question

I want to push a clicked li to the centre (or close enough) by giving the first li a margin offset. My problem is I’m not entirely sure how to do the arithmetic .

What I’ve tried is dividing the total number of li’s by 2 and then multiplying by the li width. I thought this would give me the centre point. It didn’t work accordingly.

I’m stumped.

// set .active class when an li is clicked and push that li to the centre (or close enough.)
$('body').on("click", ".date li", function () {

  var self = $(this),
    li = $('.date li');

  li.removeClass('active');
  self.addClass('active');

  var num = self.index(),
    w = self.width(),
    t = w * (num / 2);

    t = t + 'px';

  // push the margin of the first li
  $('.date li:first-child').animate({ 'margin-left': t });

});

Here’s a fiddle with the problem: http://jsfiddle.net/vLQgy/1/

Answer 1

var num = self.index(),
liwidth = self.width(),
  total_width = $('.date').width(),

half = num / 2.0,
t = total_width / 2 - 84 * num - liwidth / 2;

t = t + 'px';

I get t using this code.

Here is jsfiddle. http://jsfiddle.net/vLQgy/2/