[javascript] delen van tabel tonen en verbergen - Softwareontwikkeling

dinsdag 10 juni 2003 22:10

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb een tabel waarin op elke rij een cel is met de tijd, cel met een nieuwsitem en een cel met de nieuwscategorie. Nu wil ik dat als je op een categorie klikt alle nieuwsitems van andere categorieen verdwijnen (zonder pagina te reloaden, dus met javascript).

Aangezien ik weinig met javascript doe, is dit nogal lastig voor mij. Wat ik wil hebben lijkt veel op de zgn. tree-menu's, maar als ik deze wil ombouwen loop ik toch tegen problemen aan. Treemenu-items zijn nl. gelinkt onder een bepaald item, terwijl mijn nieuwsitems allemaal op 1 nivo zitten en items uit andere categorie (zelfde nivo) moet worden verborgen.

Komt iemand mij hiermee helpen, of waar kan ik meer vinden? Hoop dat mijn probleem een beetje duidelijk is?

dinsdag 10 juni 2003 22:11

Acties:

0 Henk 'm!

curry684

left part of the evil twins

Javascript zit in de andere kant van de schutting --> W&G.

Professionele website nodig?

dinsdag 10 juni 2003 22:11

Acties:

0 Henk 'm!

Mafioso

je kan het volgende eens bekijken:

code:

function expandSub(foo) {
  bar = foo + "_sub";
  if (document.getElementById(bar).style.display == "none") {
    document.getElementById(bar).style.display = "";
  } else {
    document.getElementById(bar).style.display = "none";
  }
}

[ Voor 156% gewijzigd door Mafioso op 10-06-2003 22:16 ]

dinsdag 10 juni 2003 22:20

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

OK, Mafioso, bedankt in ieder geval, ik ga het proberen!

Kan je je voorbeeld wat uitbreiden, hoe moet het ingepast worden?

[ Voor 39% gewijzigd door Verwijderd op 10-06-2003 22:23 ]

dinsdag 10 juni 2003 22:23

Acties:

0 Henk 'm!

Mafioso

toch maar even wat meer code getikt, anders is het misschien beetje onduidelijk:

HTML:

<html>
<head>
<script language="Javascript">
function expandSub(foo) {
  bar = foo;
  if (document.getElementById(bar).style.display == "none") {
    document.getElementById(bar).style.display = "";
  } else {
    document.getElementById(bar).style.display = "none";
  }
}
</script>
<title>blah</title>
</head>

<body>

<a href="javascript:expandSub('textdiv');">hoi/doei</a>
<div id="textdiv" style="background-color: red;">
Blaaaaaaat :P
</div>

</body>
</html>

_{let wel, ik heb dat + "_sub" even weg gehaalt, omdat dat hier beetje suf is.}

Dit is natuurlijk wel maar voor 1 object, maar het gaat een beetje om het idee, dat je werkt met de CSS atribute 'display'. Wat je zou kunnen doen als jet om meerdere obejecten gaat is bv een array maken met de objecten waar het om gaat, en dan een stukje code welke alles wat niet aangegeven is met display:none van het scherm tovert.

[ Voor 51% gewijzigd door Mafioso op 10-06-2003 22:28 . Reden: er ontbrak een stukje |:( ]

dinsdag 10 juni 2003 22:28

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

OK, dit zoek ik inderdaad, maar als ik verschillende 'textdivs' onder elkaar zet dan wordt alleen de eerste verborgen, terwijl alle textdivs moeten verdwijnen.

dinsdag 10 juni 2003 22:41

Acties:

0 Henk 'm!

Verwijderd

he das toevallig, was net aan het rondkijken voor een probleempje dat ik heb ...

ik heb een menu gemaakt met soort van dropdown, maar net ietsje anders (doet er verder niet toe) als je erop klikt vervangt hij de ene div door de andere (ééntje met een plusje, en één met een minnetje plus het submenu), het script checked automatisch welke div geopend is besluit vanuit daar of ik het het menu open of dicht klap

wat ik nu wil is dat als ik op een een div klik, en het submenu opent, alle andere submenu's dicht gaan, dat moet uiteraard met een for-loop

de div's die dicht moeten hebben het volgende ... id="o1", id="o2", id="o3" etc ...
maar omdat ik het menu eigenlijk dynamisch wil maken, kan het dat er soms een id weg is, hoe kan ik nu bepalen welke div's met die id-range er bestaan ? de acties daarna weet ik wel

ik weet hoe ik kan tellen hoeveel div's er in totaal zijn: document.all.tags('DIV').length

[ Voor 19% gewijzigd door Verwijderd op 10-06-2003 22:46 . Reden: vraag iets verkeerd gesteld ]

dinsdag 10 juni 2003 22:45

Acties:

0 Henk 'm!

Mafioso

heb net dit ff in elkaar gestampt:

HTML:

<html>
<head>
<script language="Javascript">

var divs = new Array("div1", "div2", "div3", "div4");

function hideRest(foo) {
  for (i=0; i<divs.length; i++) {
   if (divs[i] != foo) {
    document.getElementById(divs[i]).style.display = "none";
   }
  }
}
</script>
<title>blah</title>
</head>

<body>

<div id="div1" onClick="hideRest('div1')">Stukje Text</div>
<div id="div2" onClick="hideRest('div2')">Text Stukje</div>
<div id="div3" onClick="hideRest('div3')">Stukje Text JHHSJHdsdf</div>
<div id="div4" onClick="hideRest('div4')">Stukje Text ^&@*43</div>

</body>
</html>

Dit lijkt al aardig op wat je wilt denk ik. Na nog eens goed je post te lezen toch niet

, maar dit moet je denk ik wel op weg helpen.

[ Voor 30% gewijzigd door Mafioso op 10-06-2003 22:49 ]

dinsdag 10 juni 2003 22:49

Acties:

0 Henk 'm!

Verwijderd

zoals je ziet heb ik mn vraag iets ge-edit

in elk geval bedankt alvast voor je reply, ik ga nu verder eraan sleutelen, als iemand nog wat heeft graag, als ik klaar ben zal ik t posten hier

dinsdag 10 juni 2003 22:54

Acties:

0 Henk 'm!

Mafioso

Verwijderd schreef op 10 juni 2003 @ 22:41 iets

Als je de pagina met PHP/ASP of zoiets bouwt kun je je natuurlijk serverside de javascript array maken als je de id-namen van de divs bv baseerd op een id uit een DB tabel.

Een andere, (geheel JS) oplossing zou kunnen zijn:

code:

function hideRest(foo) {
  for (i=0; i<document.all.tags('DIV').length; i++) {
   if (document.all.tags('DIV')[i].id != foo) {
    document.all.tags('DIV')[i].style.display = "none";
   } else {
    document.all.tags('DIV')[i].style.display = "";
   }
  }
}

_{Niet getest, maar iets zoals dit zou moeten werken}Nadeel hier van is dat je geen andere divs meer kunt gebruiken, of je moet aan de hand van de id naam (bv een als er een bepaald voorvoegsel is) kijken of de div wel/niet meegenomen mag worden.

[ Voor 67% gewijzigd door Mafioso op 10-06-2003 23:05 . Reden: JS er bij ]

dinsdag 10 juni 2003 23:36

Acties:

0 Henk 'm!

Verwijderd

ja dat wat je net zo snel ff zegt dat zoek ik

ze bevatten allemaal een voorvoegsel side (variabele: left of right) en een achtervoegsel o (géén variabele, van open)

dus een id is alsvolgt: left1o
linker menu, eerste link, open

in het volgende stukje code is key het nummer van de div die ik wil openklappen (correspondeerd met het cijfer in de Id), en side is dus left of right, beiden staan 100% zeker gedefinieerd

code:

for (i = 1; i < document.all.tags('DIV').length; i++) {

if (document.all.tags('DIV')[i].id = side + i + 'o') {
document.getElementById(side + i + 'o').style.display = 'none';
document.getElementById(side + i + 'c').style.display = 'block';
}

}

probleem is nu volgt: ik heb voor elk cijfer twee div's; left1c en left1o

dus ...

i=1 >> left1c
i=2 >> left1o
i=3 >> left2c
i=4 >> left2o
i=5 >> left3c
i=6 >> left3o

[ Voor 167% gewijzigd door Verwijderd op 11-06-2003 00:16 . Reden: weet het echte probleem, alleen oplossing niet ]

woensdag 11 juni 2003 00:42

Acties:

0 Henk 'm!

Mafioso

Ik snap alleen je probleem niet?

woensdag 11 juni 2003 01:23

Acties:

0 Henk 'm!

Verwijderd

code:

for (i = 1; i < document.all.tags('DIV').length; i++) {

if (document.getElementById(side + i + 'c')) {
document.getElementById(side + i + 'c').style.display = 'block';
document.getElementById(side + i + 'o').style.display = 'none';
}

}

zo werkt ie wel

kijkt nu dus of die id wel bestaat, en als dat zo is dan zorgt ie dat de goede weer verschijnt, alleen deze werkt weer niet in mozilla

zover als ik weet ligt dat aan document.all.tags('DIV').length ... any ideas ?

[ Voor 18% gewijzigd door Verwijderd op 11-06-2003 01:26 ]

woensdag 11 juni 2003 02:20

Acties:

0 Henk 'm!

Mafioso

Je zou dit kunnen gebruiken : http://webfx.nu/dhtml/ieemu/

JavaScript:

function hideRest(foo) {
  var divs = document.getElementsByTagName("DIV");
  for (i=0; i<document.getElementsByTagName("DIV").length; i++) {
   if (document.getElementsByTagName("DIV")[i].id != foo) {
    document.getElementsByTagName("DIV")[i].style.display = "none";
   } else {
    document.getElementsByTagName("DIV")[i].style.display = "";
   }
  }
}

document.all.tags('DIV') dus vervangen door document.getElementsByTagName('DIV');

[ Voor 91% gewijzigd door Mafioso op 11-06-2003 02:31 ]

woensdag 11 juni 2003 12:40

Acties:

0 Henk 'm!

Verwijderd

HTML:

function sh(side,key) {

for (i = 1; i < document.getElementsByTagName('DIV').length; i++) {

if (document.getElementById(side + i + 'c')) {
document.getElementById(side + i + 'c').style.display = 'block';
document.getElementById(side + i + 'o').style.display = 'none';
}

}

document.getElementById(side + key + 'o').style.display = 'block';
document.getElementById(side + key + 'c').style.display = 'none';

}

zo issie uiteindelijk geworden

en ik roep hem zo aan

HTML:

1	onclick="sh('left','1')"

maandag 16 februari 2004 15:28

Acties:

0 Henk 'm!

whitehouse

minstens een half ajar te laat, maar toch even voor de volledigheid een reply op deze topic...

de 'block' werkt niet lekekr in netscape/mozilla. als je block gebruikt, zal je tr toenemen in hoogte.....dit kun je omzeilen door het 'block' te vervangen door ' ' ...

| www.everythingisspiritual.com | www.mosaic.org |

maandag 16 februari 2004 16:27

Acties:

0 Henk 'm!

Verwijderd

whitehouse schreef op 16 februari 2004 @ 15:28:
minstens een half ajar te laat, maar toch even voor de volledigheid een reply op deze topic...

de 'block' werkt niet lekekr in netscape/mozilla. als je block gebruikt, zal je tr toenemen in hoogte.....dit kun je omzeilen door het 'block' te vervangen door ' ' ...

Dat komt omdat een TR normaal gesproken niet display:block; heeft maar display:table-row;.