Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [Jquery] Kategoria produktu z rozwijanym menu
ghastblood
post
Post #1





Grupa: Zarejestrowani
Postów: 360
Pomógł: 12
Dołączył: 17.09.2009
Skąd: Warszawa

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

Witam,

raczkuje dopiero w js i jq mam pytanie jak najlepiej zrobić żeby osiągnąć taki efekt jak na zdjęciu

Obrazek

naprawdę nikt nie jest w stanie mi pomoc ?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
Turson
post
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. 	.container{background:grey;width:100px;height:200px;}
  3. 	.lewo{float:left}
  4. 	.prawo{float:right}
  5. </style>
  6. <div class="container">
  7. 	<div class="lewo">
  8. 		test
  9. 	</div>
  10. 	<div class="prawo">
  11.  
  12. 	</div>
  13. </div>
  14. <br>
  15. <div class="container">
  16. 	<div class="lewo">
  17. 		test2
  18. 	</div>
  19. 	<div class="prawo">
  20.  
  21. 	</div>
  22. </div>
  23.  
  24. <script>
  25. $('.container').mouseover(function(){
  26. 	$(this).css('width','200px');
  27. 	$(this).find('.prawo').html('heh');
  28. });
  29. $('.container').mouseout(function(){
  30. 	$(this).css('width','100px');
  31. 	$(this).find('.prawo').html('');
  32. });
  33. </script>
[HTML] pobierz, plaintext


Ten post edytował Turson 27.01.2014, 13:02:43
Go to the top of the page
+Quote Post
ghastblood
post
Post #3





Grupa: Zarejestrowani
Postów: 360
Pomógł: 12
Dołączył: 17.09.2009
Skąd: Warszawa

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

z tego co widzę wszystko wygląda dobrze ale skrypt nie działa ;/

Ten post edytował ghastblood 27.01.2014, 14:45:20
Go to the top of the page
+Quote Post
nospor
post
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
A masz jQuery dolaczone?
Go to the top of the page
+Quote Post
ghastblood
post
Post #5





Grupa: Zarejestrowani
Postów: 360
Pomógł: 12
Dołączył: 17.09.2009
Skąd: Warszawa

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

pewnie jq 1.10.1. Sprawdzałem do FF i Operze

Ten post edytował ghastblood 27.01.2014, 15:18:43
Go to the top of the page
+Quote Post
nospor
post
Post #6





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Skrypt jest poprawny i dziala.

Wystaw to gdzies, to bedzie mozna sprawdzic czemu tobie nie dziala. Teraz to jedynie pozostaje wrozyc
Go to the top of the page
+Quote Post
ghastblood
post
Post #7





Grupa: Zarejestrowani
Postów: 360
Pomógł: 12
Dołączył: 17.09.2009
Skąd: Warszawa

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

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  4. <style type="text/css">
  5.     .container{background:grey;width:100px;height:200px;}
  6.     .lewo{float:left}
  7.     .prawo{float:right}
  8. </style>
  9. <script>
  10.     $('.container').mouseover(function(){
  11.     $(this).css('width','200px');
  12.     $(this).find('.prawo').html('heh');
  13.     });
  14.     $('.container').mouseout(function(){
  15.     $(this).css('width','100px');
  16.     $(this).find('.prawo').html('');
  17.     });
  18. </script>
  19. </head>
  20. <body>  
  21.  
  22.  
  23.     <div class="container">
  24.     <div class="lewo">
  25.     test
  26.     </div>
  27.     <div class="prawo">
  28.  
  29.     </div>
  30.     </div>
  31.     <br>
  32.     <div class="container">
  33.     <div class="lewo">
  34.     test2
  35.     </div>
  36.     <div class="prawo">
  37.  
  38.     </div>
  39.     </div>
  40.  
  41.  
  42. </body>
  43. </html>
[PHP] pobierz, plaintext


LINK
Go to the top of the page
+Quote Post
nospor
post
Post #8





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
przeprawiasz kod jaki dostajesz a potem udajesz ze nie dziala.... no nie dziala, bo zmieniles.
Zobacz jaka dostales kolejnosc dzialan, a na jaką zmieniles i sie zastanow czy twoja wersja ma sens. Podpowiedz: twoja werjsa nie ma sensu

edit: albo zmien kolejnosc na taką jaką dostales na poczatku, albo zastosuj sie do rady Borysa
Powód edycji: [nospor]:
Go to the top of the page
+Quote Post
ghastblood
post
Post #9





Grupa: Zarejestrowani
Postów: 360
Pomógł: 12
Dołączył: 17.09.2009
Skąd: Warszawa

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

ok zapoznałem się z kodem, mniej więcej wiem jak działają zastosowane w nim funkcje. Kolejnym problemem jest umieszczanie w .html() kodu. Jak chciał bym zrobić więcej niż jedną kategorie musiał bym kopiować skrypt tyle razy ile będzie kategorii.

Z tego co siedzi w mojej głowie powinno by być tak

1. klasa divów odpowiadająca za kategorie miały by nazwę kategoria1,kategoria2 itd
2. skrypt js sprawdzał by prefix + id jeżeli zwraca true to wykonuje funkcje css() + find().html()
i teraz pozostaje tylko dodanie jakoś w html odpowiedniej treści np mogło by być to załączenie pliku html o odpowiedniej nazwie np kategoria1.html w której były by zawarte linki

dalej nie udało mi się rozwiązać tego problemu mógł by ktoś mi coś doradzić?
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 22.08.2025 - 14:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn