Is there a jquery/js script that will listen for an onHover event?
I'm building a listening library and we want to include the ability to help the website owner detect when a user initiates an onHover event - so they know it was taking the attention of their visitor/user.
Listen for onHoverStart (when they mouse on an element that has an onHover associated with it) & onHoverEnd (when they mouse away from the element).
This is a simple example which works with onmouseenter and onmouseleave I modified from http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
When a user hovers the image gets bigger. When hovering stops the image returns to normal size. You can also customize the function to do what ever you want onmouseenter and onmouseleave
<!DOCTYPE html>
<html>
<body>
<img onmouseover="WhenUserHovers(this)" onmouseout="WhenUserStopsHovering(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function WhenUserHovers() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function WhenUserStopsHovering() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function WhenUserHovers(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function WhenUserStopsHovering(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Also you can make use of jQuery (a javascript library) mouseenter and mouseleave http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
Or jQuery's mouseover and mouseout http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseover_mouseout
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
The difference between jQuery's mouseenter/mouseleave and mouseover/mouseout is mouseenter works when the mouse pointer enters the selected element while mouseover works when the pointer enters the element or any child elements of the element.
to detect the hover with jquery use this
$("selector").hover(function(){
//do something when it is hover
},function(){
//do something when you lose hover
});
you can read more about this here https://api.jquery.com/hover/
Related
I've looked at similar questions and answers on Stack Overflow which I can't get to work. everything is find when the page loads but when I mouse over it doesn't show the new gif.
When inspecting the code in the browser it seems to be switching between the two images.
<!DOCTYPE html>
<html>
<head>
<script>
function normalImg() {
document.getElementById("smile").src = "/smiley.gif"
}
function singing() {
document.getElementById("smile").src = "/sing.gif"
}
</script>
</head>
<body>
<img onmouseout="normalImg()" border="0" src="smiley.gif" alt="Smiley" width="32" height="32" id="smile"
onmouseover="singing()" border="0" src="sing.gif" alt="singing" width="32" height="32">
<p>onmouse out and onmouseover changing images</p>
</body>
</html>
you should have only one src attribute inside < img /> tag, you could try the code below:
<!DOCTYPE html>
<html>
<head>
<script>
function singing() {
document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/0/06/180717_%EC%97%B4%EB%A6%B0%EC%9D%8C%EC%95%85%ED%9A%8C_%ED%8A%B8%EC%99%80%EC%9D%B4%EC%8A%A4_%2818%29.jpg"
document.getElementById("smile").alt="smiling"
}
function crying() {
document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png"
document.getElementById("smile").alt="crying"
}
</script>
</head>
<body>
<img onmouseover="singing()" onmouseout="crying()" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png" alt="singing" width="100" height="100" id="smile">
<p>onmouse out and onmouseover changing images</p>
</body>
</html>
You don't need the / at the start of your path to gif.
Replace
document.getElementById("smile").src = "/smiley.gif"
with
document.getElementById("smile").src = "smiley.gif"
Same for the sing.gif
Instead of using javascript to change image source on mouseout and mouseover, it will be better to change image source on based on just hover.
Check this out:
CSS: Change image src on img:hover
Hover handles both a mouseenter event and a mouseleave event.
Mouseover is best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. If you want to trigger some event on the element.
I'm having a problem with disable scrolloing on iframe of Google My Maps (custom maps). Since this has also clickable events I cannot use CSS "pointer-events:none". I tried also "scrolling:no" on the iframe itself, but both this methods doesn't work. I finally use a javascript as.
<script>
$(".map").bind("mousewheel", function() {
return false;
});
</script>
And it works, but when I click in one of the links start scrolling again. How can I disable scrolling definetly but still use the clickable events.
A working example:
<!DOCTYPE html>
<html>
<head>
<style>
.scrolloff {
pointer-events: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#map').addClass('scrolloff'); // set the mouse events to none when doc is ready
$('#overlay').on("mouseup",function(){ // lock it when mouse up
$('#map').addClass('scrolloff');
//somehow the mouseup event doesn't get call...
});
$('#overlay').on("mousedown",function(){ // when mouse down, set the mouse events free
$('#map').removeClass('scrolloff');
});
$("#map").mouseleave(function () { // becuase the mouse up doesn't work...
$('#map').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
// or you can do it on some other event
});
});
</script>
</head>
<body>
<div id="overlay" class="map">
<iframe id="map" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
&q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>
</body>
</html>
Live demo: http://kylelam.github.io/iframe.html
I don't quite understand what this does
I read the rather official short documentation on it
https://api.jquery.com/event.relatedTarget/
Description: The other DOM element involved in the event, if any.
For mouseout, indicates the element being entered; for mouseover, indicates the element being exited.
I looked at the w3schools example on it
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_relatedtarget
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div, p").mouseenter(function(event){
$("#msg").html("Related target is: " + event.relatedTarget.nodeName);
});
});
</script>
</head>
<body>
<div style="height:200px;border:solid">This is a div element
<p style="background-color:pink">This is a paragraph</p>
</div><br>
<div id="msg" />
</body>
</html>
If you specify mouseenter as the event, does relatedTarget show the current container its in?
But what if you had jQuery event handler with both a "mouseleave" and "mouseenter" at same time?
could someone elaborate what the use cases are for event.related target as well in the real world if any?
Two programs:
-one has a draggable div with an iframe inside.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
<style>
#draggable { width: 1500px; height: 300px; }
</style>
</head>
<body>
<div id="draggable" class="ui-widget-content" style="background:#ccc">
<p>Drag me around</p>
<iframe src="test.php" style="background:#eee;width:100%;height:240px;" frameborder='0' ></iframe>
</div>
</body>
-the other, the iframe program
<body>
<div onclick="alert('Clicked here')">Just a test with an input</div>
<input type="text" id="txtid">
</body>
Scenario: I click the mouse button inside the div to start dragging, and drag the mouse quickly from the div to inside the iframe. I lost the draggable capability (Its ok, I can leave with this). But then, I release the mouse button and move it out the iframe... and as soon the mouse touch the div repeat: without the mouse button pressed the drag remains active.
It is a bug or a feature of the drag method?
How can I force to stop the drag behavior? If you try it, youll notice it is a very annoying behavior.
TIA,
It's probably the case that any mouse events over the iframe aren't bubbling up to the parent document. Basically, when you release the mouse button, that event never makes it back to the draggable handler - it has no way of knowing that you don't have the mouse button pressed anymore.
You could use the draggable "helper" option to replace the iframe with a placeholder div while dragging - alternatively, you could cover the iframe with a transparent overlay while dragging.
I would like to drop down a div with further information when the mouse is hovering over another div and am unsure how i should organize this. I have the following: http://quaaoutlodge.com/drupal-7.14/ and I would like that if one hovers over the Book Now area, that the TEST-div drops down as long as the cursor is over Book Now or TEST and it should drop up again as soon as the cursor leaves the area. How do I best go about this?
To get something similar to what you can see on http://www.thedana.com/, I tried to implement some onmouseover javscript code that shall be executed when hovering over the book now div. I just try to change the height of my element statically first like this:
function dropbox(element){
obj = document.getElementById(element);
if(obj) {
obj.style.min-height = "400px";
} else {
}
}
but I can't get it going. The eventual goal is to have a loop with some delay to slowly drop down the book now tab.
You can try a css approach
#book + div{
display:none;
}
#book:hover + div{
display:block;
}
+ selector
you can use this code or (reference: w3schools.com)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").hover(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
seems like I have edit obj.style.height instead of .min-height and it works fine.
Used JQuery instead and it seems to work fine:
<script src="./path/to/jquery.js"></script>
<script>
$(function() {
var fade = $('#fade');
$('#book').hover(function() {
fade.fadeIn();
}, function() {
fade.fadeOut();
});
});
with my html looking like this:
<div style="" id="book">Book Now<br/> <!-- hover div-->
<div class="fade" id="fade"> <!-- drop down div set to display:none; in css-->