1

My question is I am designing a responsive website. Used a slider plugin, but have a problem which is when I resize the window from more than 561px to less than 561px will be appear the viewport width more than 100%. I think it is a plug-in bugs, but the plug-in is useful. So I have an idea that is detect the resize event "if($(window).width() < 561)" plus check the viewport width is more than 100% (that's mean appear vertical scroll bar), then run reload whole page function.

Can you guys give me tips about detect viewport width more than 100% then do somethings?

Here is my web page which has this issue: click here

Samson
  • 177
  • 1
  • 16
  • 2
    The time you took posting this question is greater than the time you should've googled it for better answers. Anyway, why use javascript? Try using css Media Queries. – haMzox May 18 '17 at 19:30
  • 1
    Look at `document.body.clientWidth` as compared with `window.width` (the jQuery probably isn't necessary. @hamzox is correct, though: you should probably re-examine your overall approach and use more CSS/less JavaScript. – jameslafferty May 18 '17 at 19:34
  • http://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow ? – l2aelba May 18 '17 at 20:16

2 Answers2

0

Not sure if I understand completely, but if you just need to know when the body is wider than the html, just watch window.scrollMaxX:

if (window.scrollMaxX > 0) {
    // do something
}

Like so: https://codepen.io/anon/pen/pPqMGe

Brandon Hill
  • 1,782
  • 14
  • 12
  • I used this code to do the test with alert, but nothing happened. Is the synatx wrong? Becauese I searched window.scrollMaxX is less to use for compeare an int? – Samson May 18 '17 at 20:12
0

This little script checks if the current width is less then 561 and document width is bigger than the viewport width.

if (document.body.clientWidth < 561 &&
    document.body.clientWidth > window.outerWidth) {

    // do reload
}
ˈvɔlə
  • 9,204
  • 10
  • 63
  • 89