[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Появление <div> под словом
Форум PHP программистов > JavaScript
Joker
29.04.2009 - 18:35
Вообще вот код. В нем при наведение на "красное слово" появляеться форма, вот код:

HTML
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.none{display:none;}
a{color:#FF0000;}
.block{display:block; position:absolute; border:1px solid #000000; background:#CCCCCC; width:80px; height:80px;}
</style>
<script type="text/javascript">
function show(message)
{

document.getElementById('message').innerHTML = message;
document.getElementById('message').className = 'block';
}
function hide()
{
document.getElementById('message').className = 'none';
}
</script>
</head>

<body>
<div id="message" class="none"></div>
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст <a onmouseover="show('test');" onmouseout="hide()">Текст</a> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст <a onmouseover="show('test new message');" onmouseout="hide()">Текст</a> Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

</body>
</html>


Сейчас форма появляеться в произвольном порядке тобишь в верхнем левом углу, мне нужно чтоб форма появлялась под словом. Если есть у кого то наработки можете поделиться. Пожалусто rolleyes.gif



Спустя 24 минуты, 44 секунды (29.04.2009 - 17:59) vasa_c написал(а):
Получить координаты мыши и спозиционировать по ним форму.
Какие затруднения? smile.gif

Спустя 8 минут, 32 секунды (29.04.2009 - 18:08) Joker написал(а):
Не вариант пробовал, нужно чтоб форма под словом появлялась а если мышь сверху навести на слово то форма перекроет слово, нужно чтоб ровно и красиво она появлялась.

Спустя 9 минут, 10 секунд (29.04.2009 - 18:17) waldicom написал(а):
Цитата (Joker @ 29.04.2009 - 16:08)
Не вариант пробовал, нужно чтоб форма под словом появлялась а если мышь сверху навести на слово то форма перекроет слово, нужно чтоб ровно и красиво она появлялась.

А если провести нехитрые математические вычисления?

Спустя 2 минуты, 23 секунды (29.04.2009 - 18:19) Joker написал(а):
Цитата (waldicom @ 29.04.2009 - 15:17)
А если провести нехитрые математические вычисления?


Нужно 3 переменных высота до слова отступ слева и высота самого слова, доупустим высоту слова можно предположить)) А остальные как?

Спустя 52 минуты, 54 секунды (29.04.2009 - 19:12) Joker написал(а):
Ну подскажите хотябчто почитать раз, нету готового варианта буду пытаться написать.

Спустя 54 минуты, 56 секунд (29.04.2009 - 20:07) vasa_c написал(а):
Как вариант - вставить форму сразу после выделенного слова и попробовать спозиционировать её с этой позиции.

Спустя 9 минут, 43 секунды (29.04.2009 - 20:17) Joker написал(а):
ну это я умел еще в 3 классе 2 четверти) Там в тексте будет автоматом происходить подстановка сылок, и если человек выделил слово то через аякс уже грузиться текст в форму, да и думаю что варианты 100% есть просто искать нужно) гугл не предлогать и яндекс тоже я уже их до дыр затер)

Спустя 35 минут, 58 секунд (29.04.2009 - 20:53) vasa_c написал(а):
вариант "вставить форму сразу после выделенного слова и попробовать спозиционировать её с этой позиции" чем не подходит?

Вставить DOM-элемент формы сразу после DOM-элемента ссылки и попробовать position: relative.

Спустя 2 минуты, 43 секунды (29.04.2009 - 20:56) Joker написал(а):
я вот тут подумал один вариант рилизовать ща попробую... если что отпишу) Если относительное позиционрирование там куча ньюансов которыые сложно учесть.

Спустя 6 минут, 23 секунды (29.04.2009 - 21:02) vasa_c написал(а):
HTML
<style type="text/css">
#form {
border: 1px solid #000000;
background-color: #eeeeee;
position: absolute;
display: none;
}
</style>
<script type="text/javascript">
function over(a)
{
var f = document.getElementById("form");;
f.style.display = "block";
f.style.left = a.offsetLeft + "px";
f.style.top = (a.offsetTop + a.offsetHeight) + "px";
return true;
}
function out()
{
document.getElementById("form").style.display = "";
return true;
}
</script>
<div>
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста <a href="#" onmouseover="over(this)" onmouseout="out(this)">ссылко</a> Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста Доуя текста
<div id="form">Йа формо<br />Просто формо</div>
</div>

Спустя 14 минут, 46 секунд (29.04.2009 - 21:17) Joker написал(а):
vasa_c Спасибо но токо токо нашел это и ты написал))

Узнал просмотрев все свойства обьекта которые существую вот так:

Код

function showProperties(obj, objName)
{
 var result = "The properties for the " + objName + " object:" + "\n";
 
 for (var i in obj) {result += i + " = " + obj[i] + "\n";}
 
 return result;
}


Тему можно закрыть.
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.