Home › Forums › WoodMart support forum › HELP WITH JAVASCRIPT OR JQUERY AND WODMART

HELP WITH JAVASCRIPT OR JQUERY AND WODMART

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 7, 2021 at 1:36 am #256314

    maverick10
    Participant

    Dear Sirs,
    I wanted to congratulate the woodmart team because you are the best in the world and you answer very well. I am delighted and very happy.

    I have a problem because I have created a simple code to add classes by scrolling down which is this:
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
    $(“.jet-mobile-menu__container”).addClass(“margin”);
    }else{
    $(“.jet-mobile-menu__container”).removeClass(“margin”);
    }
    });

    However, although I copy this code in the section for JS, the code does not work because I have to make a call to Jquery for this code to work.
    But the weird thing is that my code with the correct jquery call, does not work on android devices, and I don’t know if it’s for woodmart or another reason.

    I DON’T ACTUALLY WANT TO MAKE ANY CALLS TO JQUERY, THEREFORE:
    1º Could you help me to change this jquery code for another pure javascript code that performs the same function so that I don’t have to call Jquery and so that it works perfectly in android and iphone?

    A million thanks

    January 7, 2021 at 7:43 am #256354

    Artem Temos
    Keymaster

    Hello,

    Try to add the code to the custom JS section on the document ready. Send us a link to the page where we can check how it works.

    Kind Regards

    January 7, 2021 at 5:24 pm #256538

    maverick10
    Participant

    Thank you very much for your reply.

    The code performs the function of making the “Volver al Curso” and “MENU CURSO” buttons of this page sticky: THIS IS THE NEW CODE:
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).addClass(“fixed2”);
    $(“.elementor-jet-button”).addClass(“fixed1”);
    } else{
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).removeClass(“fixed2”);
    $(“.elementor-jet-button”).removeClass(“fixed1”);
    }
    });

    LOOK THIS IN THE WEB: https://tuwebtop.com/eunicegarciaruiz6/cursos/curso-inicio-activados/module-1/bienvenid-a-los-activados/

    I have copied the code on the document ready and this does not work, it only works if I copy the code in the header.php making a call to jquery and it looks like this:
    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script&gt;
    <script>
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).addClass(“fixed2”);
    $(“.elementor-jet-button”).addClass(“fixed1”);

    } else{
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).removeClass(“fixed2”);
    $(“.elementor-jet-button”).removeClass(“fixed1”);

    }
    });
    </script>

    THIS IS AN AGONY.
    BECAUSE I WANT TO GET THAT I DO NOT HAVE TO MAKE A CALL TO JQUERY AGAIN, BECAUSE THE THEME ALREADY HAS JQUERY, RIGHT?

    HOW COULD IT BE SOLVED?
    IS THERE A PURE JAVASCRIPT CODE WITHOUT JQUERY, THAT MAKES THE IDENTICAL FUNCTION TO COPY IN THE CUSTOMIZED JS SECTION?

    January 7, 2021 at 11:04 pm #256614

    maverick10
    Participant

    Ohh Elise, thank you very much,
    You are fantastic, you are the best, thank you!
    I give you the access

    Maybe there is a way to change all the icons on my site from font-awesome to SVG which is lighter and doesn’t block the browser.

    I also want to change your social icons from your woodmart-font to SVG, because the woodmart-font, it behaves like a font-awesome.

    I need to do a very strong optimization of my website because I am going to enter a WPO competition, and I want woodmart to be the winner.

    Sure there may be some way, because you are the best programmers in the whole world.

    January 7, 2021 at 11:09 pm #256616

    maverick10
    Participant

    Sorry I got confused about the ticket in the previous message, I rewrite the correct answer in this ticket:

    The code performs the function of making the “Volver al Curso” and “MENU CURSO” buttons of this page sticky: THIS IS THE NEW CODE:
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).addClass(“fixed2”);
    $(“.elementor-jet-button”).addClass(“fixed1”);
    } else{
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).removeClass(“fixed2”);
    $(“.elementor-jet-button”).removeClass(“fixed1”);
    }
    });

    LOOK THIS IN THE WEB: https://tuwebtop.com/eunicegarciaruiz6/cursos/curso-inicio-activados/module-1/bienvenid-a-los-activados/

    I have copied the code on the document ready and this does not work, it only works if I copy the code in the header.php making a call to jquery and it looks like this:
    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
    <script>
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).addClass(“fixed2”);
    $(“.elementor-jet-button”).addClass(“fixed1”);

    } else{
    $(“div.jet-mobile-menu__instance.jet-mobile-menu__instance–slide-out-layout.left-container-position.default-toggle-position”).removeClass(“fixed2”);
    $(“.elementor-jet-button”).removeClass(“fixed1”);

    }
    });
    </script>

    THIS IS AN AGONY.
    BECAUSE I WANT TO GET THAT I DO NOT HAVE TO MAKE A CALL TO JQUERY AGAIN, BECAUSE THE THEME ALREADY HAS JQUERY, RIGHT?

    HOW COULD IT BE SOLVED?
    IS THERE A PURE JAVASCRIPT CODE WITHOUT JQUERY, THAT MAKES THE IDENTICAL FUNCTION TO COPY IN THE CUSTOMIZED JS SECTION?

    January 8, 2021 at 7:57 am #256679

    Artem Temos
    Keymaster

    Please, leave only one piece of code and remove it form the header.php so we can check what is wrong.

    January 8, 2021 at 3:13 pm #256820

    maverick10
    Participant

    I already removed from the header.php and just copied the custom js code piece into document ready, and this now doesn’t work.
    That is, the “Volver al Curso” and “MENU CURSO” buttons in the web page (https://tuwebtop.com/eunicegarciaruiz6/cursos/curso-inicio-activados/module-1/bienvenid-a-los-activados/) are not sticky when the scroll down exceeds 200px and if I copied the code in the header with the call to jquery, then if it worked, so there must be an error in the woodmart theme with JS document ready text box.
    what do you think?

    LOOK AT THE SCREEN WHERE MY PART OF CODE IS ATTACHED

    I give you the access

    Attachments:
    You must be logged in to view attached files.
    January 8, 2021 at 3:18 pm #256824

    Artem Temos
    Keymaster

    You can try to replace all $ signs with jQuery and check how it works. Or add the following line before your code

    var $ = jQuery;

    Regards

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)