Console errors when executing shortcode code

Question

I am writing the following code in the wordpress shortcode:

 $(function () { function setFlatTheme() { $("body").toggleClass("flat-theme"); $("#rad-color-opts").toggleClass("hide"); $(".rad-chk-pin input[type=checkbox]").prop("checked", true); } setFlatTheme(); $(window).on("scroll", function (e) { if ($(window).scrollTop() > 50) { $("body").addClass("sticky"); } else { $("body").removeClass("sticky"); } }); $(document).on("click", function (e) { e.preventDefault(); var $item = $(".rad-dropmenu-item"); if ($item.hasClass("active")) { $item.removeClass("active"); } }); $(".rad-sidebar a").on("click", function (e) { e.stopPropagation(); }); $(".rad-chat-body").slimScroll({ height: "450px", color: "#c6c6c6" }); $(".rad-timeline-body").slimScroll({ height: "450px", color: "#c6c6c6" }); $(".rad-activity-body").slimScroll({ height: "250px", color: "#c6c6c6" }); $(".rad-toggle-btn").on("click", function () { $(".rad-logo-container").toggleClass("rad-nav-min"); $(".rad-sidebar").toggleClass("rad-nav-min"); $(".rad-body-wrapper").toggleClass("rad-nav-min"); }); $("li.rad-dropdown > a.rad-menu-item").on("click", function (e) { e.preventDefault(); e.stopPropagation(); $(".rad-dropmenu-item").removeClass("active"); $(this).next(".rad-dropmenu-item").toggleClass("active"); }); $(".fa-chevron-down").on("click", function () { var $ele = $(this).parents(".panel-heading"); $ele.siblings(".panel-footer").toggleClass("rad-collapse"); }); $(".fa-close").on("click", function () { var $ele = $(this).parents(".panel"); $ele.addClass("panel-close"); }); $(".fa-rotate-right").on("click", function () { var $ele = $(this).parents(".panel-heading").siblings(".panel-body"); $ele.append( '<div class="overlay"><div class="overlay-content"><i class="fa fa-refresh fa-2x fa-spin"></i></div></div>' ); }); $("#rad-chat-send").on("click", function () { var value = $("#rad-chat-txt").val(); var $ele = $(".rad-chat-body"); var img = "https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg"; if (value) { $("#rad-chat-txt").val(""); $ele.append(getTempl(img, value, "left")); $ele.slimScroll({ scrollTo: $ele[0].scrollHeight }); } }); $(".rad-chk-pin input[type=checkbox]").change(function (e) { $("body").toggleClass("flat-theme"); $("#rad-color-opts").toggleClass("hide"); var selectedTheme = $(".rad-color-swatch input[type=radio]:checked"); var fillColor = '#C6C6C6'; var scale = ["#C8EEFF", "#0071A4"]; if (this.checked) { scale = ["#A8ECFF", "#FA71D4"]; fillColor = colorMap[selectedTheme.val()]; } changeMapColors(fillColor, scale); }); var colorMap = { crimson: "crimson", teal: "#1fb5ad", orange: "#ff503f", purple: "rebeccapurple", twitter: "#55acee" }; $(".rad-color-swatch input[type=radio]").change(function (e) { if ($(".rad-chk-pin input[type=checkbox]").is(":checked")) { $("body").removeClass().addClass("flat-theme").addClass(this.value); $(".rad-color-swatch label").removeClass("rad-option-selected"); $(this).parent().addClass("rad-option-selected"); $(window).scrollTop(0); } }); $(".rad-notification-item").on("click", function (e) { e.stopPropagation(); }); });

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script> <section> <header> <nav class="rad-navigation"> <div class="rad-logo-container rad-nav-min"> <a href="#" class="rad-logo"><img src="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" class="tamimg"><span class="letra">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span></a> <a href="#" class="rad-toggle-btn pull-right"><i class="fa fa-bars acertobar"></i></a> </div> <a href="#" class="rad-logo-hidden">xxxxxxxxxxxxxxxxxxxxxxxxxx</a> <div class="rad-top-nav-container"> <ul class="pull-right links"> </ul> <ul class="pull-right links"> <li> <span style="font-size: 24px; color: #31547c; font-weight: 600;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> </li> </ul> </div> </nav> </header> </section> <aside> <nav class="rad-sidebar rad-nav-min"> <ul> <li> <a href="https://xxxxxxxxxxxxxxxxxxxxx" class="inbox"> <i class="fa fa-home acerto"><span class="icon-bg"></span></i> <span class="rad-sidebar-item">HOME</span> </a> </li> <li> <a href="https://xxxxxxxxxxxxxxxx.pt/teste.php"> <i class="fa fa-bar-chart-o"> <span class="icon-bg"></span> </i> <span class="rad-sidebar-item">INSCRIÇÃO</span> </a> </li> </ul> </nav> </aside> <main> </main>

But when I consult the console it returns these errors:

jQuery.Deferred exception: $(...).slimScroll is not a function TypeError: $(...).slimScroll is not a function at HTMLDocument. (:33:22) at e (https://xxxxxxxxxxxxxxxxxxx.pt/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30005) at t (https://xxxxxxxxxxxxxx.pt/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30307) undefined

Uncaught TypeError: $(...).slimScroll is not a function at HTMLDocument.

Uncaught TypeError: Cannot read property 'options' of undefined

Can anyone help?

Answer 1

My guess is that the code is probably running before the page fully loads, try doing

window.onload = function() {

}

or

jQuery.ready(function() {

}