WordPress.org

Ready to get started?Download WordPress

Forums

ShiftNav - Responsive Mobile Menu
[resolved] Bootstrap modal not opening on quick tap (5 posts)

  1. Jtree5757
    Member
    Posted 4 months ago #

    Hey guys,

    http://devpeek.com
    (shift nav only shown when less than 768px)

    I have my contact menu item set up to open a bootstrap modal, but it doesn't open when it is quickly tapped (on iphone 4 ios 7.1)

    It works if you "firmly" tap it.

    I added the needed html to the link of the menu item by doing:
    $('.caffeinecontact>a').attr({"data-toggle": "modal", "data-target": "#myModal"});

    And I made the menu close when tapping on it by doing:

    $('.shiftnav-nav #menu-item-38').on("click touchend", function() {
    		plugin.closeShiftNav();
    	});

    after line 188 in the shift nav core JS

    So is there a way to get either the modal to open with just the quick tap
    or
    not close the menu unless it was a "firm" tap (I tried doing this by specifying "touchend")

    https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/

  2. sevenspark
    Member
    Plugin Author

    Posted 4 months ago #

    Hi Josh,

    It's actually Bootstrap, not ShiftNav, that will be responsible for opening that modal.

    I took a look at the Bootstrap Modal JS, and it seems like the issue is that the events are click-based (rather than optimized for touch).

    What may be happening is that on a tap, iOS only fires the hover emulation event, rather than the full click event. I think iOS does some special stuff to determine if there are any :hover states or events (since there isn't any actual "hover" on a touch screen), and if so, prevents the click from firing before that hover event is triggered. This is how it allows CSS hover-based flyout menus to work, for instance.

    One thing to try would be to disable any :hover states on the menu. For example, try disabling the "Highlight Targets on Hover" and "Highlight Targets on Active" settings in ShiftNav to see if that helps iOS process the click immediately.

    (Just a heads-up, my responses may be delayed a bit this week as I am currently traveling)

    Hope that helps!

    Chris

  3. Jtree5757
    Member
    Posted 4 months ago #

    Hey Chris! Hope you are enjoying your vacation. No worries on delayed responses, awesome support as always.

    I thought the same thing originally and spent some time trying to optimize it for touch but couldn't get it.

    I forgot to mention the reason I think it is shiftnav. http://tammymealplan.com
    The settings icon is set up the same way, but the only difference is that it is not a menu item and not in a shiftnav DOM element (no shiftnav on that site).

    The modal opens just fine on tap.

    But anyways I found a workaround and probably the better way to go about it. I replaced the code I inserted into the shiftnav js to :

    $('.shiftnav-nav #menu-item-38').on("click touchend", function() {
            $('#myModal').on('shown.bs.modal', function(){
            		plugin.closeShiftNav();
            });
      });

    It seems to work better than using shown seems to work better than show.

    Now the issue is that when the modal opens it is constrained to the shiftnav-wrap (which nearly all content is now in/ child of)
    But after I scroll it looks fine. (Again, on iphone only, works fine on ipad and desktop)

    see pic: http://tinyurl.com/pqyd2af

    Any ideas on what is causing this?

  4. Jtree5757
    Member
    Posted 4 months ago #

    Hey Chris, never mind. It's a theme issue. Using enfold and it seems to be color sections an possibly other containers causing it. I'll sort it out with them.

    Thanks again for your help!

  5. sevenspark
    Member
    Plugin Author

    Posted 4 months ago #

    Great, thanks for letting me know, Josh - glad to hear you got it sorted out! :)

    Best,

    Chris

Reply

You must log in to post.

About this Plugin

About this Topic

Tags