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 4 months ago
the same like yours, but stable! (same structure!)
Houcem B. A. Chlegou 4 months 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 4 months 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 4 months 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 4 months ago
That last line got it to work as I was expecting. Thanks!
imokyourok 4 months ago
View Timeline