ugrás a tartalomhoz

Divek közti kapcsolgatás

Anonymous · 2006. Okt. 20. (P), 17.11
Szeretnék tanácsot, linket, tutoriált kérni divek közti kapcsolgatáshoz.
Ez azt jelentené esetemben, hogy van mondjuk három div, ebből kettő display: none;, a harmadik látható. Valahogy újratöltés nélkül szeretném megoldani a dolgot.
‹ Miért jobb az XHTML, mi a DOM, miért kell a DOCTYPE ...? Group panel elem weben hogy használható? ›
 ■
1

re

Anonymous · 2006. Okt. 20. (P), 17.31
parancsolj, lásd forrása

http://toxin.hu/tutorial/jsoop/2/index.html#

üdv t
2

én

toxin · 2006. Okt. 20. (P), 17.32
voltam, bocsánat
3

Köszi

Anonymous · 2006. Okt. 20. (P), 17.43
Ez már majdnem jó, csak kikapcsolt js esetén nem műxik. Meg igazából az effekthez sem ragaszkodom, egyszerűen csak váltogatnom kéne a div-eket.
4

re

toxin · 2006. Okt. 20. (P), 17.52
kiindulásnak jó, js meg jobb mint a css, már crossbrowser kategóriában (thx IE7)

üdv t
5

Allitsad at a display-t

Jano · 2006. Okt. 20. (P), 17.58
Egyszeru: allitsad at a display tulajdonsagaikat. Amelyiket megakarod jeleniteni annak block-ra, tobbinek none-ra.

document.getElementById('elemIdje').style.display = "block;"
JS-nelkul CSS-ben a :target -tel lehetne megoldani, dehat IE6 azt nem tudja. IE7-et nem tudom, de ezekutan lenyegtelen.
7

Igen, de ezt hogyan...

Anonymous · 2006. Okt. 20. (P), 19.11
...tudnám a legszebben, diszkrét js-t használva megvalósítani?
Ha valakinél ki van kapcsolva a js, akkor ő nem fogja látni a tartalmat... jól tévedek?
8

ha diszkrét

rudo · 2006. Okt. 20. (P), 19.49
akkor legyen a css-ben mind block, és az oldal betöltődéskor állítsa a megfelelőket a js none-ra.
6

próbáld így

rudo · 2006. Okt. 20. (P), 19.09
nem tudom, hogy pontosan mire kell, de nézd meg ezt:

http://codeworkerz.com/cssgalery

régebben csináltam és nincs kedvem kiszedni belőle a lényeget (nem olyan bonyolult úgyse)

csak css, megy IE6 és FF alatt, végső soron pedig divek jelennek meg, tűnnek el.
9

Biztos nem olyan bonyolult a dolog

Anonymous · 2006. Okt. 20. (P), 22.17
... de én most már teljesen elakadtam... :(
Szóval adott a css-ben a három div: 

#first, #second, #third, { 
display: block; 
width: 565px; 
border:1px solid #f1f1f1; 
padding: 5px; 
margin-top: 3px; }
Adott a html: 

<ul id="navigation">
<li><a href="#" onclick="divSwitcher('first')">elso divp</a></li>
<li><a href="#" onclick="divSwitcher('second)">masodik div</a></li>
<li><a href="#" onclick="divSwitcher('third')">harmadik div</a></li>
</ul>

<div id="first">
<p>elso div tartalma</p>
</div>

<div id="second">
<p>masodik div tartalma</p>
</div>

<div id="third">
<h2>harmadik div tartalma</h2>
<p></p>
</div>
Es itt megall a tudomanyom, pedig most jonne a js:

/* ide jonne a js fuggveny, ami megcsinalja azt amit kell... */
function divSwitcher(name) {
...
}
Valaki meg tudna adni azt a lökést, ami elmozdítana erről a holtpontról?
Köszönöm szépen előre is.
10

hol jelenik meg?

rudo · 2006. Okt. 20. (P), 22.44
csak annyit árulj el, hogy a három div ugyan arra a helyre van-e pozicionálva?
tehát olyasmit akarsz csinálni, mintha mindig egy iframbe töltenél valamit, csak iframe nélkü? vagy olyasmit, mint az itt a piros, hol a pirosnál, tehát pl. egymás mellett vannak, de mindig csak a jobb, bal, vagy középső lászik csak egyszerre?
11

Ugyanott

Anonymous · 2006. Okt. 20. (P), 22.49
Ugyanazon a helyen jelennének meg, az information nevu div-en belül. Mindig csak az egyik látszana, amit kiválasztanak a fölötte lévő menü segítségével.
12

magasság

rudo · 2006. Okt. 20. (P), 23.00
és a magasságuk? változik a tartalmuk? tehát egyforma magasak, van scrollbarjuk, vagy nyúlnak?
13

re

Anonymous · 2006. Okt. 20. (P), 23.09
  • A magasság változó, de ezt a css megoldja, mivel az information nevű div nyúlik a tartalommal együtt.
  • A tartalom mysql adatbazis egy tablajanak egyetlen soranak mezoibol kerül ki, ez kerül elosztásra a div-ek között. Menet közben már nem változik egy adott div tartalma, ha erre vagy kiváncsi.
  • Nincs scrollbar.


Köszi előre is!
14

van egy gond

rudo · 2006. Okt. 20. (P), 23.17
mi van, ha nincs js? ha egymás főlé pozícionálom öket, akkor valóban gond lesz js nélkül -tehát az a kérdés, hogy akkor mi legyen?
legyenek egymás alatt, vagy mi?
15

Ha nincs js

Anonymous · 2006. Okt. 20. (P), 23.18
... akkor tökéletes, ha egymás alatt jelennek meg a divek.
16

Találtam egy ilyet...

Anonymous · 2006. Okt. 20. (P), 23.21
... ez tökéletes is lenne, csak külön kéne szedni a js-t a html-től és asszem nekem ez meg is felelne. :)
Ja, a link:
Show/hide contest
25

Másik változat?

toth_a · 2006. Okt. 22. (V), 02.18
Tehát mondjuk van 9 db DIV (mind más tartalommal), a kezdőpontjuk (elhelyezkedésük) uo. van, s attól függően, hogy mit választanak ki (link, nyomógomb), csak az jelenjen meg. Esetleg nem kell listába rakni (UL, LI), mint a másik megoldásnál?

Nem igazán ehhez a témához, de: XHTML 1.0 Strict-ben, hogyan lehet elrejteni - szabványos megoldással (!) - egy adott kép keretét?
A -->border="0"<-- nem jó!
26

hmmm.

rudo · 2006. Okt. 22. (V), 08.02
másik változat? mire gondolsz?

pont ez történik, azzal a különbséggel, hogy nem ugyanott van a kezdőpontjuk. ha ugyanoda volna pozicionálva, akkor kitakarnák egymást és elérhetetlenné válna a tartalom, ha nincs js, ráadásul az abszolút pozíció miatt nem nyúlna a content!

hol van listában, micsoda?

kerethez használd: style="border:0px;", vagy add meg stíluslapon.
31

Pontosítok!

toth_a · 2006. Okt. 22. (V), 12.16
Itt megnézhető egy minta (képernyőmentés részlete):
itt
Tehát nyomogatja a látogató a linket (vagy a nyomógombokat), s csak az a DIV "kerül elő" (látszódik), amit kiválasztott.
A képen szándékosan eltoltam 40px egységgel a jobbra eső DIV-et.

Senki?
Nem türelmetlenkedem, csak nem jövök rá sehogy, erre a fránya DIV cuccokra!

A másik probléma: hova rakjam a "border: 0px" értéket?
Próbáltam, de nem ment!
Az Opera 9 jól jeleníti meg, alapból:
itt

A FF 2.0 RC2 és az IE6 meg így:
itt

Elnézést kérek, de nekem nem triviális a megoldás!
Egyébként külső CSS file-t használok.
17

itt a megoldás

rudo · 2006. Okt. 20. (P), 23.55
window.onload=function()
{
	var obj=document.getElementById('navigation').getElementsByTagName('A');
	for(i=0;i<obj.length;i++){
		obj[i].href_=obj[i].href;
		obj[i].href='javascript:void(0)';
		obj[i].onclick=function(){
			for(j=0;j<obj.length;j++){
				document.getElementById(obj[j].href_.split('#')[1]).style.display='none';
			}
			document.getElementById(this.href_.split('#')[1]).style.display='block';
		}
	}
}
	<ul id="navigation">
		<li><a href="#first">elso div</a></li>
		<li><a href="#second">masodik div</a></li>
		<li><a href="#third">harmadik div</a></li>
	</ul>

	<div id="information">
		
		<div id="first">
			<p>elso div tartalma</p>
		</div>
	
		<div id="second">
			<p>masodik div tartalma</p>
		</div>

		<div id="third">
			<p>harmadik div tartalma</p>
		</div>

	</div>
18

Na, kezd tökéletes lenni

Anonymous · 2006. Okt. 21. (Szo), 00.06
Már csak egyetlen egy problémám van, hogy egy másik lapról érkezem erre az oldalra és valahogy úgy kéne indulnia, hogy alapban csak a first div van display: block; -on, a többi display: none;-ra állítva. Jelenleg ha megérkezem az oldalra, akkor látszik mindegyik, viszont a kapcsolgatás tökéletes.
Erre van valami ötleted?

Amúgy tényleg nagyon hálás vagyok a segítségért! :)
32

Nekem nem működik FF 2.0 RC2 alatt!

toth_a · 2006. Okt. 23. (H), 14.24
Próbáltam trükközni, de sehogy nem jön össze.
IE 6 és Opera 9.0 alatt megy, de a FF-ban nincs érdemi változás (eltűnés/megjelenés).
Mi lehet a baj?

<div id="navigation">
<a href="#first"> elso </a>
<a href="#second"> masodik </a>
<a href="#third"> harmadik </a>
</div>

<div id="first">elso div tartalma</div>
<div id="second">masodik div tartalma</div>
<div id="third">harmadik div tartalma</div>
illetve a CSS kód:

div#navigation {
display: inline;
width: 200px;
height: 40px;
border: 1px;
border-style: dashed;
text-align: center;
}

div#first {
display: block;
background-color: blue;
width: 300px;
height: 75px;
border: 1px;
border-style: solid dotted;
}

div#second {
display: block;
background-color: red;
width: 400px;
height: 75px;
border: 1px;
border-style: dotted;
}

div#third {
display: block;
background-color: yellow;
width: 500px;
height: 75px;
border: 1px;
border-style: dotted;
}
A korábban megadott JS szövegén semmit nem változtattam.
Valaki segítsen!
19

ezt még add hozzá,

rudo · 2006. Okt. 21. (Szo), 00.06
hogy beállítsd a kezdőlapot
var firstpage='first';
	
	for(i=0;i<obj.length;i++){
		var contentdiv=document.getElementById(obj[i].href_.split('#')[1]);
		if(contentdiv.id!=firstpage)contentdiv.style.display='none';
	}
20

Egészen pontosan hová

Anonymous · 2006. Okt. 21. (Szo), 00.14
Bocs, de js-ben nagyon kezdő vagyok... :(
21

így néz ki egyben

rudo · 2006. Okt. 21. (Szo), 00.18
mehet a doksin belülre, vagy külső .js fájlba, mindegy.

window.onload=function()
{
	var obj=document.getElementById('navigation').getElementsByTagName('A');
	for(i=0;i<obj.length;i++){
		obj[i].href_=obj[i].href;
		obj[i].href='javascript:void(0)';
		obj[i].onclick=function(){
			for(j=0;j<obj.length;j++){
				document.getElementById(obj[j].href_.split('#')[1]).style.display='none';
			}
			document.getElementById(this.href_.split('#')[1]).style.display='block';
		}
	}
	
	var firstpage='first';
	
	for(i=0;i<obj.length;i++){
		var contentdiv=document.getElementById(obj[i].href_.split('#')[1]);
		if(contentdiv.id!=firstpage)contentdiv.style.display='none';
	}
}
és az a szép benne, hogy simán tudod bővíteni a dolgot további menüpontokkal, anélkül, hogy a js-hez kéne nyúlnod.
22

Köszönöm mégegyszer

Anonymous · 2006. Okt. 21. (Szo), 00.21
Király, tökéletesen müködik! :)
23

szivesen

rudo · 2006. Okt. 21. (Szo), 00.23
:)
24

Ez nagyon jó. Picike és zseniális

Anonymous · 2006. Okt. 21. (Szo), 10.44
Kéne vezetni egy gyülytő mappát az elkészült megfejtéseknek a Wl-en.
27

Változik a tartalom

Anonymous · 2006. Okt. 22. (V), 09.07
Huuuuu... Egyet elfelejtettem.
A divek közti kapcsolgatás tökéletes, azonban előforulhat, hogy időközben megváltozik az SQL tábla valamelyik mezőjének tartalma, amit mindenképpen le kéne tudnom követni.
Magyarul:
ha mondjuk a negyedik div-et nézem és visszakapcsolok az elsőre, akkor nemcsak a display-t kéne változtatnom, hanem az sql lekérést is újra lefuttatni. Erre van valami ötlet?
28

Ha lehet...

Anonymous · 2006. Okt. 22. (V), 09.08
... akkor a teljes tartalom újratöltése nélkül szintén. Bár lehet, hogy ezt nem is lehet megvalósítani?
29

húha...

rudo · 2006. Okt. 22. (V), 09.21
ne igen, ez már fogós kérdés!

az ilyen tartalomkezelésnél sok probléma merülhet fel. létezik megoldás,
őt hívják úgy, hogy AJAX, két gond van vele:
1. bár léteznek kidolgozott megoldások, nem árt kicsit gyokorlottabbnak lenni pl. js-ben.
2. mivel AJAX-al teljesen a js-re hagyatkozol, ott már tényleg gond, ha nem áll rendelkezésre illetve fel kell rá készülni, de ez bizony megbonyolítja a dolgot!

ha mindenkép ilyesmit akarsz csinálni nézz bele kicsit az AJAX-ba. ezen az oldalon rengeteg cucc van róla.
a másik lehetőség, hogy fércelsz valamit iframe-el... de ilyen töltögetős dolgot tényleg csak akkor érdemes használni, ha indokolt!
30

re

Anonymous · 2006. Okt. 22. (V), 11.42
Hm... akkor valahogy másképp kell megoldanom a dolgot asszem.
Azért körülnézek, hátha találok valami kapaszkodót... :)