[jQuery] Content laden via fade in-out

[Recoil]

Ik heb een volgende script geschreven dat als volgt werkt:

1. het opvangen van clicks op links in het submenu ul#menu-portdyn (als een gebruiker dus geen javascript heeft aanstaan wordt simpelweg de normale link gevolgd)
2. infaden #load
3. content van de gelinkte pagina uit de div.article ophalen
4. uitfaden oude content div{i].article[/i]
5. opgehaalde content in de div.article op de huidige pagina zetten via een fade-in
6. wegfaden #load
7. opgehaalde link als hashtag achter de huidige paginaurl zetten

JavaScript:

$(document).ready(function() {
                           
    var hash = window.location.hash.substr(1);
    var href = $('#menu-portdyn li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.php .article';
            $('.article').load(toLoad)
        }                                           
    });

    $('#menu-portdyn li a').click(function(){
                                  
        var toLoad = $(this).attr('href')+' .article';
        $('.article').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('slow');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('.article').load(toLoad,'',showNewContent());
                        Cufon.replace(".header", {fontFamily: 'Serif' });
        }
        function showNewContent() {
            $('.article').show('slow',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('slow');
        }
        return false;
        
    });

});

Ik ondervind echter een drietal problemen waar ik echt niet uitkom (na alle tientallen problemen als beginner zijnde ).

-Het script is voor Wordpress, Wordpress doet niet aan relatieve links dus de href die het script afvangt is bijvoorbeeld: http://www.x.nl/y/z/index.php. Het script zet dus ook die hele link als hashtag achter het adres van de hoofdpagina. In de documentatie van jQuery(this) kan ik niet vinden hoe ik alleen het z gedeelte uit de link als hashtag eruit kan filteren.

-De cufon call werkt soms wel, soms niet. Erg vaag.

-De oude content gaat netjes weg met een fade-out, maar in plaats van dat de nieuwe content infade, krijgt de oude content een fade-in waarna zonder fade de nieuwe content geladen wordt. Ik heb toch als volgorde aangehouden dat de fade-in met nieuwe content pas uitgevoerd wordt zodra deze geladen is?

Zou iemand me verder op weg willen helpen?

Voor de gebruiksvriendelijkheid ga ik overens ook nog de backspace functie implementeren, maar eerst wil ik dit af hebben.

[Grijze Vos]

Wat werkt niet, waar loop je tegen aan?

[Bosmonster]

$ gebruiken ipv jQuery maakt je code ook een stuk leesbaarder...

verder:

JavaScript:

 jQuery('.article').load(toLoad,'',showNewContent()); 
...
jQuery('.article').show('slow',hideLoader()); 

Die voegt natuurlijk geen reference toe van de functie, maar voert hem direct uit, ipv na de animatie.

[ Voor 69% gewijzigd door Bosmonster op 11-03-2011 13:58 ]

[Recoil]

Ik kan het niet duidelijker beschrijven dan de 3 punten onder de code zelf.
Ik zou dus graag willen leren hoe ik een gedeelte uit jQuery(this) kan filteren en begrijpen waarom Cufon soms wel en soms niet werkt. Daarnaast begrijp ik niet waarom de actie niet netjes met een fadeout(oude content)->fadein(nieuwe content) verloopt maar met een fadout(oudecontent)->fadein(oudecontent)->zonder effect (nieuwe content)

@Bosmonster, dat is omdat ik binnen Wordpress de $ er niet voor kan gebruiken.. Maar ik zal het aanpassen.

[ Voor 11% gewijzigd door Recoil op 11-03-2011 13:57 ]

[Bosmonster]

Recoil schreef op vrijdag 11 maart 2011 @ 13:56:
@Bosmonster, dat is omdat ik binnen Wordpress de $ er niet voor kan gebruiken.. Maar ik zal het aanpassen.

Waarom zou dat niet kunnen

[Recoil]

Door conflicten met wordpress zijn eigen calls.

[Bosmonster]

Dan is Wordpress een prutspakket. Gelukkig kun je dat oplossen met jQuery.noConflict()

Volgens mij gebruikt WP overigens zelf ook jQuery.

[ Voor 23% gewijzigd door Bosmonster op 11-03-2011 14:02 ]

[Recoil]

Bosmonster schreef op vrijdag 11 maart 2011 @ 14:01:
Dan is Wordpress een prutspakket. Gelukkig kun je dat oplossen met jQuery.noConflict()

Volgens mij gebruikt WP overigens zelf ook jQuery.

Klopt, maar Wordpress laad zowel prototype als jQuery. Daarbij wordt jQuery in no conflict mode geladen, waardoor in je eigen jQuery scripts het $-teken dus genegeerd wordt..

Waarom zou hij die load gelijk uitvoeren dan? Hij komt toch pas na de animatie?

[ Voor 8% gewijzigd door Recoil op 11-03-2011 14:14 ]

[R4gnax]

Recoil schreef op vrijdag 11 maart 2011 @ 13:05:

-Het script is voor Wordpress, Wordpress doet niet aan relatieve links dus de href die het script afvangt is bijvoorbeeld: http://www.x.nl/y/z/index.php. Het script zet dus ook die hele link als hashtag achter het adres van de hoofdpagina. In de documentatie van jQuery(this) kan ik niet vinden hoe ik alleen het z gedeelte uit de link als hashtag eruit kan filteren.

JavaScript:

  var url = "http://www.x.nl/y/z/index.php";
  alert( url.split( "/" ).pop().pop()); // alert: "z"

Mogelijk zijn er ook nog jQuery plugins of andere JavaScript classes beschikbaar voor het echt parsen van URIs, mocht dat nodig zijn.

-De cufon call werkt soms wel, soms niet. Erg vaag.

Gebruik tegenwoordig gewoon @font-face met de bulletproof smiley syntax. Werkt onder alle browsers. (Gebruik wel een font met goede hinting, want anders krijg je artifacts bij subpixel hinting technieken zoals ClearType.) Wil je wél Cufon gebruiken, zet dan de initialisatie op het juiste punt: in de callback v/d load functie. Eerder is de nieuwe content nog niet in de DOM geinjecteerd, misschien tenzij de gegevens direct uit de browser cache komen en de request eerder afgerond is dan Cufon's initialisatie.

-De oude content gaat netjes weg met een fade-out, maar in plaats van dat de nieuwe content infade, krijgt de oude content een fade-in waarna zonder fade de nieuwe content geladen wordt. Ik heb toch als volgorde aangehouden dat de fade-in met nieuwe content pas uitgevoerd wordt zodra deze geladen is?

Zou iemand me verder op weg willen helpen?

Recoil schreef op vrijdag 11 maart 2011 @ 14:07:
Waarom zou hij die load gelijk uitvoeren dan? Hij komt toch pas na de animatie?

Het probleem is dat load() zijn werk aysnchroon doet, dus gaat fadeIn() al lopen terwijl load() zijn werk nog aan het doen is. Gevolg: je ziet de oude content eerst weer terug verschijnen en pas zodra de XmlHttpRequest compleet is wordt de oude content, die nu weer (tenminste gedeeltelijk) zichtbaar is, vervangen door de nieuwe content.

Klopt, maar Wordpress laad zowel prototype als jQuery. Daarbij wordt jQuery in no conflict mode geladen, waardoor in je eigen jQuery scripts het $-teken dus genegeerd wordt..

JavaScript:

( function( $, undefined ) {
 
  $(document).ready( function() {
    alert( "Problem solved.");
  });

})( jQuery );

[ Voor 13% gewijzigd door R4gnax op 11-03-2011 19:30 ]

[Recoil]

Super, bedankt! Met deze kennis ga ik nog maar eens tegen mijn rubber duck praten

[Recoil]

JavaScript:

(function ($, undefined) { 
    jQuery(document).ready(function ($) { 
        var $mainContent = $("#main"), 
            url = ''; 

        $(document).delegate('#submenu_1 a,a[rel=ajax]', "click", function () {
            $string = $(this).attr("href").split("/");
            $string_url = $string[$string.length - 1];
            window.location.hash = $string_url;
            return false; 
        }); 

        $(window).bind('hashchange', function () { 
            url = window.location.hash.substring(1);
            if (!url) { 
                return;
            } 

            url = url + " #dynamic"; 
            var subUrl = window.location.hash.substring(1);
            if (subUrl == "cf2_field_2" || subUrl == "cf2_field_3" || subUrl == "li-2-3" || subUrl == "li-2-2") {
                return;
            }
            
            $mainContent.animate({opacity: "0.1"}).html('<p><img src="img/ajax-loader.gif" alt="Laden..." /></>').load(url, function () { 
                $mainContent.animate({opacity: "1"}); 
                Cufon.replace(".header", {fontFamily: 'light' });
                $.getScript('/js/focus_ui.js');
                $.getScript('/colorboxsupport.js');
                $.getScript('/js/google.js');
                $('#submenu_1 a').removeClass('current-menu-item');   
                $('#submenu_1 a[href$='+subUrl+']').addClass("current-menu-item");
            });
        });
        $(window).trigger('hashchange'); 
    });
})(jQuery);

Dit is het uiteindelijk na al jullie tips geworden, ik heb een wat intelligentere manier gevonden om de link op te splitsen. Misschien dat iemand er nog wat aan heeft.

[ Voor 2% gewijzigd door Recoil op 23-10-2012 00:13 . Reden: Niet meer werkend te zien. ]