0

Добрый день

Помогите, пожалуйста, разобраться с jQuery offset.

Вот что сделал я.

Что получилось сделать: задать topTitle.

Что не получилось сделать:

  1. окно предупреждение появляется только у первого элемента, а нужно, чтобы появлялось у всех элементов с class="prompt";
  2. выравнивание окна предупреждения относительно центра элемента с class="prompt";
  3. разный текст в разных окнах предупреждения.

-

<input type="text" class="prompt" />
<textarea class="prompt"></textarea>
<input type="button" class="prompt" value="Отправить" />
​

-

textarea {
    margin: 75px 0 0 63px;
    display: block;
}

input[type="button"] {
    margin: 90px 0 0 135px;
    display: block;
}

.title {
    padding: 5px 15px;
    background: red;
    font-weight: bold;
    position: absolute;
}
​

-

tip();

function tip() {
    var prompt = $('.prompt');
    var offset = prompt.offset();
    var topTitle = prompt.height() + offset.top + 15;
    var leftTitle = offset.left - prompt.width() / 4;
    var titleText = 'Введите данные';

    $('<span class="title"></span>')
        .css({
            'top' : topTitle,
            'left' : leftTitle
        })
        .appendTo('body')
        .text(titleText);
}
​
6
  • @Deonis, нет, я имел ввиду разный контент. В общем, глупость спросил (сначала спросил, потом подумал).
    – Astor
    23 окт 2012 в 17:00
  • @Alex83, Повторюсь - используйте связку: Ajax => PHP => Ajax
    – Deonis
    23 окт 2012 в 17:16
  • @Deonis, еще один вопрос, необходимо сверху, по центру добавить стрелку(указатель). Я сделал следующее: $('<p class="title"><span></span>' + titleText[i] + '</p>').insertAfter(el); // position arrow for prompt var titleArrowLeft = ($('.title').width() - $('.title span').width()) / 2 + 30; $('.title span').css('left', titleArrowLeft); Все почти ровно, а хотелось бы идеально. Не подскажите как осуществить?
    – Astor
    23 окт 2012 в 17:42
  • @Deonis, подскажите пожалуйста, какую функцию выполняет число 10 в следующей строчке кода? var bp = (parseInt($(el).css('border-left-width'),10) + parseInt($(el).css('padding-left'),10))*2;
    – Astor
    24 окт 2012 в 10:21
  • @Deonis, подскажите пожалуйста... всю голову уже сломал...
    – Astor
    24 окт 2012 в 17:13

1 ответ 1

2

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

P.S. Комментарии там набросал, но если чего не ясно - спрашивайте.

6
  • @Deonis, спасибо. Проблему позиционирования, я решил немного иначе, а именно: leftTitle = offset.left + (prompt.width() - $('.title').width()) / 2 - 17; Объясните пожалуйста, каким образом подсказки будут добовляться с сервера, просто я пока далек от этого, но хотелось бы понять общую картину.
    – Astor
    23 окт 2012 в 14:34
  • > Объясните пожалуйста, каким образом подсказки будут добовляться с сервера Это вы меня спрашиваете? )) Много лет назад, меня с позором выгнали из клуба телепатов, т.к. я не проявил способностей в этом направлении )) Ну, разные способы есть, а какой выбрали вы - я не в курсе. Я бы вариант с Ajax-ом попробовал.
    – Deonis
    23 окт 2012 в 15:34
  • @Deonis, не могу понять как увеличить верхний отступ между элементом и подсказкой... И почему верхние отступы у всех элементов разные?
    – Astor
    23 окт 2012 в 15:52
  • Прошу прощения, вопрос снят. Спасибо.
    – Astor
    23 окт 2012 в 15:54
  • @Deonis, подскажите, а как быть, если на разных страницах - разный текст подсказок?
    – Astor
    23 окт 2012 в 15:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.