Strona www, jak uzyskać taki efekt ?

komentarz 19 listopada 2016 przez Headhunter Gaduła (4,450 p.)
Dzięki Wielkie !

ale jak z tym ostatnim ta animacja ? jak to nwm jakoś wymierzyć? tak idealinie
komentarz 19 listopada 2016 przez hoktaur Pasjonat (22,250 p.)
To ze cos nie jest wyswietlane nie znaczy ze nie idzie tego zmierzyc

$().height();

Pisze z komorki niestety na w3schoole musisz sobie poszukac tego sam...

P.S. wyswietl sobie strone kliknij w zbadaj i spr co sie stanie gdy zmienisz jeden parametr z display: none w display: block
komentarz 19 listopada 2016 przez Headhunter Gaduła (4,450 p.)
Ogarniam właściwości display :D :D :D

Html czy css to pikuś tylko w js nigdy nie pisałem.
komentarz 20 listopada 2016 przez hoktaur Pasjonat (22,250 p.)
No to masz gotowca:
<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8"> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

		<style>
			body {
				margin: 0px;
				padding: 0px;
				background-color: black;
				font-size: 22px;
				font-family: Cursive, sans-serif;
			}

			.nav, .container{
				background-color: #818181;
				border: 4px solid #333333;
			}
			
			.nav {
				border-radius: 0px 0px 10px 10px;
				padding: 10px 20px 20px 20px;
				margin: 0px 10px 10px 10px;
			}

			a {
				color: white;
				text-decoration: none;
				width: 33%;
				padding: 10px;
				cursor: pointer;
			}

			.container {
				border-radius: 10px;
				padding: 10px;
				margin: 10px;
			}
		
			.subPage {
				overflow: hidden;
			}
		</style>
	</head>
	
	<body>
		<div class="nav">
			<a subPage="#page1">Strona 1</a>
			<a subPage="#page2">Strona 2</a>
			<a subPage="#page3">Strona 3</a>
		</div>
		
		<div class="container">
			<div 
				id="page1" 
				class="subPage"
				style="display: block"
			>
				<p>Czym jest szyfrowanie? Definicji tego terminu jest wiele, jedne są bardziej szczegółowe i skomplikowane inne prostsze, jednak wystarczające jest stwierdzenie, że szyfrowanie to po prostu metoda zapisu tekstu jawnego w taki sposób, by stał się on nieczytelny dla osób trzecich i jednocześnie z powrotem jawny po właściwej weryfikacji. Kryptografia nie została zapoczątkowana wraz z erą komputeryzacji. Co prawda to dzięki coraz większej mocy obliczeniowej komputerów powstają lepsze i skuteczniejsze szyfry i obecnie jest to z pewnością domena informatyki. Kryptologia jako nauka liczy kilka tysięcy lat. Zapiski na temat stosowania szyfrów znaleziono na pochodzących z Mezopotamii tabliczkach z pismem klinowym datowanych już na 1500 rok p.n.e. Rozwój kryptografii był powolny i nierówny. Powstawała ona niezależnie w wielu kręgach kulturowych i przybierała różne formy i stopnie zaawansowania. Rozwój przebiegał równolegle z rozwojem matematyki. Szczególnie działania matematyków w czasie II Wojny Światowej przyczyniły się do kojarzenia kryptologii z matematyką. Zanim przejdziemy do opisu współczesnej kryptografii zapoznamy się z kilkoma dawnymi metodami szyfrowania.</p>

				<p>W mojej pracy starałem się oddać zasadę działania poszczególnych szyfrów jak i ogólne zasady kryptografii. W skryptach należy używać wyłącznie alfabetu bez polskich znaków oraz znaków interpunkcyjnych.</p>
				<p>Użyte oprogramowanie:</p>
				<ul>
					<li>Notepad++</li>
					<li>NetBeans IDE</li>
					<li>Amaya</li>
					<li>MathML</li>
					<li>HTML</li>
					<li>CSS</li>
					<li>PHP</li>
					<li>JavaScript</li>
					<li>Bootstrap 3</li>
					<li>Biblioteka jQuery</li>
				</ul>
				<p>Do poprawnego działania strony potrzeba:</p>
				<ul>
					<li>Połączenie z internetem</li>
					<li>Wtyczka MathJax</li>
					<li>Serwer PHP</li>
				</ul>
				<p>Autor pracy: Piotr Rogowski Zespół szkół im. Stanisława Staszica w Staszowie</p>
			</div>
			<div 
				id="page2" 
				class="subPage"
				style="display: none"
			>
				<p>Jeden z najstarszych sposobów szyfrowania pochodzi od Juliusza Cezara, który szyfrował swoją korespondencję z Cyceronem. Sposób ten polegał na tym, że zamiast każdej litery pisał literę występującą w alfabecie trzy miejsca dalej. Tak więc, jeśli użyjemy dzisiejszego alfabetu łacińskiego abcdefghijklmnopqrstuvwxyz to zamiast c będziemy pisać f, zamiast g piszemy j, zamiast y piszemy b. Alfabet traktujemy cyklicznie, tzn. po ostatniej literze z następuje ponownie litera a itd. System kryptograficzny to sposób szyfrowania. W powyższym przykładzie polega on na tym, że zamiast danej litery alfabetu piszemy literę występującą w tym samym alfabecie kilka miejsc dalej. System kryptograficzny polega tu na pisaniu litery stojącej k miejsc dalej, a liczba k jest kluczem. Szyfrowanie więc polega na wyborze algorytmu szyfrowania, zwanego systemem kryptograficznym i pewnych parametrów, od których ten algorytm jest zależny, nazywanych kluczem szyfrowania. Szyfr Cezara bardzo łatwo jest opisać w sposób matematyczny. Kolejnym literom alfabetu łacińskiego przyporządkujmy liczby od 0 do 25. Oznaczenie a mod b oznacza resztę z dzielenia liczby całkowitej a przez dodatnią liczbę całkowitą b. Szyfr Cezara może teraz być zdefiniowany wzorem:
				</p>
				<p>Jeden z najstarszych sposobów szyfrowania pochodzi od Juliusza Cezara, który szyfrował swoją korespondencję z Cyceronem. Sposób ten polegał na tym, że zamiast każdej litery pisał literę występującą w alfabecie trzy miejsca dalej. Tak więc, jeśli użyjemy dzisiejszego alfabetu łacińskiego abcdefghijklmnopqrstuvwxyz to zamiast c będziemy pisać f, zamiast g piszemy j, zamiast y piszemy b. Alfabet traktujemy cyklicznie, tzn. po ostatniej literze z następuje ponownie litera a itd. System kryptograficzny to sposób szyfrowania. W powyższym przykładzie polega on na tym, że zamiast danej litery alfabetu piszemy literę występującą w tym samym alfabecie kilka miejsc dalej. System kryptograficzny polega tu na pisaniu litery stojącej k miejsc dalej, a liczba k jest kluczem. Szyfrowanie więc polega na wyborze algorytmu szyfrowania, zwanego systemem kryptograficznym i pewnych parametrów, od których ten algorytm jest zależny, nazywanych kluczem szyfrowania. Szyfr Cezara bardzo łatwo jest opisać w sposób matematyczny. Kolejnym literom alfabetu łacińskiego przyporządkujmy liczby od 0 do 25. Oznaczenie a mod b oznacza resztę z dzielenia liczby całkowitej a przez dodatnią liczbę całkowitą b. Szyfr Cezara może teraz być zdefiniowany wzorem:
				</p>
				<p>Jeden z najstarszych sposobów szyfrowania pochodzi od Juliusza Cezara, który szyfrował swoją korespondencję z Cyceronem. Sposób ten polegał na tym, że zamiast każdej litery pisał literę występującą w alfabecie trzy miejsca dalej. Tak więc, jeśli użyjemy dzisiejszego alfabetu łacińskiego abcdefghijklmnopqrstuvwxyz to zamiast c będziemy pisać f, zamiast g piszemy j, zamiast y piszemy b. Alfabet traktujemy cyklicznie, tzn. po ostatniej literze z następuje ponownie litera a itd. System kryptograficzny to sposób szyfrowania. W powyższym przykładzie polega on na tym, że zamiast danej litery alfabetu piszemy literę występującą w tym samym alfabecie kilka miejsc dalej. System kryptograficzny polega tu na pisaniu litery stojącej k miejsc dalej, a liczba k jest kluczem. Szyfrowanie więc polega na wyborze algorytmu szyfrowania, zwanego systemem kryptograficznym i pewnych parametrów, od których ten algorytm jest zależny, nazywanych kluczem szyfrowania. Szyfr Cezara bardzo łatwo jest opisać w sposób matematyczny. Kolejnym literom alfabetu łacińskiego przyporządkujmy liczby od 0 do 25. Oznaczenie a mod b oznacza resztę z dzielenia liczby całkowitej a przez dodatnią liczbę całkowitą b. Szyfr Cezara może teraz być zdefiniowany wzorem:
				</p>

			</div>
			<div 
				id="page3"
				class="subPage"
				style="display: none"
			>
				<p>Przejdźmy teraz do algorytmów wykorzystywanych w dzisiejszych czasach. Na początku zapoznamy się z różnicą pomiędzy szyfrowaniem symetrycznym a asymetrycznym. Później przejdziemy do krótkiego opisu algorytmu AES oraz RSA, przy czym ten drugi pokażę bardziej szczegółowo, włączając w to przykład. Kryptografia symetryczna Swoją nazwę zawdzięcza temu, że większość szyfrów opartych o kryptografię symetryczną zawiera jeden klucz do kodowania i odkodowywania wiadomości. Możemy tu wprowadzić dodatkowy podział na szyfry blokowe i strumieniowe, gdzie blokowe dzielą wiadomość na bloki danych i dopiero wtedy przechodzą do właściwego szyfrowania, a szyfry strumieniowe przekształcają każdy bit wiadomości tak, jak dyktuje to algorytm. Problematyczna czasami staje się dystrybucja klucza, bowiem aby dać możliwość odszyfrowania wiadomości, musimy danej osobie przekazać klucz. Zatem siła kryptografii symetrycznej leży głównie w kluczu. Kryptografia asymetryczna Jest dzisiaj szeroko stosowana chociażby do składania podpisów cyfrowych. Polega ona na tworzeniu w procesie szyfrowania tekstu pary kluczy, prywatnego i publicznego. Klucz prywatny jest przeznaczony tylko dla nas. Możemy nim podpisywać wiadomość i tym samym uwierzytelniać ją. Klucz publiczny jest ogólnie dostępny i każdy adresat może dzięki niemu sprawdzić, między innymi, czy wiadomość jaką otrzymał nie była w międzyczasie modyfikowana. Kluczem publicznym można też szyfrować wiadomości i w takim wypadku do deszyfrowania posłuży już klucz prywatny. Przedstawicielem szyfrów symetrycznych jest AES. Jest finalistą konkursu, który został ogłoszony, by zastąpić przestarzały już i zapewniający zbyt małe bezpieczeństwo standard DES. AES używa kluczy o długości 128, 196 i 256 bitów. Jest algorytmem operującym na blokach o zmiennej długości, a biorąc pod uwagę fakt, że i same klucze są różnej długości, zapewnia bardzo wysoki poziom bezpieczeństwa.
				</p>
				<p>Przejdźmy teraz do algorytmów wykorzystywanych w dzisiejszych czasach. Na początku zapoznamy się z różnicą pomiędzy szyfrowaniem symetrycznym a asymetrycznym. Później przejdziemy do krótkiego opisu algorytmu AES oraz RSA, przy czym ten drugi pokażę bardziej szczegółowo, włączając w to przykład. Kryptografia symetryczna Swoją nazwę zawdzięcza temu, że większość szyfrów opartych o kryptografię symetryczną zawiera jeden klucz do kodowania i odkodowywania wiadomości. Możemy tu wprowadzić dodatkowy podział na szyfry blokowe i strumieniowe, gdzie blokowe dzielą wiadomość na bloki danych i dopiero wtedy przechodzą do właściwego szyfrowania, a szyfry strumieniowe przekształcają każdy bit wiadomości tak, jak dyktuje to algorytm. Problematyczna czasami staje się dystrybucja klucza, bowiem aby dać możliwość odszyfrowania wiadomości, musimy danej osobie przekazać klucz. Zatem siła kryptografii symetrycznej leży głównie w kluczu. Kryptografia asymetryczna Jest dzisiaj szeroko stosowana chociażby do składania podpisów cyfrowych. Polega ona na tworzeniu w procesie szyfrowania tekstu pary kluczy, prywatnego i publicznego. Klucz prywatny jest przeznaczony tylko dla nas. Możemy nim podpisywać wiadomość i tym samym uwierzytelniać ją. Klucz publiczny jest ogólnie dostępny i każdy adresat może dzięki niemu sprawdzić, między innymi, czy wiadomość jaką otrzymał nie była w międzyczasie modyfikowana. Kluczem publicznym można też szyfrować wiadomości i w takim wypadku do deszyfrowania posłuży już klucz prywatny. Przedstawicielem szyfrów symetrycznych jest AES. Jest finalistą konkursu, który został ogłoszony, by zastąpić przestarzały już i zapewniający zbyt małe bezpieczeństwo standard DES. AES używa kluczy o długości 128, 196 i 256 bitów. Jest algorytmem operującym na blokach o zmiennej długości, a biorąc pod uwagę fakt, że i same klucze są różnej długości, zapewnia bardzo wysoki poziom bezpieczeństwa.
				</p>

			</div>
		</div>
		<script>
			$('.nav a').click(function() {
				var newSubPage = $($(this).attr('subPage')),
				newSubSiteHeight = $(newSubPage).height();

				$('div .subPage').each(function() {

					if($(this).css('display') == 'block' && $(this).attr('id') != newSubPage.attr('id')) {
						oldSubPageName = $(this).attr('id');
						$(this).animate({
							height: '0px'
							}, function(){
								$(this).css({
									'display': 'none',
									'height': 'auto'
								});
							}
						);
					}
				});
				if($(newSubPage).css('display') == 'none') {	
					$(newSubPage).css({
						'height': '0px',
						'display': 'block'
					}).animate({
						'height': newSubSiteHeight
					});
				}
				
			});
		</script>
	</body>
</html>