Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Tooltips script
Vir
post
Post #1





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 25.02.2004

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
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 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  4. <style type="text/css">
  5.  
  6. body
  7.         {
  8.          text-align:center;
  9.         }
  10.  
  11. .tooltip
  12.         {
  13.          border-width:1px;
  14.          border-style:dashed;
  15.          border-color:#696969;
  16.          position:absolute;
  17.          margin-top:25px;
  18.          background:#E5E5E5;
  19.          color:#000000;
  20.          padding:2px;
  21.         }
  22.  
  23. </style>
  24. <script type="text/javascript">
  25.  
  26. /***********************************************************************
  27.                      Tooltips script v.1.0
  28.  
  29.          Copyrights (c) 2005 Mariusz 'Vir' Grabczynski
  30.  
  31.                  free for non-commercial use
  32.  
  33.              [please leave this comment intact]
  34.  
  35.  
  36.  
  37.  Parametrs (in 'title' attributes):
  38.  
  39.  | - new line [should be placed directly after words - whithout space]
  40.  
  41. ***********************************************************************/
  42.  
  43. onload=function(d,b,a,nD,nDe,tV,e)
  44. {
  45.  d=document;b=d.body;a=b.getElementsByTagName('a');
  46.  for(i=0;i<a.length;i++)
  47.  {
  48.   if(a[i].title)
  49.    {
  50.     a[i].onmouseover=function()
  51.      {
  52.       nD=d.createElement('div');nD.className='tooltip';nD.id='tooltip';
  53. b.appendChild(nD);tV=this.title;
  54.       nD.innerHTML=this.title.replace(/\|/g,"<br />");
  55.       this.title='';
  56.      }
  57.     a[i].onmousemove=function()
  58.      {
  59.       if(nDe=d.getElementById('tooltip'))
  60.  {
  61.   e=e||event;
  62.   with(nDe.style){left=e.clientX+b.scrollLeft+'px';top=e.clientY+b.scrollTop+'px';}
  63.  }
  64.      }
  65.     a[i].onmouseout=function()
  66. {
  67. if(nDe=d.getElementById('tooltip'))b.removeChild(nDe);
  68. this.title=tV;
  69. }
  70.    }
  71.  }
  72. }
  73.  
  74. </script>
  75. </head>
  76. <body>
  77. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  78. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  79. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  80. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  81. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  82. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  83. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  84. <a href="#" title="Testowy opis| 123, abc.">Przykład</a>
  85. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  86. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  87. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  88. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  89. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  90. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  91. </body>
  92. </html>
[HTML] pobierz, plaintext


Ten post edytował Vir 27.04.2005, 09:27:19
Go to the top of the page
+Quote Post
nospor
post
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
daj w href w onclick na koncu return false. Mi to zawsze pomagało
<a href="#" onclick="return false;" ....
Go to the top of the page
+Quote Post
Vir
post
Post #3





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 25.02.2004

Ostrzeżenie: (0%)
-----

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) (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Pozdrawiam
Go to the top of the page
+Quote Post
nospor
post
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
No już wiem o co Ci chodzi (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
W operze jest podobnie, ale mniej to widać.
I nie mam pojęcia o co chodzi. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
bendi
post
Post #5





Grupa: Zarejestrowani
Postów: 401
Pomógł: 5
Dołączył: 14.09.2003
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Vir
post
Post #6





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 25.02.2004

Ostrzeżenie: (0%)
-----

Dzisiaj rano doznałem olśnienia i doszedłem do rozwiązania, które zamieszczam poniżej. Jak widać wystarczyła mała modyfikacja (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 25.08.2025 - 04:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn