-1

I have a WordPress page that is built using elementor page builder in which I display 'flipbooks' (pdf viewers) using a plugin called responsive flipbooks. The flipbooks are made responsive by a javascript function that makes them resize themselves whenever the browser window resizes (I don't know why, but it's not my plugin).

The issue is that the books render in their smallest size, and the plugin fires the jQuery(window).trigger('rfbwp.resize'); when the page loads, to trigger a resize to make them fit the current window. However, this appears not to work on some browsers (at least in safari and chrome on my mac), which causes them to remain small. I discovered that when I put this line of code inside my $(window).on('scroll') event, it perfectly resizes the books whenever I scroll. It of course also resizes whenever I actually resize the page, however, it doesn't work when I put this line of code inside my $(window).on('load') event.

This makes me think that the elements haven't been properly loaded yet when this event fires, which is weird, because I thought the window load event fires last.

Could this have something to do with the way WordPress builds a page, since all components come with their own scripts? Is it the case that $(window).on('load') fires last - even in a complex WordPress page?

The respective page is live at http://cdgstyle.mixrabbit.com/lookbook/

  • This doesn't seem like a wordpress specific question to me. Running your site on wp doesn't make it a wp question. If 'hacking the plugin' does the trick I would ask the plugin author about it. – Beee Feb 15 '18 at 22:07
  • it seemed a wordpress specific question to me, since normally it's clear that a $(window).on('load') is the last thing to happen, so I don't see why it shouldn't work. Since wordpress loads a bunch of plugins, each firing their own scripts, I thought maybe a reason for this could be the way Wordpress builds a page. But indeed I didn't ask this specifically in my question, so I will edit it. – Rob Teeuwen Feb 16 '18 at 9:53
1

It likely does not have to do with WordPress Core - in most cases this type of issue comes about when plugins conflict. I would suggest deactivating all your other plugins and trying a default theme, a la Twenty Seventeen. If it works at that point, you can switch the theme & test, then activate one plugin at a time & test, until you find what's conflicting, then report that to the plugin author so they can find a workaround.

In the meantime, if using a default theme and only this plugin still isn't working, here are two things to try this in place of $(window).on('load'):

jQuery(window).load(function($) {
   // your function
});

Or more succinctly

(function($) {
  // your function
})(jQuery);

WP uses jQuery no conflict - so it could simply be the $ syntax. If that fixes it, it's often fastest to submit a pull request to the plugin repo to spur the author into action.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.