We Keep Coding

Closing css dropdown using jquery

Sorry for the vague project title but I'm not having a great idea about how to explain this.
So, let's dive in to it. I was in need of a dropdown list with multiple select options to select recipients from.
I've started my search on Codepen and came across this: https://codepen.io/MaartenTe/pen/mXYLXj
I've forked it so I could tweak it myself. The snippets works perfect. The only thing missing is the ability of closing the dropdownlist when clicking outside of it.
So I started to approach it using javascript. So far I got following code:
$(document).click(function(e) {
var target = e.target; //target div recorded
if (!$(target).is('.multi-select ') ) {
$('.multi-select-options span').css('display', 'none');
$('.multi-select-options label').css('display', 'none');
}
});
Although this isn't working the way I want, I think it's the right approach?

Looking at how that works, its a checkbox that causes the toggle so you need to clear that when you click out the box.
$('.multi-select').on('click', function(e){
e.stopPropagation()
});
$(window).on('click', function(e) {
$('#toggle-open').attr({checked: false})
});
The stopPropagation will stop the window click even firing. https://codepen.io/anon/pen/rdwrya?editors=1111

What works in the given codepen:
var toggle = document.getElementById('toggle-open');
document.addEventListener('click', function(event) {
if (['INPUT', 'LABEL', 'SPAN'].indexOf(event.target.nodeName) + 1) return;
if (toggle.checked) toggle.checked = false;
});
Just handle click, exclude the relevant elements and uncheck if needed.

jquery click not working on dynamically added hrefs in IE11

Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.

You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.

jQuery code doesn't work on Google Chrome?

This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks

http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.

Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/

Bootstrap popover is not working in Chrome

http://www.rightoption.co/
You will find "Our Client" On RHS side of page, Click on thumbnails it opens popover(Firefox),
But it's not working in Google chrome, Please help me out of this
Edit : Website is no longer on hosting

This is because the default trigger for the popover is focus. In Firefox, when you click on something, it seems to gain focus but that does not seem to be true for Chrome in this case.
You can try one of 2 things:
Try to manually set the trigger on the tag to be "manual". So add this attribute data-trigger="manual"
OR
In your document onload, instead of doing:
$('#element, #element1').popover('toggle').popover('hide');
use this line instead:
$('#element, #element1')
.popover()
.click(function(e) {
e.preventDefault();
$(this).focus();
});

The accepted answer is pretty dated now, but it came up for me in a Google search, so I would like to add that as of version 2.3.0 Bootstrap now allows to send 'hover focus' as the trigger so it will work on both. And very importantly, it also allows a 'click' trigger that works as you'd expect (specifically for Chrome).

This worked for me!
var el = $('[data-toggle="popover"]');
el
.on('shown.bs.popover', function(){
$(document).on('click.popover', function() {
el.popover('hide');
$(document).off('click.popover');
});
})
.popover();
Update: The above had an issue whereby clicking another popover element while a popover is displayed closes the open popover but doesn't open the new one. The following will close the open popover AND open the new one with one click.
var el = $('[data-toggle="popover"]');
el
.on('click', function(e){
var el = $(this);
setTimeout(function(){
el.popover('show');
}, 200); // Must occur after document click event below.
})
.on('shown.bs.popover', function(){
$(document).on('click.popover', function() {
el.popover('hide'); // Hides all
});
})
.on('hide.bs.popover', function(){
$(document).off('click.popover');
});

Disable doubleclick event for an element in Opera

Is there a way to disable (with CSS, JS or jQuery) double-click for a given element?
The problem with Opera is that it displays a menu when I click on an element too fast. Note that I know how to disable this for me. I'd like to be able to disable this for all user that use the script.
The buttons in question are "next"/"previous" buttons and I use input type image for them, but the same happens with "a".

It turended out I need this:
/**
Disable text selection by Chris Barr, of chris-barr.com
*/
$.fn.disableTextSelect = function() {
return this.each(function(){
if($.browser.mozilla){//Firefox
$(this).css('MozUserSelect','none');
}else if($.browser.msie){//IE
$(this).bind('selectstart',function(){return false;});
}else{//Opera, etc.
$(this).mousedown(function(){return false;});
}
});
}
And then I could disable text selection on my button elements like this:
$(function(){ $('input[type=image]').disableTextSelect(); });
And now I can click buttons fast as hell and all works fine :-).

You cannot have a click and dblclick event handler attached on the same element because when you dblclick both the events are going to be triggered. In order to make it work there are few work arounds.
This might help you
Need to cancel click/mouseup events when double-click event detected
Looking at your problem there is a simple solution. In the click event handler once it is clicked set a disabled attribute or some class name(disabled). In the handler before exectuing your code checck for this attribute or class name. If it exists then dont do anything. After sometime remove this attribtue or class name. Try this
$("selector").click(function(){
var $this = $(this);
if(!$this.hasClass("disabled")){
//Do you stuff here
$this.addClass("disabled");
setTimeout(function(){
$this.removeClass("disabled");
}, 200);
}
});

JavaScript would do that for you.
DOMElement.ondblclick = (function () {return false;})();