Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2009, 21:05
Интересующийся
Отправить личное сообщение для XPOMOB Посмотреть профиль Найти все сообщения от XPOMOB
 
Регистрация: 25.06.2009
Сообщений: 11

Вопрос по относительному позиционированию DIV
Короче, есть длинный текст, где-то в серидине есть <span>слово</span> - нужно под этим "словом", поверх остального текста, вывести DIV.

<div style="position: relative; - делает перенос строки и вставляется в текст (а не поверх этого текста)

Дизайн тянется, и указать обсолютные координаты нельзя... Но можно использовать Javascript, т.к. DIV будет появлятся только при нажатии (наведении-не решил пока ещё...) мыши.

Смотрел много примеров, но нашел только где положение высчитывается относительно курсора мыши...
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2009, 10:00
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Всё это можно сделать на CSS
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2009, 12:36
Интересующийся
Отправить личное сообщение для XPOMOB Посмотреть профиль Найти все сообщения от XPOMOB
 
Регистрация: 25.06.2009
Сообщений: 11

B~Vladi - мне лично пофигу на чем это можно сделать. К томуже в этой ветке форума почти ко всему такой ответ можно дать.
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2009, 12:59
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

XPOMOB, спокойно

Для того, чтобы небыло переноса строк, диву нужно задать абсолютное позицианирование и всунуть его в span. Далее display:none; и спану position:relative;. Затем выравниваем див bottom:0;, left:0; и вешаем обработчик на спан, который будет менять диву display.
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2009, 13:52
Интересующийся
Отправить личное сообщение для XPOMOB Посмотреть профиль Найти все сообщения от XPOMOB
 
Регистрация: 25.06.2009
Сообщений: 11

Сообщение от B~Vladi Посмотреть сообщение
Для того, чтобы небыло переноса строк, диву нужно задать абсолютное позицианирование и всунуть его в span. Далее display:none; и спану position:relative;. Затем выравниваем див bottom:0;, left:0; и вешаем обработчик на спан, который будет менять диву display.
Вот что я сделал. Советы помогли немного. Див стал появлятся под "словом" - это уже хорошо Но перенос строки остался. И ещё, если "слово" находится в непосредственно близости от правого края - при появлении дива появляется горизонтальная прокрутка. И ещё Опера как-то не полностью Див показывает (но это наверное потом можно будет как-то решить...) Так же при bottom:0; - див повялется в самом верху, а не под словом - пришлось заменить на 1 (хотя если поставить 100 или 200 - результат одинаковый)

И ещё: в примере встретился параметр visibility -может его использовать? или разници особой нет?

Дальше код JS
<script type="text/javascript">
function view(){ 
 test1.style.display="block"; //блок становится видимым 
 //test1.style.display="inline"; //блок становится видимым 
 //test1.style.visibility="visible"; //блок становится видимым 
}

function noview(){ 
 test1.style.display="none"; //блок становится невидимым 
}

</script>


И HTML

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
текст текст текст текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
текст текст текст
<span style="position: relative; " onmouseover="view()" onmouseout="noview()">
слово
<div id="test1" style="display: none; position: absolute; bottom:1; left:0; width: 150px; height: 150px; z-index: 1; background-color:#008000;">
текст_дива</div>

</span> текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
текст текст текст текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Где что я неправильно делаю?
Ответить с цитированием
  #6 (permalink)  
Старый 15.07.2009, 14:21
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от XPOMOB
в примере встретился параметр visibility -может его использовать? или разници особой нет?
В вашем случае нет.
Сообщение от XPOMOB
Но перенос строки остался.
а при
Сообщение от XPOMOB
test1.style.display="inline";
тоже есть?! По идее не должно быть...
Ответить с цитированием
  #7 (permalink)  
Старый 15.07.2009, 14:23
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

ЗЫ: див лучше поместить перед "словом".
Ответить с цитированием
  #8 (permalink)  
Старый 15.07.2009, 14:32
Интересующийся
Отправить личное сообщение для XPOMOB Посмотреть профиль Найти все сообщения от XPOMOB
 
Регистрация: 25.06.2009
Сообщений: 11

Сообщение от B~Vladi Посмотреть сообщение
test1.style.display="inline";
тоже есть?! По идее не должно быть...
тоже есть

положение слова ничего не меняет, даже хуже становится. слово переносится на следующую строку, а див повляется в конце предыдущей.
Ответить с цитированием
  #9 (permalink)  
Старый 15.07.2009, 14:44
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Вобщем делать нада так:

<span>
<span style="display:none; position:absolute; margin-top:20px; background-color:#008000; ">текст_дива</span>
слово
</span>


и менять

test1.style.display="inline"
Ответить с цитированием
  #10 (permalink)  
Старый 15.07.2009, 14:48
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

а если внешний span переделать в ссылку, можно тогда будет для него прописать:

a:hover span{
  display:inline;
}


и забыть про JS.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Границы элемента DIv gosha_kap Общие вопросы Javascript 1 06.07.2009 17:12
Вопрос новичка по DIV De-Luxis Я не знаю javascript 6 02.06.2009 20:34
Как "вытащить" div из table linbis Элементы интерфейса 4 27.03.2009 17:57
Вопрос по позиционированию greatilya Элементы интерфейса 9 11.12.2008 03:33
вопрос по long poll megaswin AJAX и COMET 2 27.05.2008 09:20