I have a script to make a header image full screen.
It's working fine but I'm sure their is a better way to do it (maybe)...
I'm using beforeSend so the background header image is retrieved and displayed wright away before anything else to speed the page load.
The imgobj.anything are array's strings that are passed from php to js using wp localize script
I'm really new to AJAX, any help is greatly appreciated, thanks a lot.

jQuery(document).ready(function($) {
    getfullscreen();
    function getfullscreen() {
        $.ajax({
            type: 'POST',
            url: imgobj.ajaxurl, // THIS IS MY DEFINED URL TO admin-ajax.php in WordPress
            data: {
                action : 'header_style' // THIS IS MY DEFINED data's action in my PHP function
            },
            beforeSend : function fullscreen(){
                if (imgobj.key3){
                    // log a message to the console
                    console.log(imgobj.sm);
                    $('#masthead').css({
                        'background-image': 'url(' + imgobj.key1 + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                } else {
                    // log a message to the console
                    console.log(imgobj.um);
                    $('#masthead').css({
                        'background-image': 'url(' + imgobj.key2 + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                }
            },
            // Callback handler that will be called on success
            // Calling the function to set size for #masthead
            success: fullscreen
        });
    }

    // I'm rewriting the function so it works also when the dom is ready
    // I'm sure their is a better way !
    function fullscreen(){
        if (imgobj.key3){
            $('#masthead').css({
                'background-image': 'url(' + imgobj.key1 + ')',
                width: $(window).width(),
                height: $(window).height()
            });
        } else {
            $('#masthead').css({
                'background-image': 'url(' + imgobj.key2 + ')',
                width: $(window).width(),
                height: $(window).height()
            });
        }
    }

    // Run the function in case of window resize.
    $(window).resize(function () {
        fullscreen();
    });

});

Old but not busted … – Dieser Inhalt wurde vor mehr als 13 Jahren publiziert. Die Korrektheit und Verfügbarkeit von Links können leider nicht gewährleistet werden.

Das Web der zweiten Generation:

  • alle quatschen d‘rüber;
  • keiner weiß, was es ‚wirklich‘ is
  • … und jeder weiß es besser;
  • sieht voll geil aus;
  • erfindet das Rad teilweise neu.

Auf der Suche nach neuen Ideen für das Webdesign der neuen Seite von „Schöner Schenken“, purzle ich nun schon seit ein paar Tagen von einer Seite des WWW zur nächsten und entdecke dabei die Web-Technologien neu.

Um (auch für mich) ein paar Ansätze und Ideen festzuhalten, einfach mal eine kleine Link-Liste.
Weiterlesen