How to hide the Sharethis widget on mobile devices

advertisements

I am working on a website with the sharethis widget when i open the site in handheld devices like mobiles,tablets the sharethis widget hide the contents and disturb to view the site properly. so, i tried the below methods to hide the sharethis widget on handheld devices

Method 1:

var ua = navigator.userAgent.toLowerCase();
    var checker = {
        iphone: (ua.indexOf('iphone') >= 0 || ua.indexOf('ipod') >= 0 ||ua.indexOf('ipad') >= 0) ? true : false,
        blackberry: ua.indexOf("blackberry") >= 0 ? true : false,
        android: ua.indexOf("android") >= 0 ? true : false,
        chrome: ua.indexOf("chrome") >= 0 ? true : false,
        nokia: (ua.indexOf("symbian") >= 0 || ua.indexOf('nokia') >= 0) ? true : false
    };

   if (checker.android || checker.iphone || checker.blackberry || checker.nokia) {
       $('#sthoverbuttons').hide();
   }

Method 2:

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
      $('#sthoverbuttons').hide();
    }

Method 3:

  if($(window).width() < 980)
   {
      $('#sthoverbuttons').hide();//this one works but i need to find devices and hide.
   }

where the #sthoverbuttons is the container for the sharethis widget

And i also tried to remove the script sharethis script's when loading the webpage by assign id to the script tag's but that also not helps me.

So, How to hide the sharethis widget in handheld devices


You can do this with CSS3 media queries. Handheld devices generally are classified to be <600px wide, so adding something like this to your css file should solve your issue:

@media screen and (max-width: 599px){
    #sthoverbuttons { display: none; }
}