Java Script Issues In wordpress

web
mobile

Topic: Java Script Issues In wordpress

a.mendoza.contact@gmail.com pro asked 3 months ago

**Expected behavior**I'm using MDB Boostrap for theme creation. The static website works perfectly, Lightbox, Accordions and any sort of JS Components. I would want to keep the same functionality working flawlessly in my WordPress theme.

Actual behavior The Accordions don't work as well as the Lightbox. I have the pro version running and I followed the installation recommended in your documentation. For some reason it seems to be an issue with it.

Resources (screenshots, code snippets etc.)

This is my functions.php Perhaps I'm doing something wrong.

// Scripts y Stylesfunction ablate_scripts_styles(){ wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.3.1' ); wp_enqueue_style( 'fontAwesome', 'https://use.fontawesome.com/releases/v5.11.2/css/all.css', array(), '5.11.2' ); wp_enqueue_style( 'mdb', get_template_directory_uri() . '/css/mdb.min.css', array(), '4.9.0' ); wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css', array(), '1.0.0' ); wp_enqueue_style( 'twentyTwenty', get_template_directory_uri() . '/css/twentytwenty-no-compass.css', array(), '1.2.1' ); //Main Style wp_enqueue_style( 'style', get_stylesheet_uri() , array(), '1.0.0' ); //Scripts wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.min.js', array(), '3.3.1', true); wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '4.9.0', true ); wp_enqueue_script( 'ajax', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', array(), '1.10.1', true); wp_enqueue_script( 'jQueryEvent', get_template_directory_uri() . '/js/jquery.event.move.js', array(), '1.0.0', true); wp_enqueue_script( 'jQueryTwenty', get_template_directory_uri() . '/js/jquery.twentytwenty.js', array(), '1.0.0', true); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true);}add_action('wp_enqueue_scripts' , 'ablate_scripts_styles');

The Scripts.js File:

$(window).load(function(){ $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7}); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'}); }); $('#play').on('click', function (e) { e.preventDefault(); $("#player")[0].src += "?autoplay=1"; $('#player').show(); $('#video-cover').hide(); }) $('#modal1').on('hidden.bs.modal', function (e) { $('#modal1 iframe').attr("src", $("#modal1 iframe").attr("src")); }); $('.carousel.carousel-multi-item.v-2 .carousel-item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<4;i++) { next=next.next(); if (!next.length) { next=$(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); $(function () { $("#mdb-lightbox-ui").load("/mdb-addons/mdb-lightbox-ui.html"); }); $(function () { var selectedClass = ""; $(".filter").click(function () { selectedClass = $(this).attr("data-rel"); $("#gallery").fadeTo(100, 0.1); $("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation'); setTimeout(function () { $("." + selectedClass).fadeIn().addClass('animation'); $("#gallery").fadeTo(300, 1); }, 300); }); }); jarallax(document.querySelectorAll('.jarallax'), { speed: 0.08,});

Reference Link This is the link for the test for accordion:


Grzegorz Bujański staff commented 3 months ago

Our Accordions work well. Definitely somethings on your page, but hard to say what is wrong. It's looks like missing mdb.js file in your project on this page. You have error in console. Try fix this error first. This error may block next scripts loading


jasubal pro answered 2 months ago

Hi, for make mdb work with wordpress, I have a question. Should the jQuery selectors be changed from this form: $(selector) to this => jQuery(selector) to avoid Wordpress conflicts? If not a lot of console error will apperar. Is it common case? I put you here an alternative: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/


Grzegorz Bujański staff commented 2 months ago

I'm don't know how it's exactly work, but we don't have this problem. We use $ anywhere we want on our page and everything is work.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.14.0
  • Device: Mac Pro
  • Browser: Chrome, Safari, Firefox
  • OS: MAC OS
  • Provided sample code: No
  • Provided link: Yes