Develop Reference

Bootstrap keep menu open on outside click

I've exhausted most of the options I found here on Stack... I've created a full width (horizontal) dropdown menu using Bootstrap 3. The nav contains multiple dropdowns within itself and they are activated (displayed) by the mouseenter event:
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
I've tried disabling the "outside" click by using:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
which works, however, it also disables the "mouseenter" event.... How can I resolve this issue? Any feedback would be great! Thanks!

you meant like this? http://codepen.io/saeedsalam/full/ZpgzQv/
i have added following code in addition with yours -
$(document).on('click','.dropdown.open a', function(){
$(this).parent().removeClass('open');
});
hope that helps!

jQuery Flexslider not working in iphone and ipad

I need to remove class from li tag when i click or tap on the navigation arrow in flexslider. It is working perfectly in all my browsers but i can't able to produce the same in iphone and ipad.when i click on navigation arrow slider moves correctly using flexslider plugin code but alert in my code comes rarely not continuously
$(".flex-direction-nav a.flex-next,.flex-direction-nav a.flex-prev").on('click', 'tap', function () {
alert("hi");
$(".repeat-cont li.active-slide.open").removeClass("open");
});
Do you have any special properties for mobile or any idea on this code?I tried touchstart instead of tap.

The two events should be combined like "click tap" instead of "click", "tap":
$(".flex-direction-nav a.flex-next,.flex-direction-nav a.flex-prev").on('click tap', function () {
alert("hi");
$(".repeat-cont li.active-slide.open").removeClass("open");
});
Also, be sure you are using jquery mobile if you are using tap()

What is an alternative to 'resize' on mobile?

I am trying to trigger an event in a web browser on a desktop
$(window).trigger('resize');
The issue is on mobile it doesn't seem to be triggering. Is there an alternative method for mobile?
I am using tablesaw plugin for grids. When the screen is small in size, the columns will not fit and as such a swipe will be provided to move between them. When I sort them, all the columns gets squeezed and shown on the small screen, but after I trigger the resize event, an event in the plugin will get called that will fix them. On the mobile, this event doesn't exist I guess and I'm not targeting the orientation.

a variation of this (JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?)
this will run on resize and orientchange.
var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="THISPAGE");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
var fullDateString = new Date();
$(document).ready(function(){
$.resized = function(){
waitForFinalEvent(function(){
//function to run
}, 300, fullDateString.getTime())
}
window.addEventListener("orientationchange", function() {
$.resized();
});
$(window).resize(function () {
$.resized();
});
$.resized();
});

window.dispatchEvent(new Event('resize'));

jQuery blur()....How exactly does it work?

I've created a mobile dropdown menu for a responsive website, that essentially shows a hidden unordered list when you click on a certain element. It works great, except for the fact that I can't get the blur() function to work, so that when a user clicks anywhere on the page other than inside the menu, it hides the menu. Here's a codepen: http://codepen.io/trevanhetzel/pen/wIrkH
My javascript looks like so:
$(function() {
var pull = $('#pull');
menu = $('header ul');
$(pull).on('click', function(e) {
e.preventDefault();
$('.close-menu').toggle();
$('.mobi-nav span').toggle();
menu.slideToggle(250);
});
$(menu).blur(function() {
$(this).slideToggle();
});
});
I've struggled with blur() in the past, so would really like to figure out once and for all how exactly it works, and whether or not I'm using it in the right context here. Thanks!

You have to watch for clicks yourself. And use $.contains to see if the clicked thing is within your menu:
$(document).click(function (ev) {
if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
menu.slideUp();
}
});
Just be sure to call ev.stopPropagation() in your toggle click handler to prevent the handler above from immediately closing the menu when the event bubbles up.

js-shown elements aren't accessible for some time

I have several buttons in the table (one button for each row) and show/hide them using jQuery:
$('#some-id tr').hover(
function() { $(this).find('.button-class').removeAttr('disabled').css(...); },
function() { $(this).find('.button-class').attr('disabled', true).css(...); }
);
It properly works for showing/hiding.
The catch is sometimes shown buttons aren't accessible from the browser (don't react to left and right clicks, browsers don't show tooltip). Could be liven up by right click on the rest of browser window (not always).
Tested in Firefox and Chrome.
SOLVED? Very interesting. .css(...) in the code above are contained setting background: none/url(image.png). Buttons have no text, so were invisible with disabled="disabled" and background: none;. I tried simply .show()/.hide() and can't reproduce the problem. Great, but what was wrong with the first edition except of its redundancy?

Make sure you wrap your code in jQuery's .ready() function, or some other such function, such as $(window).load().
Here's how it would look with .ready():
$(function() {
$('#some-id tr').hover(
function() { $(this).find('.button-class').removeAttr('disabled').css(...); },
function() { $(this).find('.button-class').attr('disabled', true).css(...); }
);
});