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


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.


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?
Chlegou 4 years ago
the same like yours, but stable! (same structure!)
Chlegou 4 years ago
awarded to farolanf

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

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 years ago
Winning solution

Try this, it works (tested)

function updateMargins() {
    "margin-top": -$(".episode-list-offset").height()
    "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) {

And also

$(window).on("load resize", updateMargins);
I tried using exactly what you wrote but it didn't work.
imokyourok 4 years 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 years ago
That last line got it to work as I was expecting. Thanks!
imokyourok 4 years ago
View Timeline