Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

Een dynamisch schuifregister in code

28 jan 2009•

In een vorige blogpost kon je lezen over het hoe en waarom van een schuifregister. In dit artikel vatten we de koe bij de horens en gebruiken we CSS en jQuery om een dynamisch schuifregister te maken. Voor wie op hete kolen zit: dit is het resultaat en hier vind je een iets stijlvollere variant.

In den beginne was er HTML

We starten met een eenvoudige htmlpagina: een artikel met daaronder lezersreacties. Als je de bron van die webpagina bekijkt, dan zie je dat ik de plaatsen waarnaar het register moet verwijzen heb aangeduid met een id en een class. In dit geval gaat het om twee h1-tags, maar je zou evengoed een combinatie van andere htmltags kunnen gebruiken:

<h1 id="artikel" class="registerknop">Zwart gat</h1>
<h1 id="reacties" class="registerknop">Reacties</h1> 

jQuery maakt het wat pittiger

jQuery maakt voor elk element met de class ‘registerknop’ een aanduiding in het schuifregister. Hoe dat in zijn werk gaat kan je hieronder meevolgen. Tussen de code vind je heel wat uitleg, maar ook straks kom ik er nog even op terug.

$(document).ready(function(){
  //bereken de paginahoogte
  var pageHeight = $('body').height();
  //bereken de hoogte van het browservenster
  var windowHeight = $(window).height();
  //lengte schuifbalk tov de paginahoogte
  //de pijltjes van de scrollbar nemen ongeveer 41 pixels in beslag
  var scrollBreuk = (windowHeight-41)/pageHeight;
  //voor elk element dat de class registerknop meekreeg
  $('.registerknop').each(function(i) {
    //als het het eerste element betreft
    if(i == 0) {
      //maak een htmllijst aan
      $('body').prepend('<ul id="schuifregister"></ul>');
    }
    //wat is de id van dit element
    var id = $(this).attr('id');
    //de positie van dit element vanaf de top van de pagina
    var yPos = $(this).offset().top;
    //waar de schuifbalk moet zijn om het element te zien
    //Math.round zorgt voor een afgerond getal zonder decimalen
    //de +3 zorgt voor een net iets hogere scrollbarpositie op Mac (is mooier)
    var scrollPos = Math.round(yPos * scrollBreuk) + 3;
    //voeg een list item aan de lijst toe voor het huidige element
    //accesskey is de eerste letter van de id
    $('#schuifregister').append('<li><a accesskey="' + id[0] + '" href="#' + id + '">' + id + '</a></li>');
    //plaats het nieuwste list item op de juiste schuifbalkpositie
    $('#schuifregister li:last-child').css('top', scrollPos + 'px');
  });
}); 

Zoals je kan zien zoeken we eerst de hoogte van de schuifbalk ten opzichte van de browservensterhoogte. We trekken 41 pixels af van de hoogte van het browservenster omdat dat de ruimte is die de pijltjes van de schuifbalk zelf innemen op een Mac:

de schuifbalk is niet even hoog als de vensterhoogte

Die ingenomen hoogte varieert trouwens een beetje op Windows én de plaatsing is anders. Om goed te zijn zou je die waarde (41) dus moeten laten afhangen van het besturingssysteem van de gebruiker, maar zover heb ik het in dit voorbeeld niet gedreven. (Het kan dus zijn dat dit schuifregister niet helemaal accuraat werkt op Windows computers!)

Soit, terug naar het stukje code van hierboven: nadat we enkele vaste waarden in variabelen hebben opgeslagen, gaat het script op zoek naar elk html element met registerknop als class. Als zo’n element gevonden wordt dan wordt een htmllijst aangemaakt (ul) waarin per registerknop een list item (li) verschijnt. De htmllijst is makkelijk vorm te geven met CSS en kan ontelbaar veel list items bevatten. Zoals je kan zien in het stukje code kan je het schuifregister ook via accesskeys bedienen. (De code hiervoor is weliswaar niet waterdicht.)

De plaatsing van elk list item wordt in het voorlaatste regeltje code afgehandeld.

Plaatsing en vormgeving met CSS

Hoewel we jQuery gebruiken om de plaatsing van elk list item via CSS in te stellen, is de belangrijkste opmaak toch wel apart in een stylesheet terug te vinden. De CSS die nodig is om het schuifregister vorm te geven heb ik telkens in de head sectie van de htmlpagina geplaatst:

ul#schuifregister { 
  list-style: none; 
}
ul#schuifregister li { 
  position: fixed; 
  font-size: .9em; 
  right: 0; 
  background: url(pijl.png) no-repeat center right; 
  padding-right: 15px; 
  text-transform: capitalize; 
} 

Het meest opmerkelijke stukje is hier het instellen van de fixed position. Hierdoor blijft elk list item mooi in positie staan als de schuifbalk schuift.

De andere CSS-code die ik in een externe stylesheet heb geplaatst is niet zo belangrijk voor het schuifregister op zich maar zorgt voor de opmaak van de rest van de pagina-elementen. We mogen onszelf nu trouwens wel al eens op de borst kloppen: dit is ons resultaat.

Meeschalen met het browservenster

Het komt aardig in de buurt maar mist nog iets: als de gebruiker het browservenster kleiner of groter maakt, dan klopt de aanduiding van het schuifregister niet meer. Maar met behulp van een vleugje jQuery kunnen we dit makkelijk oplossen: we gieten onze code in een functie toonRegister() die we uitvoeren wanneer het venster geschaald wordt.

Belangrijk is dat we hierbij telkens eerst het schuifregister ook verwijderen om na verloop van tijd geen honderden schuifregisters te zien. Ik schreef hier de welluidende functie verbergRegister() voor:

$(document).ready(function(){
  //voer de functie toonRegister() uit als de pagina geladen is
  toonRegister();
    
  //als het browservenster geschaald wordt
  $(window).resize(function(){
    verbergRegister();
    toonRegister();
  });

  //de code van hierboven in een functie gestopt
  function toonRegister() {
    var pageHeight = $('body').height();
    var windowHeight = $(window).height();
    var scrollBreuk = (windowHeight-41)/pageHeight;
    (...)
  }
    
  function verbergRegister() {
    //verwijder de htmllijst en hiermee het volledige schuifregister
    $('#schuifregister').remove();
  }
}); 

Dit is het resultaat. Schaal gerust je browservenster eens door de rechterbenedenhoek vast te nemen en te verslepen. Je zal zien dat de plaatsing van de aanduidingen in het schuifregister telkens mee aangepast wordt aan de nieuwe afmetingen van het venster. Nice!

Een vleugje finesse

Eigen aan blogs en dynamische websites is dat je als ontwerper niet kan voorzien hoe lang de teksten zullen zijn die je klant op zijn website plaatst. Nu lijkt het een beetje onnozel om een schuifregister te hebben op een pagina waar niet gescrold moet worden (deze bijvoorbeeld). Wat meer is: de aanduidingen zijn niet meer helemaal juist. Daarom heb ik nog een bijkomende controle toegevoegd in het stukje javascriptcode die er voor zorgt dat het schuifregister niet getoond wordt wanneer alle belangrijke elementen duidelijk zichtbaar zijn op de pagina:

function toonRegister() {
  (...)
  //als alles mooi zichtbaar is dan moet er geen schuifregister te zien zijn
  if($('.registerknop:last').offset().top > windowHeight) {
    $('.registerknop').each(function(i) {
    (...)
  });
} 

Het resultaat

Dit is het resultaat van het experiment. Bekijk ook deze iets stijlvollere variant. In de broncode vind je nog eens alle code op een rijtje.

Het is een makkelijk aanpasbaar en stijlbaar schuifregister geworden. De gebruiker kan bovendien heel snel doorheen de pagina navigeren met behulp van accesskeys.

Ik ben benieuwd naar jullie bevindingen. Vind je zo’n schuifregister duidelijk en gebruiksvriendelijk? Of denk je dat het net verwarrend werkt?

Categorieën: Ontwerp, Ontwikkeling, jQuery, Webomgeving,

 

Gelijkaardige blog posts

7 reacties op dit bericht

1
Wolf schreef op 28 jan 2009 om 12u17:

Fantastisch idee en propere implementatie. Wins my seal of approval smile!


2
kevin schreef op 29 jan 2009 om 15u41:

Jah, zo kan het ook.
Ik heb niet heel veel (lees: geen) ervaring met JQuery, maar zodra ik ergens tijd vind, ga ik er eens achteraan.


3
kevin schreef op 29 jan 2009 om 15u46:

nog even,
Ik vind het wel cool, dat je zo’n hele tutorial uitschrijft, alleen maar omdat ik toevallig een stomme reactie plaatste..
btw.. mijn website is nog zwaar in testfase(qua optimaltizatie met google), maar uiteindelijk wil ik graag cms &webdesign;gaan doen.


4
Thomas schreef op 29 jan 2009 om 15u53:

@Wolf: Een heuse ‘seal of approval’, daar doe ik het voor natuurlijk! wink
@Kevin: Veel succes met je website!


5
kevin schreef op 30 jan 2009 om 15u09:

Dankje,
Ik heb btw, ook nog een leuk ideetje.(just popped up)
Zou ik onderaan de pagina de percentages kunnen laten zien?
Zoals in de linux shell als je een txt bestand opent.


6
Geert schreef op 10 feb 2009 om 20u31:

Een geniaal idee, als je ‘t mij vraagt!


7
Thomas schreef op 10 feb 2009 om 23u04:

Bedankt Geert. Ik ben benieuwd naar toepassingen op het web dus als je het ooit zou toepassen in één van je klantwebsites, laat dan zeker iets weten!


Plaats een reactie

Reageren is niet mogelijk op dit bericht.
 


Over logo TheHotSeat 

foto Thomas Byttebier pijltje TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.

RSS Feed TheHotSeatLaatste blog posts

Laatste reacties

Categorieën

Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving