Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js/css]Pokazywanie div'a po odpowiedniej stronie kursora
Forum PHP.pl > Forum > Po stronie przeglądarki
Cienki1980
Potrzebuje porady w pewnej sprawie z którą nie mogę sobie poradzić.

Mam sobie stronę z iframe, w której to pokazywane są różne dane głównie w postaci tabelarycznej ( te interesujące mnie są właśnie w tabelkach )). Po najechaniu na daną komórkę ma pokazać mi się tekst z różnymi informacjami. Tekst ten wkładany jest do div'a i umieszczany po prawej stronie kursora.
Wszystko było fajnie, do czasu jak komórka leżała zbyt blisko krawędzi iframe. W takim przypadku div chował się poza krawędź iframa .. pojawiał sie na dole scroll do przesuwania, ale nie można było przesunąć bo jak się przesuwało kursor spoza komórki tekst znikał i scroll również znikał.

Chciałbym żeby skrypt pokazywał tego div'a z tekstem albo po prawej albo po lewej stronie kursora, w zależności od aktualnej pozycji kursora. Niestety wszystkie moje próby zawiodły i nie wiem jak to zrobić żeby było dobrze:(

  1. function pokaz (e,co)
  2. {
  3. var posx, posy;
  4. ie=(document.all)?1:0;
  5. if (ie)
  6. {
  7. posx = event.clientX;
  8. posy = event.clientY+document.body.scrollTop;
  9. }
  10. else
  11. {
  12. posx = e.pageX;
  13. posy = e.pageY;
  14. }
  15. //alert(posx);alert(posy);
  16. if (navigator.userAgent.indexOf ("Opera") != -1)
  17. {
  18. posx = e.clientX + document.body.scrollLeft;
  19. posy = e.clientY + document.body.scrollTop;
  20. }
  21.  
  22. with (document.getElementById("menu").style)
  23. {
  24. display = "block";
  25. left = (posx + 5) + "px";
  26. top = (posy + 5) + "px";
  27. }
  28. }
  29. document.getElementById("menu").innerHTML=tab[co];
  30. }


Próbowałem zrobić to tak:
  1. function pokaz (e,co)
  2. {
  3. var posx, posy;
  4. ie=(document.all)?1:0;
  5. if (ie)
  6. {
  7. posx = event.clientX;
  8. posy = event.clientY+document.body.scrollTop;
  9. }
  10. else
  11. {
  12. posx = e.pageX;
  13. posy = e.pageY;
  14. }
  15. //alert(posx);alert(posy);
  16. if (navigator.userAgent.indexOf ("Opera") != -1)
  17. {
  18. posx = e.clientX + document.body.scrollLeft;
  19. posy = e.clientY + document.body.scrollTop;
  20. }
  21. if(posx>500)
  22. {
  23. with (document.getElementById("menu").style)
  24. {
  25. display = "block";
  26. right = (880-posx) + "px";
  27. top = (posy + 5) + "px";
  28. }
  29. }
  30. else
  31. {
  32. with (document.getElementById("menu").style)
  33. {
  34. display = "block";
  35. left = (posx + 5) + "px";
  36. top = (posy + 5) + "px";
  37. }
  38. }
  39. document.getElementById("menu").innerHTML=tab[co];
  40. }

Niby pokazuje się lepiej, bo tekst zawsze jest widoczny, ale jest czasami tak ze pokazujący się div zajmuje całą szerokość iframe ale tekst jest na samym początku .. czyli daleko od kursora.

Jeżeli ktoś wie jak to rozwiązać, tak żeby div pokazywał się albo po lewej albo po prawej stronie kursora w zależności od pozycji na stronie ... proszę pomóżcie.
abc667
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <script type="text/javascript">
  3.  
  4. var ddd = 'teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty teksty ';
  5.  
  6. function pokaz(e,co)
  7. {
  8. var posx, posy;
  9. ie=(document.all)?1:0;
  10. if (ie)
  11. {
  12. posx = event.clientX;
  13. posy = event.clientY+document.body.scrollTop;
  14. }
  15. else
  16. {
  17. posx = e.pageX;
  18. posy = e.pageY;
  19. }
  20. //alert(posx);alert(posy);
  21. if (navigator.userAgent.indexOf ("Opera") != -1)
  22. {
  23. posx = e.clientX + document.body.scrollLeft;
  24. posy = e.clientY + document.body.scrollTop;
  25. }
  26.  
  27.  
  28.  
  29. with (document.getElementById("menu"))
  30. {
  31.  
  32. style.display = "block";
  33.  
  34. if(posx + 5 + offsetWidth > document.body.offsetWidth)
  35. {
  36. style.left = (posx - 5 - offsetWidth) + "px";
  37. }
  38. else
  39. {
  40. style.left = (posx + 5) + "px";
  41. }
  42.  
  43. if(posy + 5 + offsetHeight > document.body.offsetHeight)
  44. {
  45. style.top = (posy - 5 - offsetHeight) + "px";
  46. }
  47. else
  48. {
  49. style.top = (posy + 5) + "px";
  50. }
  51. }
  52.  
  53. document.getElementById("menu").innerHTML=ddd;
  54. }
  55.  
  56.  
  57.  
  58.  
  59.  
  60. <title>...</title>
  61. </head>
  62. <body onmousemove="pokaz(event, ddd);">
  63. <div id="menu" style="border: 1px solid black; width: 200px; display: none; position: absolute;"></div>
  64. </body>
  65. </html>
Cienki1980
Dzięki .. działa tak jak chciałem biggrin.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.