0

How and where I need to set the data-close-on-click params in my off-canvas to avoid the menu to close when user click on a link inside the menu?

beaver
  • 523
  • 1
  • 9
  • 20
guy banlock
  • 107
  • 2
  • 4
  • The user clicks a link that takes them away from the current page or within the same page? – Chris O Jan 18 '17 at 16:19
  • It is a datepicker inside the offcanvas. When the user focus on input the datepicker appear but when he clicks on "ok" button in the datepicker for select a date, it closes the offcanvas – guy banlock Jan 18 '17 at 18:41
  • You might try the preventDefault and stopPropagation, i'll give an example. – Chris O Jan 18 '17 at 18:52

1 Answers1

0

Using jquery:

$('#yourDatePickerID').click(function(e)
    e.stopPropagation();
    e.preventDefault();
});

Depending on which date picker you are using this may or may not work. It may even not allow you to open the calendar image. If it doesn't work I suggest you look into what event for your date picker is fired when the ok button is clicked. Attach this code to that event instead of the click event and try again.

Chris O
  • 689
  • 8
  • 22
  • I checked out the scenario by putting a foundation-datepicker in the off canvas. Upon choosing a date, it did not close the off-canvas (without adding any of the code in my example above). – Chris O Jan 18 '17 at 21:17
  • I m using bootstrap datepicker. Are you using foundation 6.2? – guy banlock Jan 18 '17 at 21:40
  • @guybanlock Yes, Foundation 6.2.0. – Chris O Jan 19 '17 at 14:14
  • Thanks Chris i'm using bootstrap-material-datetimepicker but still not working – guy banlock Jan 19 '17 at 21:08
  • I looked at the bootstrap-material-dateitimepicker, seems it is a modal date picker which is a completely different animal than the jQueryUI datepicker and the f6 date picker. I'm speculating here but since the modal code that is created by the plugin is appended to the body, meaning it is created outside the foundation canvas, by clicking on the calendar or clock you are actually clicking outside the off canvas menu which then closes the menu. You might try changing where the code is appended to somewhere inside your off canvas menu. Change this in the js `$('body').append(this.template);` – Chris O Jan 23 '17 at 14:58
  • I see what tou mean Chris. I'll check this at night. Thanks :) – guy banlock Jan 23 '17 at 15:33