Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Появление блока в координатах курсора

Автор: Ferromarron 27.4.2007, 18:09

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

Автор: Mymik 27.4.2007, 21:08

Код


<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'у. После чего н появляется на экране :о).
Вот и все

Автор: BuShaRt 27.4.2007, 21:24

Полезный скриптик, сохнарю 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 этого не знает :(

Автор: Mymik 27.4.2007, 22:19

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

)

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

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

Код


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

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

Автор: ksnk 27.4.2007, 23:40

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

Автор: Ferromarron 28.4.2007, 00:07

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

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

Автор: Mymik 28.4.2007, 08:13

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

)

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

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

Автор: ksnk 28.4.2007, 09:35

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

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

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

Автор: Ferromarron 28.4.2007, 10:26

Что-то я не совсем понял, что за невидимый 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

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

)

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

http://forum.vingrad.ru/index.php?showtopic=120066&view=findpost&p=1018562

Автор: Ferromarron 29.4.2007, 15:08

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

)

event.clientX; event.clientY;

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

Автор: Ferromarron 29.4.2007, 17:47

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