VPF::Появление блока в координатах курсора

Ferromarron

Дата 27.4.2007, 18:09 (ссылка)

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

Загрузка ...

Новичок

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

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

Нужен пример перемещения (или появления) абсолютно позиционированного блока в координаты, где произведен onClick.
Видел похожие примеры в готовых скриптах, но выделить нужный код опыта не хватает smile

Mymik

Дата 27.4.2007, 21:08 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

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

Код


<html>
<head>
    <script type="text/javascript">
        /* функция показывающая блок */
    function callBlock(event)
    {
                /* указатель на блок */
        popUp = document.getElementById("popUp");

                /* Определение координат блока (координаты щелчка) */
        popUp.style.top = event.clientY + "px";
        popUp.style.left = event.clientX + "px";
    }
    function hidePopUpBlock(popUp)
    {
                /* Прячем блок */
        popUp.style.top = "-500px";
        popUp.style.left = "-500px";
    }
    </script>
    <style text="text/css">
        /* Первоначальный стиль */
    .popUpBlock {width:100px; height:100px; background:green; border:solid 1px red; position:absolute; z-index:100; top:-500px; left:-500px;}
    </style>
</head>
<body>
        <!-- Ссылка -->
    <a href="#" onclick="callBlock(event);return!1;">Click Me</a>

        <!-- Непосредственно наш блок -->
    <div class="popUpBlock" id="popUp" onmouseout="hidePopUpBlock(this);"></div>
</body>
</html>

сначала наш блок является далеко за пределами рабочий области браузера, о чем свидетельствует запись в CSS

Код


top:-500px; left:-500px;

После клика мышкой вы вызываем функцию callBlock(event). Event это класс описывающий произошедшее событие. Т.е. это window.event
Из него мы берем координаты щелчка мышки

Код


event.clientX;
event.clientY;

и присваиваем их нашему div'у. После чего н появляется на экране :о).
Вот и все

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

BuShaRt

Дата 27.4.2007, 21:24 (ссылка)

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

Загрузка ...

Эксперт

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

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

Полезный скриптик, сохнарю smile

)

Фсе в дом, фсе в дом smile

Добавлено @ 21:33

Код


<body onclick="callBlock(event);return!1;">
        <!-- Ссылка -->
    <div style="width: 100%; height: 100%">

        <!-- Непосредственно наш блок -->
    <div class="popUpBlock" id="popUp" onmouseout="hidePopUpBlock(this);"></div>
</body>
</html>

Кстате, вот так, можно не только, по шелчку по ссылке организовать....

Тока IE этого не знает :(

Это сообщение отредактировал(а) BuShaRt - 27.4.2007, 21:36

Mymik

Дата 27.4.2007, 22:19 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

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

Цитата(BuShaRt @ 27.4.2007, 21:24

)

Кстате, вот так, можно не только, по шелчку по ссылке организовать....

в 8 строке надо поставить var

Код


var popUp = document.getElementById("popUp");

Добавлено через 1 минуту и 4 секунды
BuShaRt, кстати, в твоем коде нет еще одного закрывающего тэга div. ;о) исправь

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

ksnk

Дата 27.4.2007, 23:40 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Mymik, а сможете ли вы объяснить Ferromarronу почему ваш пример не работает в IE?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ferromarron

Дата 28.4.2007, 00:07 (ссылка)

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

Загрузка ...

Новичок

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

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

Смысл я понял, спасибо.

var popUp = document.getElementById("popUp"); -
на эту строчку, кстати, у меня браузер ругается. С другим ID всё нормально

Mymik

Дата 28.4.2007, 08:13 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

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

Цитата(ksnk @ 27.4.2007, 23:40

)

Mymik, а сможете ли вы объяснить Ferromarronу почему ваш пример не работает в IE?

Из-за невидимого document.all

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

ksnk

Дата 28.4.2007, 09:35 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Ну да...
Кстати, код работает лучше, если эту строчку -
/* указатель на блок */
popUp = document.getElementById("popUp");
убрать совсем smile

Все-таки не стоило называть переменную таким именем

В IE имеется еще один глюк. Когда окно появляется, курсор оказывается вне крашеного прямоугольника на пару пикселей. Так что при должном перемещении мышки - этот div не закроется никогда.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ferromarron

Дата 28.4.2007, 10:26 (ссылка)

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

Загрузка ...

Новичок

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

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

Что-то я не совсем понял, что за невидимый document.all и почему у меня в ИЕ все работает (если id назвать по-другому)

Цитата(ksnk @ 28.4.2007, 09:35

)

В IE имеется еще один глюк.

В Опере тоже, но это не относится к данной теме, меня интересовало только перемещение в координаты.

Добавлено через 2 минуты и 10 секунд

Цитата(ksnk @ 28.4.2007, 09:35

)

div не закроется никогда

Закроется, если навести на блок и убрать smile

Zeroglif

Дата 28.4.2007, 10:40 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(Ferromarron @ 28.4.2007, 10:26

)

Что-то я не совсем понял, что за невидимый document.all и почему у меня в ИЕ все работает (если id назвать по-другому)

ID-баги в IE

Ferromarron

Дата 29.4.2007, 15:08 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(Mymik @ 27.4.2007, 21:08

)

event.clientX; event.clientY;

Блин, возникла проблема...
Firefox считает координаты курсора относительно документа (при скролинге смещается), а ИЕ от окна. Как быть?

Ferromarron

Дата 29.4.2007, 17:47 (ссылка)

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

Загрузка ...

Новичок

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

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

Все с проблемой разобрался,
вернее проблема в другом совсем была - нужно просто добавить отступ скроллинга для Мозиллы - pageYOffset

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