Forum PHP.pl > Tooltips script

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Vir

27.04.2005, 08:29:37

Witam,

napisałem skrypt podpowiedzi w formie dymków/chmurek.
Problem jest taki, że w IE, w przypadku gdy strona jest na tyle długa, że na ekranie pojawia się scroll, jeżeli najedziemy na link podpowiedzi, wówczas na ułamek sekundy scroll "skacze" na sam dół i powraca. W innych skryptach (dostępnych w sieci) tak się nie dzieje, próbowałem prawie wszystkich możliwości i nic... Dalej to samo.
Po raz pierwszy wymiękłem i nic mi już do głowy nie przychodzi, stąd proszę Was o pomoc w zdiagnozowaniu problemu

Poniżej skrypt z dużą ilością znaczników <br />, tak aby pojawił się scroll i żebyście mogli zauważyć opisany wyżej, niechciany efekt.

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
 
body
        {
         text-align:center;
        }
 
.tooltip
        {
         border-width:1px;
         border-style:dashed;
         border-color:#696969;
         position:absolute;
         margin-top:25px;
         background:#E5E5E5;
         color:#000000;
         padding:2px;
        }
 
</style>
<script type="text/javascript">
 
/***********************************************************************
                     Tooltips script v.1.0
 
         Copyrights (c) 2005 Mariusz 'Vir' Grabczynski
 
                 free for non-commercial use
 
             [please leave this comment intact]
 
 
 
 Parametrs (in 'title' attributes):
 
 | - new line [should be placed directly after words - whithout space]
 
***********************************************************************/
 
onload=function(d,b,a,nD,nDe,tV,e)
{
 d=document;b=d.body;a=b.getElementsByTagName('a');
 for(i=0;i<a.length;i++)
 {
  if(a[i].title)
   {
    a[i].onmouseover=function()
     {
      nD=d.createElement('div');nD.className='tooltip';nD.id='tooltip';
b.appendChild(nD);tV=this.title;
      nD.innerHTML=this.title.replace(/\|/g,"<br />");
      this.title='';
     }
    a[i].onmousemove=function()
     {
      if(nDe=d.getElementById('tooltip'))
 {
  e=e||event;
  with(nDe.style){left=e.clientX+b.scrollLeft+'px';top=e.clientY+b.scrollTop+'px';}
 }
     }
    a[i].onmouseout=function()
{
if(nDe=d.getElementById('tooltip'))b.removeChild(nDe);
this.title=tV;
}
   }
 }
}
 
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#" title="Testowy opis| 123, abc.">Przykład</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
[HTML] pobierz, plaintext

nospor

27.04.2005, 08:36:33

daj w href w onclick na koncu return false. Mi to zawsze pomagało
<a href="#" onclick="return false;" ....

Vir

27.04.2005, 09:17:21

Dzięki za odzew, ale nie o to chodzi.
Skopiuj kod, zapisz jako plik html, jeszcze raz przeczytaj tekst, a zobaczysz w czym problem (przy IE)

Pozdrawiam

nospor

27.04.2005, 09:40:15

No już wiem o co Ci chodzi

W operze jest podobnie, ale mniej to widać.
I nie mam pojęcia o co chodzi.

bendi

4.05.2005, 09:34:47

Klasa tooltip ustawia pozycje warstwy na absolute, ale nie nadaje jej zadnych wlasnosci ekranowych, wiec pojawia sie ona na samym dole dokumentu dopoki ktos nie poruszy myszka i nie nada mu jakis wlasnosci przekazanych z kursora. Dopiero wtedy przechodzi on gdzie trzeba.

Tutaj masz skrypt Elusia , ktory tez dynamicznie dodaje zdarzenia i wtedy jest mozliwe przekazanie obiektu event w Gecko.

Ja niestety ustawiam zdarzenie za pomoca atrybutu i to kod wywolujacy juz jest wiec nie mam tego komfortu przekazywania event'ow jako parametr funkcji dlatego rozwiazalem to nieco inaczej - pokazuje warstw'e toolTipa dopiero wtedy gdy ktos poruszy myszka nad obiektem ktory wywoluje toolTip'a. Uznalem ze z dwojga zlego to jest nieco lepsze rozwiazanie.

Powodzenia.

Vir

4.05.2005, 22:07:55

Dzisiaj rano doznałem olśnienia i doszedłem do rozwiązania, które zamieszczam poniżej. Jak widać wystarczyła mała modyfikacja

Kod

/*

Tooltips script v.1.0

Copyrights (c) 2005 Mariusz 'Vir' Grabczynski

free for non-commercial use

[please leave this comment intact]

Parametrs (in 'title' attributes):

| - new line [should be placed directly after words - whithout space]

*/

onload=function(d,b,a,i,nD,nDe,tV)
{
  d=document;b=d.body;a=b.getElementsByTagName('a');
  for(i=0;i<a.length;i++)
  {
  if(a[i].title)
  {
   nD=d.createElement('div');nD.className='tooltip';nD.id='tooltip';b.appendChild(nD);
   a[i].onmouseover=function()
   {
    b.appendChild(nD);tV=this.title;nD.innerHTML=this.title.replace(/\|/g,"<br />");
    this.title='';
   }
   a[i].onmousemove=function(e)
   {
    if(nDe=d.getElementById('tooltip'))
     {
      e=e||event;
      with(nDe.style){left=e.clientX+b.scrollLeft+'px';top=e.clientY+b.scrollTop+'px';}
     }
   }
   a[i].onmouseout=function()
   {
    t=d.getElementById('tooltip');if(nDe=t)b.removeChild(nDe);this.title=tV;
   }
   a[i].onclick=function()
   {
    return false;
   }
  }
}
}

Ps. Jeżeli mamy ustawiony background-color w a:hover (css), wówczas problem pojawi się na nowo - rozwiązanie to usunięcie tego stylu.

Pzdr

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.