Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> 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
 
 Start new topic
Odpowiedzi
Vir
post
Post #2





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

Posty w temacie
- Vir   Tooltips script   27.04.2005, 08:29:37
- - nospor   daj w href w onclick na koncu return false. Mi to ...   27.04.2005, 08:36:33
- - Vir   Dzięki za odzew, ale nie o to chodzi. Skopiuj kod,...   27.04.2005, 09:17:21
- - nospor   No już wiem o co Ci chodzi W operze jest podobn...   27.04.2005, 09:40:15
- - bendi   Klasa tooltip ustawia pozycje warstwy na absolute,...   4.05.2005, 09:34:47
- - Vir   Dzisiaj rano doznałem olśnienia i doszedłem do roz...   4.05.2005, 22:07:55

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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