CODEWITHSUNDEEP
javascriptjquery
user2252219
user2252219

Reputation: 865

Can't get button to center a div with Jquery

When you press on the carousel img you'll notice that it will move itself to center onto the viewport. However, I also want it also happen when you press .owl-thumb-items (the numbered button). I tried adding the thumb class to the script like so: $('.owl-carousel, .owl-thumb-item'). But it clearly didn't work.

$('.owl-carousel, .owl-thumb-item').on('click', function(e) { 

  var el = $(".lazyOwl", this);
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }
  var speed = 700;
  $('html, body').animate({scrollTop:offset}, speed);
});

var animations = new Array();
// queue all
$(".owl-thumb-item").each(function() {
  animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
  image.fadeIn("slow", function() {
    // wait until animation is done and recurse if there are more animations
    if (animations.length > 0) doAnimation(animations.shift());
  });
}

http://jsfiddle.net/8bJUc/660/

Upvotes: 0

Views: 44

Answers (1)

Travis Schettler
Travis Schettler

Reputation: 854

For the buttons, your script would be looking for an element with a class of "lazyOwl" within the button itself. Here's the fix, which just references the "lazyOwl" from the carousel:

var el = $('.owl-carousel .lazyOwl');
$('.owl-carousel, .owl-thumb-item').on('click', function(e) { 

  //  var el = $(".lazyOwl", this);
  var elOffset = el.offset().top;
  ...

Fiddle

Upvotes: 1

Related Questions