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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Всплывающая подсказка, нужен совет по коду 
V
    Опции темы
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 режим?
PM MAIL WWW   Вверх
Sardar
Дата 5.5.2007, 13:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


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

Репутация: 78
Всего: 317
А в чём конкретно проблема? Скрипт работает везде, в standards-compilance режиме.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
SelenIT
Дата 5.5.2007, 17:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
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>');
PM MAIL WWW   Вверх
AKS
Дата 5.5.2007, 19:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
Wolf1994, взгляните: 
Всплывающая подсказка (tooltip) с использованием DOM (статья)
Исходник
Возможно Вам пригодится...
PM MAIL   Вверх
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.
PM MAIL WWW   Вверх
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 режим"...
Еще кое-что, самое очевидное. У Вас для каждого элемента с подсказками создается своя собственная функция, а в этом нет никакой необходимости...
PM MAIL   Вверх
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";
      }
     }  
    }
   }
  }
 }
}
PM MAIL WWW   Вверх
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;
PM MAIL   Вверх
Wolf1994
Дата 6.5.2007, 09:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
AKS, спасибо, создал. Как теперь?
PM MAIL WWW   Вверх
AKS
Дата 6.5.2007, 13:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
Цитата(Wolf1994 @  6.5.2007,  09:13 Найти цитируемый пост)
Как теперь? 

Это Вы о чем? smile
PM MAIL   Вверх
Wolf1994
Дата 6.5.2007, 18:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Как финальный вариант в IE 6/7?.. Больше переделывать не планирую.
PM MAIL WWW   Вверх
Wolf1994
Дата 15.5.2007, 22:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 4
Всего: 29
Всё! Последний тест. Прошу сказать - как в IE отображается "подсказка" ссылки на "Subscribe", в правом-нижнем углу сайта.
PM MAIL WWW   Вверх
SelenIT
Дата 16.5.2007, 00:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 49
Всего: 401
У меня, к сожалению, вообще не отображается. Выкидывает ошибку в 411 строке.

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
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";

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

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


 




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


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

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