Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Skrypt - rozwijana treść
davidos
post
Post #1





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 27.05.2013

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

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 wink.gif

Ten post edytował davidos 16.10.2013, 20:50:06
Go to the top of the page
+Quote Post
Szymciosek
post
Post #2





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

NOT FOUND - linki nie działają
Go to the top of the page
+Quote Post
davidos
post
Post #3





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 27.05.2013

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

Przepraszam, już poprawiłem.

Ten post edytował davidos 16.10.2013, 20:53:21
Go to the top of the page
+Quote Post
MateuszS
post
Post #4





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

Takie coś wystarczy?

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  4. </head>
  5. <body>
  6.  
  7. <div id="lewy" style="float: left; width: 70%; height: 200px; background-color: lime"></div>
  8. <div id="prawy" style="float: left; width: 28%; height: 200px; background-color: blue;">klik</div>
  9.  
  10. <script type="text/javascript">
  11. var k = 0;
  12. $( '#prawy' ).click( function() {
  13. 	if( k % 2 == 0 ) {
  14. 		$( '#lewy' ).animate({ 'width': '-=20%' });
  15. 		$( this ).animate({ 'width': '+=20%' }, function() {
  16. 			$( this ).html( 'JAKIES MENU' );
  17. 		});
  18. 	} else {
  19. 		$( '#lewy' ).animate({ 'width': '+=20%' });
  20. 		$( this ).animate({ 'width': '-=20%' }, function() {
  21. 			$( this ).html( 'klik' );
  22. 		});	
  23. 	}
  24. 	k++;
  25. 	//$( '#lewy' ).animate({ 'width': '-=200' });
  26. });
  27. </script>
  28.  
  29. </body>
  30. </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)


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #5





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

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

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

HTML:

Kod
<script src="http://code.jquery.com/jquery.js"></script>
....
.....
.......
<div id="lewy"></div>
<div id="prawy">klik</div>


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/

Ten post edytował PrinceOfPersia 17.10.2013, 05:22:46


--------------------
Live demo mojej wtyczki do Atoma (lepsza nawigacja po plikach)
Go to the top of the page
+Quote Post
davidos
post
Post #6





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 27.05.2013

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

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 smile.gif

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ć smile.gif?
Go to the top of the page
+Quote Post
MateuszS
post
Post #7





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

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

[JAVASCRIPT] pobierz, plaintext 
  1. $(function() {
  2.     var el = $("#prawy");
  3.     var k = 0;
  4.     el.click( function() {
  5.         if(k % 2 == 0) {        
  6.             $(this).animate({'width' : '+=200'});
  7.             $(this).html('rozwiniety');
  8.         } else {
  9.            $(this).animate({'width' : '-=200'});
  10.            $(this).html('zwieniety');          
  11.         }
  12.         k++;
  13.     });  
  14. });
[JAVASCRIPT] pobierz, plaintext


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
davidos
post
Post #8





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 27.05.2013

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

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ć wink.gif

Ten post edytował davidos 19.10.2013, 10:12:26
Go to the top of the page
+Quote Post
flashdev
post
Post #9





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

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


--------------------
generator haseł
Go to the top of the page
+Quote Post
davidos
post
Post #10





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 27.05.2013

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

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 
  1. <script type="text/javascript">
  2. $(function() {
  3.     var el = $(".b4_content");
  4.     var k = 0;
  5.     el.click( function() {
  6.         if(k % 2 == 0) {        
  7.             $(this).animate({'width' : '+=243'});
  8.             $(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>');
  9.         $(".b4_rozwiniety").animate({opacity: "1.0",},650);
  10. } else {
  11.            $(".b4_rozwiniety").animate({opacity: "0.5",}, 350);           
  12.            $(this).animate({'width' : '-=243'});
  13.            $(this).html('<h3>Główny tytuł</h3>');
  14.  
  15.         }
  16.         k++;
  17.     });  
  18. });
  19. </script>
[HTML] pobierz, plaintext


Ten post edytował davidos 19.10.2013, 12:18:24
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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