Forum PHP.pl > [JavaScript]ukrywanie diva i zmiana napisu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]ukrywanie diva i zmiana napisu

adasko_am

5.02.2012, 20:43:14

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

kamil4u

5.02.2012, 21:48:05

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

- ale to taka uwaga na marginesie.

adasko_am

5.02.2012, 21:51:46

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

jaslanin

5.02.2012, 22:14:44

[PHP] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
	<title>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</title>
	<style type="text/css">
 
		#container {
			bottom: -310px ;
			left: 20px ;
			position: fixed ;
			width: 90% ;
			}
 
		#inner {
			margin: 10px 0 0 0;
			background-color: #F0F0F0 ;
			border: 1px solid #666666 ;
			border-bottom-width: 0px ;
			width;800px; 
			height:300px;
			}
 
		#toggle_slide {
			font-size:30px;
		}
 
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ){
 
			var container = $( "#container" );
 
			$( "#toggle_slide" ).click(function( event ){
 
				event.preventDefault();
 
				if (container.hasClass('toggle')) { // visable, so hide it
					container.animate({bottom:-310}, 'slow');
					$(this).text('Pokaż');
 
					container.removeClass('toggle');
				} else { // hidden so show it
					container.animate({bottom:20}, 'slow');
					$(this).text('Ukryj');
 
					container.addClass('toggle');
				} // toggle
			}); // click toggle slide up/down
 
		}); // document ready
	</script>
</head>
<body>
 
	<h1>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</h1>
 
	<div id="container">
 
		<a id='toggle_slide' href="#">Pokaż</a>
 
		<div id="inner">
 
			Check it out! This DIV is positioned based on its
			very sexy Bottom and then is opened using a slide-down
			animation effect (and closed using a slide-up)
			animation effect.
 
		</div>
	</div>
 
</body>
</html>
[PHP] pobierz, plaintext

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

adasko_am

5.02.2012, 23:26:19

@jaslanin - jesteś wielki, chylę czoła. Wielkie dzieki

no tak, ale to działa dobrze z pozycją :fixed, z :absolute nie działa :/

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.