Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Всплывающая подсказка, нужен совет по коду 
V
    Опции темы
SelenIT
Дата 16.5.2007, 10:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401
К сожалению, на данный момент не исчезла(. Но проблемы в приведенном коде не замечаю... Вечером, если будет время, попытаюсь вникнуть и разобраться... просто сейчас, сорри, цейтнот страшный.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Wolf1994
Дата 16.5.2007, 11:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
SelenIT, спасибо!

Добавлено через 5 минут и 27 секунд
Полный код [на всякий случай]:

Код

document.write('<div id="help" class="help"></div>');
var tooltip_x,tg=new Array('TD','IMG','A','SPAN','LEGEND','INPUT'),i,i2,a,cr,h,xadd,yadd;
function tooltip()
{    
 for(i2=0;i2<tg.length;i2++)
 {
  a=document.getElementsByTagName(tg[i2]);
  for(i=0;i<a.length;i++)
  {
   if(a[i].title)
   {
    a[i].onmouseover=tooltipover;
    a[i].onmouseout=tooltipout;
   }
  }
 }
}

function tooltipover(ev)
{
 ev=ev||window.event;
 cr=ev.target||ev.srcElement;
 if(h=document.getElementById("help"))
 {
  if(typeof(tooltip_x)!="undefined")
  {
   t=h.innerHTML;
   for(i=0;i<10;i++)
    t=t.replace("<br>","\n");
   tooltip_x.title=t;
   tooltip_x="";
   h.innerHTML="";
   h.style.visibility="hidden";     
  }
  tooltip_x=cr;
  t=cr.title;
  t=t.replace("<","&lt;");
  t=t.replace(">","&gt;");
  for(i=0;i<10;i++)
   t=t.replace("\n","<br>");
  h.innerHTML=t;
  cr.title="";
  try

  {
   xadd=window.pageXOffset+ev.clientX+10;
   if(ev.clientX>(window.innerWidth-250))
    xadd=window.innerWidth+window.pageXOffset-250;
   yadd=window.pageYOffset+ev.clientY-10;
   if(ev.clientY<50)
    yadd=50;
   if(ev.clientY>(window.innerHeight-85))
    yadd=window.innerHeight+window.pageYOffset-85;
  }

  catch(e)

  {
   xadd=document.body.scrollLeft+ev.clientX+10;
   if(ev.clientX>(window.clientWidth-250))
    xadd=document.body.scrollLeft+window.clientWidth-250;
   yadd=document.body.scrollTop+ev.clientY-10;
   if(ev.clientY<50)
    yadd=50;
   if(ev.clientY>(window.clientHeight-85))
    yadd=document.body.scrollTop+window.clientHeight-85;
  }
  h.style.left=xadd+"px";
  h.style.top=yadd+"px";
  h.style.visibility="visible";
 }
}

function tooltipout(ev)
{      
 ev=ev||window.event;
 cr=ev.target||ev.srcElement;
 if(h=document.getElementById("help"))
 {
  if(h.innerHTML)
  {
   tooltip_x="";
   t=h.innerHTML;
   for(i=0;i<10;i++)
    t=t.replace("<br>","\n");
   cr.title=t;
   h.innerHTML="";
   h.style.visibility="hidden";
  }
 }  
}
PM MAIL WWW   Вверх
SelenIT
Дата 16.5.2007, 12:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401
Wolf1994, кажется, разобрался: скрипт в IE заходит в блок try, а поскольку несуществующие свойства при чтении дают не ошибку, а всего лишь undefined - этот блок "нормально" выполняется, но в итоге в xadd (а со второго раза - и в yadd) оказывается NaN. Придется делать ветвление не по try/catch, а обычным if/else, наверное...

И еще, зачем столько глобальных переменных? Вроде ж их почти все можно локализовать...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Wolf1994
Дата 16.5.2007, 15:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Сделал:

Код

  if(window.clientWidth)
  {
   xadd=document.body.scrollLeft+ev.clientX+10;
   if(ev.clientX>(window.clientWidth-250))
    xadd=document.body.scrollLeft+window.clientWidth-250;
   yadd=document.body.scrollTop+ev.clientY-10;
   if(ev.clientY<50)
    yadd=50;
   if(ev.clientY>(window.clientHeight-85))
    yadd=document.body.scrollTop+window.clientHeight-85;
  }

  else

  {
   xadd=window.pageXOffset+ev.clientX+10;
   if(ev.clientX>(window.innerWidth-250))
    xadd=window.innerWidth+window.pageXOffset-250;
   yadd=window.pageYOffset+ev.clientY-10;
   if(ev.clientY<50)
    yadd=50;
   if(ev.clientY>(window.innerHeight-85))
    yadd=window.innerHeight+window.pageYOffset-85;
  }

Как теперь?

Цитата(SelenIT @  16.5.2007,  12:37 Найти цитируемый пост)
И еще, зачем столько глобальных переменных? Вроде ж их почти все можно локализовать... 

Честно говоря, имею очень поверхностные знания JavaScript. Не уверен насчёт объявления переменных, решил, что продекларировав один раз можно сократить размер кода smile Сам понимаю, что глупо, но так приучился - экономить каждый байт.
PM MAIL WWW   Вверх
12345c
Дата 16.5.2007, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Если код, выложенный на демостранице, считается рабочим, то работы ещё много. IE6 совсем не показывает, кроме чёрточки, пересекающей цифры, а FF, если придвинуть правый край ближе, впадает в растерянность и быстро-быстро мигает подсказкой, ничего толком не показывая.

Добавлено через 8 минут и 14 секунд
Ошибка втом, что не учитывается случай налезания мыши на подсказку. При этом происходит mouseout, которое не блокируется по mouseover на подсказке.

Обычно делают после out задержку, которая отменяется, если произошло новое mouseover - на подсказке или на стартовом элементе. out с подсказки - то же самое. Тогда возможны и налезания мыши, и разрывы между элементами, когда прыгаешь с одного на другой, а подсказка не закрывается. (Та же техника в меню.)
PM WWW   Вверх
Wolf1994
Дата 16.5.2007, 15:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
12345c, прошу уточнить. Я протестировал в FF 2.0.0.1 и Opera 9.10 - в обоих браузерах - "на ура", без нареканий. Вы смотрели адрес: http://www.wolf-ware.ru/ ?
PM MAIL WWW   Вверх
12345c
Дата 16.5.2007, 15:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Я именно на нём смотрел в FF 2.0 и IE6 (Maxthon). Сейчас хотел скриншот для пояснения, но скрипт уже отключен.
PM WWW   Вверх
Wolf1994
Дата 16.5.2007, 16:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Касательно IE - буду очень благодарен за скриншот. В данный момент скрипт работает и я обязуюсь его не трогать до тех пор, пока не получу снимок экрана.
PM MAIL WWW   Вверх
12345c
Дата 16.5.2007, 16:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
На IE смотреть нечего - подсказки нет. На FF показываю момент, который, наверное, обойдён вниманием. Я понимаю, что была попытка сдвинуть подсказку влево, если она заходит за край окна. Вот что вышло - подсказка очень быстро мигает. В динамике скриншот этого не показывает, а видно примерно вот что:

(грубо обрисовал то, что видно в динамике и место наведения мыши. Главное, чтобы край окна был близко)

Добавлено через 2 минуты и 24 секунды
(и ещё плывущие тексты из другого скрипта едут за край и создают полосу прокрутки внизу, об это уже упоминали)

Присоединённый файл ( Кол-во скачиваний: 7 )
Присоединённый файл  snap_copy.png 7,98 Kb
PM WWW   Вверх
Wolf1994
Дата 16.5.2007, 17:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Цитата(12345c @  16.5.2007,  16:56 Найти цитируемый пост)
(и ещё плывущие тексты из другого скрипта едут за край и создают полосу прокрутки внизу, об это уже упоминали) 


Исправил. Thanks 2 SelenIT.

Добавил overflow и на "подсказку" и не стал заморачиваться с шириной браузера.

И, всё-таки, что не так с IE?

Код

document.write('<div id="help" class="help"></div>');
var tooltip_x,tg=new Array('TD','IMG','A','SPAN','LEGEND','INPUT'),i,i2,a,cr,h,xadd,yadd;

function tooltip()
{    
 for(i2=0;i2<tg.length;i2++)
 {
  a=document.getElementsByTagName(tg[i2]);
  for(i=0;i<a.length;i++)
  {
   if(a[i].title)
   {
    a[i].onmouseover=tooltipover;
    a[i].onmouseout=tooltipout;
   }
  }
 }
}

function tooltipover(ev)
{
 ev=ev||window.event;
 cr=ev.target||ev.srcElement;
 if(h=document.getElementById("help"))
 {
  if(typeof(tooltip_x)!="undefined")
  {
   t=h.innerHTML;
   for(i=0;i<10;i++)
    t=t.replace("<br>","\n");
   tooltip_x.title=t;
   tooltip_x="";
   h.innerHTML="";
   h.style.visibility="hidden";     
  }
  tooltip_x=cr;
  t=cr.title;
  t=t.replace("<","&lt;");
  t=t.replace(">","&gt;");
  for(i=0;i<10;i++)
   t=t.replace("\n","<br>");
  h.innerHTML=t;
  cr.title="";
  if(window.clientWidth)
  {
   xadd=document.body.scrollLeft+ev.clientX+10;
//   if(ev.clientX>(window.clientWidth-250))
//    xadd=document.body.scrollLeft+window.clientWidth-250;
   yadd=document.body.scrollTop+ev.clientY-10;
//   if(ev.clientY<50)
//    yadd=document.body.scrollTop+50;
//   if(ev.clientY>(window.clientHeight-85))
//    yadd=document.body.scrollTop+window.clientHeight-85;
  }

  else

  {
   xadd=window.pageXOffset+ev.clientX+10;
//   if(ev.clientX>(window.innerWidth-250))
//    xadd=window.innerWidth+window.pageXOffset-250;
   yadd=window.pageYOffset+ev.clientY-10;
//   if(ev.clientY<50)
//    yadd=window.pageYOffset+50;
//   if(ev.clientY>(window.innerHeight-85))
//    yadd=window.innerHeight+window.pageYOffset-85;
  }
  h.style.left=xadd+"px";
  h.style.top=yadd+"px";
  h.style.visibility="visible";
 }
}

function tooltipout(ev)
{
 ev=ev||window.event;
 cr=ev.target||ev.srcElement;
 if(h=document.getElementById("help"))
 {
  if(h.innerHTML)
  {
   tooltip_x="";
   t=h.innerHTML;
   for(i=0;i<10;i++)
    t=t.replace("<br>","\n");
   cr.title=t;
   h.innerHTML="";
   h.style.visibility="hidden";
  }
 } 
}


Добавлено через 1 минуту и 54 секунды
Код

 ev=ev||window.event;

Может - здесь: "body.event"?
PM MAIL WWW   Вверх
12345c
Дата 16.5.2007, 19:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
не работает, потому что Вы запускаете его в Standards Mode, а для IE6 надо тогда вместо document.body писать document.documentElement - см. http://www.opera.com/docs/specs/doctype/ - 

Код

   d=document;
   xadd=(d.compatMode!="CSS1Compat"?d.body.scrollLeft:d.documentElement .scrollLeft)+ev.clientX+10;
и т.д.

2-я ошибка - window.clientWidth - неправильный способ определения IE.

Там есть и дальше ошибки, потому что отдельно запускаемый скрипт замещает подсказкой базовый текст. Я бы не стал править, а написал бы своё на строчек 8-15. Кстати, подобные примеры у меня есть на странице http://js2.ru/example/JsPrimeryCode-46.htm .



Это сообщение отредактировал(а) 12345c - 3.3.2008, 11:41


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
12345c
Дата 16.5.2007, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Разобрался, что там не работало - не так понял идею сначала. Надо написать вначале

Код

<style>.help{position:absolute;visibility:hidden;border:1px solid #ccc}</style>
<script> d=document;d.write('<a id="help0" class="help1" title=123456>12345</a>');
  d.write('<div id="help" class="help"></div>');
, тогда будет показывать (после исправления тех 2 ошибок).

Но хочу сказать, что идея - не очень. Подсказка привязана к точке события мыши. С какой границы её подвели, там появится. Это довольно некрасиво, потому что создаёт ощущение случайности точки появления, непредсказуемость. Привязывать надо или строго к движению мыши, или к элементу документа.

Рацпредложение: делать расстановку подсказок по классу и по имени в атрибуте name. Те, у которых name задействовано, будут обслуживаться по классу. Класс, правда, дольше будет работать, поэтому его надо избегать.
PM WWW   Вверх
Wolf1994
Дата 17.5.2007, 07:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Исправил. Определение браузера возложил на сервер. "Моды" учёл.

Код

  if(browser=="ie")
  {
   xadd=(document.compatMode!="CSS1Compat"?document.body.scrollLeft:document.documentElement.scrollLeft)+ev.clientX+10;
   yadd=(document.compatMode!="CSS1Compat"?document.body.scrollTop:document.documentElement.scrollTop)+ev.clientY+10;
  }

  else

  {
   xadd=window.pageXOffset+ev.clientX+10;
   yadd=window.pageYOffset+ev.clientY-10;
  }
  h.style.left=xadd+"px";
  h.style.top=yadd+"px";
  h.style.visibility="visible";
 }

 "CSS"  прописан в файле стилей...

Код

.help{padding:5px;visibility:hidden;position:absolute;background-color:white;color:black;border:1px solid black;z-index:200;overflow:hidden}


Добавлено через 1 минуту и 13 секунд
Как теперь?  smile 
PM MAIL WWW   Вверх
Wolf1994
Дата 18.5.2007, 04:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Есть ли результат? Пользователи IE, отзовитесь!
PM MAIL WWW   Вверх
Wolf1994
Дата 19.5.2007, 08:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Вопрос по прежнему не решён.
PM MAIL WWW   Вверх
Страницы: (3) Все 1 [2] 3 
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0643 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.