Forum PHP.pl > [JavaScript]Skrypt z wyskakującym okienkiem ucieka poza okno przeglądarki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Skrypt z wyskakującym okienkiem ucieka poza okno przeglądarki

kukix

1.06.2011, 23:24:19

Witam.
Znalazłem bardzo fajny i prosty skrypt do obsługi okienek tzw tooltip.

Problem w tym, że jak myska jest z boku ekranu, to okienko dalej wyskakuje na prawo i ucieka poza przeglądarke.

Standardowy kod:

Kod

this.screenshotPreview = function(){
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.screenshot").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
    },
    function(){
        this.title = this.t;
        $("#screenshot").remove();
    });
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

Czy byłby ktoś w stanie mi pomóc, jak wyliczyc tą pozycje? w komentarzach na stronei skryptu jest dużo wypowiedzi, próbowałem kilka wykorystać, ale coś żaden sposób nie działa.

zembi1991

1.06.2011, 23:40:28

jeżeli dobrze zrozumiałem i masz okienko wyskakujące koło kursora po najechaniu na jakis element po prawej stronie(przykładowo) i problem tkwi w tym iż w przypadku gdy ten element jest przy prawej krawędzi strony to okienko wyskakuje poza jej obrys (poszerzając stronę) to proponuję najpierw oszacować jakos szerokość wyskakującego okienka a nastepnie sprawdzić czy pozycja (x-owa) elementu do którego się odwolujesz przy ustawianiu pozycji tooltip'a jest wieksza od [window.outerWidth - 'szerokość okienka' ] i jeśli tak to ustawić pozycję wyskakującego okienka w tkai sposób aby wyswietlał się po lewej stronie,
jeśli namieszałem , a dobrze zrozumiałem o co CI chodzi to pisz, postarma sie to wytlumaczyć inaczej

kukix

2.06.2011, 10:00:22

tak, własnie o to chodzi, że jak element w galerii jest już przy prawym boku akurat, to wyskakujące okienko juz jest poza oknem przeglądarki..

tylko, że niebardzo jest możłiwośc obliczenia szerokości tego okna.. może tam byćwszystko.. tzn wąskie zdjecie, albo szerokie, nei ma zasady :/

erix

2.06.2011, 10:16:09

Cytat

tylko, że niebardzo jest możłiwośc obliczenia szerokości tego okna

Ale przecież szerokość okna, to zwykła własność JS... Poszukaj, bo na pewno jest.

kukix

2.07.2011, 11:02:52

Udało mi się częsciowo poprawić ten skrypt:

Mianowicie poprawiłem końcówkę:

Kod

$(".imageTooltip").mousemove(function(e){
var posY;

if (e.pageY - $(window).scrollTop() + $('#screenshot').height() >= $(window).height() ) {
  posY = $(window).height() + $(window).scrollTop() - $('#screenshot').height() - 15;
} else {
  posY = e.pageY - 15;
}

$("#tooltip")
  .css("top",(posY) + "px")
  .css("left",(e.pageX + 15) + "px");

});

i teraz już wyskakujące okienko nie rozciąga stronę na wysokość..

Problem jest jednak ze współrzędną X.. okienko ucieka poza okno przeglądarki na prawo..

Czy mógłby ktoś pomóc mi obliczyć tą współrzędną X?

yta

2.07.2011, 14:40:03

pomógł obliczyć ?
wstawiaj wartości o 5więcej więcej aż w końcu będzie dobrze masz teraz 15 to może spróbuj zmiejszyć do 10 nic nie da to daj 5 kąbinuj
możliwości masz sporo , nikt nie powie Ci że bedzie to 53px .. bo skąd ktoś ma to wiedzieć ?...

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.