ugrás a tartalomhoz

Lenyíló szövegdobozok készítése

Dinnye · 2017. Május. 15. (H), 14.59
Sziasztok!

Abban szeretném a segítségeteket kérni, hogy hogyan készíthetnék lenyíló szövegdobozokat div-ből vagy table-ből valami egyszerű srcip-tel vagy minimal js-sel.

Egy nagyon primitív hírfolyamot szeretnék készíteni, ahol egymás alatt kinyitható szövegdobozok sorakoznának. Ebben a lenyíló részben lenne a tartalom. A lényeg, hogy ne csak egyetlen szövegdobozzal működjön, hanem bármennyivel.

Valami ilyesmire gondolok

<script> function rejto(x)
{
if (document.getElementById("rejt"+x).style.display=="none")
{
document.getElementById("rejt"+x).style.display="block" document.getElementById("rejt"+x).style.visibility="visible"
}

else
{
document.getElementById("rejt"+x).style.display="none" document.getElementById("rejt"+x).style.visibility="hidden"
}
}

for(j=1;j<4;j++)
{
document.getElementById("rejt"+j).style.display="none" document.getElementById("rejt"+j).style.visibility="hidden"
}
</script> 

<table border="1" cellspacing="0" style="border-collapse: collapse" width="100%">     

<tr>
<td onclick="rejto(1)">1</td>  
</tr>
<tr id="rejt1">
<td>1a</td>
</tr>

<tr >
<td onclick="rejto(2)">2</td>
</tr>   <tr id="rejt2">
<td>2a</td>
</tr>

<tr>
<td onclick="rejto(3)">3</td>
</tr>
<tr id="rejt3">
<td>3a</td>
</tr>

</table>
forrás: https://prog.hu/tudastar/18014/lenyilo-tablazat

Ez már majdnem az, amire én gondolok, csak annyi kellene hozzá, hogy a lenyíló dobozok alapból rejtve legyenek a lap betöltésekor, és csak kattintásra bukkanjanak elő, mert jelenleg alapból minden látszik és így túl terjedelmes.
A kinézettől most tekintsetek el. :)

Választok előre is köszönöm!
‹ Body Eseménykezelés Gallery oldal létrehozása ›
 ■
1

Szerintem ezt nem js-ben,

inf · 2017. Május. 15. (H), 16.47
Szerintem ezt nem js-ben, hanem css-ben kéne megoldani valahogy. pl: link Keress utána jobban, hátha találsz olyat css-el, ami megfelel neked. Ha ilyen alap dolog nem megy js-ben, akkor még sokat kell tanulnod...
2

"kéne"...

Dinnye · 2017. Május. 15. (H), 17.23
Köszönöm a linket, mindenképpen kipróbálom. :)

Sajnos van még mit tanulnom, ez tény. Azonban korábban ilyesmit nem tanultam, viszont a helyzet rákényszerít, hogy próbáljak önállóan fejlődni kicsit. Legalább az alapokat. Csak hát így elég nehéz.
3

Nagyon sok cikk van itt is az

inf · 2017. Május. 15. (H), 17.24
Nagyon sok cikk van itt is az alapokról, érdemes visszakeresni, illetve érdemes lenne elolvasni valamilyen könyvet a programozás, esetleg az oop alapjairól.
4

Igen, tényleg vannak fent jó

Dinnye · 2017. Május. 16. (K), 12.42
Igen, tényleg vannak fent jó dolgok, szoktam olvasgatni néha.

Kipróbáltam, amit javasoltál tegnap. Működik, de nem teljesen ilyesmire gondoltam. Próbáltam átalakítani, de csak elrontottam, úgyhogy inkább nem erőltettem tovább. Viszont köszönöm, mert kiinduló pontnak tökéletes volt.

Próbáltam más dolgokat is, de sehogy se akart összeállni olyanra, mint ahogy elképzeltem.

Végül felidegesítettem magam rajta, és úgy döntöttem, hogy megpróbálom megírni magamtól az a sok dolog alapján, amiket innen-onnan összeszedtem, meg amit te javasoltál. Tisztán csak CSS-sel.

Sikerült! Valószínűleg ez egy nagyon kezdő megoldás, de legalább működik.
Teszteltem IE, Edge, Chrome, FF és Opera alatt is, látszólag jó.

Kódsor:

<style>
.HirekKulsoDiv {
	width: 690px;
	border-spacing: 0px;
    position: relative;
    left: -5px;
}

.HirekCimsorDiv {
	width: 680px;
	height: 50px;
	background-color: #154746;
}

.HirekCimsorSzoveg {
text-align: center;	
line-height: 50px;
color: #fffdd2;
text-shadow: 2px 2px 2px #000000;
font-size: 120%;
}

.HirekCimsorIMG {
    position: absolute;
    top: 10px;	
}

.HirekRejtettDiv {
	width: 677px;
	background-color: #ffffff;
	border: 2px;
	border-style: solid;
	overflow-x: hidden;
	display: none; /* Láthatatlan */
}

.HirekRejtettSzoveg {
text-align: left;			
}


.HirekCimsorDiv:hover + .HirekRejtettDiv {
display: block;	
}

.HirekRejtettDiv:hover {
display: block;		
}
</style>


<div class="HirekKulsoDiv">

	<div class="HirekCimsorDiv">
		<p class="HirekCimsorSzoveg">Címsor szövege 1
		&nbsp;<img class="HirekCimsorIMG" src="img/nyil.png" width="30px;" height="30px;">
                      </img>
		</p>
	</div>

	<div class="HirekRejtettDiv">
		<p class="HirekRejtettSzoveg">
		001 szövege <br> 001 szövege <br> 001 szövege
		</p>
	</div>

</div>
A CSS-t eredetileg külön stíluslapra raktam, de ide most egybe másolom be.

Először csak a címsoron volt hover, de rájöttem, hogy kell a rejtett divre is, ha a lenyíló szöveg függőlegesen túllógna az oldalon. Így a rejtett diven tartott egérrel is lehet végtelen hosszúságig lefele görgetni.

Viszont emiatt kicsit aggódom:
.HirekCimsorDiv:hover + .HirekRejtettDiv {...}
Szerinted ez így használható vagy ezzel a kódsorral lehetnek gondok pl.: régi IE-nél vagy ilyesmi?

Bár rálebegtetés helyett kattintásra jobb lenne, de egyelőre úgy még nem megy.
5

Elvileg IE7-től felfele

inf · 2017. Május. 16. (K), 14.30
Elvileg IE7-től felfele működik, nem hiszem, hogy gond lenne vele. Aki meg ennyire elavult rendszert használ, az meg is érdemli. :-) Nálam Win7-el alapból IE10 ment fel, de már a Firefox letöltése is nehézkesen ment vele, képzelem milyen lehet IE6-al böngészni. :D

Kezdésnek jó, lényeg, hogy működik. Én is csináltam már egyébként ennek a két selectornak a kombinációjával tök jó dolgokat.
6

Még egy utolsó kérdésem lenne

Dinnye · 2017. Május. 17. (Sze), 12.14
Még egy utolsó kérdésem lenne ebben a témában, aztán ígérem, hogy befejezem. :D

Találtam egy másik megoldást, amivel már kattintásra tudom lenyitni a tartalmi részt, ez sokkal használhatóbbnak tűnik. Kicsit átalakítgattam külsőre, de a JS-hez nem nyúltam. Tökéletesen működik még IE-n is.

Ilyen:

<script>
reg=""
function mutat(mit)
{
if (reg!="")
   {
  document.getElementById(reg).style.display='none'
   }
reg=mit
document.getElementById(reg).style.display=''
return false
}
</script>


<Style>
.HirekFejlecDiv {
	width: 680px;
	height: 40px;
	background-color: darkblue;
	border-spacing: 0px;
    position: relative;
    left: 3px;
	margin-bottom: 2px;
	cursor: pointer; /* az egér mutató kézzé alakuljon át ezen a felületen */
}

.HirekFejlecSzoveg {
	text-align: center;	
	line-height: 40px;
	color: #fffdd2;
	text-shadow: 2px 2px 2px #000000;
	font-size: 120%;
}

.HirekFejlecIMG {
    position: absolute;
    top: 5px;	
}

.HirekLenyiloDiv {
	width: 677px;
	background-color: #ffffe4;
	border: 2px;
	border-style: solid;
	overflow-x: hidden;
	position: relative;
    left: 3px;
margin-bottom: 10px;	
}
</style>


<!--[ CIKK CÍME ]--->
<div onclick="return mutat('szoveg1')" class="HirekFejlecDiv">
	<p class="HirekFejlecSzoveg">Címszó 1
	&nbsp;<img class="HirekFejlecIMG" src="img/nyil.png" width="30px;" height="30px;"></img><!--kis nyíl kép-->
	</p>
</div>

<!--[ CIKK TARTALMI RÉSZE ]-->
<div id="szoveg1" style="display:none">
	<div class="HirekLenyiloDiv">
	111111111111<br>
	</div>
</div>

<!-------------------------------------------------------->

<!--[ CIKK CÍME ]-->	
<div onclick="return mutat('szoveg2')" class="HirekFejlecDiv">
<p class="HirekFejlecSzoveg">Címszó 2
&nbsp;<img class="HirekFejlecIMG" src="img/nyil.png" width="30px;" height="30px;"></img><!--kis nyíl kép-->
</p>
</div>

<!--[ CIKK TARTALMI RÉSZE ]-->
<div id="szoveg2" style="display:none">
	<div class="HirekLenyiloDiv">
	2222222222222<br>
	</div>
</div>

<!-------------------------------------------------------->

<!--[ CIKK CÍME ]-->	
<div onclick="return mutat('szoveg3')" class="HirekFejlecDiv">
<p class="HirekFejlecSzoveg">Címszó 3
&nbsp;<img class="HirekFejlecIMG" src="img/nyil.png" width="30px;" height="30px;"></img><!--kis nyíl kép-->
</p>
</div>

<!--[ CIKK TARTALMI RÉSZE  ]-->
<div id="szoveg3" style="display:none">
	<div class="HirekLenyiloDiv">
	333333333333333333333<br>
	</div>
</div>
Egyetlen egy "baj" van vele, hogy amit megnyitok, az már úgy marad. Ha egy másikra kattintok, akkor persze eltűnik, de ha a saját címsorára kattolok, akkor nem. Ki lehet valahogy egészíteni ezt a scriptet úgy, hogy az 1. kattintásra kinyissa, a 2-ra becsukja? Vagy ehhez teljesen újat kell írni? Mert akkor nem vesződök vele, jó lesz így is... :)
7

Ezt használd a mutat

inf · 2017. Május. 17. (Sze), 16.50
Ezt használd a mutat(id) helyett:

var expandContent = (function (){

	var expanded;

	function expandContent(id){ 
		var el = document.getElementById(id);
		var needExpand = expanded !== el;
		if (expanded)
			collapse();
		if (needExpand)
			expand(el);
		return false;
	}
	
	function expand(el){
		el.style.display = "block";
		expanded = el;
	}
	
	function collapse() {
		expanded.style.display = "none";
		expanded = null;
	}
	
	return expandContent;
})();
Igazából szerencsésebb lenne css class-be tenni az expanded meg collapsed részét a dolognak, meg nem id alapján becsukni/kinyitni, de így is elmegy.
8

Kipróbáltam, de nálam sajnos

Dinnye · 2017. Május. 18. (Cs), 09.05
Kipróbáltam, de nálam sajnos nem működik.
Csak a scriptet írtam át erre, remélem más módosítás nem kellett hozzá, mert akkor rosszul csináltam.
9

A "mutat('szoveg3')" jellegű

inf · 2017. Május. 18. (Cs), 09.28
A "mutat('szoveg3')" jellegű részeket ki kellett cserélni "expandContent('szoveg3')"-ra. Mindegy, ha nem sikerül összehozni, akkor maradj inkább annál, ami működik.

Ami esetleg még alapvető, hogy használj doctype-ot, html, head, title, body tageket és hogy utf-8 bom nélkül mentsd a fájlt, illetve minden utf-8 kódolású legyen, aminél csak be lehet állítani. link
10

Szuper, így már működik.

Dinnye · 2017. Május. 18. (Cs), 10.10
Szuper, így már működik. Köszönöm szépen a segítséget, nagyon hasznos volt. :)

A fent felsoroltakat használom is, annyi különbséggel, hogy a karakterkódolást "sima" utf-8-cal szoktam menteni és nem bom nélkül.
Egyelőre ennek nem tapasztaltam még hátrányát. Hol okozhat ez gondot?
11

Ha szerver oldali nyelvet

inf · 2017. Május. 18. (Cs), 10.22
Ha szerver oldali nyelvet használsz és HTTP header-t akarsz kiküldeni a tartalom előtt, akkor szokott gondot okozni. Úgy rémlett, hogy a böngészők sem szeretik, de ezek szerint mégis elviselik, hogy ott van, vagy a szövegszerkesztőd eleve nélküle menti az anyagot, passz.
12

Notepad++ -szal szoktam

Dinnye · 2017. Május. 18. (Cs), 10.58
Notepad++ -szal szoktam szerkeszteni, szerintem menti. Amikor véletlenül bom nélkül mentettem el, annyi különbséget tapasztaltam, hogy a fejlécek, szövegek, táblák előtt és után az automatikus távolságtartás megszűnt és az egész tartalom feljebb csúszott.

Ezt persze css-sel utólag orvosolhatnám, de rengeteg munka lenne vele, úgyhogy nem mostanában fogok nekiesni. :)
15

Nincs "automatikus távolságtartás"

Pepita · 2017. Május. 22. (H), 09.08
Notepad++ - ban is te állítod be a kódolást, utf8 BOM-mal vagy anélkül.
Böngészők (többsége) ma már kezeli (úgy ahogy) BOM-mal is, de szabvány szerint el van fogadva a default byte order, ezért (és az inf3rno által írt header probléma miatt is) nem használunk weben Byte Order Marker-t.

Az, hogy ezt egyszer elrontottad, és eredményezett megjelenésben eltérést, korántsem jelenti azt, hogy ezt jó ötlet úgy hagyni. Addig javítsd, amíg nem üt vissza nagyobbat.

"automatikus távolságtartás": gyanítom, hogy a BOM miatt (ha valóban ez okozza) egyes böngészők másképp értelmezik a html-ben leírt DOM-ot. Erre nem szabad építened, mert bármikor változhat / "elromolhat", a jelenlegi helyzet / megjelenés valójában egy hiba eredménye.
Minden html element-hez hozzá rendel a böngésző egy default megjelenést, w3c szerint, valamint (amíg szabványon belül elfér) saját "böngészőgyártói design". Ezt pl chrome-ban úgy látod, mint "user agent stylesheet". Ezt tudod módosítani a te css-eddel.
13

Kiegészítés

Anonymus04 · 2017. Május. 20. (Szo), 20.42
Kiegészítésként lehetne olyan opciót berakni, hogy ha bárhol a body-n kattint a user akkor eltűnik az éppen aktív show div? Valaki tudna ebben segíteni?
14

Új téma

Pepita · 2017. Május. 22. (H), 08.56
Szerintem erről vegyél fel egy új témát, szokásos módon, hogy meddig jutottál el vele, színezett kóddal.
Nem baj, ha inf3rno megoldását használod, de lássuk egy egészként a te problémádat, így több commentből nem igazán lehet kiszedegetni.