Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Make it so that a script only works at a certain screen size

I am using the code snippet below within the body of a WordPress page, that is built using the page builder Elementor. I am using a tabs element and I am trying to make sure that the first tab is open on 768px and up but closed on 768px and below. The script below closes the tab element perfectly, but it closes all the time, how can I make sure that it only works at 768px and below?

<script> 
jQuery(document).ready(function($) { 
var delay = 10; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>
Tags:

3

Answers


  1. 0

    Returns width of browser viewport $( window ).width();

    if ( jQuery(window).width() <= 768 ){
    //do what ever
}

    so you do like that:

    jQuery(document).ready(function($) { 
    if ( jQuery(window).width() <= 768 ){
        var delay = 10; 
        setTimeout(function() { 
            $('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-content').css('display', 'none'); 
        }, delay);
    }
});
    Login or Signup to reply.
  2. 0

    You can calculate the the viewport width:

    const vw = jQuery(window).width();

    Then,

    if(vw >= 768) {
   var delay = 10; setTimeout(function() { 
      $('.elementor-tab-title').removeClass('elementor-active');
      $('.elementor-tab-content').css('display', 'none'); }, delay); 
   }); 
}
    Login or Signup to reply.
  3. 0

    At Elementor you can get the device type ("mobile", "tablet", "desktop") by a data attribute of the body with:

    jQuery( 'body' ).data( 'elementor-device-mode' )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search