Forum PHP.pl > Skrypt - rozwijana treść

Pomoc - Szukaj - Użytkownicy - Kalendarz

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

davidos

16.10.2013, 20:33:12

Witam,
Poszukuję takiego skryptu, aby po kliknięciu w element, box się rozszerzał na inny element i pokazywała się dana treść.
O co mi chodzi:
Przed kliknięciem - http://davidos.pl/inne/fora/tresc_przed.jpg
Po kliknięciu - http://davidos.pl/inne/fora/tresc_po.jpg

Proszę was o pomoc gdyż potrzebuję zrobić taki prosty wydaję mi się dla was efekt a niestety ja siedzę jak na razie głównie w html i php, a jakieś nie trudne dostosowanie js to nie problem, ale napisanie go samemu to już dla mnie problem

Szymciosek

16.10.2013, 20:34:53

NOT FOUND - linki nie działają

davidos

16.10.2013, 20:50:31

Przepraszam, już poprawiłem.

MateuszS

16.10.2013, 23:26:54

Takie coś wystarczy?

[PHP] pobierz, plaintext 
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
 
<div id="lewy" style="float: left; width: 70%; height: 200px; background-color: lime"></div>
<div id="prawy" style="float: left; width: 28%; height: 200px; background-color: blue;">klik</div>
 
<script type="text/javascript">
var k = 0;
$( '#prawy' ).click( function() {
	if( k % 2 == 0 ) {
		$( '#lewy' ).animate({ 'width': '-=20%' });
		$( this ).animate({ 'width': '+=20%' }, function() {
			$( this ).html( 'JAKIES MENU' );
		});
	} else {
		$( '#lewy' ).animate({ 'width': '+=20%' });
		$( this ).animate({ 'width': '-=20%' }, function() {
			$( this ).html( 'klik' );
		});	
	}
	k++;
	//$( '#lewy' ).animate({ 'width': '-=200' });
});
</script>
 
</body>
</html>
[PHP] pobierz, plaintext

Jak chcesz po prostu zasłonić to co jest z tyłu bez zmieniania rozmiaru tego lewego diva pobaw się CSS (position)

PrinceOfPersia

17.10.2013, 05:21:27

można to zrobić na efektach przejścia w CSS i w JS tylko przełączać klasę (za pomocą funkcji jQuery toggleClass):

HTML:

Kod

CSS:

Kod

#lewy {
   width:100px;
   height:100px;
   background-color:lime;
}

#prawy {
  -ms-transition:1s all;
  -o-transition:1s all;
  -moz-transition:1s all;
  transition:1s all;
  position:absolute;
  right:0px;
  top:0px;
  width:100px;
  height:200px;
  background:blue;
}
.rozwiniety {
   width:400px!important;
}

JS:

Kod

$(function() {
var el = $("#prawy");
el.click(el.toggleClass.bind(el, 'rozwiniety'));
});

o tak: http://jsfiddle.net/cMqHN/

davidos

17.10.2013, 14:51:10

No już jest prawie to co chciałem, tylko Mateusz - tutaj po lewej będzie jakiś obrazek który na po prostu zostać przykryty, więc
PrinceOfPersia - w twoim za to nie mam możliwości dodania innej treści po rozwinięciu

Mogę cie Mateusz poprosić o lekkie poprawienie tego, tak żeby to else nie było potrzebne, po prostu zeby sie rozjechało jak to zrobił Prince Of Persia, tylko w twoim żebym mógł dalej edytować to co po rozjechaniu ma się pojawić

MateuszS

17.10.2013, 15:51:36

To co napisał PrinceOfPersia jest dobrze, zmień jego kod jquery na ten poniższy

[JAVASCRIPT] pobierz, plaintext 
$(function() {
    var el = $("#prawy");
    var k = 0;
    el.click( function() {
        if(k % 2 == 0) {        
            $(this).animate({'width' : '+=200'});
            $(this).html('rozwiniety');
        } else {
           $(this).animate({'width' : '-=200'});
           $(this).html('zwieniety');          
        }
        k++;
    });  
});
[JAVASCRIPT] pobierz, plaintext

davidos

18.10.2013, 23:40:47

Super, dzięki, a nie da się tej zmiany tekstu trochę opóźnić tak jak było to u Ciebie?

Wszystko byłoby OK gdyby nie to że muszę to robić z zastosowaniem float, a z tym zastosowaniem ten skrypt niestety przesuwa ten element, a nie na niego nachodzi.. Nie da się go zrobić tak aby nachodził na inne elementy bez position: absolute?

EDIT: Poradziłęm sobie z tym, wrzucając ten element do środka pływających elementów, a tym pływającym wrzucilem position: relative. Informacja gdyby ktoś chciał wiedzieć

flashdev

19.10.2013, 10:41:43

skrypt?
przecież takie coś się robiw w css!

davidos

19.10.2013, 11:08:39

Mam taki kod, i działa super.
Dodałem jeszcze efekt pojawienia (udało mi się), a jak zrobić efekt zanikania tego tekstu?

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(function() {
    var el = $(".b4_content");
    var k = 0;
    el.click( function() {
        if(k % 2 == 0) {        
            $(this).animate({'width' : '+=243'});
            $(this).html('<h3>Główny tytuł </h3><div class="b4_rozwiniety"><ul><li><a href="#">1. Punkt 1</a></li><li><a href="#">2. Punkt 2</a></li><li><a href="#">3. Punkt 3</a></li></ul></div>');
        $(".b4_rozwiniety").animate({opacity: "1.0",},650);
} else {
           $(".b4_rozwiniety").animate({opacity: "0.5",}, 350);           
           $(this).animate({'width' : '-=243'});
           $(this).html('<h3>Główny tytuł</h3>');
 
        }
        k++;
    });  
});
</script>
[HTML] pobierz, plaintext

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.