($(window).width() > 768) NOT breaking at 768pxHow to debug JavaScript / jQuery event bindings with Firebug or similar tools?Get the size of the screen, current web page and browser windowJquery resize() ignoring scrollbar's width?Responsive elements don't stack right between 768 and 785 pixelsjquery code when min-width setLimit text length on mobile, responsive (trim text/string) jQuery, CSS3, BootstrapCSS3 animations when show hide bootstrap 3 offcanvas in media width > 768pxRefresh page when media query breakpoints are triggeredOrientation event (Jquery Mobile) show “Uncaught ReferenceError: css is not defined”Navbar responsive menu
Extrapolation v. Interpolation
How can the artificial womb be made affordable for the common people?
Do Rabbis get punished in Heaven for wrong interpretations or claims?
What happens when two cards both modify what I'm allowed to do?
Can I pay with HKD in Macau or Shenzhen?
What's the 1 inch size square knob sticking out of wall?
How do I run a game when my PCs have different approaches to combat?
What do I do when a student working in my lab "ghosts" me?
Running a linear programming model to maximize binned predictions
Why are angular mometum and angular velocity not necessarily parallel, but linear momentum and linear velocity are always parallel?
I have a domain, static IP address and many devices I'd like to access outside my house. How do I route them?
Area of parallelogram = Area of square. Shear transform
401k investment after being fired. Do I own it?
Why is DC so, so, so Democratic?
The seven story archetypes. Are they truly all of them?
Short story about a group of sci-fi writers sitting around discussing their profession
What was the rationale behind 36 bit computer architectures?
Why is a dedicated QA team member necessary?
Representing partialled/curried functions in postfix notation?
What is "ass door"?
Is an easily guessed plot twist a good plot twist?
Using paddles to support a bug net
Why do people say "I am broke" instead of "I am broken"?
Why are there not any MRI machines available in Interstellar?
($(window).width() > 768) NOT breaking at 768px
How to debug JavaScript / jQuery event bindings with Firebug or similar tools?Get the size of the screen, current web page and browser windowJquery resize() ignoring scrollbar's width?Responsive elements don't stack right between 768 and 785 pixelsjquery code when min-width setLimit text length on mobile, responsive (trim text/string) jQuery, CSS3, BootstrapCSS3 animations when show hide bootstrap 3 offcanvas in media width > 768pxRefresh page when media query breakpoints are triggeredOrientation event (Jquery Mobile) show “Uncaught ReferenceError: css is not defined”Navbar responsive menu
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
The problem is that the breakpoint seems to be 783px and not at 768px like I specified in my if-statement.
Since I use Bootstrap I need to provide some code based on Bootstraps breakpoints. I've tried innerWidth as well but it doesn't work. Media queries is not an option either since I need to use JavaScript to change the DOM. It has to be jQuery as well since that's what we use at the company I work for. See example code below:
if ($(window).width() > 768)
$("#search").insertAfter(".search-webb");
$("#pages").insertAfter(".page-webb");
else
$("#search").insertAfter(".search-mobile");
$("#pages").insertAfter(".page-mobile");
jquery
asked Mar 26 at 15:11
NedNed
164 bronze badges
|
show 1 more comment
The problem is that the breakpoint seems to be 783px and not at 768px like I specified in my if-statement.
Since I use Bootstrap I need to provide some code based on Bootstraps breakpoints. I've tried innerWidth as well but it doesn't work. Media queries is not an option either since I need to use JavaScript to change the DOM. It has to be jQuery as well since that's what we use at the company I work for. See example code below:
if ($(window).width() > 768)
$("#search").insertAfter(".search-webb");
$("#pages").insertAfter(".page-webb");
else
$("#search").insertAfter(".search-mobile");
$("#pages").insertAfter(".page-mobile");
jquery
asked Mar 26 at 15:11
NedNed
164 bronze badges
Where is this code placed inside your script? Why not add an event listener to the window for a resize and then place this code inside of the event callback?
– Ryan Wilson
Mar 26 at 15:14
Have you put a breakpoint there when you suspect that the width is now greater than 768 -> to verify? It is undoubtedly that the width api is returning a different pixel width than you suspect it should be. But the question is, "why is there a disconnect. What are you using to determine that the window is at 782 pixels, while still not going into the if clause?
– Asyranok
Mar 26 at 15:14
I tested this by using this page with the dev tools. When I resize the dev tools, it reports in the top right a width of 958 pixels, but then posting$(window).width()in the console displays 1046 pixels width. So the width API is considering something else in its width.
– Asyranok
Mar 26 at 15:16
If you're using Bootstrap then you're already using media queries - so time to talk your department into upgrading by showing them how much more efficient and effective it is to let the browser do this natively.
– freedomn-m
Mar 26 at 15:28
window.innerWidth you don't need jquery there, it doesn't HAVE to be jquery plain old javascript is always a valid option
– digital-pollution
Mar 26 at 15:32
|
show 1 more comment
The problem is that the breakpoint seems to be 783px and not at 768px like I specified in my if-statement.
Since I use Bootstrap I need to provide some code based on Bootstraps breakpoints. I've tried innerWidth as well but it doesn't work. Media queries is not an option either since I need to use JavaScript to change the DOM. It has to be jQuery as well since that's what we use at the company I work for. See example code below:
if ($(window).width() > 768)
$("#search").insertAfter(".search-webb");
$("#pages").insertAfter(".page-webb");
else
$("#search").insertAfter(".search-mobile");
$("#pages").insertAfter(".page-mobile");
jquery
asked Mar 26 at 15:11
NedNed
164 bronze badges
The problem is that the breakpoint seems to be 783px and not at 768px like I specified in my if-statement.
Since I use Bootstrap I need to provide some code based on Bootstraps breakpoints. I've tried innerWidth as well but it doesn't work. Media queries is not an option either since I need to use JavaScript to change the DOM. It has to be jQuery as well since that's what we use at the company I work for. See example code below:
if ($(window).width() > 768)
$("#search").insertAfter(".search-webb");
$("#pages").insertAfter(".page-webb");
else
$("#search").insertAfter(".search-mobile");
$("#pages").insertAfter(".page-mobile");
jquery
jquery
asked Mar 26 at 15:11
NedNed
164 bronze badges
asked Mar 26 at 15:11
NedNed
164 bronze badges
asked Mar 26 at 15:11
NedNed
164 bronze badges
asked Mar 26 at 15:11
NedNed
164 bronze badges
asked Mar 26 at 15:11
NedNed
164 bronze badges
164 bronze badges
Where is this code placed inside your script? Why not add an event listener to the window for a resize and then place this code inside of the event callback?
– Ryan Wilson
Mar 26 at 15:14
Have you put a breakpoint there when you suspect that the width is now greater than 768 -> to verify? It is undoubtedly that the width api is returning a different pixel width than you suspect it should be. But the question is, "why is there a disconnect. What are you using to determine that the window is at 782 pixels, while still not going into the if clause?
– Asyranok
Mar 26 at 15:14
I tested this by using this page with the dev tools. When I resize the dev tools, it reports in the top right a width of 958 pixels, but then posting$(window).width()in the console displays 1046 pixels width. So the width API is considering something else in its width.
– Asyranok
Mar 26 at 15:16
If you're using Bootstrap then you're already using media queries - so time to talk your department into upgrading by showing them how much more efficient and effective it is to let the browser do this natively.
– freedomn-m
Mar 26 at 15:28
window.innerWidth you don't need jquery there, it doesn't HAVE to be jquery plain old javascript is always a valid option
– digital-pollution
Mar 26 at 15:32
|
show 1 more comment
Where is this code placed inside your script? Why not add an event listener to the window for a resize and then place this code inside of the event callback?
– Ryan Wilson
Mar 26 at 15:14
Have you put a breakpoint there when you suspect that the width is now greater than 768 -> to verify? It is undoubtedly that the width api is returning a different pixel width than you suspect it should be. But the question is, "why is there a disconnect. What are you using to determine that the window is at 782 pixels, while still not going into the if clause?
– Asyranok
Mar 26 at 15:14
I tested this by using this page with the dev tools. When I resize the dev tools, it reports in the top right a width of 958 pixels, but then posting$(window).width()in the console displays 1046 pixels width. So the width API is considering something else in its width.
– Asyranok
Mar 26 at 15:16
If you're using Bootstrap then you're already using media queries - so time to talk your department into upgrading by showing them how much more efficient and effective it is to let the browser do this natively.
– freedomn-m
Mar 26 at 15:28
window.innerWidth you don't need jquery there, it doesn't HAVE to be jquery plain old javascript is always a valid option
– digital-pollution
Mar 26 at 15:32
Where is this code placed inside your script? Why not add an event listener to the window for a resize and then place this code inside of the event callback?
– Ryan Wilson
Mar 26 at 15:14
Where is this code placed inside your script? Why not add an event listener to the window for a resize and then place this code inside of the event callback?
– Ryan Wilson
Mar 26 at 15:14
Have you put a breakpoint there when you suspect that the width is now greater than 768 -> to verify? It is undoubtedly that the width api is returning a different pixel width than you suspect it should be. But the question is, "why is there a disconnect. What are you using to determine that the window is at 782 pixels, while still not going into the if clause?
– Asyranok
Mar 26 at 15:14
Have you put a breakpoint there when you suspect that the width is now greater than 768 -> to verify? It is undoubtedly that the width api is returning a different pixel width than you suspect it should be. But the question is, "why is there a disconnect. What are you using to determine that the window is at 782 pixels, while still not going into the if clause?
– Asyranok
Mar 26 at 15:14
I tested this by using this page with the dev tools. When I resize the dev tools, it reports in the top right a width of 958 pixels, but then posting
$(window).width() in the console displays 1046 pixels width. So the width API is considering something else in its width.– Asyranok
Mar 26 at 15:16
I tested this by using this page with the dev tools. When I resize the dev tools, it reports in the top right a width of 958 pixels, but then posting
$(window).width() in the console displays 1046 pixels width. So the width API is considering something else in its width.– Asyranok
Mar 26 at 15:16
If you're using Bootstrap then you're already using media queries - so time to talk your department into upgrading by showing them how much more efficient and effective it is to let the browser do this natively.
– freedomn-m
Mar 26 at 15:28
If you're using Bootstrap then you're already using media queries - so time to talk your department into upgrading by showing them how much more efficient and effective it is to let the browser do this natively.
– freedomn-m
Mar 26 at 15:28
window.innerWidth you don't need jquery there, it doesn't HAVE to be jquery plain old javascript is always a valid option
– digital-pollution
Mar 26 at 15:32
window.innerWidth you don't need jquery there, it doesn't HAVE to be jquery plain old javascript is always a valid option
– digital-pollution
Mar 26 at 15:32
|
show 1 more comment
1 Answer
1
active
oldest
votes
Scroll-bar that applied sometimes gave me trouble. Had to solve it like this:
(window).matchMedia("(min-width: 767.98px)").matches
Works like a charm.
answered Apr 8 at 9:08
NedNed
164 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55360499%2fwindow-width-768-not-breaking-at-768px%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Scroll-bar that applied sometimes gave me trouble. Had to solve it like this:
(window).matchMedia("(min-width: 767.98px)").matches
Works like a charm.
answered Apr 8 at 9:08
NedNed
164 bronze badges
add a comment |
Scroll-bar that applied sometimes gave me trouble. Had to solve it like this:
(window).matchMedia("(min-width: 767.98px)").matches
Works like a charm.
answered Apr 8 at 9:08
NedNed
164 bronze badges
add a comment |
Scroll-bar that applied sometimes gave me trouble. Had to solve it like this:
(window).matchMedia("(min-width: 767.98px)").matches
Works like a charm.
answered Apr 8 at 9:08
NedNed
164 bronze badges
Scroll-bar that applied sometimes gave me trouble. Had to solve it like this:
(window).matchMedia("(min-width: 767.98px)").matches
Works like a charm.
answered Apr 8 at 9:08
NedNed
164 bronze badges
answered Apr 8 at 9:08
NedNed
164 bronze badges
answered Apr 8 at 9:08
NedNed
164 bronze badges
answered Apr 8 at 9:08
NedNed
164 bronze badges
164 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55360499%2fwindow-width-768-not-breaking-at-768px%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Where is this code placed inside your script? Why not add an event listener to the window for a resize and then place this code inside of the event callback?
– Ryan Wilson
Mar 26 at 15:14
Have you put a breakpoint there when you suspect that the width is now greater than 768 -> to verify? It is undoubtedly that the width api is returning a different pixel width than you suspect it should be. But the question is, "why is there a disconnect. What are you using to determine that the window is at 782 pixels, while still not going into the if clause?
– Asyranok
Mar 26 at 15:14
I tested this by using this page with the dev tools. When I resize the dev tools, it reports in the top right a width of 958 pixels, but then posting
$(window).width()in the console displays 1046 pixels width. So the width API is considering something else in its width.– Asyranok
Mar 26 at 15:16
If you're using Bootstrap then you're already using media queries - so time to talk your department into upgrading by showing them how much more efficient and effective it is to let the browser do this natively.
– freedomn-m
Mar 26 at 15:28
window.innerWidth you don't need jquery there, it doesn't HAVE to be jquery plain old javascript is always a valid option
– digital-pollution
Mar 26 at 15:32