Отцентрировать согласно неизвестной высоте

[kattiperk]

Здравствуйте.

 

Может, кто-то сможет подсказать?

Есть что-то вроде тултипа - всплывает при наведении напротив каждого пункта. Но считает только top.

А хотелось бы его отцентрировать, но высота тултипа может быть разной. Код ниже.

Сайт - http://top-matras.ru/seriya-premium/hardstyle-medium-s1000/, тултип в "Составе модели"

function layers_box_open(o) {  var _id = $(o).attr('data-layersLink-key');  if (_id) {    var top = (($("[data-layersLink-key='"+_id+"']").offset().top)-$(".js-layers_wrap").offset().top);    $('.layers_box_wrap', '.js-layers_key-' + _id).css({'visibility':'visible', 'top' : top + 'px'});  }}

Edited November 17, 2015 by kattiperk

[Sensei]

Попробуйте так

function layers_box_open(o) {  var _id = $(o).attr('data-layersLink-key');      if (_id) {	      var target = $('.js-layers_key-' + _id + ' .layers_box'),          top = ($("[data-layersLink-key='"+_id+"']").offset().top - $(".js-layers_wrap").offset().top),          shift = target.outerHeight() / 2 - o.outerHeight() / 2;            $('.layers_box_wrap', '.js-layers_key-' + _id).css({        'visibility':'visible',        'top' : top + 'px',        'margin-top': '-' + shift + 'px'      });        }}

А вообще, если есть возможность менять разметку, лучше перенести тултипы внутрь самих пунктов.

Код заметно упростится, нужно будет только отрицательный верхний отступ скриптом выставлять.

А если не нужен ие8, то вообще одними стилями можно будет обойтись.

[kattiperk]

То дякую. Вторым способом нельзя, там шаблоны, админки.

[wwt]

function layers_box_open(o) {  var _id = $(o).attr('data-layersLink-key');  if (_id) {        var top = -($('.js-layers_key-' + _id + ' .layers_box').height()-$("[data-layersLink-key='"+_id+"']").parent().height())/2;        $('.layers_box_wrap', '.js-layers_key-' + _id).css({'visibility':'visible', 'top' : top + 'px'});  }}

высчитываем разницу между высотой блоков, и приподнимаем всплывающий блок на на половину разницы.

 

ЗЫ а вообще структура блоков у вас мозголомная конечно тут с Сенсеем соглашусь.

[kattiperk]

Ну я то не делала так.

 

Да, я понимаю о чем вы, но я настолько неграмотная и незнакома с js, что не смогла сама.

[Sensei]

высчитываем разницу между высотой блоков, и приподнимаем всплывающий блок на на половину разницы

 

Тултип же должен позиционироваться относительно пункта, а не всего списка)

[wwt]

Тултип же должен позиционироваться относительно пункта, а не всего списка)

ну там написано "отцентрировать", а относительно чего не написано =)))

[kattiperk]

Да. пункта. Вот же ж

[Sensei]

Так решилась проблема-то?

[kattiperk]

По центру каждого пункта - нет. По центру блока - да.

[Sensei]

Странно, я свой код запускаю в консоли, и блоки по центру пункта появляются.

[kattiperk]

Пишет, что - http://joxi.ru/KAgMOn8Co4MQml

[Sensei]

А так?

function layers_box_open(o) {  var item = $(o),      _id = item.attr('data-layersLink-key');      if (_id) {	      var target = $('.js-layers_key-' + _id + ' .layers_box'),          top = item.offset().top - $(".js-layers_wrap").offset().top,          shift = target.outerHeight() / 2 - item.outerHeight() / 2;            $('.layers_box_wrap', '.js-layers_key-' + _id).css({        'visibility':'visible',        'top' : top + 'px',        'margin-top': '-' + shift + 'px'      });        }}

[kattiperk]

Так пишет, что mission complete и Sensei крутой.