Develop Reference

Stop jQuery from running when mouse is hovering over box on page load

I have this jQuery:
jQuery('.slidey').on('hover',function(){
if (jQuery(window).width() > 1151) {
jQuery(this).children('.post-content').stop().slideToggle(180);
}});
However, I'm encountering an issue where if I load the page, and my mouse is already in the position of the sliding box, then the box will slide up and the toggle will be reversed... So - the toggle state I want to show when I hover shows when I don't hover, and it is hidden when I do, rather than the other way round..!
How can I get the jQuery to ignore the mouse if it is already positioned over it on page load to stop this toggle from being reversed? I've had a look around at other questions on here and the solutions don't seem to work.
Hope you can help.

Given the specification for .hover here, I would recommend using BOTH the hoverIn and hoverOut and then instead of using slideToggle, use slideDown and slideUp such as:
jQuery('.slidey').hover(
function(){
if (jQuery(window).width() > 1151) {
jQuery(this).children('.post-content').stop().slideDown(180);
}
},
function(){
if (jQuery(window).width() > 1151) {
jQuery(this).children('.post-content').stop().slideUp(180);
}
}
);
Also, found here See Additional Notes:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

jQuery Click Event Triggering On Multiple Elements (I only want 1)

When my overlay comes up, everything works well, but I added some code to close out the overlay, but this code gets triggered even when I'm just clicking my arrows. The following is the code that's being triggered, which is fine when I'm not clicking the arrows to change the image. But when I click the arrows, the background which is the overlay is also being trigger, so the image is changing but the overlay is also hiding.
$('#overlay').click(function() {
$(this).fadeOut('slow');
});
How can I be able to use the arrows without it also clicking on the background overlay? If you open up the project, you will see what I'm saying.
To open the project:
https://htmlpreview.github.io/?https://github.com/rodriguesandrewb/photo_gallery_v1/blob/master/index.html
To open the repository:
https://github.com/rodriguesandrewb/photo_gallery_v1

You want to use event.stopPropagation(): https://api.jquery.com/event.stoppropagation/
This prevents the event from bubbling (being triggered by other elements)

Your outter most element is #overlay. It means that no matter where you click you'll be always clicking on your #overlay element. That is way your callback is being always triggered and closing your image.
To fix your problem and make your image close only when clicking on it you could use:
$('#changeImage').click(function() {
$(this).closest('#overlay').fadeOut('slow');
});

Ok, there's a ton of code to sort out, so I'm guessing your overlay is
<div id="overlay" style="display: block;"></div>
and your event.target is deep down inside this:
<div class="mainCenter">
<div class="container">
<div id="topFixed">
<input type="text" id="search" placeholder="Search">
</div>
<ul id="gallery">
.......
I'm not 100% sure where your event.target is, (the element you want to click and not everything else). But it's safe to assume that after you click your intended button, the event continues to bubble up the event chain. The event chain is basically your event.target's ancestors which includes#overlay` which is at the very top of the event chain.
To prevent event bubbling (btw bubbling is the default behavior but in instances such as your's it's not desired.) try placing stopPropagation() after or inside at the end of your event handler.
I wish I could be more specific as to where and how to apply this code as it pertains to your source, but you didn't provide the specific areas that concern your eventListeners, eventHandlers, etc...
The #overlay is used in this example but I suggest you use the event.target parent instead. The purpose of this code is to accept an event like 'click' on an element (i.e. button) or multiple elements (i.e. buttons) through their mutually shared parent. That's one place to click for potentially several different buttons. At first you'd think that's non-sense and you'd say, "Sure that button is clicked because the parent was clicked, but now everything the parent is chained to will trigger everything else."
That would be correct except we have stopPropagation(); at the very end of your eventHandler. That will stop propagation of the event bubbling back up the event chain, so there's no more rogue triggers lighting up everywhere. Rogue Triggers® sounds like a great band name. :P
For details and a much better explanation: http://www.kirupa.com/html5/handling_events_for_many_elements.htm
var overlay = document.querySelector("#overlay");
theParent.addEventListener("click", doSomething, false);
function doSomething(e) {
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
alert("Hello " + clickedItem);
}
e.stopPropagation();
}

Can we detect whether a link was clicked within a DIV that has a jQuery.click()?

I'm wondering whether there is an easy way to detect a click on a link that appears within a div on which I want to handle clicks...
So, there is an simple example of HTML code:
<div class="checkmark">
<div class="box"> </div>
<div class="label">Checkbox label possibly with an anchor.</div>
</div>
So in this example, I use a set of <div> tags to create a checkmark. The "box" is where I show a little square and when checked, also show the checkmark (a red cross, for example.)
To make the checkmark work as expected, I use jQuery and capture mouse clicks on the main <div> tag:
jQuery("checkmark").click(function(e){
e.stopPropagation();
e.preventDefault();
jQuery("box", this).toggle("checked");
});
Pretty easy, that works great (the "checked" class is enough to show a checkmark since that can be defined using CSS.)
However, as we can see in the example, the "label" includes an anchor. If I click the anchor, the jQuery I just presented runs, but the anchor does nothing. If I remove the stopPropagation() and preventDefault() the anchor gets clicked, but the checkmark is toggled too.
What I'm wondering is: is there an easy way to check whether the propagation would trigger the anchor and in that case just ignore the click in the "checkmark" code?
Something like that:
jQuery("checkmark").click(function(e){
if(!(anchor.clicked())) // how do we do this?
{
e.stopPropagation();
e.preventDefault();
jQuery("box", this).toggle("checked");
}
});
P.S. I do not know whether there are anchors in the label. So the discovery has to happen in the click() function (unless there is a better setup and that "if" could happen differently).
Note: here I show a target="blank" parameter. In the real deal I will actually open a popup, but that doesn't really make a difference here.

This is what event.target is for.
For example, in this case:
if($(e.target).is("a")) {
// It was the anchor element that was clicked
}
jsFiddle here

You can just add this handler:
jQuery("checkmark a").click(function(e){
e.stopPropagation();
}
It will stop the click event from bubbling from the link to the div, so the link will be activated, and the event never reaches the div where it would be stopped.

You could use the event delegateTarget property to see which DOM element triggered the event.
if($(e.delegateTarget).is("a"))
// execute code

Bootstrap - Icon toggle with jquery

I got a little problem trying to toggle an icon of Bootstrap. When i run code it does what expected the first time you click on the icon it toggle's, but when i click again it doesn't change. Here its my code and any help will be appreciated!
<a><i class="icon-plus"></i></a>
<script>
$(".icon-minus").click(function(){
$(this).removeClass("icon-minus").addClass("icon-plus");
});
$(".icon-plus").click(function(){
$(this).removeClass("icon-plus").addClass("icon-minus");
});
</script>
Update 1:
This icon is for a collapsible menu and the code of that can be found here :)

jsBin demo
$(".icon-minus, .icon-plus").click(function(){
$(this).toggleClass("icon-minus icon-plus");
});
Or this if you dynamically create your elements:
$("#parent_el_NOT_dyn_gen").on('click','.icon-minus, .icon-plus',function(){
$(this).toggleClass("icon-minus icon-plus");
});

The jQuery's selector selects DOM elements then applys the click handler to them. It's not re-evaluating the selector after you change the classes on the element.
You probably want the delegate() / on() method from jQuery to dynamically change the the handler that's fired when the item is clicked. Delegate works with event bubbling and will handle the click and evaluate if the source of the click matches the selector (at the time of the click) as opposed to the .click() which attaches the handler directly, once (at the time of page-load or whenever the code was ran).
Another solution is to change the handler somehow, either by evaluating what class is on the existing element or using toggleClass() which will check for a class then invert it.
$(".icon-minus, .icon-plus").click(function() {
var $this = $(this);
if ($this.hasClass("icon-plus")) {
$this.removeClass("icon-plus").addClass("icon-minus");
return;
}
if ($this.hasClass("icon-minus")) {
$this.removeClass("icon-minus").addClass("icon-plus");
return;
}
});
This method will be slightly faster than using on() / delegate() because it's handled at the root handler and not bubbled & checked afterwards. It's also not susceptible to any breaks in the event bubbling. (ie. event.stopPropagation())

Simple solution worked for Bootstrap 3.
$('[data-toggle="collapse"]').click(function(e) {
$(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});

Show a picture when mousemove over a text with jquery?

do you know any tutorial or script that shows a picture when mousemove over a html text?

A basic example using jQuery would be something like this:
CSS
#myImage {
display:none;
}​
HTML
<span class='pictureTrigger'>some text</span>
<img id='myImage' src='/path/to/image' />​
jQuery
$(function() { // Makes sure DOM loads before code is run
$('.pictureTrigger').hover( // Assign event handlers for mouseenter/mouseleave
function() { $('#myImage').show(); }, // Find myImage and show it on mouseenter
function() { $('#myImage').hide(); } // Find myImage and hide it on mouseleave
);
});
​It's hard to give a better answer without more specifics in the question.
The basic idea is that the text is contained in a span, which has a class called pictureTrigger. Could be named anything, though.
A hover event (which is actually shorthand for two events, mouseenter and mouseleave) is added to all elements with the pictureTrigger class.
The two functions represent the mouseenter and mouseleave events respectively. The event handler functions find the img with the ID myImage, and show/hide it.
Relevant jQuery docs:
.show() - http://api.jquery.com/show/
.hide() - http://api.jquery.com/hide/
.hover() - http://api.jquery.com/hover/

Google for tooltip plugin. There's a lot of them.