Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Появление блока в координатах курсора, по клику 
V
    Опции темы
Ferromarron
Дата 27.4.2007, 18:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Нужен пример перемещения (или появления) абсолютно позиционированного блока в координаты, где произведен onClick. 
Видел похожие примеры в готовых скриптах, но выделить нужный код опыта не хватает  smile .
PM   Вверх
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
PM MAIL WWW ICQ   Вверх
BuShaRt
Дата 27.4.2007, 21:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



smile Полезный скриптик, сохнарю 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
PM MAIL   Вверх
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
PM MAIL WWW ICQ   Вверх
ksnk
Дата 27.4.2007, 23:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Ferromarron
Дата 28.4.2007, 00:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



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

var popUp = document.getElementById("popUp"); -
на эту строчку, кстати, у меня браузер ругается. С другим ID всё нормально
PM   Вверх
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
PM MAIL WWW ICQ   Вверх
ksnk
Дата 28.4.2007, 09:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



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

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
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 
PM   Вверх
Zeroglif
Дата 28.4.2007, 10:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата(Ferromarron @  28.4.2007,  10:26 Найти цитируемый пост)
Что-то я не совсем понял, что за невидимый document.all и почему у меня в ИЕ все работает (если id назвать по-другому)

ID-баги в IE

PM MAIL WWW   Вверх
Ferromarron
Дата 29.4.2007, 15:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата(Mymik @  27.4.2007,  21:08 Найти цитируемый пост)
event.clientX; event.clientY;

Блин, возникла проблема... 
Firefox считает координаты курсора относительно документа (при скролинге смещается), а ИЕ от окна. Как быть?
PM   Вверх
Ferromarron
Дата 29.4.2007, 17:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Все с проблемой разобрался, 
вернее проблема в другом совсем была - нужно просто добавить отступ скроллинга для Мозиллы - pageYOffset
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0866 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.