VPF::Всплывающая подсказка - Форум программистов

Wolf1994

Дата 5.5.2007, 12:22 (ссылка)

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

Загрузка ...

Эксперт

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

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

Вот код:

Код


<a href="#" title="JHJDHSJHDJS">Test</a>
<span title="HNJJN">Test2</span>
<div id="help" class="help" style="visibility:hidden;position:absolute;background-color:white;border:1px solid black"></div>

Код


var tg2=new Array('TD','A','DIV','SPAN');
for(i2=0;i2<tg2.length;i2++)
{
 var a2=document.getElementsByTagName(tg2[i2]);
 for(i=0;i<a2.length;i++)
 {
   a2[i].onmouseover=function(ev)
   {
     ev=ev||window.event;
     var cr=ev.target||ev.srcElement;
     var hh=document.getElementById("help");
     hh.innerHTML="test";//.cr.title;
     cr.title="";
     hh.style.left=ev.clientX+10+"px";
     hh.style.top=ev.clientY-10+"px";
     hh.style.visibility="visible";
  }
  a2[i].onmouseout=function(ev)
  {
    ev=ev||window.event;
    var cr=ev.target||ev.srcElement;
    var hh=document.getElementById("help");
    cr.title=hh.innerHTML;
    hh.innerHTML="";
    hh.style.visibility="hidden";
  }
 }
}

Идея - не заморачиваться с переписью всех тайтлов, оставить их для поисковиков и перписать скриптом.

В quickmode FF 2 скрипт прекрасно работает. Есть ли надежда сделать его кроссбраузерным и вписать в XHTML-compliance режим?

Sardar

Дата 5.5.2007, 13:34 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

А в чём конкретно проблема? Скрипт работает везде, в standards-compilance режиме.

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

SelenIT

Дата 5.5.2007, 17:47 (ссылка)

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

Загрузка ...

баг форума

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

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

Переписать значения tg2 в нижнем регистре? В quirks mode, AFAIK, ничего не изменится, а в XHTML (кот. чувствителен к регистру) getElementsByTagName должен начать перечисленные теги ловить...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Wolf1994

Дата 5.5.2007, 19:34 (ссылка)

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

Загрузка ...

Эксперт

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

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

Да, совершенно верно - скрипт работает нормально, в финальной версии был баг... И всё же, не так как хотелось бы. При тесном соседстве элементов, происходит так, что тайтл остаётся на элементе, хотя курсор сдвинулся на следующую ссылку. Как этого можно избежать? Один тайтл не успевает отрабатывать до появления следующего. id'ы навесить на элементы, чтобы при инициализации нового tooltip'а корректно закрыть старый, обратившись к нему по идентификатору - не удаётся. Что делать в этой ситуации? Этот вопрос разрешим в рамках JavaScript?

Добавлено через 13 минут и 40 секунд
Кажется, получилось smile

Код


var tooltip_x;
function tooltip()
{    
 var ar=new Array(),tg=new Array('TD','A','DIV','SPAN'),i,i2,a,cr,h;
 for(i2=0;i2<tg.length;i2++)
 {
  a=document.getElementsByTagName(tg[i2]);
  for(i=0;i<a.length;i++)
  {
   a[i].onmouseover=function(ev)
   {
    ev=ev||window.event;
    cr=ev.target||ev.srcElement;
    h=document.getElementById("help");
    if(typeof(tooltip_x)!="undefined")
    {
     tooltip_x.title=h.innerHTML;
     tooltip_x="";
     h.innerHTML="";
     h.style.visibility="hidden";     
    }
    if(cr.title)
    {
     tooltip_x=cr;
     h.innerHTML=cr.title;
     cr.title="";
     h.style.left=ev.clientX+10+"px";
     h.style.top=ev.clientY-10+"px";
     h.style.visibility="visible";
    }     
   }
   a[i].onmouseout=function(ev)
   {      
    ev=ev||window.event;
    cr=ev.target||ev.srcElement;
    h=document.getElementById("help");
    if(h.innerHTML)
    {
     tooltip_x="";
     cr.title=h.innerHTML;
     h.innerHTML="";
     h.style.visibility="hidden";
    }  
   }
  }
 }
}
document.write('<div id="help" class="help"></div>');

AKS

Дата 5.5.2007, 19:57 (ссылка)

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

Загрузка ...

Участник форума

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

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

Wolf1994, взгляните:
Всплывающая подсказка (tooltip) с использованием DOM (статья)
Исходник
Возможно Вам пригодится...

Wolf1994

Дата 5.5.2007, 20:49 (ссылка)

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

Загрузка ...

Эксперт

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

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

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

Код


document.write('<div id="help" class="help"></div>');
var tooltip_x;
function tooltip()
{    
 var tg=new Array('TD','A','SPAN'),i,i2,a,cr,h;
 for(i2=0;i2<tg.length;i2++)
 {
  a=document.getElementsByTagName(tg[i2]);
  for(i=0;i<a.length;i++)
  {
   a[i].onmouseover=function(ev)
   {
    ev=ev||window.event;
    cr=ev.target||ev.srcElement;
    if(h=document.getElementById("help"))
    {
     if(typeof(tooltip_x)!="undefined")
     {
      tooltip_x.title=h.innerHTML;
      tooltip_x="";
      h.innerHTML="";
      h.style.visibility="hidden";     
     }
     if(cr.title)
     {
      tooltip_x=cr;
      h.innerHTML=cr.title;
      cr.title="";
      try

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

      catch(e)

      {
       h.style.left=document.body.scrollLeft+ev.clientX+10+"px";
       h.style.top=document.body.scrollTop+ev.clientY-10+"px";
      }
      h.style.visibility="visible";
     }     
    }
   }
   a[i].onmouseout=function(ev)
   {      
    ev=ev||window.event;
    cr=ev.target||ev.srcElement;
    if(h=document.getElementById("help"))
    {
     if(h.innerHTML)
     {
      tooltip_x="";
      cr.title=h.innerHTML;
      h.innerHTML="";
      h.style.visibility="hidden";
     }
    }  
   }
  }
 }
}

Тестируемый сайт: http://www.wolf-ware.ru/ - нужна оценка пользователей Internet Explorer.

AKS

Дата 5.5.2007, 21:25 (ссылка)

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

Загрузка ...

Участник форума

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

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

Цитата(Wolf1994 @ 5.5.2007, 20:49

)

Надеюсь, что нет

Зря, зря. Могли бы узнать кое-что полезное.
Вот как-раз по "оценке пользователей Internet Explorer". В своей статье (ссылка выше) Александр пишет:

Цитата

Проблема возникала в Internet Explorer 6 при указании «правильного» !DOCTYPE.
Дело в том, что при этом канвой документа считается не элемент body (как в ранних версиях IE), а элемент html (!).

Это то, что Вы не учли в своем сценарии, а ведь Вы желали "вписать в XHTML-compliance режим"...
Еще кое-что, самое очевидное. У Вас для каждого элемента с подсказками создается своя собственная функция, а в этом нет никакой необходимости...

Wolf1994

Дата 6.5.2007, 07:24 (ссылка)

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

Загрузка ...

Эксперт

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

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

AKS, то есть в IE скрипт не работает? Работает некорректно?

Цитата(AKS @ 5.5.2007, 21:25

)

Еще кое-что, самое очевидное. У Вас для каждого элемента с подсказками создается своя собственная функция, а в этом нет никакой необходимости...

Можно ли это обойти, при "навешивании" обработчика на готовые ссылки?

Добавлено через 5 минут и 26 секунд
Подправил, сделав проверку на тайтл, до назначения функции:

Код


document.write('<div id="help" class="help"></div>');
var tooltip_x;
function tooltip()
{    
 var tg=new Array('TD','A','SPAN','LEGEND'),i,i2,a,cr,h;
 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=function(ev)
    {
     ev=ev||window.event;
     cr=ev.target||ev.srcElement;
     if(h=document.getElementById("help"))
     {
      if(typeof(tooltip_x)!="undefined")
      {
       tooltip_x.title=h.innerHTML;
       tooltip_x="";
       h.innerHTML="";
       h.style.visibility="hidden";     
      }
      tooltip_x=cr;
      h.innerHTML=cr.title;
      cr.title="";
      try

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

      catch(e)

      {
       h.style.left=document.body.scrollLeft+ev.clientX+10+"px";
       h.style.top=document.body.scrollTop+ev.clientY-10+"px";
      }
      h.style.visibility="visible";
     }
    }
    a[i].onmouseout=function(ev)
    {      
     ev=ev||window.event;
     cr=ev.target||ev.srcElement;
     if(h=document.getElementById("help"))
     {
      if(h.innerHTML)
      {
       tooltip_x="";
       cr.title=h.innerHTML;
       h.innerHTML="";
       h.style.visibility="hidden";
      }
     }  
    }
   }
  }
 }
}

AKS

Дата 6.5.2007, 08:38 (ссылка)

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

Загрузка ...

Участник форума

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

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

Цитата(Wolf1994 @ 6.5.2007, 07:24

)

...то есть в IE скрипт не работает? Работает некорректно?

С нынешним типом документа работает.

Цитата(Wolf1994 @ 6.5.2007, 07:24

)

Можно ли это (своя собственная функция) обойти, при "навешивании" обработчика на готовые ссылки?

Можно. Не создавайте на каждом "витке" цикла for новые функции-обработчики событий mouseover/mouseout. Создайте две именованных функции (также, как Вы создали функцию по имени tooltip). Тогда в цикле остануться строки, типа:

Код


a[i].onmouseover = onMouseOver;
a[i].onmouseout = onMouseOut;

Wolf1994

Дата 6.5.2007, 09:13 (ссылка)

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

Загрузка ...

Эксперт

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

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

AKS, спасибо, создал. Как теперь?

AKS

Дата 6.5.2007, 13:39 (ссылка)

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

Загрузка ...

Участник форума

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

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

Цитата(Wolf1994 @ 6.5.2007, 09:13

)

Как теперь?

Это Вы о чем? smile

Wolf1994

Дата 6.5.2007, 18:28 (ссылка)

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

Загрузка ...

Эксперт

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

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

Как финальный вариант в IE 6/7?.. Больше переделывать не планирую.

Wolf1994

Дата 15.5.2007, 22:44 (ссылка)

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

Загрузка ...

Эксперт

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

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

Всё! Последний тест. Прошу сказать - как в IE отображается "подсказка" ссылки на "Subscribe", в правом-нижнем углу сайта.

SelenIT

Дата 16.5.2007, 00:36 (ссылка)

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

Загрузка ...

баг форума

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

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

У меня, к сожалению, вообще не отображается. Выкидывает ошибку в 411 строке.

И еще, плавающие надписи в шапке почему-то иногда заходят за край экрана, отчего появляется "скачущий" горизонтальный сколлинг. Надо бы их обернуть во что-нибудь с width: 100%; overflow: hidden; имхо...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Wolf1994

Дата 16.5.2007, 10:21 (ссылка)

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

Загрузка ...

Эксперт

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

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

SelenIT, sorry. В этот момент я ещё, возможно, тестировал скрипт. Как теперь?

...Для IE специфическим является этот фрагмент:

Код


  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";

Если ошибка не исчезла, прошу подсказать - всё ли здесь в порядке?

SelenIT

Дата 16.5.2007, 10:41 (ссылка)

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

Загрузка ...

баг форума

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

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

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

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

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";
  }
 }  
}

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, наверное...

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

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

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

Сам понимаю, что глупо, но так приучился - экономить каждый байт.

12345c

Дата 16.5.2007, 15:36 (ссылка)

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

Загрузка ...

Круглый

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

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

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

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

Обычно делают после out задержку, которая отменяется, если произошло новое mouseover - на подсказке или на стартовом элементе. out с подсказки - то же самое. Тогда возможны и налезания мыши, и разрывы между элементами, когда прыгаешь с одного на другой, а подсказка не закрывается. (Та же техника в меню.)

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/ ?

12345c

Дата 16.5.2007, 15:51 (ссылка)

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

Загрузка ...

Круглый

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

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

Я именно на нём смотрел в FF 2.0 и IE6 (Maxthon). Сейчас хотел скриншот для пояснения, но скрипт уже отключен.

Wolf1994

Дата 16.5.2007, 16:28 (ссылка)

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

Загрузка ...

Эксперт

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

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

Касательно IE - буду очень благодарен за скриншот. В данный момент скрипт работает и я обязуюсь его не трогать до тех пор, пока не получу снимок экрана.

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

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"?

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

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 задействовано, будут обслуживаться по классу. Класс, правда, дольше будет работать, поэтому его надо избегать.

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

Wolf1994

Дата 18.5.2007, 04:11 (ссылка)

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

Загрузка ...

Эксперт

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

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

Есть ли результат? Пользователи IE, отзовитесь!

Wolf1994

Дата 19.5.2007, 08:32 (ссылка)

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

Загрузка ...

Эксперт

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

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

Вопрос по прежнему не решён.

SelenIT

Дата 19.5.2007, 15:11 (ссылка)

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

Загрузка ...

баг форума

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

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

Wolf1994, с подсказкой уже, на мой взгляд, все в порядке. А вот с уплывающими за край span-ами и скачками скроллинга из-за них проблема осталась, к сожалению. Особенно оно заметно, если уменьшить окно. Говоря про overflow:hidden, я имел в виду ставить его на на сами span-ы (там-то от него никакого эффекта), а их все положить в контейнер (div) со стилем наподобие такого: width: 100%; height: 80px; margin-bottom: -80px; overflow: hidden;. Тогда сами span-ы могут сколько угодно уходить за экран (это даже интересно), но скроллинга не будет - все, что шире окна, просто обрежется.

Что имеет смысл задать самим span-am-"привидениям" - это white-space: nowrap;, чтоб они в IE не "ломались" от "удара" о правую границу окна (в надписях из двух слов второе слово не переносилось в этот момент вниз).

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Wolf1994

Дата 19.5.2007, 20:19 (ссылка)

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

Загрузка ...

Эксперт

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

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

SelenIT, большое спасибо за помощь!

"Призрачные" кейворды обернул в div с абсолютным позиционированием - простой div - растягивался. Переходя в оффтоп, всё ли сейчас в порядке с "шапкой" сайта?

12345c

Дата 20.5.2007, 16:36 (ссылка)

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

Загрузка ...

Круглый

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

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

Да, теперь показывает.

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