Apologies in advance if I'm using the wrong terminology, I'm pretty new to jQuery.
I'm working on a site with a responsive design. At smaller screen sizes, the menu is replaced via jQuery/CSS with a select dropdown. (I append the <select> field via jQuery, default it to display:none via CSS, then display it at smaller resolutions via CSS media queries.)
It all works great, but there seems to be a conflict with another jQuery plugin I'm running which automatically displays larger versions of images in modal windows. See this page, click on the first image, then notice the <select> appears below the menu. http://preview.saratogaresources.com/corporate-governance/
This is the code I use to create the dropdown:
// Create the dropdown base
$("<select />").appendTo(".nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo(".nav select");
// Populate dropdown with menu items
$(".nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo(".nav select");
});
$(".nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
This is my default CSS:
.nav select {
display:none;
}
And this is my media query:
@media all and (max-width: 800px) {
.nav .menu-top-menu-container {
display:none;
}
.nav select {
display:block;
font-size:1em;
margin:1em auto;
}
}
The lightbox plugin works great on most sites I'm running so I'm betting it's my code that's the issue, but I don't know jQuery very well. Any ideas would be most appreciated, thank you!!
I fixed this by running my jQuery within
jQuery(window).load(function($)
instead of
jQuery(document).ready(function($)
[EDIT]:
Actually I don't believe that the above was the final solution. I think what was happening was that in jQuery itself (latest version, 1.7.2) the <select> field's style was being set to "" (blank, which translates to inline-block) after the modal window closed. If I understand right, this is a 'fix' for the issue of <select>s having some ridiculously high z-index in earlier versions of IE, and thus showing through modal windows. jQuery sets them to display:none for modal window display, then resets them after the window is closed.
In my case, however, this had the result of adding display: inline-block to my previously hidden <select> element. I fixed this by adding an !important declaration to the CSS both places display: was being set. Whew!