Forum PHP.pl > [Jquery] Kategoria produktu z rozwijanym menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [Jquery] Kategoria produktu z rozwijanym menu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

ghastblood

27.01.2014, 12:49:45

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 ?

Turson

27.01.2014, 13:02:22

[HTML] pobierz, plaintext 
<style type="text/css">
	.container{background:grey;width:100px;height:200px;}
	.lewo{float:left}
	.prawo{float:right}
</style>
<div class="container">
	<div class="lewo">
		test
	</div>
	<div class="prawo">
 
	</div>
</div>
<br>
<div class="container">
	<div class="lewo">
		test2
	</div>
	<div class="prawo">
 
	</div>
</div>
 
<script>
$('.container').mouseover(function(){
	$(this).css('width','200px');
	$(this).find('.prawo').html('heh');
});
$('.container').mouseout(function(){
	$(this).css('width','100px');
	$(this).find('.prawo').html('');
});
</script>
[HTML] pobierz, plaintext

ghastblood

27.01.2014, 14:43:28

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

nospor

27.01.2014, 15:07:38

A masz jQuery dolaczone?

ghastblood

27.01.2014, 15:17:45

pewnie jq 1.10.1. Sprawdzałem do FF i Operze

nospor

27.01.2014, 15:20:37

Skrypt jest poprawny i dziala.

Wystaw to gdzies, to bedzie mozna sprawdzic czemu tobie nie dziala. Teraz to jedynie pozostaje wrozyc

ghastblood

27.01.2014, 17:19:15

[PHP] pobierz, plaintext 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
    .container{background:grey;width:100px;height:200px;}
    .lewo{float:left}
    .prawo{float:right}
</style>
<script>
    $('.container').mouseover(function(){
    $(this).css('width','200px');
    $(this).find('.prawo').html('heh');
    });
    $('.container').mouseout(function(){
    $(this).css('width','100px');
    $(this).find('.prawo').html('');
    });
</script>
</head>
<body>  
 
 
    <div class="container">
    <div class="lewo">
    test
    </div>
    <div class="prawo">
 
    </div>
    </div>
    <br>
    <div class="container">
    <div class="lewo">
    test2
    </div>
    <div class="prawo">
 
    </div>
    </div>
 
 
</body>
</html>
[PHP] pobierz, plaintext

LINK

nospor

27.01.2014, 17:37:16

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

ghastblood

29.01.2014, 19:00:05

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ć?

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.