WordPress.org

Forums

jQuery Responsive Select Menu
[resolved] Conflict with lightbox? (6 posts)

  1. matt6303
    Member
    Posted 1 year ago #

    I am using your plugin on a site that also uses a lightbox plugin in conjunction with the standard WordPress photo gallery.

    When viewing the site at full-width (i.e. your menu is hidden via CSS), after you click on a photo and have it come up in the lightbox, your menu then displays. I suppose it has to do with the lightbox width being smaller than the maximum width for your menu...the original image widths are 600 and my breakpoint for your plugin is 768. Is there any way to prevent this?

    https://wordpress.org/plugins/jquery-responsive-select-menu/

  2. Mickey Kay
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Matt,

    Any chance you can provide a link to your site?

    Lightbox plugins often use iframes to display their content, which may be the issue here. If that's the case, then I would try adjusting the selector you're using in the JRSM settings. For example, if you have your .menu div that you want to use as a container, but you don't want it resized in your iframe (assuming this is the issue), then you can try using a selector like :not(iframe) .menu. This may not apply perfectly to your situation, but the idea is that in theory you should be able to use CSS selectors to select for one and only one element if you so desire.

    Make sense? Let me know if you have any other questions.

  3. matt6303
    Member
    Posted 1 year ago #

    Thanks for the super-quick reply. I think I might not have been perfectly clear. Your menu is not showing in the lightbox, but instead shows up on the main site (in addition to the full-width menu that was already there) after I open and subsequently close the lightbox popup.

    Looking at the page in Firebug...

    Original code:
    <select class="jquery-responsive-select-menu" name="jrsm-0">

    After I click on an image to open it in the lightbox it changes to this:
    <select class="jquery-responsive-select-menu" name="jrsm-0" style="display: none;">

    After I close the lightbox it changes to this, overriding my CSS:
    <select class="jquery-responsive-select-menu" name="jrsm-0" style="display: inline-block;">

  4. Mickey Kay
    Member
    Plugin Author

    Posted 1 year ago #

    Can you provide me with a link to your site?

  5. matt6303
    Member
    Posted 1 year ago #

    http://linville.etclinuxtest.com/trains/

    I just put the following in a media query for minimum 768px and it seemed to take care of the issue:

    .jquery-responsive-select-menu {
    	display: none!important;
    }

    This way my style overrides the inline style that is being applied to <select> which is overriding my original CSS.

    However, since you're willing to look (thank you) I have commented that line out so that you can see what it's doing.

  6. Mickey Kay
    Member
    Plugin Author

    Posted 1 year ago #

    Hi again Matt,

    Glad you found a fix. I took a look, and it seems to me like some other plugin (possibly the lightbox plugin) is modifying the select menu for some reason. You'll notice that when the page first loads the code for the select menu looks like this:

    <select class="jquery-responsive-select-menu" name="jrsm-0">

    The <select> element has no style attribute.

    When I click the lightbox image, however, some JS runs which then causes the select menu to look like this:
    <select class="jquery-responsive-select-menu" name="jrsm-0" style="display: none;">

    So something in the lightbox plugin (or less likely, some other plugin) is adding the style="display: none;" attribute.

    Sounds like you have a fix, but I would love to know why in the world another plugin would be doing this :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery Responsive Select Menu
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.