• Javascript en gebruikersvriendelijkheid

    6 June 2010 23:31 door
    Tegenwoordig zul je maar weinig websites tegen komen die geen gebruik meer maken van javascript. Vele dingen die vroeger in flash werden gedaan, zijn nu immers ook mogelijk in javascript. Maar wat indien men javascript uitschakelt? Deze keuze is vooral aan de webdeveloper.

    De meeste webdevelopers streven ernaar dat hun webapplicatie werkt ondanks dat javascript werd uitgeschakeld. Ik zelf ben van mening dat het ook zo hoort. Maar natuurlijk is het wel zo dat mensen die javascript ingeschakeld hebben een gebruiksvriendelijker website krijgen voorgeschoteld.

    Nu hoe kunnen we er toch voor zorgen dat mensen die javascript uitschakelen toch alle inhoud van de website te zien krijgen? Want het komt vaker voor dat er bepaalde elementen d.m.v. de css op display: none; gezet worden. Eveneens gebeurt het wel eens bij een lange pagina dat je elementen ineens ziet weg flitsen. Omdat de javascript pas zal worden uitgevoerd indien de pagina volledig klaar is met renderen.

    Hieronder ga ik jullie vertellen hoe we dit gaan oplossen. We maken gebruik van JQuery een javascript library. Ik ga hier gebruik maken van inline javascript & css. Zodat we een duidelijk overzicht krijgen van de gehele code.

    HTML-code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    
    <head>
    
        <title>Javascript en gebruikersvriendelijkheid</title>
    
        <meta name="description" content="Javascript en gebruikersvriendelijkheidF" />
        <meta name="keywords" content="Javascript, jquery, css, html" />
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Language" content="nl" />
    
        <meta name="robots" content="index, follow" />
        <meta http-equiv="imagetoolbar" content="no" />
    
        <!-- Wat CSS -->
        <style type="text/css" >
        
            /* Standaard geval geen javascript verbergen link! */
            #toggle { display: none; }
        
            /* javascript staat aan dus we moeten deze link weergeven */
            .js #toggle { display: block; }
            
            /* Maar de inhoud zullen we moeten verbergen */
            .js #content { display: none; }
    
        </style>
    
        <!-- Inladen JQuery! -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
        <!-- Onze javascript -->
        <script type="text/javascript">
        // We voegen dit element toe zodat we weten dat javascript is ingeschakeld!
        // We kunnen dit meteen doen zonder te wachten tot de pagina volledig
        // werd geladen!
        $('html').addClass('js');
        
        // Nu wachten we tot de pagina volledig klaar is!
        $(document).ready(function()
        {
            // Hierin kunnen we dan allerlei javascript uitvoeren
            // Net zoals je anders zou doen
            
            // Als voorbeeld laten we de div met de id content verdwijnen
            // wanneer we op de link klikken en terug komen wanneer we nogmaals
            // klikken
            $("#toggle").click(function ()
            {
                $("#content").toggle("slow");
            });
        });
        </script>
    
    </head>
    
    <body>
    
        <!-- Link die de inhoud zal kunnen weeergeven en terug verbergen! -->
        <a href="#" id="toggle">Weergeven / Verbergen</a>
    
        <!-- Wat inhoud, die we weergeven en verbergen adhv de link hierboven -->
        <div id="content">
            <p>Hier typen we even wat tekst deze zouden we enkel willen weergeven wanneer er op weergeven geklikt werd. Maar natuurlijk leverd dit problemen op indien we deze zouden verbergen. Dit omdat een bezoeker die dan geen javascript aan heeft staan dit nooit zou kunnen zien!</p>
            
            <p>Dat is natuurlijk niet de bedoeling he.</p>
        </div>
    
    </body>
    
    </html>
    Demo

    De commentaar in de code zou voor zich moeten spreken. Deze methode maakt het zeer gemakkelijk zoveel mogelijk toch al via CSS te doen en enkel het hoog nodige te laten afhandelen door de javascript.

    © 2010 Kurt0015 voor minatica.be