Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

1. Jeżeli już korzystasz z jQuery to .html() lub .text() <- patrz manual
2. Tu już jest problem, bo skrypt trzeba by było poprawiać... - napisz na ile umiesz JS jQuery, żebym mógł Ci to odpowiednio opisać.

Szczerze to ten skrypt jest średnio zrobiony. Mimo, iż jest na tyle prosty, że tego nie widać "na oko" to jest o po prostu mało wydajny (IMG:style_emoticons/default/smile.gif) - ale to taka uwaga na marginesie.
Go to the top of the page
+Quote Post
adasko_am
post
Post #3





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

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

w javascript dopiero raczkuję. O ile z wysuwanym divem od góry jest sporo skryptów to z wysuwanym od dołu znalazłem raptem ze 3 a tylko ten mogłem zaadaptować choć nie spełnia moich wymagań w 100%. Dlatego proszę o jakiekolwiek wskazówki
Go to the top of the page
+Quote Post
jaslanin
post
Post #4





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
adasko_am
post
Post #5





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

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

@jaslanin - jesteś wielki, chylę czoła. Wielkie dzieki (IMG:style_emoticons/default/smile.gif)

no tak, ale to działa dobrze z pozycją :fixed, z :absolute nie działa :/
Go to the top of the page
+Quote Post
« 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: 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: 24.08.2025 - 16:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn