Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] wysuwane divy
-Gość-
post
Post #1





Goście
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 
  1.     <head>
  2.     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  3.     <script type="text/javascript" src="js/skrypt.js"></script>
  4.     <style type="text/css">
  5.     body { height: 2000px;}
  6.     #wysuwany_div { width: 394px; height: 352px; background: url(../wysuwany.png) no-repeat; position: fixed; top: 100px; right: -350px;}
  7.     </style>
  8.     </head>
  9.     <body>
  10.        <div id="wysuwany_div">
  11.        </div>
  12.     </body>
  13.     </html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1.     $(document).ready(function () {
  2.                          $("#wysuwany_div").mouseover(function() {
  3.                                                      $("#wysuwany_div").stop();
  4.                                                      $("#wysuwany_div").animate({
  5.                                                                      right: "0",
  6.                                                                      },350
  7.                                                                      );
  8.                                                      })
  9.                          $("#wysuwany_div").mouseout(   
  10.                                               function() {
  11.                                                        $("#wysuwany_div").stop();
  12.                                                        $("#wysuwany_div").animate({
  13.                                                                       right: "-350",
  14.                                                                       }, 350
  15.                                                                       );
  16.                                                                       });
  17.  
  18.                          })
[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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
zamper
post
Post #2





Grupa: Zarejestrowani
Postów: 156
Pomógł: 17
Dołączył: 11.12.2010
Skąd: Częstochowa

Ostrzeżenie: (0%)
-----

Musisz w kodzie HTML i CSS # na .
A skrypt jQuery ma wyglądać tak:
[HTML] pobierz, plaintext 
  1.     $(document).ready(function () {
  2.                          $(".wysuwany_div").mouseover(function() {
  3.                                                      $(this).stop();
  4.                                                      $(this).animate({
  5.                                                                      right: "0",
  6.                                                                      },350
  7.                                                                      );
  8.                                                      })
  9.                          $(".wysuwany_div").mouseout(   
  10.                                               function() {
  11.                                                        $(this).stop();
  12.                                                        $(this).animate({
  13.                                                                       right: "-350",
  14.                                                                       }, 350
  15.                                                                       );
  16.                                                                       });
  17.  
  18.                          })
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
-Gość-
post
Post #3





Goście
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 to the top of the page
+Quote Post
-Gość-
post
Post #4





Goście
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.
Go to the top of the page
+Quote Post
Necsord
post
Post #5





Grupa: Zarejestrowani
Postów: 189
Pomógł: 60
Dołączył: 5.10.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Praktycznie to co zamper zaproponował:
http://jsfiddle.net/Hv6k7/
Go to the top of the page
+Quote Post
-Gość-
post
Post #6





Goście
Nie zauważyłem tej zmiany w kodzie JS.
Wybaczcie faktycznie ten kod działa.
Wielkie dzięki.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 · Linearny+ · Przełącz na: Drzewo

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

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