menu script not working in all themes

Post Reply
essentialsoflife
Ssr. Bludit
Posts: 10
Joined: Sun May 12, 2019 12:04 pm

Sat May 18, 2019 12:11 am

I have a menu that I added to the header of several themes that requires a script to run for the mobile version.

The mobile version works here with a modified Blog-X theme: http://essentialsoflife.net/blog

Works here with a modified Mediumish theme: http://essentialsoflife.net/motivational-quotes-album/

But the mobile menu with the modified Blekathlon theme for here does not work. http://cdn.essentialsoflife.net/bludit-test/

The script is in the footer of each one

Code: Select all

<script type="text/javascript" src="http://cdn.essentialsoflife.net/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.essentialsoflife.net/js/fr-script.js"></script>
I don't understand the difference. Ideas?
User avatar
SamBrishes
Sr. Bludit
Posts: 38
Joined: Tue Dec 25, 2018 8:07 pm
Location: Austria 'n' Germany
Contact:

Sat May 18, 2019 6:25 am

Hellow,

I found a solution for this issue: Just use "jQuery" on the first three ".ready()" wrappers (inside your "fr-script.js" JavaScript file) and add the $ -sign as first and only argument on the inner function (as shown below). I've no idea, why this is necessary (especially on just this theme), I just know that it is highly recommended writing jQuery this way:

Code: Select all

jQuery(document).ready(function($) {
    $(".fr-tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("fr-current-opened");
        $(this).parent().siblings().removeClass("fr-current-opened");
        var tab = $(this).attr("href");
        $(".fr-tab-content-box").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});
jQuery(document).ready(function($) {
    $("#fr-responsive-button").click(function() {
        $("#fire-menu").toggle();
    });
});
jQuery(document).ready(function($) {
    $(".fr-menu-setings").click(function() {
        $(".color-switcher").slideToggle("slow");
    });
});
I noticed this by testing "$" vs. "jQuery" inside the console:

Image

Sincerely,
Sam.
If you really like my projects and want to support me, I would be extremely grateful for a coffee! (Thanks to all Supporters):

Image
Post Reply