jQuery detect Bootstrap 3 state
10,050
Solution 1
I made some changes to this for bootstrap 3, try this"
function findBootstrapEnvironment() {
var envs = ["ExtraSmall", "Small", "Medium", "Large"];
var envValues = ["xs", "sm", "md", "lg"];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envValues.length - 1; i >= 0; i--) {
var envVal = envValues[i];
$el.addClass('hidden-'+envVal);
if ($el.is(':hidden')) {
$el.remove();
return envs[i]
}
};
}
Solution 2
Following @Khurshid's answer (which works perfectly well) I've written a native JavaScript implementation which is significantly faster:
function findBootstrapEnvironment() {
var envs = ["xs", "sm", "md", "lg"],
doc = window.document,
temp = doc.createElement("div");
doc.body.appendChild(temp);
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
temp.className = "hidden-" + env;
if (temp.offsetParent === null) {
doc.body.removeChild(temp);
return env;
}
}
return "";
}
Solution 3
I had to do something similiar for the medium size.
The media query for the extra small is up to 480px;
so you can say something like:
if($(document).width > 480)
{
//Do Something
}
Author by
user1995781
Updated on July 27, 2022Comments
-
user1995781 almost 2 years
In Bootstrap 3, there are 4 states; extra small devices, small devices, medium devices, and large devices. How can I know the website is currently at which state with jQuery? So that I can do some processing like when it is in extra small devices, then run this function.
Thanks.
-
carter almost 10 yearsYou should declare the
$el
and not pollute the global scope. -
Scott Smith almost 9 yearsI have to admit that I generally dismissed replacing simply jQuery calls with native as an unnecessary micro-optimization. Definitely didn't anticipate this comparison would show a 90+% difference in performance.
-
Simon Arnold over 8 yearsWork great, but on IE it seems to always return "xs" :S
-
Simon Arnold over 8 yearsFor IE support, I used
if($(this.dom.temp).is(':hidden')) { $(this.dom.temp).remove(); return env; }
instead ofif (temp.offsetParent === null) { doc.body.removeChild(temp); return env; }
-
dburdan over 8 yearsTo make this code Bootstrap v4 compatible, add "xl" to the 'envs' array and change
temp.className = "hidden-" + env;
totemp.className = "hidden-" + env + "-up";
-
awj over 8 years@dburdan Without sounding lazy, I'm quite happy for you to edit my solution and attach your name to it.
-
Subrata Sarkar almost 8 yearsThis is by far the best and to the point solution I have come across. The main reason for this is nobody except a developer is going to switch browser width to test responsive behavior! A site user will use one device at a time, either a desktop or a tablet or a handheld. I presume this solution was suggested keeping above in mind!
-
Angry 84 over 7 yearsYou will still get users changing the browser side, eg dragging it to a second screen or changing its size so they can see windows underneath and other user cases.. But its a simple example which simply reminds people.. Check the width..
-
user2502479 over 7 yearsGreat answer! Thank you.