Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]ukrywanie diva i zmiana napisu
adasko_am
post
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 12.12.2011

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

znalazłem taki skrypt do ukrycia/pokazania diva-link.
Pytanie: jak przerobić aby tekst linku slużącego do pokazywania/chowania diva się zmieniał(np. jak schowany-pokaż, jak pokazany-ukryj).
Drugie pytanie: jak przypiąć ten napis aby był pokazany na dole strony i przesuwał się do góry razem z divem

Ten post edytował adasko_am 5.02.2012, 20:44:07
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
jaslanin
post
Post #2





Grupa: Zarejestrowani
Postów: 511
Pomógł: 143
Dołączył: 13.03.2010
Skąd: Jasło

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

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<title>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</title>
  5. 	<style type="text/css">
  6.  
  7. 		#container {
  8. 			bottom: -310px ;
  9. 			left: 20px ;
  10. 			position: fixed ;
  11. 			width: 90% ;
  12. 			}
  13.  
  14. 		#inner {
  15. 			margin: 10px 0 0 0;
  16. 			background-color: #F0F0F0 ;
  17. 			border: 1px solid #666666 ;
  18. 			border-bottom-width: 0px ;
  19. 			width;800px; 
  20. 			height:300px;
  21. 			}
  22.  
  23. 		#toggle_slide {
  24. 			font-size:30px;
  25. 		}
  26.  
  27. 	</style>
  28. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
  29. 	<script type="text/javascript">
  30. 		jQuery(function( $ ){
  31.  
  32. 			var container = $( "#container" );
  33.  
  34. 			$( "#toggle_slide" ).click(function( event ){
  35.  
  36. 				event.preventDefault();
  37.  
  38. 				if (container.hasClass('toggle')) { // visable, so hide it
  39. 					container.animate({bottom:-310}, 'slow');
  40. 					$(this).text('Pokaż');
  41.  
  42. 					container.removeClass('toggle');
  43. 				} else { // hidden so show it
  44. 					container.animate({bottom:20}, 'slow');
  45. 					$(this).text('Ukryj');
  46.  
  47. 					container.addClass('toggle');
  48. 				} // toggle
  49. 			}); // click toggle slide up/down
  50.  
  51. 		}); // document ready
  52. 	</script>
  53. </head>
  54. <body>
  55.  
  56. 	<h1>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</h1>
  57.  
  58. 	<div id="container">
  59.  
  60. 		<a id='toggle_slide' href="#">Pokaż</a>
  61.  
  62. 		<div id="inner">
  63.  
  64. 			Check it out! This DIV is positioned based on its
  65. 			very sexy Bottom and then is opened using a slide-down
  66. 			animation effect (and closed using a slide-up)
  67. 			animation effect.
  68.  
  69. 		</div>
  70. 	</div>
  71.  
  72. </body>
  73. </html>
[PHP] pobierz, plaintext


zwróć uwagę na -310 i bottom:20 itp ustawienia CSS i dostosuj do potrzeb

Ten post edytował jaslanin 5.02.2012, 22:18:31
Go to the top of the page
+Quote Post

Posty w temacie
- adasko_am   [JavaScript]ukrywanie diva i zmiana napisu   5.02.2012, 20:43:14
- - kamil4u   1. Jeżeli już korzystasz z jQuery to .html() lub ....   5.02.2012, 21:48:05
- - adasko_am   w javascript dopiero raczkuję. O ile z wysuwanym d...   5.02.2012, 21:51:46
- - jaslanin   [PHP] pobierz, plaintext <!DOCTYPE HTML>...   5.02.2012, 22:14:44
- - adasko_am   @jaslanin - jesteś wielki, chylę czoła. Wielkie dz...   5.02.2012, 23:26:19

« Następny starszy · Przedszkole · 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 · Przełącz na: Linearny+ · Drzewo

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

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