How to disable some javascript on mobiles?

Hi all,
Ive got some tabs on my page which uses bootstrap-tabdrop.js. This js tells my tab UI to - if the tabs extend over the width of my tab UI, to hide them under a ‘more’ drop down button.
This is fine for desktop use (becuase sometimes the client will add to many tabs and theyll appear over 2 rows which looks odd), but on mobiles the ‘more’ drop down tab can easily be missed, so I want to disable the bootstrap-tabdrop.js (which will display all the tabs full width of the small mobile screen and so wont be missed).

At the moment I have:

checkSize();
$(window).resize(checkSize);
function checkSize(){
if ($(“.collapse”).css(“display”) == “none” ){
// this will detect a mobile resolution
// DISABLE bootstrap-tabdrop.js
}else{
// this detects when resolution is desktop size
// ENABLE bootstrap-tabdrop.js script
}
}

How can I achieve this?
Many thanks

1 Like

You don’t want to disable / enable the script itself, you only want to initialize them on desktop.
You’ll have code somewhere which does this

$('.nav-tabs').tabdrop();

You want to move that to where you have // ENABLE

1 Like

Thanks Mark. But how do I disable the script? (ie - I want it so when Im resizing my browser window on a desktop the tab drop function is enabled on a desktop but resized to mobile size its disabled).
Cheers

You don’t need to worry about that case, only developers resize the window to mobile size on desktop :wink:

Yes - I thought that. Unfortunately Im developing a site for a big institution which has many stakeholders updating the website via the CMS. Theyre being told they must be mindful of users viewing the site on mobile devices and to resize the browser window to test. Rightly or wrongly - this is out of my hands and I will get a lot of stakeholders coming back saying “That more tab is not very prominent on mobile”. Im just trying to negate that situation.

No, a stakeholder won’t come back to you after resizing the browser :slight_smile:

They may test on a mobile device, in which case you’ll be covered.

This might get hacky since tabdrop manipulates the DOM, which you’d have to revert manually. Maybe you’re better off writing you’re own solution here…

As for whether or not this is necessary, I think it’s reasonable enough that you have to reload the page to get mobile-specific functionality after resize (although this may not be particularly responsive, admittedly). Personally, I wouldn’t even bother to initialise it on resize – just on document ready if the screen size is sufficiently large.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.