VPF::как правильно создать всплывающее меню?

Bangladesh

Дата 6.7.2006, 07:47 (ссылка)

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

Загрузка ...

AsBest

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

Репутация: -1
Всего: 17

здравствуйте. у меня возникла проблема с созданием всплывающего меню (в моём случае всплывающего дива). задача: при клике на ссылку под курсором появляется так называемое "облако", которое позволяет работать с опр. объектом. вот код:

Код


<html><head>
<title>This is</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
#cloud  { position: absolute; display: block; top: 0; left: 0; visibility: hidden;} 

</style>
<script type="text/javascript">     //Координаты облака
     var x = 0;
     var y = 0;
function handlerMM(e) //регестрирует координаты курсора в данный момент
     {
                x = (document.layers) ? e.pageX : event.clientX;
                y = (document.layers) ? e.pageY : event.clientY;
     }
document.onmousemove = handlerMM;
function ShowCloud() //Показывает облако
     {        var obj = document.getElementById('cloud'); //облако

               obj.style.posLeft = x;
               obj.style.posTop = y - 236;
               obj.style.visibility = 'visible';
     }
function HideCloud() //Скрывает облако
     {
               var obj = document.getElementById('cloud'); //облако
               obj.style.posLeft = 0;
               obj.style.posTop = 0;
               obj.style.visibility = 'hidden';
     }
</script>
</head><body>

<div id="cloud" >
     <table cellspacing="0" cellpadding="0" border="0">
     <tr>
     <td width="221" height="236" style="border: 1px black solid;">
          Вот тут вот всплывающая информация
      </td>
     </tr>
   </table>
</div>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 1</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 2</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 3</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 4</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 5</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 6</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 7</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 8</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 9</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 10</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 11</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 12</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 13</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 14</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 15</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 16</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 17</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 18</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 19</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 20</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 21</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 22</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 23</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 24</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 25</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 26</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 27</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 28</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 29</a></span>
<span style="display: block; padding-top: 15px;"><a href="javascript:ShowCloud()">Ссылка 30</a></span>
</body></html>

при клике на ссылку 1, 2, 3 и такие верхние все работает нормально, но стоит прокрутить окно вниз и координаты начинают сползать (кликните, к примеру, по 27 ссылке), в mozille блок вообще не двигается -- просто появляется. вопрос: как сделать так, чтобы это облако появлялось в любом случае там где курсор и, если оно залезает за границу окна, то выскакивало бы вниз (т.е. под курсором оказался верхний угл). тем кто поможет, буду много-много благодарен.

Это сообщение отредактировал(а) 12345c - 6.7.2006, 13:26

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

ок

vasac

Дата 6.7.2006, 13:14 (ссылка)

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

Загрузка ...

Эксперт

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

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

Цитата

вот код

где?

Теперь вижу.

Это сообщение отредактировал(а) vasac - 6.7.2006, 20:49

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

Блог ГО | Таблица символов юникода

12345c

Дата 6.7.2006, 13:35 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Про позиционирование в разных бр-рах читайте в http://www.kruglov.ru/articles/crossbrowserdhtml/ , "Координаты мыши".

А про layers и NN4 забудьте вообще, все сведения о нём устарели, и в той статье в частности. Применять нет смысла.

Burrr

Дата 6.7.2006, 14:28 (ссылка)

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

Загрузка ...

Опытный

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

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

I, GyoZ, для создания всплывающих меню я юзаю такой стандартный подход (немного модифицировал под твой пример):

Код


<html>
<head>
    <title>Всплывающее меню</title>
</head>
<body>
<style>
#forMenu {
    position:absolute;
    border:1px solid #000000;
    font-size:12px; font-family:arial;
}
</style>
<div id="forMenu" style="display:none"></div>
<script type="text/javascript">
// Убираем меню при клике в теле документа
document.onclick = function() {
    document.getElementById("forMenu").style.display = "none";
}

function absPosition(obj) // Определяем top - left координаты obj
{
    this.x = 0;
    this.y = 0;
    while(obj) {
        this.x += obj.offsetLeft;
        this.y += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return {x:this.x,y:this.y};
}

function showMenu(a, evt) {
    evt  = evt || window.event;
    evt.cancelBubble = true;
    document.getElementById("forMenu").style.top = absPosition(a).y + a.offsetHeight;
    document.getElementById("forMenu").style.left = absPosition(a).x;
    document.getElementById("forMenu").innerHTML = "Здесь какой-то HTML-код. Вот рандомное число: " + Math.random();
    document.getElementById("forMenu").style.display = "";
}
</script>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 1</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 2</a></p>

<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 3</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 4</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 5</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 6</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 7</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 8</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 9</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 10</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 11</a></p>

<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 12</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 13</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 14</a></p>
<p><a onclick="showMenu(this, event); return false;" href="">Ссылка 15</a></p>
</body>
</html>

Сойдет как решение или что-то надо подправить?

Это сообщение отредактировал(а) Burrr - 6.7.2006, 21:00

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

JavaScript на fastcoder, sqlinfo.ru

Bangladesh

Дата 6.7.2006, 20:37 (ссылка)

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

Загрузка ...

AsBest

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

Репутация: -1
Всего: 17

Цитата(vasac @ 6.7.2006, 12:14)

Цитата

вот код

где?

после слова "вот код" идёт блок "разметка html". там собственно и код.

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

ок

vasac

Дата 6.7.2006, 20:48 (ссылка)

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

Загрузка ...

Эксперт

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

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

Цитата

после слова "вот код" идёт блок "разметка html". там собственно и код.

Когда писал — не было.

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

Блог ГО | Таблица символов юникода

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