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.
Related
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.
I'm trying to capture the event when the mouse is hovering over the select box, be it collapsed or expanded. I'm using .on() in the following manner,
$(document).on('hover', "select#selectBox", function() {
alert("done");
});
Please note that I'm using this snippet inside DOM document ready too.
I've tried changing the event to click, scroll, mouseover, mouseenter, etc too.
Doesn't seem to work for those too.
Please point out where I'm going wrong.
I've made a JSFiddle: https://jsfiddle.net/g9vf1mty/2/
EDIT: Thanks for the quick response everyone!
I have fixed my mistakes :)
I have tweaked the JSFiddle a little bit. Now, I'm attempting to scroll the select box with a size lesser than the number of options and have changed the 'hover' event to 'scroll' event. It does not seem to work that way.
I'm using jQuery 2.1.3.
JSFiddle here: https://jsfiddle.net/g9vf1mty/8/
You don't need to wrap event bound to document level inside ready pseudo event. And because you want to delegate event, maybe to hanlde dynamic elements, the correct way would be to bind both mouseenter & mouseleave events this way:
eventually filtering by event type inside handler (in/out)
$(document).on('mouseenter mouseleave', "#selectBox", function(e) {
alert("done: " + e.type);
});
$("select#selectBox").hover(function() {
alert("working");
});
use hover function, in the above manner. and more importantly, you missed jQuery library too.
As on("hover") was deprecated form jQuery 1.8, it won't work on Higher versions of jquery.
You should use mouseenter event
and include jquery in your fiddle :)
Look also at this (SO question)[Is it possible to use jQuery .on and hover?
I am facing one small Issue in displaying/hiding any div on hovering any anchor tag.
Currently I tried with Mouseenter and MouseLeave functions but Its not smooth.
Clickable Link:<a class="clickmeToSeeDiv" href="##"></a>
JS code:
$('.clickmeToSeeDiv').live("mouseenter",function(){
$('.leftborderActive').show();
});
$('.clickmeToSeeDiv').live("mouseleave",function(){
$('.leftborderActive').hide();
});
Above code sometime works sometimes not.
Please suggest if you all have any Idea or a better solution.
Thanks
Sham
live event is deprecated, use .on() instead (Attach an event handler function for one or more events to the selected elements).
Try this:
$(document).ready(function(){
$(".leftborderActive").hide(); // hide div on DOM ready
$( ".clickmeToSeeDiv" ).mouseenter(function() { // anchor mouseover event
$(".leftborderActive").show(); // show div
}).mouseleave(function() { //anchor mouseleave event
$(".leftborderActive").hide(); //hide div
});
});
DEMO
or
$(document).ready(function(){
$(".leftborderActive").hide();
$(document).on('mouseenter mouseleave','.clickmeToSeeDiv',function(){
$('.leftborderActive').toggle();
});
});
the method 'live' is deprecated, use 'on' instead.
$(document).on('mouseenter mouseleave', '.clickToSeeDiv', OnDivClick);
function OnDivClick(){
$('.clickToSeeDiv').toggle();
}
You could try JQuery's animate functions or set a timer on the show and hide methods so that they make the div operate a little more smoothely.
Also, make sure to cancel any previous events when you call the enter or leave methods so that the animations don't stack.
I have a simple mouseover event that I am trying to work on elements that are loaded with ajax. For example I have a div that when you mouseover hide/show another div. When I load these divs through ajax they no longer work. For example :
<div class="block">
<div class="something">MOUSEOVER</div>
<div class="else" style="display: none" >HI</div>
</div>
$(document).ready(function(){
//using on hoping to catch the mouse events
$('.block').on('mouseenter',function(){
$(this).children('.else').fadeIn('fast');
});
$('.block').on('mouseleave',function(){
$(this).children('.else').fadeOut('fast');
});
});
This works fine straight up like this :
But when I load those elements from another page :
$j('#trigger').load( url + " .block");
The mouse events are no longer recognized. I thought this is what live, on, delegate were for. Can someone help me figure this out please.
One possibility is to change your code like:
var myFunc = function() {
$('.block').on('mouseenter',function(){
$(this).children('.else').fadeIn('fast');
});
$('.block').on('mouseleave',function(){
$(this).children('.else').fadeOut('fast');
});
}
$('#trigger').load(url + " .block", function() {
myFunc();
});
to make this functions like mouseenter or mouseleave in the loaded content possible.
The other possibility is $.live();. Like:
$('.block').live('mouseenter', function() {
//here your code
});
This is exactly what methods like on and delegate can be used for, but they have to be used correctly.
As events bubble from the element on which they originated up through the DOM you need to capture the event on an ancestor element that already existed:
$(".someAncestor").on("mouseenter", ".something", function() {
//Executed when .something triggers the mouseenter event
});
It looks like you are loading the entire .block element via AJAX, so you will need to bind the event somewhere higher up the DOM tree (probably the element inside which you append .block).
You can put the trigger event to load on AJAX success.
Im trying to remove a class once the user hovers over a link.
Here is the HTML:
Fonctionalites
<div id="commercial_dd_total_FONCTIONALITES" class="menu_hidden">
<a class="commercial_dd_bg">Item One</a>
</div>
JS:
<script type="javascript">
$(document).ready(function(){
$("#menu_fonctionalites").hover(
function () {
$("#commercial_dd_total_FONCTIONALITES").removeClass("menu_hidden");
}
);
});
</script>
This isn't working.... any ideas about what I've done wrong?
http://jsfiddle.net/tuFru/1 it appears to be working here. You might include the CSS and describe what exactly isn't working for you. I updated it to take advantage of the second argument for hover as defined below:
Description
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
version added: 1.0.
hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element.
Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
See the discussions for .mouseenter() and .mouseleave() for more details.
If you are just trying to toggle visibility you could probably just add the normal class for the div styling and toggle it using the jQuery hide()/show() methods.