Archief - meerdere DIV's verbergen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
l

lenvin

Legacy Member
Hey iedereen,
Ik ben met een site bezig waarbij ik nieuwsberichten zou willen tonen, maar er zouden maar maximum 8 (de 8 nieuwste, in dit geval bericht 4 --> 11) berichten getoond mogen worden ook al zijn er meerdere berichten. Weet iemand hoe ik het kan oplossen?

Dit is mijn HTML-code die ik heb
HTML: 
<div id="Nieuwsberichten">
  <div class="Bericht" id="Nieuwsbericht11"></div>
  <div class="Bericht" id="Nieuwsbericht10"></div>
  <div class="Bericht" id="Nieuwsbericht9"></div>
  <div class="Bericht" id="Nieuwsbericht8"></div>
  <div class="Bericht" id="Nieuwsbericht7"></div>
  <div class="Bericht" id="Nieuwsbericht6"></div>
  <div class="Bericht" id="Nieuwsbericht5"></div>
  <div class="Bericht" id="Nieuwsbericht4"></div>
  <div class="Bericht" id="Nieuwsbericht3"></div>
  <div class="Bericht" id="Nieuwsbericht2"></div>
  <div class="Bericht" id="Nieuwsbericht1"></div>
</div>

En dit is de het JavaScript dat ik in gedachte had maar het werkt blijkbaar niet :s :
Code: 
for (i = 9; i >= 9; i++) {
  document.getElementById("Nieuwsbericht" + i).style.display="none";
}
Ook zou dit script, als het dan zou werken, bericht 9 --> ... verwijderen terwijl de nieuwste 8 berichten getoond zouden moeten blijven en al de rest verborgen.


Alvast bedankt op voorhand voor de hulp!
A

AzZ_KiKr

Legacy Member
ik veronderstel dat die javascript bovenaan de pagina staan (onder der head tags)...

ge roept daar uw document.get... aan maar uw document is nog nie geladen....

wat ge kunt doen is alles in functie knallen
PHP: 
funtion hidenews(){
for (i = 9; i >= 9; i++) {
  document.getElementById("Nieuwsbericht" + i).style.display="none";
}
}

da in uwen head tag plaatsen on javascript gedeelte... en dan in uwen html bij uwen body...
PHP: 
<body onload="hidenews()">
//rest van code
</body>

maar ik weet niet hoe ge da nieuwe ophaalt (vanuit database ofso) maar da ge daar enkel laatste 8 ophaalt??
als da is voor host die geen php/msql ondersteunt, never mind dan :p

//EDIT 2: en ik weet niet hoeveel nieuws ge daar gaat inzetten, maar als het er veel zijn, zijt ge beter met alles op default hidden te zetten en enkel 8 nieuwste te displayen (alle vind ik toch)
l

lenvin

Legacy Member
Ja het werkt, maar nu verwijderd het bericht 9 --> ... en het zou dus de laatste 8 moeten tonen.
Ik ken (nog) nix van PHP/MySQL dus zou het daarom graag in JavaScript, waar ik toch al redelijk wat van ken, doen ...
Maar ik kan er dus niet aan uit.

Toch al bedankt!
Hopelijk is er iemand die mij een JavaScript kan bezorgen zodat enkel de nieuwste 8 getoond worden en de rest verborgen zijn ...
Z

Zero Grav

Legacy Member
JQuery heeft toch echt een gemakkelijkere syntax op dat vlak.

Code: 
<script type="text/javascript">
$(document).ready(function() {
     $(".bericht:gt(8)").remove();
}
</script>
is dan de enige code die ge nodig hebt als ik uw vraag juist begrijp. Naast het feit dat ge JQuery moet linken in uw file natuurlijk. Dat kan via:

Code: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Waarom trouwens niet gewoon in uw PHP via uw MySQL query een limit opgeven van het aantal nieuwsberichten dat ge ophaalt? (Ahja, 'k zie nu dat ge NIETS zei, verkeerd gelezen)
l

lenvin

Legacy Member
Moet ge dan iets in den OnLoad zette ofni?

Alvast hartelijk bedankt!
m

massoo

Legacy Member
In je onload moet je niets meer zetten.

Met dit:
$(document).ready(function() {

}

Zeg je dat je code gaat uitvoeren vanaf u document klaar is.
A

AzZ_KiKr

Legacy Member
mja nogal overkill om gans daarvoor diene Jquery te gebruiken...

hier quick en dirty (maar wel werkend :p)

PHP: 
function hidenews(){
var count = 0;
var maxnewscount = 8; //aan te passen met gewenst aantal
var o = document.getElementById("Nieuwsberichten").getElementsByTagName("div");
for(var i=0;i<o.length;i++){
        if(o[i].className == "Bericht"){
			count ++;
			if(count > maxnewscount){
				document.getElementById(o[i].id).style.display="none";
			}
        }
        
}
}
l

lenvin

Legacy Member
Ja er staan nog andere DIVs enzo tussen die .bericht he maar khebbet gewoon wat makkelijker gemaakt ...
A

AzZ_KiKr

Legacy Member
maakt niet uit heb code aangepast..in vorige post...

hij telt enkel de "Bericht" divs.. en als hij er daar meer dan 8 tegenkomt, zet hij ze hidden...
l

lenvin

Legacy Member
En dit allemaal in een scriptje zetten en dan als functie in de onload zetten?
A

AzZ_KiKr

Legacy Member
yep, zelfde ongeveer als erboven code zou er ongeveer zou moeten uitzien.

laat die Jquery gewoon nog maar even vallen, en probeer eerst basis javascript gewoon...daaracht kan die jquery handig zijn.

Btw, hij gaat af op de volgorde waarin uw nieuwsberichten staan... niet op de elementennummering..

PHP: 
<html>
<head>
<script type="text/javascript">
function hidenews(){
var count = 0;
var maxnewscount = 8;
var o = document.getElementById("Nieuwsberichten").getElementsByTagName("div");
for(var i=0;i<o.length;i++){
        if(o[i].className == "Bericht"){
			count ++;
			if(count > maxnewscount){
				document.getElementById(o[i].id).style.display="none";
			}
        }
        
}
}

</script>
</head>
<body onload='hidenews()'>
<div id="Nieuwsberichten" >
  <div class="Bericht" id="Nieuwsbericht11">bleh11</div>
  <div class="Bericht" id="Nieuwsbericht10">bleh10</div>
  <div class="Bericht" id="Nieuwsbericht9">bleh9</div>
  <div class="Bericht" id="Nieuwsbericht8">bleh8</div>
  <div class="Bericht" id="Nieuwsbericht7">bleh7</div>
  <div class="Bericht" id="Nieuwsbericht6">bleh6</div>
  <div class="Bericht" id="Nieuwsbericht5">bleh5</div>
  <div class="Bericht" id="Nieuwsbericht4">bleh4</div>
  <div class="Bericht" id="Nieuwsbericht3">bleh3</div>
  <div class="Bericht" id="Nieuwsbericht2">bleh2</div>
  <div class="Bericht" id="Nieuwsbericht1">bleh1</div>
</div>    
</body>
</html>
l

lenvin

Legacy Member
Ah ok :D
Nu zet ik de berichten nog zelf in mijn HTML-page maar het is de bedoeling dat die later geladen worden uit een database ...
A

AzZ_KiKr

Legacy Member
mja dan hoeft al da java script niet meer...

dan haalt ge gewoon 8 laatste berichten op uit uw database en toont ge ze allemaal...

dan laat ge eigenlijk uw database het werk doen voor de 8 recenste op te halen...

Select * from berichten order by datum DESC limit 8

dwz, selecteer alles uit berichten, sorteert op dalende datum (dus recenste eerst), en beperk dit tot 8. (dan gaat ge nooit meer dan 8 resultaten krijgen en moet ge dus ook niks onzichtbaar zetten
l

lenvin

Legacy Member
Maar das allemaal voor later ze :D
Kmoet het eerst zo onder de knie probere krijge natuurlijk :D
En dan kannek pas beginnen met alles in een database te zetten ...
Toch al hartelijk bedankt voor de goede en snelle hulp van jullie allemaal!
w

woony

Legacy Member
waarom niet gewoon uw query aanpassen? Hier heb je toch geen js ofzo voor nodig. Haal enkel op wat je nodig hebt...
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan