WordPress : Comment puis-je masquer ce curseur personnalisé lorsque la fenêtre d’édition d’Elementor est ouverte ?

At holistic-health.care, which is a WordPress site using twenty seventeen and Elementor, there is a slider on the front page built with Smart Slider 3. It’s set to disappear on scroll using a bit of javascript, and that’s working just fine.

I built the slider in this way on top of a site I didn’t build myself because the client was using twenty seventeen and the top element of that particular theme doesn’t lend itself to easily adding other elements with a page builder. I echo the shortcode from Smart Slider 3 in header.php and everything seems to work fine.

Le problème est que le JS qui masque le curseur lors du défilement ne fonctionne pas lorsque la page est en cours d’édition dans Elementor, et il vous empêche de pouvoir activer l’un des éléments dans l’éditeur. C’est assez simple pour moi de le cacher en utilisant CSS lors de l’édition, mais ce n’est pas une vraie solution, et plus important encore, les propriétaires de ce site ne sauront pas comment faire cela.

J’ai besoin que ce curseur disparaisse complètement lorsque Elementor est actif, mais je ne sais pas comment y parvenir.

La classe div est .n2-ss-slider.

Jusqu’à présent, j’ai essayé le JS suivant (en header.php):

if (window.location.href.indexOf("&action=elementor") != -1) {$(".n2-ss-slider").hide();

aussi

if (/&action=elementor/.test(window.location.href)){document.getElementByClassName('n2-ss-slider').display = 'none';

et je suis à peu près à la fin de mon répertoire. Quelqu’un peut-il proposer une autre suggestion, en utilisant CSS, JS ou même PHP ?

Solution n°1 trouvée

J’ai pu résoudre ce problème avec l’aide du support de Smart Slider. Ils ont souligné que la div qui ne voulait pas disparaître utilisait un positionnement absolu et m’ont suggéré d’y ajouter un identifiant afin que je puisse ensuite le masquer à l’aide de CSS. Je l’ai fait en faisant écho à un nom d’identifiant dans header.php dans la même ligne où j’ai fait écho au shortcode :

<?php
        if (is_front_page() )
            echo '<div id="front-page-slider"' . do_shortcode('[smartslider3 slider="3"]' . '</div');

        else
        { }
        # do nothing ?>

Ensuite, j’ai eu un nouvel identifiant de ‘front-page-slider’ avec lequel travailler. Je pourrais alors appeler cet identifiant dans le JS que j’utilisais pour masquer l’élément :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
        $(window).scroll(function() {
            var y = $(this).scrollTop();
            if(y > 250) {
                // $('.n2-ss-slider').slideUp();
                $('#front-page-slider').slideUp();
            }
            if (y < 250) {
                // $('.n2-ss-slider').slideDown();
                $('#front-page-slider').slideDown();
            }
            if(y+ $(this).height() == $(document).height()) {
                $('#front-page-slider').fadeOut();
            }
        });
        </script>

et mon problème a été résolu.