Как вытащить div в определенной позиции

Question

Как вытащить div в определенной позиции

0

У меня есть div, который я выскальзываю, когда наводится ярлык.

HTML:

<div class="cellDataViewTdmStatus divCell userSitesCol7">
    <label class="lblViewTdmStatus">View Status</label>
</div>


<div id="tdmStatus" class="hidden flyout">
    LOREM IPSUM DOLOR SIT AMET<br>
    Blah blah blah
</div>

Вот как выглядит надпись div на странице (обратите внимание на текст "Просмотр статуса" справа), что этикетка в коде выше):

CSS:

.hidden { display: none; }

.flyout {
width: 560px;
height: 56px;
background-color: #EFF7DF;
padding: 10px;
margin: 0;
border-radius: 10px;
border: solid 1px #CC6600;
position: fixed;
overflow: hidden;
z-index: 10000;
top: 100px;
right: 300px;   }

JS:

$('.lblViewTdmStatus').hover(function() {
    $('.flyout').toggle("slide", {direction:'right'});
});

Это работает по мере необходимости (скрывается из скрытого), когда надпись наводится.

Мне нужно, чтобы div выдвигался таким образом, что он выглядит так, как будто он идет от границы слева от метки "View Status".

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

marky 16 янв. 2014, в 20:23

Источник

0

Вам нужно найти смещение (слева и сверху) по нажатой ссылке и соответственно разместить слайд.
putvande 16 янв. 2014, в 18:41

Теги:

jquery

html

css

css-position

1 ответ

Ещё вопросы

Вам нужно найти смещение (слева и сверху) по нажатой ссылке и соответственно разместить слайд.

marky · Answer 1 · 2014-01-16T17-13-00.000Z

Выяснил это, благодаря putvande подтолкнуть в правильном направлении.

Я только что просмотрел значения position.left и position.top щелкнутой метки, а затем внес коррективы в это значение до тех пор, пока оно не будет расположено там, где я этого хотел (слева от метки, нажатой). Мне также пришлось удалить свойства "сверху" и "справа" из CSS.

Здесь новый js-код:

$('.lblViewTdmStatus').hover(function() {
var position = $(this).position(),
    left = position.left,
    top = position.top,
    divLeft = position.left - 590,
    divTop = position.top - 50;
//console.log('position.left: ' + position.left + ' position.top: ' + position.top);

$('.flyout').css('top',divTop).css('left',divLeft);
$('.flyout').toggle('slide', {direction:'right'});
});