Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Всплывающая подсказка над полем (https://javascript.ru/forum/xhtml-html-css/5595-vsplyvayushhaya-podskazka-nad-polem.html)

kampil 25.10.2009 18:41

Всплывающая подсказка над полем
 
Есть такой вопрос: а как возможно сделать всплывающую подсказку над полем ввода(текстовым) на css,когда наступает событие onFocus ну т.е. типо такого,только чтобы это подсказка не раздвигала другие элементы когда делаешь display:block :
<style>
   .class1{
     display:none;
	 position:relative;
   }
   .class2{
    position:relative;
	display:block;
   }



     <div class="class1" id="tips">Это подсказка для поля</div>
     <input id="myfield" onFocus="document.all['tips'].className='class2';" type="text" />

вопрос глупый , понимаю, но всё же хочется услышать ответ...

B~Vladi 25.10.2009 21:17

Цитата:

Сообщение от kampil
чтобы это подсказка не раздвигала другие элементы когда делаешь display:block

Добавь position:absolute ему, ну и всё из этого вытекающее:)

kampil 25.10.2009 21:49

Цитата:

Сообщение от B~Vladi (Сообщение 33480)
Добавь position:absolute ему, ну и всё из этого вытекающее:)

ну это канешь понятно что position: absolute, но абсолютное позиционирование идёт относительно ближайшего абсолютно позиционированного элемента, т.е. вот если нужно именно "над" input полем вывести, т.е. как бы не понятно тогда, тупо прибавлять там везде координаты типо там top: left: это не выход, на jQuery же можно сделать чтобы было там над или под элементом, но вот именно как это сделать на javascript или css не важно, вот что интересует

Riim 25.10.2009 22:10

<div style="position: relative;"><input onfocus="this.nextSibling.style.display = 'block';" /><div style="padding: 0 10px; background: #f99; display: none; position: absolute; left: 170px; top: 0;">text</div></div>

kampil 25.10.2009 22:18

Не ну так это опять же понятно всё...ну я кажется понял ваще как это сделать т.е. это только через javascript возможно канешь, т.е. нам нужны координаты скажем самого input элемента узнаем ты их наверное через offsetLeft или offsetTop вот , ну не буду сейчас пробовать, меня интересовало вот именно ход решения этой задачи, т.к. один раз не смог сделать, забил, сделав по простому тоже, но просто интерестно понять как это сделать, просто можно пользоваться понятное дело что фраемворками, но не понимая как это сделать юез них , это не есть гуд

B~Vladi 25.10.2009 22:54

Цитата:

Сообщение от kampil
т.е. это только через javascript возможно канешь, т.е. нам нужны координаты скажем самого input элемента узнаем ты их наверное через offsetLeft или offsetTop

Тебе Riim привёл пример кода, в котором не надо вычислять никаких координатов. Поиграйся с ним.

kampil 25.10.2009 22:59

не, я уже протестил, через offsetLeft и offsetTop сделать можно, я не знаю, как насчёт работоспособности во всех браузерах, но с чистым css и DOM это не сделаешь, а rim привел код , но это же не куда не годится правильно: position: absolute; left: 170px имеется в виду left: 170px я ж не буду каждый раз подгонять, нужно же универсальное решение

B~Vladi 25.10.2009 23:05

Цитата:

Сообщение от kampil
через offsetLeft и offsetTop сделать можно, я не знаю, как насчёт работоспособности во всех браузерах

Да, так можно и кроссбраузерно.
Цитата:

Сообщение от kampil
но с чистым css и DOM это не сделаешь

Сделаешь:)
Цитата:

Сообщение от kampil
я ж не буду каждый раз подгонять, нужно же универсальное решение

Тебе и не надо подгонять! У тебя каждая подсказка будет на 170px правее поля... Обрати внимание на position: relative; - о чём это говорнит?! О том, что координаты абсолютного дива будут расчитываться от его родителя, а не от body.

Riim 25.10.2009 23:16

Цитата:

Сообщение от kampil
я ж не буду каждый раз подгонять, нужно же универсальное решение

вместо left можно right написать. Еще можно с float вместо position:absolute попробовать.

kampil 25.10.2009 23:16

Ну чтож, я согласен) мда, надо бы получше мне выучить всё, что относится к позиционированию..


Часовой пояс GMT +3, время: 11:06.