miguel-perez / smoothState.js

Unobtrusive page transitions with jQuery.
MIT License
4.43k stars 505 forks source link

Ajax background image not changing #330

Open LebCit opened 7 years ago

LebCit commented 7 years ago

Hello, I've tried many proposed solutions in here (issues) and on stackoverflow. Really appreciate if someone have a working solution for this issue, thanks in advance. I have a header with an AJAX background image (as a cover/banner)
The code goes like so :

(function($) {
    fullscreen();
    function fullscreen() {
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                action : 'my_action'
            },
            beforeSend : function(){
                if (has_post_thumbnail){
                    $('#masthead').css({
                        'background-image': 'url(' + featured_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                } else if (is_seach) {
                    $('#masthead').css({
                        'background-image': 'url(' + search_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                } else if (is_404) {
                    $('#masthead').css({
                        'background-image': 'url(' + 404_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                } else {
                    $('#masthead').css({
                        'background-image': 'url(' + default_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                }
            }
        });
    }

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

It works perfectly when smoothState is not activated. On activation, the header background image is always the same until I refresh the page. This answer worked for all the plugins that I have (none of them require ajax) except this one above. Thanks again for any help.

CHEWX commented 7 years ago

Hi,

I assume this is WordPress.

Are has_post_thumbnail, is_seach, is_404 returning as expected?

Thanks

LebCit commented 7 years ago

Hello @CHEWX Yes, this is WordPress. My interest is in has_post_thumbnail since I can get is_search and is_404 with CSS. When the user sets a featured image it should be returned via has_post_thumbnail, it's not working with smoothState. Thanks in advance for any suggestion(s) SYA :)

CHEWX commented 7 years ago

Can I see the code for the has_post_thumbnail variable? It doesn't look to be defined in the code snippet.

LebCit commented 7 years ago

Hello @CHEWX The code for has_post_thumbnail is in a separated php file. I managed last month to ajaxify the has_post_thumbnail without smoothState but I'm still interested to make it work with sS. It's for a WP theme that I'm working on, you can find it here Now the theme has been modified a lot to be accepted on the WP repo, it will be available very soon on wp.org The file your looking for is cleanblog-functions.php L11 - L36 Thanks again for your help and suggestion(s) SYA :)

CHEWX commented 7 years ago

Hi,

If you are using wp_localize_script() you are not calling it correctly.

You need to call the object. cleanblog_hero_set. So your code would be cleanblog_hero_set. cleanblog_has_post_thumbnail not just has_post_thumbnail.

Thanks

LebCit commented 7 years ago

Hi @CHEWX ,

Yes, really sorry man, this mistake was corrected just after the update you've seen. I didn't took a look at the repo for a while now, I'll soon be updating it.

I managed last month to ajaxify the has_post_thumbnail without smoothState but I'm still interested to make it work with sS.

So the background header image is ajaxified without sS, if sS is used it's not working.

Thanks a lot, SYA