CODEWITHSUNDEEP
jquerycssajax
Fraser
Fraser

Reputation: 14246

jQuery: fadeout() not working on absolutely positioned element when loaded via AJAX

I am using AJAXify on a site I am working on to achieve page transitions and am experiencing some strange behaviour with jQuery.

My code:

HTML (I am fading through the backgrounds with jQuery)

<div id="backgrounds">
<img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground">
</div>

jQuery

$('.otherClass').each(function() {
        $('#backgrounds').fadeOut(function(){
                 alert('fade');
            });
});

$('#main .container.homepageClass').each(function() {
        $('#backgrounds').fadeIn();
});

CSS

#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;}

My div fades out correctly when I do load the page through the URL rather than linking to it via the AJAX link (and I get the alert), however, when I link to it through the AJAXified navigation, the fade does not happen, yet I still get the alert so the function is fadeOut() is definitely triggering.

When I remove the absolute positioning from the CSS and link to the page via AJAX, my div fades out as I need it to (and I get the alert). It only seems to be causing the issue with the absolute positioning of the div.

The fadeIn() works correctly with the absolute positioning when linking to an effected page via AJAX or with a hard load. It is just fadeOut which is causing issues.

Any suggestions?

Upvotes: 5

Views: 1999

Answers (2)

Fraser
Fraser

Reputation: 14246

I managed to solve this by simply adding a width to the div. Bizarre

Upvotes: 4

cereallarceny
cereallarceny

Reputation: 4983

If you're using the AJAXify gist by Balupton (which it seems like that's what you're mentioning) then I will say that I've encountered problems loading Javascript code via that gist. Can you verify that you're loading any Javascript at all using the script? Try including a Javascript on each of your AJAXified pages that does nothing more than alert("hello");. If you don't see the code then I'd bet your Javascript isn't even firing. If that's the case then try this code, it worked for me:

$scripts.each(function(){
    var $script = $(this), scriptText = $script.text();
    scriptText = "<script>" + scriptText + "</script>";
    contentHtml += scriptText;
});

Upvotes: 0

Related Questions