• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana treści Diva za pomocą JavaScript bez ponownego ładowania strony

VPS Starter Arubacloud
+2 głosów
6,612 wizyt
pytanie zadane 8 lipca 2015 w JavaScript przez Maciej Gzela Nowicjusz (140 p.)

Witajcie

Mam problem. Otóż chcę zrobić stronę, która, wiadomo, posiada menu u góry, po bokach reklamy, a w środku główny div z tekstem. Chciałbym, by po kliknięciu odpowiedniej opcji w menu zawartość owego głównego diva zmieniała się na taką jaką podam. Menu jest zrobione wg. tego co Pan Mirosław omawiał w 3 odcinku poradnika CSS.

I tutaj rodzą się moje pytania:

  • W jaki sposób dodać do tego menu zdarzenie Onclick, by po jego kliknięciu odpowiednia funkcja podmieniła zawartość głównego diva?
  • Jak skonstruować taką funkcję, by móc wstawiać zdjęcia i ogólnie w miarę skomplikowaną zawartość?

Z góry dziękuję za odpowiedź

Maciej

3 odpowiedzi

+1 głos
odpowiedź 8 lipca 2015 przez Comandeer Guru (599,730 p.)
https://github.com/defunkt/jquery-pjax → History API jest jedynym w pełni przyjaznym userowi sposobem na to. Pod maską korzysta z http://api.jquery.com/load
komentarz 8 lipca 2015 przez Czort Nałogowiec (32,500 p.)
Sam load() wystarczy jeśli nie zależy na tym żeby można było dodawać podstrony do zakładek albo używać przycisku wstecz w przeglądarce. Dla większości stron jest to jednak niezbędne.
komentarz 8 lipca 2015 przez Comandeer Guru (599,730 p.)
A czemu jest to niezbędne, to można zerknąć tutaj: https://pornel.net/ramki
komentarz 8 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)
No dobra. Czyli wychodzi na to że lepiej żebym zrobił po prostu osobną podstronę. W takim razie muszę z każdą podstroną tworzyć od początku wszystko? Czy jest jakiś lepszy sposób?-
komentarz 9 lipca 2015 przez Tomatosoup Pasjonat (18,530 p.)
"Skakanie" pornela w sombrero wciąga bardziej niż sam content strony
komentarz 9 lipca 2015 przez Comandeer Guru (599,730 p.)
Haha, dokładnie :D
0 głosów
odpowiedź 8 lipca 2015 przez hypothermi Obywatel (1,170 p.)
Czyli chodzi Ci po prostu o stworzenie strony typu Single Page? Jak na przykład tutaj:

http://angular-ui.github.io/ui-router/site/

Jeżeli tak to np. Angular (albo React, Backbone itp.) bardzo ułatwi sprawę i w sumie te frameworki do tego służą.
komentarz 9 lipca 2015 przez Comandeer Guru (599,730 p.)
React i Angular na pewno sprawy nie ułatwią, bo jeden to przekombinowany system widoków, a drugi to źle zaprojektowany framework. Już bym szybciej został z Backbone'em - tylko po co, skoro do takiej stronki starczy zwykłe History API.
0 głosów
odpowiedź 9 lipca 2015 przez L3t94 Użytkownik (900 p.)

Z tym samym mam problem, znalazłem rozwiązanie ale jest nie praktyczne. Wrzucę do nauki.
 

   function ontop(id)

    {

      document.getElementById('1').style.zIndex = 0;

      document.getElementById('2').style.zIndex = 0;

      document.getElementById('3').style.zIndex = 0;

      document.getElementById(id).style.zIndex = 1;

    }

Funkcja działa tak, że manipuluje parametrem z-index, czyli tym który element jest bardziej na wierzchu. Jeśli ustawisz divy jeden na drugim, a później w odnośniku dodasz onclick="ontop(id)". Niby wszystko pięknie ale w momencie gdy strona by się rozrosła trzeba dodawać kod do js'a i każdemu kolejnemu divowi dawać id.

I jeszcze to http://helion.pl/ksiazki/javascript-i-jquery-nieoficjalny-podrecznik-david-sawyer-mcfarland,jsjqnp.htm#opis <- w tym darmowym fragmencie jest co nieco na ten temat opisane, jeszcze sam nie sprawdzałem.

komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)
Może zabrzmię jak głupek, ale jak dać divy jeden pod drugim?
komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
Zasadne pytanie, pobaw się w CSSie parametrem position:absolute. Spróbuj ustawić dwa divy jeden pod drugim i temu drugiemu daj ten parametr.
komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Działa, ale nie do końca:

Oto mój kod źródłowy (html a potem css)

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>

	<body>

	<div id="a">
	</div>

	<div id="b">
	</div>

	<div id="c">
	</div>

	</body>

</html>

 

 

#a
{
	width: 500px;
	height: 400px;
	background-color:#000000;
	position:absolute;
}

#b
{
	width: 500px;
	height: 400px;
	background-color:#57FF62;
	position:absolute;
}
#c
{
	width: 500px;
	height: 400px;
	background-color:#FF5C5C;
}

Z tego co zauważyłem, działa tylko nadanie position:absolute najwyższemu divowi. Po tego nadaniu div "wpuszcza" nad siebie div, który jest pod nim. No więc żeby 3 divy naszły na siebie muszę dać position:absolute dwóm najwyższym. Wszystko gra, lecz po nadaniu z-index=100 pierwszemu, drugiemu 50, a trzeciemu 0 (Czyli teraz na górze powinien się pojawić div a) nic się nie zmienia. Co robię źle?

komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
Po skopiowaniu Twojego kodu mało co działało, nie wiem czy się jakieś białe znaki wdarły a jeśli tak to w Twoim kodzie też mogą być. Napisz jeszcze raz. U mnie działa, zgodnie z przewidywaniami.
komentarz 9 lipca 2015 przez Schizohatter Nałogowiec (39,600 p.)
Pomijając to, że do czegoś takiego powinno się faktycznie użyć history api i zwyczajnego wczytywania treści z pomocą AJAX, to jest to idiotyczne rozwiązanie.

Po co te divy mają być wszystkie naraz widoczne, ale ukryte pod sobą? Jeśli już chcemy używać takiego rozwiązania (odradzam), to po prostu wystarczy te divy włączać i wyłączać za pomocą display: block/none
komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
Możesz napisać jak wygląda wczytywanie treści za pomocą AJAX. Instrukcja jest wyżej, chodzi mi o to w czym przechowywana jest treść.
komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Mam listę wypunktowaną:

	<div id="menu">
		<ol>
				<li><a href="#">a</a></li>
				<li><a href="#">b</a></li>
				<li><a href="#">c</a></li>
		</ol>
	
	</div>

Gdzie tu wstawić zdarzenie onclick?

 

komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
W znaczniku a, po a hrefie
komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Dobra, to już działa :D . Teraz już chyba ostatnie pytanie:

	function ontop(id)
	{
		document.getElementById("a").display:none;
		document.getElementById("b").display:none;
		document.getElementById("c").display:none;
		
		document.getElementById(id).display:block;
		
	}

Display:none chyba powinno być czymś zastąpione aby to działało. Ale czym?

komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
edycja 9 lipca 2015 przez L3t94

.style nie powinno być?
Polecam
http://kodcss.pl/dodatki/inne/rozne/mapa-wartosci-wlasciwosci-css

To działa, tylko tak jak pisałem wcześniej takie rozwiązanie nie ma sesnu na większą stronę. No ale jest to łatwe rozwiązanie, wręcz łopatologiczne. Nie trzeba odrazu nic skomplikowanego.

Jak już chcesz tak to zauważ, że JS ma inną składnie. To inny język w końcu.

function ontop(id)

    {

      document.getElementById('1').style.display="none";

      document.getElementById('2').style.display="none";

      document.getElementById('3').style.display="none";

      document.getElementById(id).style.display="block";

    }

 

komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Dobra, naprawiłem wszystkie błędy i teraz pięknie śmiga :D Dla ciekawskich to co wymyśliłem:

 

	<script>
	
	function onload()
	{
	
		document.getElementById('b').style.display = 'none';
		document.getElementById('c').style.display = 'none';
	
	}
	
	function ontop(id)
	{
		document.getElementById('a').style.display = 'none';
		document.getElementById('b').style.display = 'none';
		document.getElementById('c').style.display = 'none';
		
		document.getElementById(id).style.display = 'block';
		
	}
	
	</script>
	
	
</head>

	<body onload=onload();>

	<div id="a">
	</div>

	<div id="b">
	</div>

	<div id="c">
	</div>
	
	<div id="menu">
		<ol>
				<li><a href="#"onclick=ontop('a');>a</a> </li>
				<li><a href="#"onclick=ontop('b');>b</a></li>
				<li><a href="#"onclick=ontop('c');>c</a></li>
		</ol>
	
	</div>

	</body>

</html>

Dziękuję wszystkim za pomoc :D Temat do zamknięcia :D

Podobne pytania

+10 głosów
14 odpowiedzi 2,524 wizyt
+12 głosów
4 odpowiedzi 1,964 wizyt
pytanie zadane 12 kwietnia 2015 w JavaScript przez krecik1334 Maniak (58,390 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...