VPF::jquery позиционирование всплывающего меню

WantToProg

Дата 15.7.2009, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 13.4.2009

Репутация: нет
Всего: нет

Итак, начнем.
Имеетсяя код:

Код


$(document).ready(function(){

    $(".tables a").hover(function() {
        $(this).next("em").animate({opacity: "show", top: "293", left: "200"}, "slow");
    }, function() {
        $(this).next("em").animate({opacity: "hide", top: "170", left: "200"}, "fast");
    });
});

Имеется CSS для таблицы:

Код


.tables {
    margin: 0px 0 0;
    list-style: none;
    padding: 0;
    text-align: center;
    font-weight: bold;
    height: 50px;
    border-style: none;
    background: url(button1.gif) repeat center center;    
}
.tables em {
    background: url(button2.gif) repeat center center;
    width: 170px;    
    position: absolute;
    top: 220px;
    left: 200px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}

А также сама таблица:

Код


<table>
<tr>
<td class="tables"><a>Здесь какой-нибудь текст</a>        
<em>А это всплывающая подсказка</em></td>
<td width=70></td>
<td class="tables"><a>Это другой неопределенный текст</a>
<em>И тут тоже всплывающая подсказка</em>
</td>
</tr>

Исходя из выше написанного видно. что подсказка всплывает в определенном в абсолютных координатах месте. Так вот, как сделать, чтоб она всплывала слева от текста, на который мы наводим указатель мыши.
Вот. Заранее спасибо за помощь

InfMag

Дата 21.7.2009, 16:36 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

Если таблица будет находиться в статичном положении, то-бишь она не центрируется и т.п., то подойдет ниже приведенный способ:
Вот пара параметров, для получения отступа объекта слева и сверху:

Код


alert( $(".tables a :eq(0)").offset().left );
alert( $(".tables a :eq(0)").offset().top );

Иначе нужно будет для корневого объекта выставлять position: relative; (это при отцентрированной таблице например)
Вот, прописываемс:

Код


$(document).ready(function(){
    $(".tables").each(
        function (i)
        {
            $(this).find("a").hover(function() {
                $(this).find("em").animate({opacity: "show", top: ($(this).find("a:eq(0)").offset().top), left: ($(this).find("a:eq(0)").offset().left)}, "slow");
            }, function() {
                $(this).find("em").animate({opacity: "hide", top: ($(this).find("a:eq(0)").offset().top), left: ($(this).find("a:eq(0)").offset().left)}, "fast");
            });
        }
    );
});

Вроде должно работать smile

Добавлено через 5 минут и 44 секунды
Упс! Чуть согрешил! Надо прибавить еще высоту!

Код


$(document).ready(function(){
    $(".tables").each(
        function (i)
        {
            $(this).find("a").hover(function() {
                $(this).find("em").animate({opacity: "show", top: ($(this).find("a:eq(0)").offset().top+$(this).find("a:eq(0)").offset().height), left: ($(this).find("a:eq(0)").offset().left)}, "slow");
            }, function() {
                $(this).find("em").animate({opacity: "hide", top: ($(this).find("a:eq(0)").offset().top+$(this).find("a:eq(0)").offset().height), left: ($(this).find("a:eq(0)").offset().left)}, "fast");
            });
        }
    );
});

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »