css - How can I hide this custom slider while Elementor editing window is open?

admin管理员组

文章数量:1291009

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.

The problem is that the JS that does the hiding of the slider on scroll doesn't work when the page is being edited in Elementor, and it prevents you from being able to activate any of the elements in the editor. It's a simple enough matter for me to hide it using CSS while editing, but this is not a real solution, and more importantly the people who own this site won't know how to do that.

I need this slider to go away completely when Elementor is active, but I can't figure out how to make it happen.

The div class is .n2-ss-slider.

So far I've tried the following JS (in header.php):

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

also

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

and I'm at about the end of my repertoire. Can anyone offer another suggestion, using either CSS or JS or even PHP?

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.

The problem is that the JS that does the hiding of the slider on scroll doesn't work when the page is being edited in Elementor, and it prevents you from being able to activate any of the elements in the editor. It's a simple enough matter for me to hide it using CSS while editing, but this is not a real solution, and more importantly the people who own this site won't know how to do that.

I need this slider to go away completely when Elementor is active, but I can't figure out how to make it happen.

The div class is .n2-ss-slider.

So far I've tried the following JS (in header.php):

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

also

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

and I'm at about the end of my repertoire. Can anyone offer another suggestion, using either CSS or JS or even PHP?

• css
• javascript
• theme-twenty-seventeen

Share Improve this question asked Jun 3, 2021 at 22:42 MBWDMBWD 111 bronze badge 1

• Does element or add a class to the body tag? – Tony Djukic Commented Jun 4, 2021 at 13:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I was able to solve this with help from support at Smart Slider. They pointed out that the div that wouldn't go away was using absolute positioning and suggested that I add an id to it so that I could then hide it using CSS. I did this by echoing an id name in header.php in the same line where I echoed the shortcode:

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

        else 
        { }
        # do nothing ?>

Then I had a new id of 'front-page-slider' to work with. I could then call that id in the JS I was using to hide the element:

<script src="https://ajax.googleapis/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>

and my problem was solved.

本文标签： cssHow can I hide this custom slider while Elementor editing window is open