jQuery removeClass not working in Chrome

Question

I'm trying to remove a CSS class when the page is opened from mobile device.

Here's the code:

add_action( 'wp_footer', 'remove_slideup' );
function remove_slideup() {
    ?>
    <script type="text/javascript">
            jQuery(document).ready(function($) {
          var alterClass = function() {
            var ww = document.body.clientWidth;
            if (ww < 1025) {
                alert('under 1025!');
              $('.thumb-wrapper').removeClass('slideup');
              $('.thumb-wrapper').css({'overflow':'hidden', 'position':'relative', 'display':'block', 'margin-bottom':'10px'});
              $('.quick-view').hide();
            } else if (ww >= 1025) {
                alert('over 1024!');
              $('.thumb-wrapper').addClass('slideup');
              $('.quick-view').show();
            };
          };
          $(window).resize(function(){
            alterClass();
          });
          //Fire it when the page first loads:
          alterClass();
        });
    </script>
    <?php
}

Basically it's changing this:

<div class="thumb-wrapper slideup">

to this in mobile devices:

<div class="thumb-wrapper">

The problem is, this code is working fine in Firefox, but not in Chrome.

Any help is appreciated, thanks.

@AndriyIvaneyko No errors, but when I try to run alterClass in the console, it says function not declared or something like that. — Dicko Mas Soebekti, Aug 23 '18 at 10:32
@charankumar it's not firing in Chrome, but fires in Firefox. — Dicko Mas Soebekti, Aug 23 '18 at 10:33
There is no problem in your js code, its working fine for me in my chrome and firefox, — charan kumar, Aug 23 '18 at 10:35
@DickoMasSoebekti add console.log and checkout whether alterClass executed in the chrome on mobile device, if yes log `document.body.clientWidth` value, and make sure ww < 1025 is evaluated to True. Maybe you have to add some extra steps here. — Andriy Ivaneyko, Aug 23 '18 at 10:44
@AndriyIvaneyko Ok, added console.log to alterClass, can confirm Chrome doesn't run this at all. clientWidth in Firefox returns correct value. — Dicko Mas Soebekti, Aug 23 '18 at 10:51
@AndriyIvaneyko Yup, looked at the page source code, and it's wrapped correctly. — Dicko Mas Soebekti, Aug 23 '18 at 10:54
@l2aelba ww value is correct for Firefox, it seems this script isn't recognized in Chrome, not ran at all. — Dicko Mas Soebekti, Aug 23 '18 at 10:59

Andriy Ivaneyko · Answer 1 · 2018-08-23T11:01:04.630

Basically I guess the problem here is that Chrome Mobile browser ready function not fires second time, per: The "document.ready()" function not firing on Chrome Mobile (android)

Also, there may be case when the jQuery not loaded before your script. Make sure it is with steps from JavaScript - How do I make sure a jQuery is loaded? SO Answers.

Also you can try to update attachment of the document ready to the code below:

var jq = jQuery.noConflict();
jq( document ).ready(function( $ ) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww < 1025) {
      alert('under 1025!');
      $('.thumb-wrapper').removeClass('slideup');
      $('.thumb-wrapper').css({'overflow':'hidden', 'position':'relative', 'display':'block', 'margin-bottom':'10px'});
      $('.quick-view').hide();
    } else if (ww >= 1025) {
      alert('over 1024!');
      $('.thumb-wrapper').addClass('slideup');
      $('.quick-view').show();
    };
  }
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
});

I've used $.noConflict here, since I am not familiar with your code.

The code provided in question shall work well, so the issue is somewhere else. Add console.log prior calling of alterClass and checkout whether alterClass executed in the chrome on mobile device, if yes log document.body.clientWidth value, and make sure the ww < 1025 condition is evaluated to True, maybe, somehow the width is different on the Chrome, so you will have to carry with that case, without touching you js.

its wordpress framework, by default it will be having jQuery i don't think so jquery.Conflict is needed — charan kumar, Aug 23 '18 at 10:41
Ok, it looks like we're on to something here. I did notice there are 2 document ready on the page. The thing is, I tried to open the page from Chrome on desktop too, but not working as well. But.. let's say this is the culprit, how can I eliminate the second document ready? — Dicko Mas Soebekti, Aug 23 '18 at 11:11

score 0 · Answer 2 · answered Aug 23 '18 at 10:49

Try adding the alterClass() inside a separate ready function, and remove ready function for the variable alterClass like below.

So that chrome wont throw the error of alterClass() is not a function.

    add_action( 'wp_footer', 'remove_slideup' );
function remove_slideup() {
    ?>
    <script type="text/javascript">
          var alterClass = function() {
            var ww = document.body.clientWidth;
            if (ww < 1025) {
                alert('under 1025!');
              $('.thumb-wrapper').removeClass('slideup');
              $('.thumb-wrapper').css({'overflow':'hidden', 'position':'relative', 'display':'block', 'margin-bottom':'10px'});
              $('.quick-view').hide();
            } else if (ww >= 1025) {
                alert('over 1024!');
              $('.thumb-wrapper').addClass('slideup');
              $('.quick-view').show();
            }
          }
          $(window).resize(function(){
            alterClass();
          });
          //Fire it when the page first loads:

        });
     jQuery(document).ready(function($) {
         alterClass();
     });
    </script>
    <?php
}

jQuery removeClass not working in Chrome

2 Answers2