Question

I am using the following code to detect a users screen resolution upon load and resize and change a containers class accordingly. Therefore allowing me to specify different CSS to elements within that container.

This works great when all content on a page is fully refreshed. However it doesn’t work if I load in new content via ajax since this code is only bound to ‘load’ and ‘resize’.

This ultimately ends with me having to resize the browser in order to get the required class changes to apply to the container.

Is there any way to have it detect the ajax content load and fire accordingly?

$(window).bind('resize load', function(e) {
            // get browser width
            var browserWidth = $(document).width();

            // search for the layout's container to inject the class'es
            var containerDiv = settings.containerDiv;

            // get de current class of the container an insert it to the debug window
            var containerClass = $(settings.containerDiv).attr('class');

            // filling the debug window with the current browser's width
            if(settings.debug=='on') {
                $('#debug #currentWidth').text(browserWidth+'px');
                if(containerClass == "") {
                    $('#debug #currentClass').text('-');
                } else {
                    $('#debug #currentClass').text(containerClass);
                };
            };

            // if statements for each resolution
            if(settings.lower1024=='on'){
                if(browserWidth>311 && browserWidth<1023) {
                    $(containerDiv).removeClass();
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(lower1024, 10);
                };
            } else if(settings.lower1024=='off') {
                if(browserWidth<1023 && browserWidth>311) {
                    $(containerDiv).removeClass();
                };
            };
            if(settings.smartphones=='on'){
                if(browserWidth<310) {
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(smartphones, 10);
                };
            };
            if(settings.over1024=='on'){    
                if(browserWidth>1024 && browserWidth<1279 || browserWidth==1024) {
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(over1024, 10);
                };
            } else if(settings.over1024=='off') {
                if(browserWidth>1024 && browserWidth<1279 || browserWidth==1024) {
                    $(containerDiv).removeClass();
                };
            };
            if(settings.over1280=='on'){    
                if(browserWidth>1280 || browserWidth==1280) {
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(over1280, 10);
                };
            };

            if(settings.over1600=='on'){    
                if(browserWidth>1600 || browserWidth==1600) {
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(over1600, 10);
                };
            };

            if(settings.over1850=='on'){    
                if(browserWidth>1850 || browserWidth==1850) {
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(over1850, 10);
                };
            };

            function lower1024() {
                $(containerDiv).removeClass().addClass('lower1024');
            };
            function smartphones() {
                $(containerDiv).removeClass().addClass('smartphones');
            };
            function over1024() {
                $(containerDiv).removeClass().addClass('over1024');
            };
            function over1280() {
                $(containerDiv).removeClass().addClass('over1280 floating');
            };
            function over1600() {
                $(containerDiv).removeClass().addClass('over1600 floating');
            };
            function over1850() {
                $(containerDiv).removeClass().addClass('over1850 floating');
            };


        });

    };

Answer 1

If you want this to just apply to all AJAX requests, you could use ajaxSetup and then set a complete function for all of your AJAX requests. Alternatively, just call your function within the complete or success functions of your individual AJAX calls.

function doResize(){
    // resize stuff
}

$(window).bind('resize load', doResize);

// some ajax call
$.ajax(... 
    complete: function(){
        // stuff
        doResize();
    }
);