VPF::Привязка div'а к координатам мыши

YurkaKursant

Дата 24.9.2009, 10:36 (ссылка)

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

Загрузка ...

Новичок

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

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

В разных браузерах положения div при появлении неприятно удивляет (в разных местах отображается). Как сделать так, чтобы появляющийся div был привязан к координатам мыши (выше или ниже нее)????

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
   <title>Template</title>
   <STYLE type=text/css>
   #hint {
         background: #CCCCCC;
         border: 1px solid #000000;
         display: none;
         padding: 0px 2px 4px 2px;
         position: absolute;
         width: 114px;
         }
.button  {
background-color: #5B6A90;
border:1px solid #000000;
border-right-color: #000000;
border-bottom-color: #000000;
color:#ffffff;
margin:0px;
margin-left:0px;
font:bold 10px Arial; 
width: 110px;
        }  </style>
   
   <script type="text/javascript">
      selObj = null;
      var selTxtRng;
      var coords = {x:0, y:0};
      var selTxt = "";
      function showDiv(sender) {
         if (window.getSelection) {
            selObj = {target: sender, start: sender.selectionStart, end: sender.selectionEnd};
            selTxt = sender.value.slice(selObj.start, selObj.end);
         } else {
            selObj = document.selection;
            if (selObj == null) return true;
            selTxtRng = selObj.createRange();
            selTxt = selTxtRng.text;
         }
         var hintDiv = document.getElementById("hint");
         with (hintDiv.style){
            left = (selTxtRng) ? selTxtRng.offsetLeft + "px" : coords.x + "px";
            top = (selTxtRng) ? (selTxtRng.offsetTop - -20).toString() + "px" : (coords.y - 35).toString() + "px";
            display = "block";
            sender.focus();
         } 
      }
      function cutTxt(destInput) {
         if (selObj.clear) {
            selObj.clear();
         } else {
            selObj.target.value = selObj.target.value.slice(0, selObj.start) + selObj.target.value.slice(selObj.end);
         }
         delete selObj;
         document.getElementById("hint").style.display = "none";
         document.getElementById(destInput).value += selTxt.charAt(0).toUpperCase() + selTxt.slice(1);
         selTxt = "";
      }
      function storeCoords(evnt) {
         var ev = (evnt) ? evnt : event;
         coords.x = (ev.x) ? ev.x : ev.pageX;
         coords.y = (ev.y) ? ev.y : ev.pageY;
      }
   </script>
</head>

<body>
<form name="form" action="#">
      Автор: <input type="text" style="width: 200px;" id="selTxtInput1" /><br />
      Название: <input type="text" style="width: 200px;" id="selTxtInput2" /><br />
      Ключ. слова: <input type="text" style="width: 200px;" id="selTxtInput3" /><br />
</form>
      
<form name="FormPopUp" action="#">
      <div id="hint"><center>
      <b>ввести в поле:</b></br>
<input type="button" class="button" value="Автор" onclick="cutTxt('selTxtInput1');" onMouseOver="style.color='#ffcc00'" onMouseOut="style.color='white'" style="cursor:pointer;"/><br />
<input type="button" class="button" value="Название" onclick="cutTxt('selTxtInput2');" onMouseOver="style.color='#ffcc00'" onMouseOut="style.color='white'" style="cursor:pointer;"/><br />
<input type="button" class="button" value="Ключевые слова" onclick="cutTxt('selTxtInput3');" onMouseOver="style.color='#ffcc00'" onMouseOut="style.color='white'" style="cursor:pointer;"/><br />
      </center></div>
      
      <textarea cols="50" rows="15" onselect="showDiv(this);" onmouseup="storeCoords(event);">Василий Петрович Косяков 
Новости политики
правила ввода в текстовое поле 
      </textarea>
</form>
   
</body>
</html>

Amphiluke

Дата 24.9.2009, 12:39 (ссылка)

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

Загрузка ...

☽

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

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

Ладно, исправлю, раз уж я тоже руку прикладывал... smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
   <title>Template</title>
   <style type="text/css">
   #hint {
         background: #CCCCCC;
         border: 1px solid #000000;
         display: none;
         padding: 0px 2px 4px 2px;
         position: absolute;
         width: 114px;
         }
.button  {
background-color: #5B6A90;
border:1px solid #000000;
border-right-color: #000000;
border-bottom-color: #000000;
color:#ffffff;
margin:0px;
margin-left:0px;
font:bold 10px Arial; 
width: 110px;
        }  </style>
   
   <script type="text/javascript">
      selObj = null;
      var selTxtRng;
      var coords = {x:0, y:0};
      var selTxt = "";
      function showDiv(sender) {
         if (window.getSelection) {
            selObj = {target: sender, start: sender.selectionStart, end: sender.selectionEnd};
            selTxt = sender.value.slice(selObj.start, selObj.end);
         } else {
            selObj = document.selection;
            if (selObj == null) return true;
            selTxtRng = selObj.createRange();
            selTxt = selTxtRng.text;
         }
         var hintDiv = document.getElementById("hint");
         with (hintDiv.style){
            left = (selTxtRng) ? selTxtRng.offsetLeft + "px" : coords.x + "px";
            top = (selTxtRng) ? (selTxtRng.offsetTop + 20).toString() + "px" : (coords.y + 20).toString() + "px";
            display = "block";
            sender.focus();
         } 
      }
      function cutTxt(destInput) {
         if (selObj.clear) {
            selObj.clear();
         } else {
            selObj.target.value = selObj.target.value.slice(0, selObj.start) + selObj.target.value.slice(selObj.end);
         }
         delete selObj;
         document.getElementById("hint").style.display = "none";
         document.getElementById(destInput).value += selTxt.charAt(0).toUpperCase() + selTxt.slice(1);
         selTxt = "";
      }
      function storeCoords(evnt) {
         var ev = (evnt) ? evnt : event;
         coords.x = ev.clientX;
         coords.y = ev.clientY;
      }
   </script>
</head>

<body>
<form name="form" action="#">
      Автор: <input type="text" style="width: 200px;" id="selTxtInput1" /><br />
      Название: <input type="text" style="width: 200px;" id="selTxtInput2" /><br />
      Ключ. слова: <input type="text" style="width: 200px;" id="selTxtInput3" /><br />
</form>
      
<form name="FormPopUp" action="#">
      <div id="hint"><center>
      <b>ввести в поле:</b><br />
<input type="button" class="button" value="Автор" onclick="cutTxt('selTxtInput1');" onmouseover="style.color='#ffcc00'" onmouseout="style.color='white'" style="cursor:pointer;"/><br />
<input type="button" class="button" value="Название" onclick="cutTxt('selTxtInput2');" onmouseover="style.color='#ffcc00'" onmouseout="style.color='white'" style="cursor:pointer;"/><br />
<input type="button" class="button" value="Ключевые слова" onclick="cutTxt('selTxtInput3');" onmouseover="style.color='#ffcc00'" onmouseout="style.color='white'" style="cursor:pointer;"/><br />
      </center></div>
      
      <textarea cols="50" rows="15" onselect="showDiv(this);" onmousedown="storeCoords(event);">Василий Петрович Косяков 
Новости политики
правила ввода в текстовое поле 
      </textarea>
</form>
   
</body>
</html>

YurkaKursant

Дата 24.9.2009, 22:01 (ссылка)

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

Загрузка ...

Новичок

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

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

Amphiluke, спасибо еще раз) Выручил!

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