VPF::Раскрытие Div`a при клике на форму

Just123

Дата 4.1.2010, 20:39 (ссылка)

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

Загрузка ...

Шустрый

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

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

Здравствуйте, помогите пожалуйста, как сделать, есть форма:

Код


<form action="index.php?action=registration_complete" method="POST" onsubmit="return SendForm();">
<table>
<tr>
<td align="right"><label for="account">Название аккаунта:</label></td>
<td><input type="text" id="account" size="30" name="account"></td>
<tr>
<td align="right"><label for="password">Пароль:</label></td>
<td><input type="password" id="password" size="30" name="password"></td>
<tr>
<td align="right"><label for="repassword">Подтверждение пароля:</label></td>
<td><input type="password" id="repassword" size="30" name="repassword"></td>
<tr>
<td></td>
<td>КАПТЧА</td>
<tr>
<td align="right"><label for="captcha">Защитный код:</label></td>
<td><input type="text" id="captcha" size="30" name="captcha"></td>
<tr>
<td align="right"></td>
<td> <input type="submit" value="Зарегистрироваться"></td>
</table>

</form>

Как сделать так, чтобы при клике на какой-нибудь <input type="text"....>, раскрывался div с подсказкой? :(

Заранее премного благодарен.

patap

Дата 4.1.2010, 21:15 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

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

как вариант можно так.

Код


<script type="text/javascript">
  function showHelp(elemId) {
    document.getElementById(elemId).style.display = 'inline';
  }
  
  function hideHelp(elemId) {
    document.getElementById(elemId).style.display = 'none';
  }
</script>

<form action="index.php?action=registration_complete" method="POST" onsubmit="return SendForm();">
<table border="0">
<tr>
<td align="right"><label for="account">Название аккаунта:</label></td>
<td><input type="text" id="account" size="30" name="account" onfocus="showHelp('help_account')" onblur="hideHelp('help_account')"></td>
<td id="help_account" style="display:none">Help account</td>
<tr>
<td align="right"><label for="password">Пароль:</label></td>
<td><input type="password" id="password" size="30" name="password" onfocus="showHelp('help_pwd')" onblur="hideHelp('help_pwd')"></td>
<td id="help_pwd" style="display:none">Help password</td>
<tr>
<td align="right"><label for="repassword">Подтверждение пароля:</label></td>
<td><input type="password" id="repassword" size="30" name="repassword" onfocus="showHelp('help_repwd')" onblur="hideHelp('help_repwd')"></td>
<td id="help_repwd" style="display:none">Help re-password</td>
<tr>
<td></td>
<td>КАПТЧА</td>
<tr>
<td align="right"><label for="captcha">Защитный код:</label></td>
<td><input type="text" id="captcha" size="30" name="captcha" onfocus="showHelp('help_captcha')" onblur="hideHelp('help_captcha')"></td>
<td id="help_captcha" style="display:none">Help captcha</td>
<tr>
<td align="right"></td>
<td> <input type="submit" value="Зарегистрироваться"></td>
</table>

</form>

но если не подойдет, то неплохо было бы узнать как ты хочешь это видеть

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

На боку кобура болталась, сзади шашка отцовская звякала.
Впереди меня все хохотало, а позади все плакало (с)

Just123

Дата 4.1.2010, 21:34 (ссылка)

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

Загрузка ...

Шустрый

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

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

patap, Великолепно! Это именно то, что мне требовалось! Большое вам спасибо! smile

P.S. Ммм.. немного дизайн сбивается когда текст подсказки длинный, а можно как-нибудь сделать, чтобы сообщение появлялось в фиксированном диве? Или в таком случаи, нужно сделать 4 одинаковых дива и при клике показывать нужный?

Это сообщение отредактировал(а) Just123 - 4.1.2010, 21:36

neokortex

Дата 4.1.2010, 22:38 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

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

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

тебе уже в рот положили. стили/верстку меняй.

patap

Дата 4.1.2010, 22:47 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

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

ну или так, может есть и минусы в таком методе, но вроде работает ))

Код


<script type="text/javascript">
  function showHelp(elemId) {
    var obj = document.getElementById(elemId);
    var cord = absPosition(obj);
    var help = document.getElementById('help');
    var content = '';
    var offsetX = 220;
    
    switch (elemId) {
      case 'account': content = 'Account help'; break;
      case 'password': content = 'Password help'; break;
      case 'repassword': content = 'Repassword help'; break;
      case 'captcha': content = 'Captcha help'; break;
    }
    help.innerHTML = content;
    help.style.left = cord.x + offsetX + 'px';
    help.style.top = cord.y + 'px';
    help.style.display = 'block';
  }
  
  function hideHelp(elemId) {
    document.getElementById('help').style.display = 'none';
  }
  
  function absPosition(obj) { 
    var x = y = 0; 
    while (obj) { 
      x += obj.offsetLeft; 
      y += obj.offsetTop; 
      obj = obj.offsetParent; 
    } 
    return {x:x, y:y}; 
  }
</script>

<div id="help" style="display:none; position:absolute;"></div>

<form action="index.php?action=registration_complete" method="POST" onsubmit="return SendForm();">
<table border="0">
<tr>
<td align="right"><label for="account">Название аккаунта:</label></td>
<td><input type="text" id="account" size="30" name="account" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td align="right"><label for="password">Пароль:</label></td>
<td><input type="password" id="password" size="30" name="password" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td align="right"><label for="repassword">Подтверждение пароля:</label></td>
<td><input type="password" id="repassword" size="30" name="repassword" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td></td>
<td>КАПТЧА</td>
<tr>
<td align="right"><label for="captcha">Защитный код:</label></td>
<td><input type="text" id="captcha" size="30" name="captcha" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td align="right"></td>
<td> <input type="submit" value="Зарегистрироваться"></td>
</table>

</form>

Это сообщение отредактировал(а) patap - 4.1.2010, 23:00

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

На боку кобура болталась, сзади шашка отцовская звякала.
Впереди меня все хохотало, а позади все плакало (с)

Just123

Дата 5.1.2010, 00:20 (ссылка)

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

Загрузка ...

Шустрый

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

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

patap, Спасибо большое! smile

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