Question

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!!

Answer 1

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!