I'm trying to get this to work:
if($('#myDiv').hover() == false) {
myFunction();
}
Not getting much in the way of errors in Chrome or Firebug consoles. I've had a look at some other posts, and there was an answer that used something like:
if($('#myDiv').is(':hover') == false) {
myFunction();
}
However this also doesn't work.
Here's a jsfiddle if that helps: http://jsfiddle.net/yuwPR/2/
Any ideas greatly appreciated.
Thanks
EDIT:
Thanks for the answers, I wasn't able to get anything working. I'm thinking it might not be possible. Oh well, I'll try something else!
Thanks again
p.s. Most inventive answer marked as right and upvotes all round.
Without knowing your ultimate intent, you could wire up a hover on the document and check the current target.id
$(document).mouseover(function(event) {
if (event.target.id == "myDiv") {
$("body").css("background-color", "red"); //over the div so change the color
return;
}
$("body").css("background-color", "green"); //no on the div
});
code example on jsfiddle.
This code sample sets up a global js variable to store the hover state of the div. Then I use jquery hover to toggle that between true / false. Then, we just fire off a function every 10ms that checks the hover state. Currently I am just setting the window status telling you if you're hovered or not.
var _MOUSEOVER_IN_PROGRESS = false; //stores the hover state
function isover(){
if(_MOUSEOVER_IN_PROGRESS){
window.status = 'Still over!';
} else {
window.status = 'You are not hovering on me!';
}
setTimeout("isover()",10); //checking every 10ms!
}
$(document).ready(function(){
isover();
$('#mydiv').hover(
function(){ _MOUSEOVER_IN_PROGRESS = true; },
function(){ _MOUSEOVER_IN_PROGRESS = false; }
);
});
Edited my code! My mydiv hover catch was not wrapped in a document ready
The hover function takes 2 callback functions:
('#myDiv').hover(function () {
// function to call when hovering
},
function () {
myFunction();
}
);
So, when hovering is "false", ie, on mouse out, the second function will be called.
If you're only interested in doing something when the hover stops, you can use the mouseout() function:
$('#myDiv').mouseout(function() {
myFunction();
}
);
Your first call could never work:
$('#myDiv').hover()
This actually says "trigger the hover event on the element". It does not check to see if your user is currently hovering over the element.
Your second formulation should work:
$('#myDiv').is(':hover')
This checks to see if the element currently has the mouse hovering over it. However, it doesn't seem to work on document load. An example that works can be seen here. If you can clarify what you're trying to do, it might be possible to find some working code in this style.
Related
Hi I would like to detect whether an element is visible or hidden. I thought about this
$("#mobile_navbar:visible").change(function() {
console.log("detected")
});
but this does not seem to work...? Any ideas how to do this? Basically I what to check whether $("#mobile_navbar").is( ":visible" ) has changed... but I want that a function is called whenever that happens, lick the .click() function which gets triggered if an element is clicked on.
thanks
carl
If you want to check that the element is visible on the screen, you can do like this :
if($(selector).css('visibility') == 'hidden') {
doSomething
}
else{
doSomethingElse
}
var isVisible = $("#mobile_navbar").css('display');
if(isVisible != 'none') {
console.log("detected")
};
In my code I use the jQuery/CSS to set and unset the 'wait' mouse cursor with the following code:
function setWaitCursor() {
$('body').css('cursor', 'wait');
}
function setDefaultCursor() {
$('body').css('cursor', '');
}
I use this code to change the mouse cursor for a long operation:
setWaitCursor();
... do stuff that takes a few seconds ...
setDefaultCursor();
This code doesn't seem to work unless you move the mouse, however (at least for Chrome on Win 10). If the mouse is not moved after setDefaultCursor is called, the cursor displays the 'wait' cursor until the mouse is moved (or vice versa).
Example: https://jsfiddle.net/antonyakushin/0jv6rqkf/
In this fiddle, the cursor changes for 2 seconds after the link is
clicked. If you don't move the mouse when you click the link, the
cursor does not change.
What is the best way to resolve this issue, so that even if the mouse is not moved the cursor is changed?
Although this is not the answer to this specific problem, this behavior can happen:
On Chrome
With DevTools open (which is very likely, in order to debug this issue)
The solution is simply to close the Chrome DevTools.
Some elements have default cursor styles. So wile changing the cursor style we need to change that too.
$(document).ready(function() {
function setWaitCursor(elem) {
elem.css('cursor', 'wait');
$('body').css('cursor', 'wait');
}
function setDefaultCursor(elem) {
elem.css('cursor', '');
$('body').css('cursor', '');
}
$('#testLink').on('click', function() {
var x = $(this)
setWaitCursor(x);
setTimeout(function() {
setDefaultCursor(x);
}, 5000);
return false;
});
});
Demo fiddle
Just change the body to *. It will be applicable to all the elements.
Fiidle Demo
Code snippets:
$(document).ready(function() {
function setWaitCursor() {
$('*').css('cursor', 'wait');
}
function setDefaultCursor() {
$('*').css('cursor', '');
}
$('#testLink').on('click', function() {
setWaitCursor();
setTimeout(function() {
setDefaultCursor();
}, 2000);
return false;
});
});
body {
min-width: 500px;
min-height: 500px;
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="mouseContainer">
Test Link
</div>
I think I solved it! Just call setTimeout() after you change the cursor. For example
$('body').addClass('in-progress-cursor');
setTimeout(null, 0); //in typescript we need to provide arguments
This is well-known trick (Why is setTimeout(fn, 0) sometimes useful?) but I didn't expect this would work in this case.
This is my favorite method of telling user unobtrusively that there is something going on. For example I use it to indicate that http requests are in progress. It is such a relief that the solution is found. Why I feel stupid again...
Actually I see the timeout in John R's answer now. But it is not evident enough.
I had the same problem and I noticed on another post cursor won't change until mouse moves that they had suggested doing a blur and focus to fix this. It worked for me. So, your setWaitCursor() should look something like this. That should force it to change without the mouse move. It worked for me in Chrome, but haven't tried other browsers.
function setWaitCursor(elem) {
elem.css('cursor', 'wait');
$('body').css('cursor', 'wait');
window.blur();
window.focus();
}
I wanted to create a checklist that would move a slider as the user ticked boxes. I found the following 2 pieces of code:
http://jsfiddle.net/t2nvft7q/
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
});
And then I found this which is more like what I want to do and based on the first one:
http://jsfiddle.net/ezanker/UznQe/
But on the second one if you click one of the boxes, untick it and then tick it again it stops working?
As far as I can tell it's because of that bit of code above. I've commented out things and moving them around to see what runs first, I've tried replacing parts of the second fiddle with the first and as far as I can tell the only difference between the html / css is the second has a value field on the checkboxes but editing this doesn't have any effect.
Could someone point out what I'm missing?
You shouldn't use .attr to set the checked property, use .prop instead. .attr is for setting attribute on the element, and .prop is for settings properties.
Example (JSFiddle):
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').prop('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
You should use .prop, but for the check itself I would just use .hasClass()
Since the code already gives the clicked element the class of checked, there's really no reason to look any deeper than the clicked element which you already have as $(this).
See this working example:
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).hasClass('checked')) { // here use `.hasClass()` for the check
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').prop('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
// .....
});
I need to make a div so that when the cursor hovers over it then I can detect it (using javascript) but I want to make it so that you can click through the div to the elements underneath. Is there a way to do this?
Thanks
Edit
As far as I'm aware, and through my quick searches, I do not believe that you are able to do this, if you can it wouldn't be easy and or very practical I wouldn't think.
old
Using jQuery:
$(document).ready(function(){
$("body").on("hover", "div", function(){
//do whatever you want on hover
});
$("body").on("click", "div .child-class", function(){
//do whatever on click
});
});
If this doesn't answer your question and do what you want, let me know what more specifically why it doesn't.
There are multiple solutions for this depending on your problem.
I will start with some assumptions:
1. You are the owner of the page (you know what happens there);
2. You know what element is beneath the clicked element.
For this case check this code:
//function executed when you click on element with id: beneath
function clickOnBeneath() {
alert("beneath click");
}
//function executed when you click on element with id: above
function clickOnAbove() {
var beneathEl;
beneathEl = document.getElementById("beneath");
beneathEl.click();
}
//attach click event on element with id: above and beneath
function attachClickOnElements() {
var aboveEl,
beneathEl;
aboveEl = document.getElementById("above");
aboveEl.addEventListener("click", clickOnAbove, false);
beneathEl = document.getElementById("beneath");
beneathEl.addEventListener("click", clickOnBeneath, false);
}
attachClickOnElements();
and also working example: http://jsfiddle.net/darkyndy/xRupb/
If you don't know what element is beneath it then I will try to find some code as I wrote a couple of years back something like this, as start point you can check getClientRects() function that is available on HTML elements (documentation: https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects )
How would I slideUp() the content only when '.areaCodeList' is clicked a second time?
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideDown();
($this.die());
$('.churchList').slideUp();
});
You should use slideToggle()
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideToggle();
});
Example
You may use some class to indicate it already clicked before running the code
$(".areaCodeList").on('click', function() {
if (!$(this).is('.clicked')){
$(this).addClass('clicked');
return false;
}
$(this).next('.churchList').slideDown();
$(this).die();
$('.churchList').slideUp();
});
You also may consider using attributes ($(el).attr('clicked')) instead of class and check for it later in a similar way.
Update:
The question title is really confusing and it seems that only many of us (answering the question) don't got it from the start:
Initially I got it like this:
Slide the element up if it clicked for the second time.
If it's the case than the sample I've provided is correct.
But it looks like the question is more like this:
Slide the element down on every even click and slide it up on every odd click.
If this is the case that slideToggle is the solution (as explained in epascarello's answer)
You can check if the .churchList is visible (slided down):
$(".areaCodeList").on('click', function() {
if( $(this).next('.churchList').is(':visible') === true){
$(this).next('.churchList').slideUp();
}else{
$(this).next('.churchList').slideDown();
}
});