Forum PHP.pl > [JavaScript] wysuwane divy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] wysuwane divy

Gość

6.12.2011, 19:32:24

Witam
Mam problem ze stworzeniem wysuwanych divow. Na pewno kojarzycie o co mi chodzi, bo jest to zastosowane na wielu stronach, z boku po najechaniu myszką wysuwa się div z jakąś zawartością, najczęściej jest to jakiś konkurs albo facebook
No ale do rzeczy, łatwo znaleźć taki skrypt, ale niestety działa tylko dla jednego diva, gdy chcę dodać drugi to już je ignoruje i nie wyświetla.

Tutaj przykład takiego skryptu

[HTML] pobierz, plaintext 
    <head>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/skrypt.js"></script>
    <style type="text/css">
    body { height: 2000px;}
    #wysuwany_div { width: 394px; height: 352px; background: url(../wysuwany.png) no-repeat; position: fixed; top: 100px; right: -350px;}
    </style>
    </head>
    <body>
       <div id="wysuwany_div">
       </div>
    </body>
    </html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
    $(document).ready(function () {
                         $("#wysuwany_div").mouseover(function() {
                                                     $("#wysuwany_div").stop();
                                                     $("#wysuwany_div").animate({
                                                                     right: "0",
                                                                     },350
                                                                     );
                                                     })
                         $("#wysuwany_div").mouseout(   
                                              function() {
                                                       $("#wysuwany_div").stop();
                                                       $("#wysuwany_div").animate({
                                                                      right: "-350",
                                                                      }, 350
                                                                      );
                                                                      });
 
                         })
[HTML] pobierz, plaintext

Próbowałem zmieniać # na . aby była klasa a nie id, ale to nie działa, bo pomija wcześniejsze divy i wysuwany jest tylko ostatni.
Z JS i jQury nic nie wiem, dlatego może ktoś z Was pomoże mi to jakoś zmodyfikować, albo podać jakiś inny skrypt dzięki któremu będe mógł wysuwać więcej divów niż 1.

zamper

6.12.2011, 20:11:10

Musisz w kodzie HTML i CSS # na .
A skrypt jQuery ma wyglądać tak:

[HTML] pobierz, plaintext 
    $(document).ready(function () {
                         $(".wysuwany_div").mouseover(function() {
                                                     $(this).stop();
                                                     $(this).animate({
                                                                     right: "0",
                                                                     },350
                                                                     );
                                                     })
                         $(".wysuwany_div").mouseout(   
                                              function() {
                                                       $(this).stop();
                                                       $(this).animate({
                                                                      right: "-350",
                                                                      }, 350
                                                                      );
                                                                      });
 
                         })
[HTML] pobierz, plaintext

Gość

6.12.2011, 21:15:56

Napisałem pod kodem, że to robiłem i niestety nie działa. CSS wiem jak działa i czym sie różnią klasy od id. Ale niestety wyświetla się jedynie ostatni div, a reszta jest pomijana.

Gość

6.12.2011, 21:24:34

Albo jeszcze inaczej. Wcześniej tego nie sprawdziłem, ale po zastosowaniu klas wcześniejsze divy nie są ignorowane, tylko są niewidoczne, bo są pod spodem.
Obniżyłem je i są widoczne wszystkie, ale działają razem tzn. jak najadę na jeden to wysuwają się wszystkie, a mi chodziło, być może zapomniałem tego napisać, ale chcę aby każdy wysuwał się oddzielnie.

Necsord

6.12.2011, 21:26:15

Praktycznie to co zamper zaproponował:
http://jsfiddle.net/Hv6k7/

Gość

6.12.2011, 22:12:04

Nie zauważyłem tej zmiany w kodzie JS.
Wybaczcie faktycznie ten kod działa.
Wielkie dzięki.

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.