This is my sample code. Below I explain my problem:
<script type="text/javascript" src="jquery.min-1.10.1.js"></script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function () {
$("a").mouseover(function (){
$("a").animate({color: "#eee"});
});
$("a").mouseleave(function () {
$('a').animate({color: '#000'});
});
});
</script>
Hover Me
Explanation:
When I hover over an item once this is executed consecutively every time you pass the mouse and I would like not to run again while doing an action. What I can recommend for this?
First of all, chain your events and use on, next add .stop(stop, stop):
$(function () {
$("a").on('mouseover', function (){
$(this).stop(true, true).animate({color: "#eee"});
}).on('mouseleave', function () {
$(this).stop(true, true).animate({color: '#000'});
});
});
Demo: http://jsfiddle.net/maniator/bktUt/
please use some logical thing:
Declare a variable in $(document).ready function.
var i = 0;
var j = 0;
$(function () {
if(i==0){
i=1;
$("a").mouseover(function (){
$("a").animate({color: "#eee"});
});
}
if(j==0){
j=1;
$("a").mouseleave(function () {
$('a').animate({color: '#000'});
});
}
});
}
});
YOu are using the correct exit event of mouseleave, but you are not using the correct enter event. You should be using mouseenter which does not fire multiple times.
.mouseenter( handler(eventObject) )
Description: Bind an event handler to be fired when the mouse enters
an element, or trigger that handler on an element.
Also as Neal pointed out, you should also use stop in case the leave/open animation is firing when the user exits/enters the element.
Related
I am trying to make a system that would require an admin to click a delete button twice before it fires the action. if he focusout of the button, it resets.
$(".unarmed").css("filter", "grayscale(1)").removeClass("armed").click(function(e) {
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
$("body").on("click", ".armed", function() {
alert("boom");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="plus.png">
I've seen jQuery event listener fires before selector applied? but adding e.stopPropagation() causes the second click to not fire.
when e.stopPropagation() is not in the code, it does fire the second click, but together with the first click (i think this means the problem is not with the second click selector)
here is a fiddle with e.stopPropagation():
https://jsfiddle.net/3jyr72t6/
also, if you have suggestion for making it prettier, i'm open for suggestions :D
#icecub answer as snippet:
$(document).ready(function() {
$(".unarmed").css("filter", "grayscale(1)");
$(".unarmed").click(function(e) {
if ($(this).hasClass("armed")) {
console.log("boom");
}
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://kns.im/include/img/plus.png" style="width:50px">
You can always just use the jquery dblclick event. Jquery dblclick
$(document).on("dblclick",".btn-delete",function(){
console.log("DELETE");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-delete">DELETE</button>
You can use a simple function to detect click outside the element .. See the next example
$("img.unwait").on("click" , function(e){
let $this = $(this);
if($this.hasClass("unarmed")){
$this.removeClass("unarmed").addClass("armed");
}else if($this.hasClass("armed")){
alert("BOOM");
$this.removeClass("armed").addClass("unarmed");
}
});
detect_click_out(".armed" , function(){
$(".armed").removeClass("armed").addClass("unarmed");
});
function detect_click_out(element_selector , action){
$(document).on('click',function(e){
if (!$(element_selector).is(e.target) // if the target of the click isn't the container...
&& $(element_selector).has(e.target).length === 0) // ... nor a descendant of the container
{action();} // run the action as a function
});
}
img{
width : 50px;
}
.unarmed{
filter : grayscale(1);
}
.armed{
filter : grayscale(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://png.pngtree.com/element_our/sm/20180515/sm_5afb099d307d3.jpg">
I created this slider and I want to mouse over action on numbers jquery but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.
thanks
jsfiddle version: http://jsfiddle.net/BijanZand/cmqkc59b/
Here is the current code:
function tabsrotate() {
$("#slider_a, #slider_b").tabs({
show: function (event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top);
}
$(ui.panel).hide().fadeIn(1500);
if (lastOpenedPanel) {
lastOpenedPanel.toggleClass("ui-tabs-hide").css("position", "absolute").css("top", "0").fadeOut(1500, function () {
$(this).css("position", "");
});
}
$(this).data("lastOpenedPanel", $(ui.panel));
}
}).tabs('rotate', 7777, true);
}
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
});
You can attach a mouseover event to your anchor using jQuery and inside this event trigger the anchor click:
Your $(document).ready will look like this:
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
$('.tabnavigation li a').mouseover(function(){
$(this).click();
});
});
I have a table that is generated by a Kendo Scheduler.
I have to add a click function on each td on document load.
For now, I have tried this:
$(document).ready(function () {
$('td.k-nonwork-hour').click(function () {
alert("Hello");
});
});
For adding a onclick function. I have also tried with onclick
$(document).ready(function () {
$('td.k-nonwork-hour').onclick =function () {
alert("Hello");
};
});
But none of them works. Anyone knows a solution? :)
Better use delegated event instead of attaching event handler to each cell.
e.g.
scheduler.wrapper.on("click", "td.k-nonwork-hour", function() {
alert("Non working day!")
});
Here is live example.
scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function(e) {
var target = $(e.currentTarget);
if (target.hasClass("k-event")) {
var event = scheduler.occurrenceByUid(target.data("uid"));
scheduler.editEvent(event);
} else {
var slot = scheduler.slotByElement(target[0]);
scheduler.addEvent({
start: slot.startDate,
end: slot.endDate
});
}
});
I've built a dropdown menu that uses a slideUp event if the menu itself or anywhere in the body is clicked:
$('html, .currentPage').click(function() {
$('.currentMenu').slideUp('fast', function() { myFunction(); });
});
I also have a function inside the slideUp event callback.
However, my problem is that the function is being called on html or .currentPage click whether the slideUp event has occurred or not.
How can I make it so the function(); ONLY happens if the slideUp event runs?
$('html, .currentPage').click(function() {
var $currentMenu = $('.currentMenu');
if($currentMenu.is(':visible')) {
$currentMenu.slideUp('fast', function() { myFunction(); });
}
});
even more
$('html, .currentPage').click(function() {
var $currentMenu = $('.currentMenu');
if($currentMenu.is(':visible')) {
$currentMenu.slideUp('fast', myFunction);
}
});
You can also optionally use $currentMenu.css('display') != 'none' instead of $currentMenu.is(':visible').
The options are suggested based on the actual behaviour of slideUp(), described in the official documentation at http://api.jquery.com/slideUp/.
$('.currentMenu').slideToggle('fast', function() { myFunction(); });
You could add class open to your menu and slideUp() if hasClass('open'):
if ( $menu.hasClass('open') ) {
$menu.slideUp('fast', function(){ });
...
}
question from a beginner..
I want to show/hide an inner div when the mouse enter/out from the parent div. I tried first with onmouseover, onmouseout events, but the problem is that onmouseover keep firing while the mouse over the div, and I want it to fire one time only.
I found JQuery events that might help me, but I don't know where can I put this code because my divs exist in a template for a control, and there is no onload event for the div.
<script type="text/javascript" language="javascript">
// Where should I call this !!!
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Any help!
You can use mouseenter and mouseleave events.
You can put your code in the and bind your with these events.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
Init('.your_div_class');
});
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Thanks for everybody. as YNhat said, I have to use classes instead of Ids. and this is the code that I used and it's work well.
$(document).ready(function () {
InitEntities();
});
function InitEntities() {
var parentDiv = $(".parentDivClass");
parentDiv.each(function (index) {
var childDiv = $(this).children(".childDivClass");
$(this).bind("mouseenter", function () {
$(childDiv, this).show(250);
}).bind("mouseleave", function () {
$(childDiv, this).hide(250);
});
});
}
css
.parent_div .inner_div
{
display:none;
}
.parent_div:hover .inner_div
{
display:block;
}
This is what I use in a script.
Once the document is fully loaded ($(document).ready) the mouseover event is bound.
I then unbind the event when I'm in it (to prevent it from spamming the event) and bind the mouseleave event.
$(document).ready(function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
function showLoginForm() {
$("#loginformwrapper").unbind("mouseover", showLoginForm);
$("#loginform").animate({
top: '+=80'
}, 1000, function() {
$("#loginform").bind("mouseleave", hideLoginForm);
});
}
function hideLoginForm() {
$("#loginform").unbind("mouseleave", hideLoginForm);
$("#loginform").animate({
top: '-=80'
}, 1000, function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
}
Use this:
<script type="text/javascript">
$(function(){
var mydiv = $("#parent_div_id");
$(mydiv).bind("mouseenter", function () {
$(mydiv.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(mydiv.childNodes[1], this).hide(500);
});
});
</script>
replace the "parent_div_id" with the id of your parent div