Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Pozycja dymka względem kursora
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kemot
Znalazłem do jQuery następujący JS:

  1. this.vtip = function() {  
  2. this.xOffset = 10; // x distance from mouse
  3. this.yOffset = -100; // y distance from mouse
  4.  
  5. $(".vtip").unbind().hover(
  6. function(e) {
  7. this.t = this.title;
  8. this.title = '';
  9. this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
  10.  
  11. $('body').append( '<p id="vtip">' + this.t + '</p>' );
  12.  
  13. $('p#vtip #vtipArrow').attr("src", 'img/vtip_arrow.png');
  14. $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
  15.  
  16. },
  17. function() {
  18. this.title = this.t;
  19. $("p#vtip").fadeOut("slow").remove();
  20. }
  21. ).mousemove(
  22. function(e) {
  23. this.top = (e.pageY + yOffset);
  24. this.left = (e.pageX + xOffset);
  25.  
  26. $("p#vtip").css("top", this.top+"px").css("left", this.left+"px").css("width", 200+"px");
  27. }
  28. );
  29.  
  30. };
  31.  
  32. jQuery(document).ready(function($){vtip();})



z następującym css'em:

  1. p#vtip { display: none; position: absolute; padding: 10px; font-size: 0.8em; text-align: left; background-image: url(../img/transblack); border: 1px solid #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }


Skrypt ten odpowiada za wyświetlanie dymka po najechaniu na element z ustawioną klasą vtip z treścią umieszczoną w atrybucie title. Mój problem polega na tym, że skrypt nie uwzględnia końca okna przeglądarki i po wyświetleniu zbyt wysokiego dymka okno przeglądarki dostosowuje się do jego rozmiarów (niestety nie można odczytać treści dymka ponieważ przewinięcie strony wymagałoby przewinięcia strony i zejście kursora z elementu, który aktywuje skrypt, a co za tym idzie zniknięcie dymka). W moim wypadku wyświetlanie dymka od dolnego lewego rogu rozwiązywałoby sprawę niestety próbowałem zmienić to na wiele sposobów i każdy zawiódł. Ustawienie bottom zamiast top w css() i nadaniu konkretnej wartości odległości od dolnej krawędzi ekranu powoduje tylko dziwne zachowanie skryptu i dynamiczną zmianę rozmiaru dymka (treść pozostaje bez zmian). Bardzo proszę o pomoc w przebudowaniu tego skryptu by dymek był wyświetlany od względem myszki od dolnego lewego rogu.

baa
Spróbuj zmienić wartości zmiennych

[JAVASCRIPT] pobierz, plaintext
  1. this.xOffset = 10;
  2. this.yOffset = -100;
[JAVASCRIPT] pobierz, plaintext


To one odpowiadają za odległość od kursora myszy (w osi X i Y).
Np. zmień this.yOffset na wartość dodatnią, np 50 lub 100.
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.