Smooth page transitions using jQuery [video]

I uploaded a video to youtube explaining how to do some basic smooth page transition using javascript (jQuery).

Here is the video:

You can see a live example of the effect over here (also demonstrated in the video).

This is the code from the end of the video:

JS

$(function() {
    var request = window.location.hash;
    if(request == '#page-2') {
        $('.page.current').removeClass('current');
        $('.page').eq(1).addClass('current');
    }
    $('nav a').click(function(){
        var speed = 200;
        var i = $(this).index();
        $('.page.current').animate({opacity: 0, marginTop:80},speed,function(){
            $(this).removeClass('current');
            $('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop: 50},speed).addClass('current');
        });
    });
});

HTML

<!doctype html>
<html lang=lipsum>
<head>
    <meta charset=utf-8>
    <title>smooth page transition</title>
    <link rel=stylesheet href='style.css'>
</head>
<body> 
    <nav>
        <a href='#page-1'>first page</a>
        <a href='#page-2'>second page</a>
    </nav>
    <div class='page current'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dignissim leo. 
        Maecenas eleifend, massa eget faucibus lobortis, dolor mauris adipiscing leo, sit amet 
        tristique urna quam non risus. Maecenas sagittis ligula ac magna vestibulum hendrerit. 
        Praesent dignissim elit eu massa laoreet varius. Nullam tortor erat, fringilla ac consectetur 
        eu, lacinia eu sapien. Nunc bibendum porta rhoncus. Sed convallis vehicula feugiat.
        <img src='fire.jpg'>
    </div>
    <div class='page'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dignissim leo. 
        Maecenas eleifend, massa eget faucibus lobortis, dolor mauris adipiscing leo, sit amet 
        tristique urna quam non risus. Maecenas sagittis ligula ac magna vestibulum hendrerit. 
        Praesent dignissim elit eu massa laoreet varius. Nullam tortor erat, fringilla ac consectetur 
        eu, lacinia eu sapien. Nunc bibendum porta rhoncus. Sed convallis vehicula feugiat.
        <img src='water.jpg'>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

html {
    overflow-y:scroll;
}

body > div, nav {
    width:640px;
    margin:auto;
    margin-top:50px;
}

.page {
    display:none;
    opacity:0;
}

.page.current {
    display: block;
    opacity: 1;
}

Posted at December 11, 2011, under jQuery.

Mijn eigen jQuery tutorials

Ik heb de laatste tijd al een aantal keer vragen over jQuery gekregen. Om hier meer duidelijkheid over te verschaffen ga ik een serie screencasts (video’s) opnemen waarin ik uitleg hoe een aantal basis dingen werken.

In mijn eerste tutorial ga ik in op hoe je met een snelle pageload in gedachte javascript kan koppelen aan een webpagina:

In de video komt de volgende code aan bod:

html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery demo 1 - askmike</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <h1>Hello world</h1>
        <p>This is a test page.</p>
        <p>This is the end of the html content.</p>
        <script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

css

body {
    width:660px;
    margin:auto;
    background-color:#c2c2c2;
    font-family:sans-serif;
}

h1 {
    color:blue;
    padding:10px 0;
}

jQuery

$(document).ready(function(){
    var html = '<p class="dynamic">this content is automatically inserted using javascript.</p>';
    $('body').append(html);
});

In de de tweede tutorial laat ik zien hoe je smooth pagina transities kan maken met jQuery.

Posted at October 25, 2011, under jQuery.

Twitter stijl reactie

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

Bloggen draait om communiceren, reactie’s spelen hier dan ook een grote rol bij. Zonder een reactie formulier onderaan je blogposts hoor je er al jaren niet meer bij, maar “threaded comments” (ofwel geneste reactie’s ala youtube) wordt toch ook steeds vaker verwacht.

Zelf vind ik twitter stijl reactie’s heel gaaf en beter bij dit blog passen: Je kan reageren op een post door gewoon het formulier te gebruiken, als je wilt reageren op iemand anders reactie klik je op reageer en wordt er automatisch een link naar die reactie toegevoegd met @[naam van poster] (test het hieronder uit op een reactie).

Ik gebruik PHP (en WordPress) om een reactie link te maken bij elke reactie, deze link krijgt een id mee die de gegevens bevat die ik nodig heb (comment id zodat ik ernaar toe kan linken en de naam van de poster). Dit id lees ik uit met jQuery en maak hier een link van en stop hem in het formulier.

PHP Elke link krijgt de klasse comment-reply-link en een uniek id mee.


    Reageer

Javascript Ik maak de link stuk (preventDefault) en gebruik de focus functie zodat je gelijk kan typen. (Op deze manier werkt alles ook zonder Javascript). Ik lees het id uit en stop de naam en het comment nummer in een string die ik vervolgens in het formulier (id#comment) stop.

$(document).ready(function() {
    $('a.comment-reply-link').click(function(event) {
        event.preventDefault();
        var str = $(this).attr('id').slice(6);
        var id =  str.slice(0,str.indexOf('-'));
        var name = str.slice((str.indexOf('-'))+1);
        $('#comment').val('+ id + '">@' + name + ' ' + $('#comment').val()).focus();
    });
});

JavaScript Dynamisch inladen waar nodig is

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore. Also note that it is almost always faster to load one (minified) file with all your javascript over your whole site.

Als je op een gegeven moment merkt dat je heel veel JavaScript plugins gebruikt kan je gaan denken om ze alleen in te laden wanneer nodig met Ajax. Als je met een CMS werkt waar je elke plugin niet op elke pagina nodig hebt kan je hier gebruik van maken om je website sneller te maken.

jQuery biedt voor dit doeleinde een makkelijke functie waarmee je dit kan bereiken:

$(document).ready(function() {
    $.getScript('link naar script',function(){
        //uit te voeren functie
    }
});

Met de functie getScript kan je een script inladen alsof je hem in de html had aangeroepen met , je houdt natuurlijk wel de dynamiek die JavaScript biedt om eerst te checken of je de plugin wel echt nodig hebt.

De uit te voeren functie is niet verplicht maar deze is vaak handig om gelijk een call te doen naar een plugin die je net hebt ingeladen, deze functie wordt pas uitgevoerd zodra het script helemaal is ingeladen.

In mijn blog gebruik ik een JavaScript gebaseerde syntax highlighter die mijn code (zoals hierboven) mooi opfleurt en kleurt. SHJS heb ik alleen op pagina’s nodig waar ik überhaupt code laat zien. Ik zet altijd al mijn code in 

 blokken (onder andere een vereiste voor SHJS), ik wil dus checken of er op de pagina een pre is en alleen dan het script uitvoeren.


$(document).ready(function() {
    if ($('pre').length > 0))
    {
        $.getScript('shmain.min.js',function(){
                shhighlightDocument('/shjs/', '.min.js');
            })
    }
});

Ik moet ook de lengte van pre checken om te verifieren dat hij er echt is. jQuery geeft namelijk altijd een object terug, dit is de makkelijkste manier om te checken iets aanwezig is op de pagina.


Ik ga nog een stapje verder door alleen te checken of er een pre is op een post pagina, en niet op alle andere plekken van mijn website (WordPress only)


if (is_single()) {
    echo '';
}


              

            

            
          

          

            

              

                
Automatisch afbeeldingen centreren in WordPress met jQuery

              

              
Onlangs ben ik van thema geswitched in WordPress. Mijn vorige thema ging anders om met afbeeldingen dan mijn huidige thema, hierdoor heb ik een groot aantal posts met afbeeldingen erin die niet gecentreerd zijn terwijl dit in mijn nieuwe thema wel zo wenselijk is.




Als je normaal een afbeelding invoegt en hem niet centreert genereert WordPress deze code:



    
        
    




Als je hem wel centreert via de wordpress backend krijg je dit:



    
        
    




Als je alles wilt centreren ongeacht hoe het is ingesteld moet je dus alle 
’s die een plaatje bevatten centreren. CSS is nog niet in staat om dit te doen dus wendde ik me tot jQuery:


$(document).ready(function() {
    $("p:has(.alignnone)")
    .add("p:has(.alignnone)")
    .add("p:has(.alignright)")
        .addClass("center");
});

(Houdt er wel rekening mee dat je jQuery wel ingeladen moet hebben)


Ik voeg dynamisch de klasse center toe, in mijn CSS heb ik een regel waar ik de de klasse center centreer:


.center {
    text-align:center;
}


              

            

            
          

          

            

          

        

        

          
« NewerNext page »
          

          
contact me