search

oncomouse / jquery-inline-footnotes

jQuery plugin to create inline plugins from Markdown-created HTML footnotes.
BSD 2-Clause "Simplified" License
11 stars 0 forks source link

Affecting other scripts #1

Closed bichonnages closed 7 years ago

bichonnages commented 7 years ago

Hello,

First of all, thank you so much for this amazing plugin. It's working great, except for one thing: I have these scripts that take care of focal and image ratios (basically center the images in a container depending on some back-end choices; these containers are not even in

tags, they are in other div of my document).

inlineFootnotes breaks these scripts when the images have not been cached yet (either the image container is blank or the image is stretched). The best example is on firefox. Here is a example page : ****

Is there anyway for your script to affect only a certain id or class? something like:

$(document).ready(function() {
    $('#footnotes').inlineFootnotes();
});

Thanks for the help! Best.

oncomouse commented 7 years ago

I'm looking into this, and I don't think the fix you suggest will solve the issue. I implemented a context option for the function (so it only looks for footnotes in a particular DOM element), but the problem persisted.

It appears that something that $.inlineFootnotes() is doing is somehow interfering with what $('img').responsify() (which the Wordpress plugin you are using is based on) is doing to calculate image size.

I am not sure why this is occurring, but I have found a fix (for now). If you run $.inlineFootnotes() at the "load" event instead of the "DOMReady" event, it seems to not interfere. So, instead of:

$(document).ready(function() {
    $('#footnotes').inlineFootnotes();
});

You can use:

$(window).load(function(){
    $('#footnotes').inlineFootnotes();
});

This appears to cause the two scripts to not interfere with one, another.

This isn't a perfect solution by any means, but it seems to be a working one.

I am getting slammed at work for the next two weeks, so I will take a look at the underlying cause of the issue when I have some more time. Please try my fix and see if it solves the problem for you, for now. I'll look into what's wrong when I have more free time.

oncomouse commented 7 years ago

Actually, I took another look at this and I think I found what was causing the problem. I just pushed a new version, so please download it and let me know if it is working.

It looks like the problem was that $.inlineFootnotes was triggering a resize() event before images had load, which is why the size was messed up.

I am going to close this, but please let me know if it isn't fixed.