Javascript Artikel flip effect

##Logica# In de website zijn artieklen te vinden. Een artikel heeft twee kanten (het kan vergeleken worden met een kaart die kan omslaan). Een kant met een previeuw image en en andere met tekst en een button. De titel is altijd te zien. Als er op een artikel geklikt word "flipt" hij om en is de tekst te zien. Word er weer opgeklikt is de image weer te zien.

.artikel_wrapper sta op overflow:hidden;. De tekst en de button zijn dus niet te zien. Als de "flip" animatie afgaat word .artikel_tegel op display:none gezet. Hierdoor komt de tekst en de button hoger te staan.

###html#

        <div class="kop_k">
            <h3>Titel artikel </h3> <a href="#" class="fav_icon_k">11</a>
        </div>

        <img class="artikel_tegel" src="images.png" alt="image">

        <div class="text_wrapper">
            <p><!--Tekst--> </p>
        </div>

        <button id="Artikel_ID">Bekijken<div></div></button>

    </div>
</div>

###belangrijke css#

.artikel_wrapper{
    position: absolute;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 240px;
    display: block;
    overflow: hidden;
cursor: pointer;
}

.artikel_wrapper heeftposition: absolute; omdat dit van belang is bij de functie die de plaating van de artikelen berekent. Zoals gezegd staan er overflow:hidden;. De breedte is 240px. Deze breedte word in alle kolom elementen gebruikt.

.artikel_container{
width: 240px;
}

.artikel_container img{
    width: 240px;
}

Er is voor de zekerheid een breedte gegeven aan de img. Dit zorgt er voor dat de ruimte voor de image altijd is opgevuld. Er is geen height gegeven want dit zou de img uit proportie halen.

##Javascript & Jquery# var array = $(".artikel_wrapper");

Door van alle artikelen een array element te maken kan er een loop worden gemaakt die elk artikel afgaat.

		function flip(){
			
			for (var i = 0; i < array.length; i++){
				var titelH = parseFloat($(array[i]).find("h3").css("height"));
				var x = parseFloat($(array[i]).find(".artikel_tegel").css("height"));
				var textX = x - 60
				$(array[i]).find(".text_wrapper").height(" " + textX + "px");
				$(array[i]).height(x + titelH);
			};
		};

De flip functie is een loop functie die elk artikel afgaat. Deze zorg ervoor dat de "bekijk" button altijd te zien is. Als de .text_wrapper te lang is duwt deze de button uit het zicht. Ook moet de .artikel_wrapper niet langer zijn dan de titel(hoogte) en de img samen. Gezien er met overflow:hidden; word gewerkt boven moeten we dit eerst uitreken.

titelH is de hoogt van de titel naar boven afgerond (parseFloat). Door dit op te tellen met de de hoogte van de .artikel_tegel of x weten we de hoogt van een artikel. Dit word gedaan met het volgende $(array[i]).height(x + titelH);.

Nu moeten we .text_wrapper een hoogte geven zodat .artikel_wrapper is opgevuld maar dat er titel en de button te zien zijn. De titel is altijd in zicht en staat boven is. Op dit element heeft de .text_wrapper geen invloed. Waar het wel invloed op heeft is de zichtbaarheid van de button. Door $(array[i]).find(".text_wrapper").height(" " + textX + "px"); word de hoogte aan de tekst gegeven. textX neemt de hoogte van de img en haalt hier een hoogte van 45 px van af. Nu blijft er ruimt over voor de button.

flip();

Als laaste word de flip functie opgeroepen zodat er door alle artikelen heen word geloopt. De flip functie werkt met naam omdat deze functie ook moet worden opgeroepen op andere pagina's. Op sommige paginas moet de functie nog een keer worden geroepen om voor elkaar te krijgen

var $turn1 = function(){
		$(this).parent().animate({height: 240+"px", width: 0+'px', marginLeft: 120+'px'}, 100, function(){
		$(this).find('.artikel_tegel').hide();
		}).animate({height: 240+'px', width: 240+'px', marginLeft:0+'px'}, 100);
};

$turn1 houd in dat de .artikel_container met een animatie word dicht gedrukt. (zie abl. hierboven). Zodra de container dicht is word de img op display:none gezet met behulp van .hide(). Hier na gaat de `.artikel_container weer open. Nu alleen is de tekst te zien. Die eerst niet zichtbaar was door de overflow: hidden van de wrapper. De wrapper is niet geanimeert want deze zorgt voor de positonering van het artikel. (zei artikel layout)

var $turn2 = function(){
		$(this).parent().animate({height: 240+"px", width: 0+'px', marginLeft: 120+'px'}, 100, function(){
		$(this).find('.artikel_tegel').show();
		}).animate({height: 240+'px', width: 240+'px', marginLeft:0+'px'}, 100);
};

In $turn2 word de zelfde animatie gebruikt als de vorge. Alleen word de img weer op display:block; gezet. Hier door word is de tekst niet meer zichbaar. Door de animatie snel te laten afspelen geeft het de illusie van het keren van een kaart.

$(".artikel_tegel").click(
    $turn1
);

Als er op een artikel word geklik word $turn1 uitgevoert en kan de "achterkant" van de kaart gelezen worden. $(".text_wrapper").click( $turn2 );

Om de voorkant van de kaart te zien kan er nog een keer op de arikel geklik worden. Hierdoor komt de voorkant van de kaart weer te voorschijn.

##Belangrijk#

Dit script mag pas worden uitgevoerd nadat alle images zijn de upload in de DOM. Anders kan er geen hoogte worden gegeven aan de artikel. Om hier voor de zorgen moet het hele scrip in $(window).load(function(){} gezet worden. Dan word de scrip pas uitgevoerd als alle images aanwezig zijn.

De tekst van hierboven zal nog in het engels vertaald worden.