home | sitemap

Nieuwsitems: <!-- TMPL_VAR NAME="sidebar" -->

Als de nieuwsitemsmodule beschikbaar is, dan bevat de variabele sidebar de eerste x aantal nieuwsitems (meest recente eerst.) Het aantal te tonen nieuwsitems kan worden ingesteld bij de instellingen van de nieuwsitemsmodule.

De html structuur van 1 nieuwsitem in de sidebar is zonder 'Lees meer...'-linkje:

<div class="newsitem">
  <h2 class="newstitle">Binnenkort verwacht<br /> <span class="date">20 maart 2007</span></h2>
  <p>Over enkele weken zal de nieuwste versie van ons gebruiksvriendelijke cms gelanceerd
    worden. O.a. geschikt voor Mozilla!
  </p>
</div>

Met 'Lees meer...'-linkje:

<div class="newsitem">
  <h2 class="newstitle">Recent werk<br /> <span class="date">16 november 2006</span></h2>
  <p>De afgelopen weken hebben we vele nieuwe websites gerealiseerd in samenwerking met
    partners.<br />
    <a class="more" href="/website/newsitems/ni001065" title="Recent werk"><img
    src="/css/website/gfx/a_pijltje.gif" alt="" width="14" height="13" />Lees meer...</a>
  </p>
</div>

De sidebar variabele kan standaard omgeven worden door een DIV met de ID sidebar of news zodat het cms de 'Lees meer...'-linkjes meteen 'herkend'. Het kan ook los worden gebruikt in elk ander element, mits dat element is voorzien van de classname xcms_onclick.

Waar komen titel, datum en tekst vandaan...

Alle gegevens die worden getoond per nieuwsitem worden ingesteld bij de pagina-instellingen van dat nieuwsitem.

De afbeelding in de 'Lees meer...'-link wordt automatisch door het cms ingevoegd als bij de afbeeldingen in de map common een afbeelding met de naam a_pijltje.gif staat. De afbeelding is standaard aanwezig en kan gerust worden vervangen met een eigen afbeelding.

Structuur van een nieuwsitem wijzigen

De structuur (html) van een nieuwsitem kan niet direct worden gewijzigd. Via css en/of javascript is het echter mogelijk elke gewenste weergave te realiseren. Onderstaande javascript en css zorgen er voor dat alleen de titel wordt getoond en dat de titel zelf als link fungeert. De titel zal tevens vooraf gegaan worden door een '»'.

function initNews() {
  if (document.getElementById("news")) {
    // haal alle titel (H2) en 'Lees meer...'-linkjes (A) op
    var h2 = document.getElementById("news").getElementsByTagName("H2");
    var a = document.getElementById("news").getElementsByTagName("A");
    for (var i = 0; i < h2.length; i++) {
      // zet voor elke titel een '»' teken
      h2[i].innerHTML = "<strong>» </strong>" + h2[i].innerHTML; 
      // zorg er voor dat de titel van kleur veranderd on hover
      h2[i].onmouseover = function() { this.className = "newsHover"; };
      h2[i].onmouseout = function() { this.className = ""; };
      // geef de titel ook een href-attribuut met als waarde de href van de 'Lees meer...'-link
      h2[i].setAttribute("href", a[i].href);
      // als op de titel wordt geklikt, spring dan naar de href
      h2[i].onclick = function() { 
        if (/cgi\/page.cgi/.test(location.href)) {
          parent.xcmsGoto(xcmsGetPath(this.getAttribute("href")));
        } else {
          location.href = this.getAttribute("href");
        }
        return false; 
      };
    }
    // maak de div #news pas zichtbaar als alle titels zijn bewerkt
    document.getElementById("news").style.visibility = "visible";
  }
}
AddToInitArray(initNews);

Bijbehorende css:

#news .date, #news p {
  display: none; /* datum en inleiding van nieuwsitem niet tonen */
}

De structuur 'aanpassen' zonder javascript en alleen css kan ook. Als bijvoorbeeld de datum boven de titel getoond moet worden in plaats van er onder, gebruik dan onderstaande css:

#news h2 {
  position: relative; /* zorgt er voor dat we de datum die in de H2 staat kunnen positioneren */
  padding-top: 10px;  /* maak wat ruimte boven de titel vrij voor de datum */
}
#news .date {
  position: absolute; /* zodat we de datum vrij kunnen positioneren binnen de h2 */
  left: 0;            /* zet de datum linksboven de titel */
  top: 0;
  font-weight: normal; 
  font-size: 80%;
}