My page uses CSS media queries to display collapsible vertical menus for mobiles and standard horizontal menus for larger devices.
For mobiles, the collapse is triggered by a Click function which toggles the wrapper around the menus.
This works fine normally, but if the user resizes the browser window after having toggled the menus the media queries don't seem to work properly (at least not for the flexbox elements).
Is this a limitation of JQuery and is there a workaround?
Fiddle is here /
Full page (including JScript and CSS is here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src=".11.1/jquery.min.js"></script> <!-- Load jquery library -->
</head>
<body>
<script>
/* Toggle the menus (for small screen devices) */
$(document).ready(function(){
$("#toggle-menu").click(function(){
$("#hdr-menu-wrapper").toggle();
});
});
</script>
<style> /* Obviously styles would normally be in a separate style sheet */
/* Default Layout - all resolutions */
* {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p { /* Just to make explanation of problem more readable */
padding: 8px;
}
#toggle-menu {
display: block;
background-color: #404040;
color: #FF0000;
}
#hdr-menu-wrapper {
background-color: #484848;
}
#main-menu, #lang-menu {
list-style-type: none;
}
#main-menu li, #lang-menu li {
padding: 3px 8px;
text-align: center;
color: #FFFFFF;
}
#main-menu li a {
text-decoration: none;
color: #FFFFFF;
}
/* Small Screens Layout (639px and below) only. Inherits styles from Default Layout. */
@media only screen and (max-width: 639px) {
#hdr-menu-wrapper {
display: block;
position: relative;
}
#main-menu {
display: block;
position: relative;
width: 100%;
background-color: #8080FF;
}
#main-menu li { /* Display menu items in column on small windows */
display: block;
}
#lang-menu { /* Use flexbox to keep all lang options centered on same line */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
position: relative;
width: 100%;
background-color: #FF8080;
}
#lang-menu li { /* Keep inline within lang-menu flexbox */
position: relative;
display: inline-block;
}
}
/* All larger screens (shows full headers). Inherits styles from: Default Layout & Small Screens Layout. */
@media only screen and (min-width: 640px) {
#hdr-menu-wrapper { /* Display main and languasge menus on same line aligned left and right respectivel;y */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: space-between;
-moz-box-pack: space-between;
-ms-flex-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0 8px;
}
#main-menu, #lang-menu {
display: block;
width: auto;
background-color: none;
}
#main-menu li, #lang-menu li { /* Display menu items in row on larger windows, with padding between */
position: relative;
display: inline-block;
}
}
</style>
<p id="toggle-menu">Toggle Menus</p>
<div id="hdr-menu-wrapper">
<ul id="main-menu">
<li id="mnu-1"><a href="/page1.php">Menu 1</a></li>
<li id="mnu-2"><a href="/page2.php">Menu 2</a></li>
<li id="mnu-3"><a href="/page3.php">Menu 3</a></li>
<li id="mnu-4"><a href="/page4.php">Menu 4</a></li>
</ul>
<ul id="lang-menu"> <!-- Code to switch languages excluded from this demo -->
<li id="langEN">English</li>
<li id="langFR">Francais</li>
</ul>
</div>
<br>
<p>On small window widths the Menu items should appear below each other with the Language items in a row below that - all centered.</p>
<p>On larger window widths the Menu items should appear side by side on the left and the Language items side by side on the right, all on the same line.</p>
<p>Clicking 'Toggle Menus' hides both the Menu and Language options. Clicking again restores them.</p>
<p>PROBLEM:</p>
<p>If, after clicking 'Toggle Menus' to hide the items, the window is resized from big to small or vice-versa and 'Toggle Menus' is then clicked again to restore the items the display styling (block or flex) appropriate to the new window size is not applied. The JQuery script used to toggle the menu items seems to interfere with the application of the CSS media query styling (at least so far as flexbox is concerned).</p>
</body>
</html>
My page uses CSS media queries to display collapsible vertical menus for mobiles and standard horizontal menus for larger devices.
For mobiles, the collapse is triggered by a Click function which toggles the wrapper around the menus.
This works fine normally, but if the user resizes the browser window after having toggled the menus the media queries don't seem to work properly (at least not for the flexbox elements).
Is this a limitation of JQuery and is there a workaround?
Fiddle is here http://jsfiddle/nakbrooks/nyrzp4ps/1/
Full page (including JScript and CSS is here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Load jquery library -->
</head>
<body>
<script>
/* Toggle the menus (for small screen devices) */
$(document).ready(function(){
$("#toggle-menu").click(function(){
$("#hdr-menu-wrapper").toggle();
});
});
</script>
<style> /* Obviously styles would normally be in a separate style sheet */
/* Default Layout - all resolutions */
* {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p { /* Just to make explanation of problem more readable */
padding: 8px;
}
#toggle-menu {
display: block;
background-color: #404040;
color: #FF0000;
}
#hdr-menu-wrapper {
background-color: #484848;
}
#main-menu, #lang-menu {
list-style-type: none;
}
#main-menu li, #lang-menu li {
padding: 3px 8px;
text-align: center;
color: #FFFFFF;
}
#main-menu li a {
text-decoration: none;
color: #FFFFFF;
}
/* Small Screens Layout (639px and below) only. Inherits styles from Default Layout. */
@media only screen and (max-width: 639px) {
#hdr-menu-wrapper {
display: block;
position: relative;
}
#main-menu {
display: block;
position: relative;
width: 100%;
background-color: #8080FF;
}
#main-menu li { /* Display menu items in column on small windows */
display: block;
}
#lang-menu { /* Use flexbox to keep all lang options centered on same line */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
position: relative;
width: 100%;
background-color: #FF8080;
}
#lang-menu li { /* Keep inline within lang-menu flexbox */
position: relative;
display: inline-block;
}
}
/* All larger screens (shows full headers). Inherits styles from: Default Layout & Small Screens Layout. */
@media only screen and (min-width: 640px) {
#hdr-menu-wrapper { /* Display main and languasge menus on same line aligned left and right respectivel;y */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: space-between;
-moz-box-pack: space-between;
-ms-flex-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0 8px;
}
#main-menu, #lang-menu {
display: block;
width: auto;
background-color: none;
}
#main-menu li, #lang-menu li { /* Display menu items in row on larger windows, with padding between */
position: relative;
display: inline-block;
}
}
</style>
<p id="toggle-menu">Toggle Menus</p>
<div id="hdr-menu-wrapper">
<ul id="main-menu">
<li id="mnu-1"><a href="/page1.php">Menu 1</a></li>
<li id="mnu-2"><a href="/page2.php">Menu 2</a></li>
<li id="mnu-3"><a href="/page3.php">Menu 3</a></li>
<li id="mnu-4"><a href="/page4.php">Menu 4</a></li>
</ul>
<ul id="lang-menu"> <!-- Code to switch languages excluded from this demo -->
<li id="langEN">English</li>
<li id="langFR">Francais</li>
</ul>
</div>
<br>
<p>On small window widths the Menu items should appear below each other with the Language items in a row below that - all centered.</p>
<p>On larger window widths the Menu items should appear side by side on the left and the Language items side by side on the right, all on the same line.</p>
<p>Clicking 'Toggle Menus' hides both the Menu and Language options. Clicking again restores them.</p>
<p>PROBLEM:</p>
<p>If, after clicking 'Toggle Menus' to hide the items, the window is resized from big to small or vice-versa and 'Toggle Menus' is then clicked again to restore the items the display styling (block or flex) appropriate to the new window size is not applied. The JQuery script used to toggle the menu items seems to interfere with the application of the CSS media query styling (at least so far as flexbox is concerned).</p>
</body>
</html>
- i didn't get your problem ?Secondly you haven't included jquery library in your fiddle – collab-with-tushar-raj Commented Feb 4, 2015 at 11:39
3 Answers
Reset to default 8I would suggest you to use toggleClass instead of toggle because toggle switch between the css display properties irrespective of the media query. Using a class which just hides the menu will solve your issue.
Demo: Demo
JS:
$(document).ready(function () {
$("#toggle-menu").click(function () {
$("#hdr-menu-wrapper").toggleClass('hide');
});
});
CSS:
.hide {
display:none!important;
}
enter code here
jQuery .toggle() sets the css display property to block/none. This will overwrite your display flex property. To avoid this issue, create a css class that will hide your element and use jQuery .toggleClass()
Css:
#hdr-menu-wrapper.hidden-menu-wrapper {
display:none;
}
JavaScript:
$("#hdr-menu-wrapper").toggleClass('hidden-menu-wrapper');
Your fiddle works fine for me, so I think it's either a browser or jQuery version problem. I'm using Firefox (v35) and jQuery 1.9.1.