SCRIPT Switch divs van positie


Webdesign | 4-04-2014 | Pascal Merks | Reacties


Als je een responsive website maakt dan heb je vast wel is dat je denkt tijdens het schalen op een kleiner scherm staat het mooier of is het makkelijker als die div boven die staat. Nou dat kan! Er is gewoon een jQuery script voor.

Voorbeeld html code:

<div class="container">
    <div class="row">
        <div class="one">
            <p>Column 1</p>
        </div>
        <div class="two">
            <p>Column 2</p>
        </div>
    </div>
</div>

 

Demo link: http://pmkmedia.nl/uploads/demos/switch-div.html

Je ziet dat netjes de colums op volgorde staan. Elke div heeft ook een class. Die is niet alleen nodig om de div te stylen via css maar ook voor het script om de div te switchen

Nu kan je via dit script er voor zorgen dat als de resolutie onder de 800px is de div met class "one" en de div met class "two" van plaats verwisselen. Als je op de demo klikt zie je een werkende versie. Je kunt uiteraard zelf de resolutieen wijzigen naar de resolutie die bij jou website past en de class wijzigen van de divs die jij wilt die switchen.

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>

<script type="text/javascript">
function resizeDiv(){
var width = $(window).width();
        if (width < 800) {
            $(".one").insertAfter(".two");
        }
        else {
            $(".two").insertAfter(".one");
        }
}

$( window ).resize(function() {
    resizeDiv();
});

$(document).ready(function() {
    resizeDiv();
});
</script>

 

Dat was het. Ik hoop dat jullie er wat aan hebben.

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets