Hi,
Recently I design navigation pane for my project and use jquery and css to make it responsive.
Live Example: coralweb.ir
everything is ok but when i resize browser manually, there is a problem and I can’t find the reason.
when i resize browser manually, in some pixels (after the breakpoint pixel I define: 768) the " li.ResMenuIcon " element which should be hide in the size over the 768px, its display sets to “block” and I can’t figure out why. but it’s ok when i reload the page at the same size that the problem happened in resizing.
what is the problem?
Please HELP me!!!
Thx.
I wish I could help but I don’t seem to be experiencing the problem, or perhaps I’m not understanding your problem well enough.
My understanding is that when resizing the web browser over the 768 threshold, that the menu icon can sometimes strangely appear. Am I understanding that correctly?
I don’t seem to be able to experience that problem in either Chrome or IE.
Thank You for your reply.
I set a breakpoint (768px) for the page.
I hide the " li.ResMenuIcon " in the screen > 768px and show it in < 768px. when i load page all the things work good, in any size, but when I resize the browser window, in the size before breakpoint width (between 768 and 785), the display property of the specific element (li.ResMenuIcon) sets to “block” instead of “none”.
I want to know why…
The breakpoint is when the Chrome window goes from being 785 to 784. That’s when the menu changes. At 785 jQuery reports that the window width is 768. At 784 jQuery reports that the window is 767, which is less than 768.
The additional pixels are accounted for by the scrollbar.
So what’s triggering the block change to ResIconMenu? We can break in on an attribute modification, and find that the <768 condition occurs when the window goes from 785 to 784, which jQuery reports as being from 768 to 767. In truth it’s not though, because of things like scrollbars.
The CSS @media though is only triggering when the window goes from 768 to 767.
The solution to this is to have the jQuery only occur based on what the @media is doing. Instead of checking if the DocW is less than 768, have the CSS @media change whether ResIconMenu is displayed, and from jQuery check if ResIconMenu is visible. Things should be good from there.