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

Question

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

MBWD

2021年6月6日 12:21

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?

Topic theme-twenty-seventeen css Wordpress javascript

Category Web

MBWD · Accepted Answer · 2021年6月6日 12:21

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.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>

and my problem was solved.

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

About