Develop Reference

Why document selector doesn't work for mouseenter event?

Here is my code:
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>
It works fine. But in reality, the content (those tags) will be created later. I mean they will be created as an ajax response. So $('a') doesn't select them.
Now I'v written it like $(document).bind('mouseenter', 'a', function(){ ... }) to make that working even for the DOM which is created after page loading.
But as you see in this fiddle, it doesn't work. Does anybody know what's the problem and how can I fix it?

You need to bind the event with .on(). This works for future elements as well.
$(document).on('mouseenter', 'a', function(){ ... });
And, as #Gregg has answered, .bind() has been replaced by .on(). That's the actual cause why your fiddle doesn't work.

The on() function has replaced bind() since jQuery 1.7. If you read the documentation, you'll note that live() was actually used for delegate events like what you're trying to achieve while the bind() method was not; binding events to elements that will be added to the DOM later. The on() function can do this. Either from the document itself or from a direct descendent.

When anchor tag are being created in response of your AJAX call, put id in it like this:
$('body').append("<div class='tag_info' id='myTag'>Some explanations about "+tag_name+"</div>");
and then you can bind event mouseenter or mouseleave like this:
$('#myTag').bind('mouseenter', function(){
alert('Mouse Enter in your Anchor Tag');
}).bind('mouseleave', function(){
alert('Mouse leave');
});

jquery and hammer.js ghost click when panning

I'm using jQuery 191 and Hammer JS 204. I have the following example scenario
<div> class="myDiv">
<div class="content">
<img>
</div>
</div>
Example JS
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
});
$('.content img').on('click', function(){
console.log('i was clicked');
});
When I click on the image to start panning myDiv, Right after panend, the myDiv img click event gets fired.
I've tried to stopPropagation and stopImmediatePropagation but still couldn't get it to stop firing the click after i finish panning.

var hammering = false;
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
}).bind("panstart", function(h) {
hammering = true;
}).bind("panend", function(h) {
setTimeout(function(){
hammering = false;
}, 300);
});
$('.content img').on('click', function(){
if(hammering) return false;
console.log('i was clicked');
});

Another way to avoid this ghost click is to create a pseudo class over the hammer target.
for example you can add class and the style something like
`.block:after {
content: " ";
background: transparent;
top: 0;
left: 0;
width: 250px;
height: 100%;
z-index: 2;
display: block;
position: absolute;
}`
when panstart and remove it when panend.
hope this trick will help others.

I find out a easy way could prevent click event while hammer.js panning:
disable div pointer-events while pan start, then enable it while pan end.
...
myPanGesture.on("panstart", function(ev) {
$(".tab-pane.active").css({'pointer-events':'none'});
});
...
myPanGesture.on("panend", function(ev) {
$(".tab-pane.active").css({'pointer-events':'auto'});
});
...

How to merge two scripts and trigger them both at once?

I am writing an website from the scratch probably for the first time and I am stucked in javascript.
My idea is to trigger the link by a click which will run two javascripts at once.
Here is the situation:
Link to click:
<li><p class="button">VIDEO</p></li>
Iframe as a target:
<li><iframe width="800px" height="1000px" frameBorder="0" name="iframe"></iframe></li>
js 1:
<script>
$('.button').click(function () {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('#zelena').stop().animate({
left: 151
});
} else {
$('#zelena').stop().animate({
left: -649
});
}
});
</script>
js 2:
<script>
$(".button").on("click", function() {
$(this).toggleClass("underline");
$(".button").not(this).removeClass("underline");
});
</script>
here I uploaded the whole website: http://www.filedropper.com/mgwebslidefinaliframe
(The problem is that I have to click 2 times at "VIDEO" link/button to show the iframe content and that´s the problem, because on the second click It should close like It´s doing right now. So we can´t see the iframe content because of the no needed second click...
Thanks in advance for any help.

$('.button').on('click', function () {
$(this).toggleClass('active underline');
$(".button.underline").not(this).removeClass("underline");
if($(this).hasClass('active')) {
$('#zelena').stop().animate({
left: 151
});
} else {
$('#zelena').stop().animate({
left: -649
});
}
});

You have added the reference to the button. Just add the following attribute to your iframe tag: src="video_iframe.html" and remove the a tag added to the button. I think this should solve your issue.

Bootstrap: Link stays selected after click

Code:
<h1>link</h1>
<script>
$("a").click(function (e) {
e.preventDefault();
});
</script>
http://jsfiddle.net/U7Y3r/
After the link has been clicked, it keeps a small border:
I have seen this under Firefox and Internet Explorer 10. Does not occur under Chrome or without Bootstrap.

This is outline property, you can set it to none:
a:focus { outline: none }
http://jsfiddle.net/Uqzqy/1/

Try this:
$("a").click(function (e) {
e.preventDefault();
$(this).css("outline", "none");
});

It's also possible (and probably a bit cleaner) to simply remove the link focus using $.fn.blur:
$("a").click(function (e) {
$(this).blur();
e.preventDefault();
});
http://jsfiddle.net/U7Y3r/4/

This works fine
$("a").click(function (e) {
e.preventDefault();
$("a").css("text-decoration","none");
});
http://jsfiddle.net/U7Y3r/1/
to get back the same effect, again, http://jsfiddle.net/U7Y3r/2/

Actually you don't need any javascript. You need to just set "a" on "focus" to "outline: 0;"
/* CSS */
a: focus { outline: 0; }
// SCSS
a {
&:focus {
outline: 0;
}
}

toggle- hide item when click outside of the div

I am using jquery's slidetoggle, want to learn how to make the showup class hide when click anywhere outside of the DIV.
thanks!
Online SAMPLE: http://jsfiddle.net/evGd6/
<div class="click">click me</div>
<div class="showup">something I want to show</div>​
$(document).ready(function(){
$('.click').click(function(){
$(".showup").slideToggle("fast");
});
});​
.showup {
width: 100px;
height: 100px;
background: red;
display:none;
}
.click {
cursor: pointer;
}
​

Stop event propagation from within the .showup area:
$(document).on("click", function () {
$(".showup").hide();
});
Then prevent those clicks on .showup from bubbling up to the document:
$(".showup").on("click", function (event) {
event.stopPropagation();
});
Any click event that reaches the document will result in the .showup element being hidden. Any click events that start from within .showup will be prevented from proceeding any further up the DOM tree, and thus will never reach the document.
You will also need to stop any clicks on your button from traveling up to the document as well:
$(".click").on("click", function (event) {
event.stopPropagation();
$(".showup").slideToggle("fast");
});
Otherwise that click event will bubble up to the document and result in the hiding of .showup immediately.
Demo: http://jsfiddle.net/evGd6/2/

If you still want to record clicks on .showup panel (lets say you want it to be more then a simple informative panel), calling event.stopPropagation() on clicking it will make that panel untouchable/useless. Use event.cancelBubble = true instead and will let the event occur on .showup childs.
$('.click').click(function(){
$(".showup").toggle();
});
$(".showup").on("click", function (/*nothing here*/) {
event.cancelBubble = true
});
$(document).on("click", function () {
$(".showup").hide();
});