Joomla: 3.8.7
Allvideos: 4.8.0

Hello,
I have installed this Atom (www.inspiretheme.com/documentation/gantry5-particles/headroom-js) on a Gantry 5 Rockettheme Template (Galatea).

The "Headroom.js" atom fixes the site header and it loads the Headroom.js script to provide some animation options. For example, you can specify how the fixed element will get hidden - by sliding, swinging, flipping or bouncing.

The problem is that it conflicts with Allvideos plugin, when the plugin is enabled the Atom does not work, the site menu is not expandable anymore, and I get this error in console

Uncaught TypeError: $(...).headroom is not a function
at dispatch (jquery.js?dd4db3412883b9c1f67fd7f95fdc91d5:5226)
at elemData.handle (jquery.js?dd4db3412883b9c1f67fd7f95fdc91d5:4878)

Any chanche you can take a look at the headroom.js code and see if it possible to update Allvideo to avoid this conflict?
I attach the file below.

I cannot give you a link to test because I had to disable the atom on my live site, but in case I can give you private superuser access to a test site.

Thanks!

Make sure that jQuery is being loaded before all scripts and also make sure that only one instance of jQuery is being loaded.

Thank you,
but any suggestion for non-coders on how to do this?
I tried to install and activate this plugin simplifyyourweb.com/documentation/jquery-easy/jquery-options
but it doesn't solve the issue

Hello NIccolò,
Can you send me a link to your dev site?
No need to push it to public, I only need to see one page.

You mean via PM (I can't find the option in the forum...) or via the site contact form?
The test site is offline so I need to send you a superuser access, can't post it here...

Thanks!

Ok, here is a link to a test page
accademiainfinita.it/test-page-public

Thanks

Try loading the Headroom's scripts locally (if there is an option) or if this isn't an option you need to contact the extension's developer.

Try loading the Headroom's scripts locally (if there is an option) or if this isn't an option you need to contact the extension's developer.

There is no option for that, I already talked with Ivo from Inspire Theme (you find him responding to comments on this page www.inspiretheme.com/blog/freebies/42-fixed-sticky-header-atoms-for-gantry-5-freebies or vai their contact form) but he said to contact you for this issue :)

Thank you!

Unfortunately the JS errors that are being thrown are coming from their extension.
AllVideos is not throwing any errors.
It could be related to how they build their anonymous functions, the script being loaded in the footer the load() trigger instead of the ready() etc etc..
Since it its an external library which I have no idea who and how it was built, the developer who built it needs to troubleshoot the issue.

Hi Krikor,
I contacted again Ivo from InspireTheme and here is his reply:

We've seen JS conflicts when AllVideos is being used many times before.
We've seen those conflicts with templates and extensions from many different providers and developers. We are not talking about our templates here.
In all that cases, AllVideos was causing the conflict.
We cannot tell for sure what in AllVideos is causing the issue. Is it the use of "MooTools" or is it something else...

Regarding our anonymous function that loads the script - we use a "self invoking anonymous function":

(function($) {
// Code goes here
})(jQuery);

Regarding the use of .load() instead of .ready() - we do it like that on purpose, on a very good purpose.

As you know, the code within .ready() is executed as soon as the document is ready (without the images).
While we need to wait until everything is fully loaded as we need to get a proper .height() of the element.
Moreover, what the guys at AllVideos are saying does not make much sense because .load() waits more compared to .ready(), it waits until everything's fully loaded.

Yes, we do know that .load() is removed from jQuery v3, but Joomla 3 ships with jQuery v1.12.x so this is out of the conversation.

And finally, what our "Headroom.js" atom does is to simply load the Headroom assets and provide the configuration values.
If the guys at AllVideos are interested, they might want to have a look at the Headroom.js repo on Github: github.com/WickyNilliams/headroom.js/

Can you try commenting out these lines?
github.com/joomlaworks/allvideos/blob/master/plugin/jw_allvideos.php#L142-L146
You can see the path of the file is plugins/content/jw_allvideos/jw_allvideos.php

Done, but it doesn't solve the issue.

This means that AllVideos is not loading MooTools.
However I can still the library present.
I am sorry but since there are no JS errors and the extension in question was not developed by us, I cannot debug their code.

I understand. I suggest you look into this on your side by installing the headroom atom on a gantry5 template. It's a pretty popular addon for Gantry, and AllVideos is definitely cinvolved in the conflict, if I disable it everything works fine.

Thank you

The only solution I can recommend is using jQuery's no conflict mode and removing the dollar sign in Headroom's initialisation script.
api.jquery.com/jquery.noconflict/