0

I've got question about width of my element which I want to divide by number 90 If this width is multiplicity of 90 set width of this element if not go to next.

For example when window width is 1000px Element is full width 100% (lets call it (EW = element width) if EW can be divided by 90 its ok , so 1000/90 = 11,1(1) we getting window smaller we comes to 990/90 = 10 and it's ok

here EXAMPLE CODEPEN

It works when you resize slowly but when you do it fast it lost.

          var windowWidth = $(window).width(),
            widthNumber = windowWidth / 90;

            $("#EW").css({
                width: windowWidth
            });


            if(widthNumber % 1 != 0){
                console.log("dont change")

            } else {

                console.log("change")
            }

Someone have any idea how to solve this?

Szymon
  • 1,254
  • 19
  • 34
  • What does this have to do with Java? And I don't see anything change in the CodePen, when I slowly change the window size. – Mr Lister Feb 21 '14 at 11:17
  • Maybe some1 will have any solution in Java? thats why I put tag. (my mistake EDITED, sorry) Secondly why not logging? it doesnt matter doesnt change anything. When you put slowly on for example 990 or 900 it will return "change" – Szymon Feb 21 '14 at 11:19
  • What browsers are you testing this in? The codepen seems to work ok for me in Chrome. Sometimes browsers limit/throttle the amount of times a resize (or scroll) event is called for performance reasons. – SlashmanX Feb 21 '14 at 11:27
  • @SlashmanX I work mostly on chrome so Chrome it is. – Szymon Feb 21 '14 at 11:28

1 Answers1

1

From the jQuery resize docs:

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

That is why your method is not being called when quickly resizing the window

SlashmanX
  • 2,278
  • 15
  • 16
  • Well, not It's all clear so any idea? I'm think about using @media queries, but then I'll had to count it on my own. – Szymon Feb 21 '14 at 11:34
  • @SzymonDziewoński You can do it purely with `@media` queries, but you'd need one breakpoint for each of the different sizes (one for 900px, one for 990px, etc, all the way). Not a very efficient solution. – Mr Lister Feb 21 '14 at 11:37
  • @MrLister that's true but if I won't find any better solution that will be my way. So I'm counting on you guys :) – Szymon Feb 21 '14 at 11:40
  • Quick thought off the top of my head: Store the current window size in a variable. Round it to the nearest 90 multiple e.g. if %90 > 45 round it up, if not round it down. Then in your resize method, check to see if the new value is 90px (or more) bigger or smaller. This is just completely off the top of my head so apologies if it doesn't make sense – SlashmanX Feb 21 '14 at 11:43