Het Float Label-formulierpatroon implementeren

Met behulp van Matt Smiths ontwerp voor interactie met mobiele vormen als leidraad, zullen we een verbluffende vorminteractie voor het web creëren die zowel mooi als toegankelijk is met HTML, CSS en JavaScript.

Overzicht

Vormgeving en interactie op het web kan een gevoelig onderwerp zijn. Een groot aantal vormen van bereikbaarheid en best practices kunnen het ontwerpen van een aantrekkelijke vorminteractie erg moeilijk maken, in tegenstelling tot vormontwerp op native platforms.

Matt Smith heeft onlangs een boeiende formulierinteractie gemaakt die hij op Dribbble heeft gepost:

Bekijk de originele Dribbble-opname op floatlabel.com

Hoewel deze vorm is ontworpen voor een native iOS-applicatie, kan deze formulierinteractie opnieuw worden gemaakt voor het web met behulp van HTML, CSS en Javascript, terwijl ook de toegankelijkheid van formulieren toegankelijk wordt gehouden.

Het concept van het float-label heeft nogal wat aandacht getrokken, wat heeft geleid tot discussies en experimenten over het hele internet.

Echt coole demo door @zelph http://t.co/Szw1bE2tib de super awesome float-labelvorminteractie implementeren http://t.co/NhKfErgd2Q door @mds

- Brad Frost (@brad_frost) 23 oktober 2013

In plaats van dezelfde formuliervelden in het ontwerp van Matt te gebruiken, zullen we een eenvoudig contactformulier maken dat u op uw eigen website zou kunnen gebruiken. Dus laten we erin duiken!

Vorm anatomie

Laten we eerst de vorminteracties bekijken en vastleggen die Matt heeft gemaakt. Op deze manier kunnen we vooraf bepalen hoe ons formulier moet worden gemarkeerd. Het zal ons ook een goed begrip geven van hoe het formulier moet worden vormgegeven en interacties met JavaScript kunnen maken.

Formulierstructuur

Het formulier heeft de volgende elementen die we kunnen vertalen HTML:

elementen
elementen
</code> element</li> <li> <code>placeholder</code> attributen</li> </ul> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern.png"><br> <h3>Vormelement-interacties</h3> <p>Door de interacties te observeren die Matt heeft gecreëerd, kunnen we regels opstellen voor de interactie van de formulierelementen die we gaan maken. Deze regels zullen nuttig zijn bij het maken van onze markeringen, stijlregels en JavaScript-interacties.</p> <ul> <li> <strong>op de pagina laden</strong>: <ul> <li> <code><label></code> elementen</li> <ul> <li>Verborgen, benadrukt met een opvallende kleur.</li> </ul> <li> <code><input></code> & <code><textarea></code> elementen: <ul> <li>Geef de tijdelijke aanduidingstekst van het element weer.</li> </ul> </li> </ul> </li> <li> <strong>op focus</strong>: <ul> <li> <code><label></code> elementen</li> <ul> <li>Als het bijbehorende invoerveld van het label leeg is, verbergt u het label. Anders de nadruk minder op de kleur van het label.</li> </ul> <li> <code><input></code> & <code><textarea></code> elementen: <ul> <li>Als het veld leeg is, geeft u de tijdelijke aanduiding van het element weer. Anders wordt de door de gebruiker ingevoerde tekst weergegeven.</li> </ul> </li> </ul> </li> <li> <strong>op keyup</strong>: <ul> <li> <code><label></code> elementen</li> <ul> <li>Als het bijbehorende invoerveld van het label leeg is, verbergt u het label. Anders het label tonen.</li> </ul> <li> <code><input></code> & <code><textarea></code> elementen: <ul> <li>Als het veld leeg is, geeft u de tekst van de tijdelijke aanduiding weer. Anders wordt de door de gebruiker ingevoerde tekst weergegeven.</li> </ul> </li> </ul> </li> <li> <strong>bij vervaging</strong>: <ul> <li> <code><label></code> elementen</li> <ul> <li>Als het overeenkomstige invoerveld leeg is, verbergt u het label. Anders de nadruk minder op de kleur.</li> </ul> <li> <code><input></code> & <code><textarea></code> elementen: <ul> <li>Als het veld leeg is, geeft u de tekst van de tijdelijke aanduiding weer. Anders wordt de door de gebruiker ingevoerde tekst weergegeven.</li> </ul> </li> </ul> </li> </ul> <p>Nu hebben we de vorm bepaald <abbr title="HyperText Markup Language">HTML</abbr> elementen samen met de interactieregels kunnen we beginnen met het maken ervan.</p> <hr> <h2>basis- <abbr title="HyperText Markup Language">HTML</abbr> </h2> <p>Laten we beginnen met een paar basis-startercodes.</p> <pre> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Neem contact met mij op</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="styles.css">   </head> <body>   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="scripts.js"></script> </body> </html></pre> <hr> <h2>De formulieropmaak maken</h2> <p>Laten we nu de opmaak voor onze vorm maken:</p> <pre> <section> <h1>Neem contact met mij op</h1> <form action="#" method="get"> <ul> <li> <label for="name">Uw naam:</label> <input type="text" placeholder="Your Name" name="name" tabindex="1"/> </li> <li> <label for="email">Jouw email:</label> <input type="email" placeholder="Your Email" name="email" tabindex="2"/> </li> <li> <label for="message">Bericht:</label> <textarea placeholder="Message… " name="message" tabindex="3">

    Hier stellen we een formuliercontainer in met een koptekst van 'Contact' en de bijbehorende formulierelementen die zijn gestructureerd in lijstelementen. Merk op dat we ook het e-mailveld hebben toegewezen type = "email". Dit biedt contextuele virtuele toetsenborden voor apparaten die deze ondersteunen, evenals eenvoudige, browser-ondersteunde validatie voor die browsers die HTML5-invoertypen ondersteunen. Voor degenen die dat niet doen, wordt het een eenvoudig tekstveld.
 Wat we nu hebben, zijn de basis van een formulier dat overal werkt en goed is gestructureerd voor eenvoudige toegankelijkheid.
  
 Notitie: We behandelen formulieren voor server-side-formulieren niet in deze zelfstudie, dus u kunt de indieningsmethode van het formulier naar behoefte wijzigen.
 
 Basispaginastijlen maken
 We hebben nu een werkformulier in HTML. Nu gaan we onze eerste stap zetten in progressieve verbetering: toepassen CSS stijlen. Laten we stijlen maken om onze vorm visueel aantrekkelijker te maken en tegelijkertijd te onthouden om de vorm functioneel en toegankelijk te houden.
 Laten we een basisstijl voor de pagina en formuliercontainer maken. In de  van ons document hebben we een link gemaakt naar een bestand met de naam styles.css, dus we zullen dat bestand nu aanmaken en het opslaan in de root van ons project.
 We beginnen met het importeren van de stijlen van Eric Meyer's CSS opnieuw instellen op ons eigen bestand. Je kunt die stijlen hier pakken en ze naar je eigen stylesheet kopiëren.
 Laten we vervolgens een aantal algemene paginastijlen maken:
  / * Algemeen ==================== * / *, *: voor, *: na -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  body background: # eaedf1;  body, input, textarea font: 1em / 1.5 Arial, Helvetica, sans-serif;  .container max-width: 25em; marge: 2em auto; breedte: 95%;  .title font-size: 1.5em; opvulling: .5em 0; text-align: center; achtergrond: # 323a45; kleur wit; grensradius: 5px 5px 0 0; 
 U merkt dat we de door Paul Irish voorgestelde benadering van het doosmodel gebruiken bij het stylen van vormen: box-sizing: border-box;.
 Nu hebben we iets iets beters, maar het zal wat meer werk nodig hebben.
  
 
 Formulierenlijststijlen maken
 Laten we enkele stijlen toepassen op onze formulierelementen. Deze zullen onze vorm meer lijken op die van Matt.
 Eerst zullen we de lijstelementen die onze formulierelementen bevatten, vormgeven.
  / * Form ==================== * / .form ul background: white; margin-bottom: 1em;  .form li border: 1px solid #ccc; border-bottom: 0; margin-bottom: 0px; positie: relatief;  .form li: first-child border-top: 0;  .form li: last-child border-bottom: 1px solid #ccc; 
 Nu hebben we al onze vormelementen visueel ingeperkt. Je zou zoiets als dit moeten hebben:
  
 
 Formulierstijlstijlen maken
 Laten we doorgaan met het vormgeven van onze formulierelementen om het ontwerp van Matt te evenaren, terwijl we ook rekening houden met de toegankelijkheidsbeperkingen van internet.
 Stijl de invoervelden als grote elementen op blokniveau in de vorm:
  label, invoer, tekstveld display: block; rand: 0;  input, textarea width: 100%; hoogte: 100%; opvulling: 2.25em 1em 1em; overzicht: 0;  textarea height: 16em; formaat wijzigen: geen; 
 Je zou zoiets als dit moeten hebben:
  
 Dan style het formulier  elementen zitten ongeveer een derde van de weg vanaf de bovenkant van elk invoerblok.
  label font-size: .8125em; / * 13/16 * / positie: absoluut; top: 1.23em; links: 1.23em; kleur: # f1773b; dekking: 1; 
 Notitie: heb je de ondoorzichtigheid regel? We zullen dat eigendom gebruiken (samen met de top eigendom) om het te animeren  element later met behulp van JavaScript.
 Je zou iets moeten hebben dat veel op Matt's vormontwerp lijkt te lijken.
  
 Vervolgens moet u onze knop Formulier verzenden aanpassen.
  invoer [type = "submit"] background: # f1773b; margin-bottom: 1em; kleur wit; grensradius: 3px; opvulling: .75em; -webkit-uiterlijk: geen; / * standaardbrowser verwijderen 
 Merk op dat we de attribuutselector hebben gebruikt om alleen de verzendknop te targeten. We hebben enkele basisstijlen toegevoegd, samen met een eenvoudige interactie op de : hover en :actief states (oudere browsers die dit niet ondersteunen CSS transformaties zal gewoon geen mooie interactie hebben, maar de vorm werkt nog steeds). Je zou nu zoiets als dit moeten hebben:
  
 Ons formulier is gestileerd op een manier die lijkt op het ontwerp van Matt, maar ook is afgestemd op de toegankelijkheidsproblemen van het web. U ziet hoe het formulier zonder JavaScript nog steeds toegankelijk is en dat de formuliervelden te allen tijde worden weergegeven. Voor gebruikers met oudere browsers die geen ondersteuning bieden voor de placeholder attribuut, ze kunnen nog steeds de formuliervelden zien en nagaan welke informatie van hen nodig is.
 tevens de  en  elementen bestrijken het hele formulierveldblok, dus het doelgebied voor elke invoer is vrij groot en toegankelijk.
 Dit is bijvoorbeeld hoe het formulier eruit zou zien op dit punt in Internet Explorer 8:
  
 
 JavaScript gebruiken voor een progressief verbeterd formulier
 We denken nu na over het implementeren van de interactie die Matt met JavaScript heeft gemaakt. We zullen dit grotendeels bereiken door toe te voegen en te verwijderen CSS klassen.
 U merkt vlak voor de sluiting  tag plaatsen we een link naar ons aangepaste JavaScript-bestand met de naam scripts.js. We kunnen dat bestand nu aanmaken en de browser vertellen om de code uit te voeren wanneer het DOM is gereed:
  $ (document) .ready (function () // Onze code hier);
 Controleren op placeholder ondersteuning
 In het geval dat u het nog niet gemerkt heeft, is deze interactie in hoge mate afhankelijk van de ondersteuning voor plaatshouders. Het kenmerk placeholder wordt breed ondersteund in moderne browsers. Omdat onze formulierinteractie zo afhankelijk is van tijdelijke aanduidingondersteuning, zullen we eerst testen of de browser tijdelijke tekst ondersteunt. Als dit het geval is, zullen we de formulierinteractie implementeren. Als dit niet het geval is (IE8 en IE9), geven we eenvoudig het basisformulier zonder JavaScript-interactie. Progressieve verbetering voor de overwinning!
 Laten we eerst jQuery's gebruiken $ .Support () om te zien of de browser tijdelijke tekst ondersteunt. Dit zal instellen $ .support.placeholder naar waar of onwaar, afhankelijk van de ondersteuning van de browser voor tijdelijke tekst.
  // Test voor tijdelijke aanduiding ondersteuning $ .support.placeholder = (function () var i = document.createElement ('input'); retourneer 'placeholder' in i;) ();
 Als tekst van placeholder wordt ondersteund, kunnen we de tekst verbergen  elementen op de pagina laden. Zoals eerder vermeld, kan het verbergen van de labels met JavaScript nadat de pagina is geladen ervoor zorgen dat browsers met JavaScript uitgeschakeld (en die zonder ondersteuning voor plaatshouders) nog steeds het formulier kunnen gebruiken.
  // Verberg labels standaard als tijdelijke aanduidingen worden ondersteund als ($. Support.placeholder) $ ('. Form li'). Each (function () $ (this) .addClass ('js-hide-label'); ); // Code voor het toevoegen / verwijderen van klassen hier
 Merk op dat we een klasse hebben toegevoegd aan elk genoemd lijstitem js-hide-label. Dit komt omdat, volgens de interactieregels aan het begin van de zelfstudie, de standaardweergave van het formulier de formulierveldlabels heeft verborgen. De js-hide-label klasse wordt toegepast op bovenliggend niveau 
 elementen wanneer de afstammeling  element is leeg van gebruikersinhoud.
 Om te helpen bij het begrip en de code-onderhoudbaarheid, voegen we de klassen toe die we toevoegen of verwijderen met JavaScript met 'js-'. Laten we die klasse toevoegen aan onze stylesheet en deze gebruiken om alle afstammelingen te verbergen label elementen uit het zicht. Weet je nog hoe we de ondoorzichtigheid regel? Dit is waar we het gebruiken om het te verbergen  elementen:
  .js-hide-label label opacity: 0; top: 1.5em
 Notitie: De ondoorzichtigheid eigenschap wordt ondersteund in alle moderne browsers. IE8 zal het niet herkennen, maar dat is prima, want IE8 ondersteunt ook geen tijdelijke aanduidingen, dus we voeren eigenlijk niet het JavaScript uit om de klasse toe te passen in IE8. Win-win!
 Een opmerking over overgangen
 Als je goed in de gaten houdt, laat het interactieontwerp van Matt zien dat de veldveldlabels niet alleen verschijnen en verdwijnen, maar dit ook doen met een kleine op en neergaande beweging. Omdat onze labelelementen absoluut zijn gepositioneerd, kan de browser dit effect overzetten wanneer we een klasse toevoegen die de toppositionering (of links, rechts of onderaan) wijzigt. Het enige wat we moeten doen is een overgangseigenschap aan het label zelf toevoegen.
 Laten we teruggaan naar onze label element in de CSS en voeg een overgangseigenschap toe voor de top en ondoorzichtigheid eigenschappen:
  label -webkit-transition: .333s ease top, .333s troebelheid; overgang: .333s gemak top, .333s opaciteit; 
 Hierdoor kunnen de labels niet alleen vloeiend verschijnen en verdwijnen, maar op en neer wiebelen wanneer ze volledig ondoorzichtig of transparant worden, zoals:
  
 Je zou nu iets als dit moeten hebben wanneer je de pagina laadt (in een moderne browser natuurlijk).
  
 
 De markeringskleur verwijderen
 Zoals eerder vermeld, zijn we klassen aan het toevoegen en verwijderen 
 elementen en richt zich op kinderen die styling nodig hebben. Op dit punt (op pagina laden) hebben we een klasse toegevoegd js-hide-label die alle labels in het formulier verbergt. Nu hebben we nog een klas nodig voor het verwijderen van de markeerkleur uit de  elementen:
  .js-unhighlight-label label color: # 999
 
 Event-luisteraars toevoegen
 Nu hebben we een formulier dat geleidelijk wordt uitgebreid en klaar is voor enige JavaScript-interactie (in moderne browsers) wanneer de gebruiker begint te communiceren met het formulier.
 In de tijdelijke aanduiding als verklaring die we hierboven schreven, laten we beginnen met het toevoegen en verwijderen van onze js- lessen op het juiste moment. Eerst zullen we onze formulierelementen selecteren en een gebeurtenislistener toevoegen aan de vervagen, focus, en keyup evenementen (we gebruiken keyup liever dan toets neer of toets indrukken omdat deze gebeurtenissen voortijdig worden geactiveerd):
  $ ('. form li'). find ('input, textarea'). on ('keyup blur focus', functie (e) // Cache onze selectors var $ this = $ (this), $ parent = $ this .parent (); // Klassen toevoegen of verwijderen als (e.type == 'keyup') // keyup-code hier else if (e.type == 'blur') // blur code here else if (e.type == 'focus') // focuscode hier);
 Hier is een korte uitleg van wat we hier doen:
  We selecteren alle lijstitems die deel uitmaken van ons formulier $ ('. form li'). Vervolgens vinden we binnen die selectie alles  en </code> velden <code>.find ('input, textarea')</code>. Dit zorgt ervoor dat de laatste invoer in onze opmaak (de verzendknop) niet is opgenomen in onze selectie.</li> <li>We hebben de selectors gecached die we van plan zijn te gebruiken. Dit is een goede uitvoeringspraktijk. Als u de naam van de variabele voorvoegt met '$', weet u ook dat die specifieke variabele een jQuery-object is.</li> <li>We hebben de <code>vervagen</code>, <code>focus</code>, en <code>keyup</code> gebeurtenissen en eenvoudig het gebeurtenistype controleren met <code>e.type</code> om te bepalen welke klassen we op specifieke momenten zullen toevoegen of verwijderen.</li> </ul> <h3>Codering ingeschakeld <code>keyup</code> </h3> <p>Volgens de interactieregels die we aan het begin hebben opgesteld en die overeenkomen met het ontwerp van Matt, wanneer een gebruiker begint met het invoeren van tekst (<strong>niet</strong> wanneer ze zich op het veld concentreren) willen we het label laten zien.</p> <p>Dus, met behulp van de <code>keyup</code> gebeurtenis, elke keer dat de gebruiker een teken invoert, kunnen we controleren of het invoerveld leeg is (deze code gaat naar binnen <code>if (e.type == 'key-up')</code>:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); else $ parent.removeClass ('js-hide-label');</pre> <p>Merk op dat onze logica als volgt werkt:</p> <ul> <li>Als de waarde van de invoer <strong>is leeg</strong>, verberg het label door de klasse 'js-hide-label' toe te voegen.</li> <li>Anders (de waarde van de invoer <strong>is niet leeg</strong>), toon het label door de klasse 'js-hide-label' te verwijderen.</li> </ul> <p>U zou nu iets moeten hebben dat zo werkt wanneer u tekst invoert of verwijdert uit een invoerveld:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_2.gif"><br> <h3>Codering ingeschakeld <code>vervagen</code> </h3> <p>Nu, volgens onze interactieregels (opnieuw), weten we dat wanneer een gebruiker de focus van het ene invoerveld naar het volgende verplaatst (<code>vervagen</code> evenement), moeten we de kleur van de <code><label></code> element afhankelijk van of de gebruiker daadwerkelijk iets in het veld heeft ingevoerd.</p> <p>Binnen in de <code>anders als (e.type == 'vervagen')</code>, we zullen de volgende code toevoegen:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); else $ parent.removeClass ('js-hide-label'). addClass ('js-unhighlight -label'); </pre> <p>Merk op dat onze logica als volgt werkt:</p> <ul> <li>Als de waarde van de invoer <strong>was leeg</strong> wanneer de gebruiker de focus heeft verwijderd, verbergt u het label door de <code>js-hide-label</code> klasse.</li> <li>Anders (de waarde van de invoer <strong>was niet leeg</strong> wanneer de gebruiker focus verwijderd) toont het label door de klasse te verwijderen <code>js-hide-label</code> en benadruk de kleur van het label door de klasse 'js-unhighlight-label' toe te voegen.</li> </ul> <p>Je zou nu iets moeten hebben dat de nadruk legt op de kleur van het label wanneer je focus verwijdert, zoals dit:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_3.gif"><br> <h3>Codering ingeschakeld <code>focus</code> </h3> <p>Ten slotte moeten we een beetje logica toevoegen voor wanneer een gebruiker zich op een invoer richt. Volgens onze interactieregels gebruiken we het volgende JavaScript in de <code>else if (e.type == 'focus')</code> sectie:</p> <pre> if ($ this.val ()! == ") $ parent.removeClass ('js-unhighlight-label');</pre> <p>Onze logica werkt als volgt:</p> <ul> <li>Als de waarde van de invoer <strong>is niet leeg</strong>, verwijder de klasse 'js-unhighlight-label' van de ouder.</li> </ul> <p>Wanneer een gebruiker zich nu concentreert op een formulierveld, als het niet leeg is, wordt het label benadrukt met de markeringskleur, zoals:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_4.gif"><br> <hr> <h2>Bonus punten</h2> <p>We kunnen nog veel meer doen met dit formulier, inclusief de toevoeging van client- en server-side validatie. We kunnen ook een paar meer klassen maken voor het opmaken van geldige en ongeldige veldwaarden. We zouden bijvoorbeeld stijlen kunnen toevoegen aan een klasse van 'js-error' die zou gaan op de ouder <code><li></code> element wanneer de waarde van de invoer ongeldig is, zoals:</p> <pre> .js-error border-colour: # f13b3b! important; / * negeer alle gevallen * / .js-error + li border-top-colour: # f13b3b;  .js-error label color: # f13b3b; </pre> <p>Dit soort validatiestijlen kan onze vorm er ongeveer zo uit laten zien:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_10.png"><br> <p>Deze zelfstudie was echter bedoeld om te laten zien hoe we een toegankelijke, geleidelijk verbeterde vorm kunnen creëren die het ontwerp van Matt nabootst. En ik moet zeggen dat ik denk dat we het redelijk goed hebben gedaan.</p> <p>U kunt dit formulier op elk gewenst moment in uw eigen projecten kopiëren, wijzigen of verbeteren!</p> <hr> <h2>handige links</h2> <ul> <li>http://floatlabel.com</li> <li> @floatlabel op Twitter; voorbeelden in het wild</li> <li>Brad Frost's gedachten over het Float-labelpatroon </li> </ul>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/webdesign">Web ontwerp</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/code/import-and-archive-your-tweets-with-wordpress.html">Importeer en archiveer uw tweets met WordPress</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/import-and-archive-your-tweets-with-wordpress_15.jpg');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/code/implementing-the-eu-cookie-law-into-your-wordpress-site.html">Implementatie van de EU-cookiewet in uw WordPress-site</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/implementing-the-eu-cookie-law-into-your-wordpress-site_4.jpg');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Zoeken...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>