jQuery load not working after Ajax call
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello,

I'm using the following bit of code to calculate the height of an element, then apply that height to the element as a negative margin-top. On initial page load the code works, after I click on a link to load the next page via Ajax, the code snippet isn't working when the content is loaded. The code doesn't work when I clock on the close button either to go back to the original page. However, the code works when the window is resized.

$(window).on('load resize', function() {
    $(".episode-list-offset").css({"margin-top": - $(".episode-list-offset").height() });
$(".episode-meta-data-offset").css({"margin-top": - $(".episode-meta-data-offset").height() });
});

Here is a link to the site I'm trying to get the code snippet to work on. http://designedu.today/beta/ I would like someone to fix the code so it triggers after the Ajax load, and when the new page is closed.

Thanks,
Gary

what about giving a stable new design? i was checking your code, i noticed, that you made a flaky instable design and you are fixing it lwith this function. what about i give you a stable HtML5 or bootstrap design?
Houcem B. A. Chlegou 24 days ago
the same like yours, but stable! (same structure!)
Houcem B. A. Chlegou 24 days ago
awarded to farolanf
Tags
jQuery
ajax

Crowdsource coding tasks.

2 Solutions


put your resizing code in one method
function resizeWidth() {
$(".episode-list-offset").css({"margin-top": - $(".episode-list-offset").height() });
$(".episode-meta-data-offset").css({"margin-top": - $(".episode-meta-data-offset").height() });
}

Call this function on when you click close
$('.close').on('click',resizeWidth);

Call this function on load and resize of the window
$(window).on('load resize', resizeWidth);

I tired your solution and it didn't work.
imokyourok 24 days ago
Winning solution

Try this, it works (tested)

function updateMargins() {
  $(".episode-list-offset").css({
    "margin-top": -$(".episode-list-offset").height()
  }),
  $(".episode-meta-data-offset").css({
    "margin-top": -$(".episode-meta-data-offset").height()
  })
}

Then call it at the end of smoothstate options.onReady.render(), ie:

onReady: {
  duration: 0,
  render: function(t, e) {
    t.removeClass("is-exiting"),
    t.html(e),
    updateMargins()
  }
}

And also

$(window).on("load resize", updateMargins);
I tried using exactly what you wrote but it didn't work.
imokyourok 24 days ago
Almost there! The only issue now is when you initially land on the page the updateMargins() isn't applied. It's applied when I click on the links to pen or close, just not on initial page load.
imokyourok 24 days ago
That last line got it to work as I was expecting. Thanks!
imokyourok 24 days ago
View Timeline