[jQuery] Pokazywanie treści Opcje

[oomaster]

Witam,

Na poniższym screenie prezentuje co chciałbym uzyskać


Czyli otwieram stronę widzę nie pełną treść a po najechaniu myszki widzę pełną.

Za pomocą jakiej funkcji to zrealizować ?

Ma ktoś pomysł, gotowe rozwiązania ?

Pozdrawiam

[erix]

Hmm, to nie chodzi o funkcję w JS, tylko to zwykły CSS.

Nie chce mi się zaglądać do arkusza na NK, ale strzelam, że jest to manipulowanie własnością overflow.

[oomaster]

Rozwiązanie jest patologiczne ale jest

[JAVASCRIPT] pobierz, plaintext 
<script>
$(document).ready(function(){
 
$(".link").mouseover(function(){
	  $(".more").show();
	}).mouseout(function(){
	  $(".more").hide();
	});
 
$(".more").mouseover(function(){
	  $(".more").show();
	}).mouseout(function(){
	  $(".more").hide();
	});	
});
 
</script>
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<a href="#" class="link"><b>Włącz powiadomienie e-mail</b></a><p class="more"><a href="#"><b>Włącz powiadomienie e-mailem o nowych odpowiedziach</b></a></p>
[HTML] pobierz, plaintext 

Dlaczego ten kod dotyka wszystkie linki a nie tylko jeden wybrany ?

Ten post edytował oomaster 7.03.2010, 14:28:35

[piotrooo89]

bo odwołujesz sie do wszystkich obiektów. ale tak sie zastanawiam czy Ty chcesz dokładnie co masz w przykładzie. bo z kody wyniki ze po najechaniu chcesz zmieniać Włącz powiadomienie e-mail na Włącz powiadomienie e-mailem o nowych odpowiedziach. bo jak tak to można to toggle() załatwić.

[oomaster]

bo odwołujesz sie do wszystkich obiektów.

Ajak odwoływać się do pojedynczych ale wszystkich a w danym divie ?

[piotrooo89]

za pomocą this. i teraz albo dziecko tego elementu albo rodzeństwo albo rodzic.

[oomaster]

Poddaje się kompletnie nie rozumiem zasady działania this. Kombinowałem i nic.

Czy ktoś morze mi pomóc i zaprezentować prawidłowy kod z tego przy wykorzystani this, "dzieci" i "rodziców":

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
$(".link").hover(function(){
	  $(".more").show();
	  }, function(){
	  $(".more").hide();
	});
});
[JAVASCRIPT] pobierz, plaintext 

Aha i jeszcze mam jedno typowo teoretyczne pytanie. Zrobiłem tak ,że po kliknięciu na element o klasie link wyskakuje na nim element o klasie more. A jak wiadomo wtedy pojawia się kolizja i wszystko miga jak rusza się kursorem więc za pomocą jakiej funkcji zrealizować to aby był widoczny cały czas aż do zjechania z niego ? też użyć show, hide ? Ale jak wkleić do kodu ?

[Quantum]

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
 $(".link").hover(function(){
 
  $(this).find('.more:eq(0)').show();
 
 }, function(){
 
  $(this).find('.more:eq(0)').hide();
 
 });
 
});
[JAVASCRIPT] pobierz, plaintext 

nie patrzyłem w kod, ale chyba tak powinno być btw. możesz to zastąpić "toggle" jak już piotrooo89 wspomniał.

Ten post edytował sniffer32 8.03.2010, 08:24:44

[oomaster]

Niestety nie działa nawet jak usunę :eq(0) . Na marginesie po co jest eg(0) ?

[Quantum]

eq(0) - pierwszy znaleziony element. Nie działa bo element o klasie "more" nie jest dzieckiem elementu o klasie "link".

http://api.jquery.com/toggle

[oomaster]

Wszystko niby ok, ale dalej nie działa ?!

[Quantum]

dałem Ci link post wcześniej, pokaż jaki kod udało Ci się do teraz naskrobać i zobaczymy co jest nie tak

[oomaster]

Dzięki i sorry źle kod dostosowałem do warunków mojej strony. Wszystko działa tak jak napisałeś

Wielkie dzięki.