I have to display two images for single mouseover. So when I mouseover to the image, first, the image is displayed then with a time delay of 5000, the image is needed to display for that same hover. Now on mouseout display the original image.
I am not so familiar with JavaScript and jQuery.
Can someone please give me some idea about how to do this.
What i did is,
$('.image1').mouseover(function() {
setInterval($(this).removeClass(.image1).addClass('image-over1'),5000);
$(this).removeClass(.image1).addClass('image-over2');
});
$('.image1').mouseout(function() {
$(this).removeClass('image-over1');
$(this).removeClass('image-over2').addClass(item);
});
$('.image1').click(function(){
document.location='index.php?page='index.php';
})
The .hover() function lets you specify both mouseover/mouseout at the same time, and you need to make a function for the setInterval:
$('.image1').hover(function(evt) {
// mouse over function.
// DOM Element that got the mouseover.
var target = evt.target;
if (target.timer) {
clearTimeout(target.timer);
target.timer = null;
}
target.timer = setInterval(function() {
// $(this) will not work here, since 'this' has changed.
// depending on your css you shouldn't need to remove the '.image1'
// class, just make sure .image-over1 and .image-over2 are
// stronger selectors, or occur after .image1
$('.image1').addClass('image-over2');
// at this point your element will be (just guessing <img>, could be
// anything really:
// <img class="image1 image-over1 image-over2" .../>
// it's absolutely fine for the image to have all those classes as
// long as your css is correct.
}, 5000);
$('.image1').addClass('image-over1');
}, function(evt) {
// mouse out function.
// DOM Element that got the mouseout.
var target = evt.target;
if (target.timer) {
clearTimeout(target.timer);
target.timer = null;
}
$('.image1').removeClass('image-over1');
$('.image1').removeClass('image-over2');
});
$('.image1').click(function(){ document.location='index.php?page='index.php'; })
First of all, I think there's a problem in your approach; if you remove the "image1" class from the element on a mouseover, then that element won't be matched by the $(".image1") selector for the mouseout. Is there a reason you need to remove it? If you do (i.e. if there is something defined on the class in the CSS that you need to disable), is there some other selector you could match on?
As to the time delay, if you're using a jQuery version greater than 1.4, you can use the .delay() function:
$('.image1').mouseover(function() {
$(this).addClass('image-over1').delay(5000).addClass('image-over2');
});
Perhaps you to create an animated GIF of these images??? Then use a code similar to here: http://www.netmechanic.com/news/vol3/design_no10.htm
Even if the images are generated on fly, it is possible to programtically generate animated gif in PHP - see http://php.net/manual/en/function.imagegif.php
Related
A Raphael element is created dynamically (in response to user input, not upon page load). I want to use Raphael's .hover() method to change the cursor to "pointer" (the hand usually used for links) when the user hovers over the object. How can this be accomplished?
(I know that you can use CSS to achieve this effect, but because the DOM element is created via scripting, rather than being built into the page upon load, I don't know if CSS can be applied here, or how it would be if it can be.)
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=pointer
https://web.archive.org/web/20160121064823/http://raphaeljs.com/reference.html
Looks like "cursor" is actually one of the attributes than can be modified with Raphael's .attr() function. So,
el.hover(function(){el.attr({'cursor':'pointer'})},
function(){el.attr({'cursor':'default'})}, el, el);
does the trick.
var paper = Raphael("rect", 400, 400);
var hoverIn = function() {
// if the context is not stated forcefully, this refers to the element in context.
// can be any valid cursor types.
this.attr({"cursor": "pointer"});
};
var hoverOut = function() {
this.attr({"cursor": "default"});
}
// simple click callback.
var clickFN = function (){
alert('Hey you just clicked me :p, Thanks!!!')
};
var cItem = paper.rect(40,40,50,30)
// attaching the hovering callbacks.
.hover(hoverIn, hoverOut)
// these are just additional cosmetics and fuctionalities.
.attr({
"fill": "#0ff000"
})
.click(clickFN);
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>
<div id="rect"></div>
or play with this fiddle!
Hey while invoking the .hover function the third and fourth parameters remains optional and used only if you need to change the context in your code.
Set the cursor attribute value for a specific object directly.
Keep it simple! :)
var paper = Raphael("rect", 400, 400);
var myRectangle = paper.rect(40,40,50,30);
myRectangle.attr({
'cursor':'pointer',
"fill": "#0ff000"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>
<div id="rect"></div>
I looking for a solution for iOS, like hover in the 'desktop world'.
I have a lot of image item on my page, and when the user move his finger across the images, the actual image gets opacity 0. (so one move hides all item :) )
I tried something like this:
$("img").on "touchstart", ->
$(this).animate({opacity:0}, 100)
If you want to hide all images when one recive the touchstart-event you should use:
$("img").on("touchstart", function() {
$("img").animate({opacity:0}, 100);
});
Or even better:
var $images = $("img").on("touchstart", function() {
$images.fadeTo(100, 0);
});
The this keyword refers the the DOM Element receiving the event rater then the whole jQuery collection.
Not good with CoffeeScript.
$(document.body).on "touchmove", (event) ->
if $(event.target).is("img")
$(event.target).animate
opacity: 0
, 100
I am currently working on a website and got stuck with the following problem:
On the website I have small dots (images) with the ids "dot0001", "dot0002", "dot0003", etc. . I also have hidden images (visibility:hidden) with the ids "info0001", "info00002", "info0003", etc.
I am looking for a jQuery solution. What I need is a code that allows the following events:
When users move the mouse over "dot0001" the image "info0001" becomes visible and when they leave "dot0001", "info0001" becomes invisible again. Same applies to "dot0002"-"info0002" , "dot0003"-"info0003" etc. So only the info-images with the corresponding 4 digit number become visible.
I gave it endless tries but got nowhere and there is not even a point in pasting my code.
Any help appreciated!
Something like this should work (though untested):
$('[id^="dot"]').on({
mouseenter: function(e) {
var infoId = this.id.replace('dot', 'info');
$('#' + infoId).show();
},
mouseleave: function(e) {
var infoId = this.id.replace('dot', 'info');
$('#' + infoId).hide();
}
});
That uses an attribute-starts-with selector to select all elements with an id beginning with "dot", then binds the event handlers to them. The event handler functions themselves simply replace the "dot" part of the id with "info" to form the correct new one, then show or hide the element as appropriate.
Don't forget to wrap that code in a DOM ready event handler so that it executes once the elements actually exist, otherwise it won't work.
Get all elements which id starts with "dot" and show/hide related "info" on mouseover/out:
$("[id^=dot]").hover(
function(){
$("#info" + this.id.substring(3)).css({"visibility":"visible"});
},
function(){
$("#info" + this.id.substring(3)).css({"visibility":"hidden"});
}
);
http://jsfiddle.net/EGBnR/
I am trying to use JS/JQuery to make tiles that will fade out then fade in with different data (In this case it is pictures) when you over on it and then reverse it when you mouse off of it. Now my code works fine in Chrome but when I test it in FireFox it keeps executing the fade in/out commands. I looked up similar situations where people use the $(this).stop().fadeOut(function() code but since I am doing multiple fades and loading information it won't do the animation correctly. Does anyone know a solution to this?
<script>
$(document).ready(function()
{
var hov = false;
$(".previewBox").mouseenter(function()
{
if(hov === false)
{
hov = true;
$(this).fadeOut(function()
{
$(this).load(function()
{
$(this).fadeIn();
});
$(this).attr("src", "Images/Portfolio/Art_Bike_Flip.png");
});
};
});
$(".previewBox").mouseleave(function()
{
if(hov === true)
{
hov = false;
$(this).fadeOut(function()
{
$(this).load(function()
{
$(this).fadeIn();
});
$(this).attr("src", "Images/Portfolio/Art_Bike_Preview.png");
});
};
});
});
</script>`enter code here`
There are several problems here. First .load is not a reliable way to detect image loading. Some browsers, when the image is cached, wont fire a load event, so the script will fail. You need to use a plugin like waitForImages or imageLoaded.
https://github.com/alexanderdickson/waitForImages I recommend this one.
Also .stop() will work fine for your needs, if it seems to cancel fades in some instances, try .stop(true, true), it should animate just fine, even with loading data and multiple fades. You may need to tune it so that the stop command only is placed on the last fade to occur.
also you are making a ton of jQuery objects when you only need one. Limiting it to one object will make your script substantially more efficient.
var previewBox = $('.previewBox');
Then you can use that one everywhere:
previewBox.mouseenter(function()
{
if(hov === false)
{
hov = true;
previewBox.stop().fadeOut(function(){
previewBox.imagesLoaded(function...
In your case with the multiple instances using a class, you need to isolate your events from one another. You can do this with .each
$('.previewBox').each(function(){
var previewBox = $(this);
previewBox.mouseenter(function(){ ....
By wrapping all your current logic in a .each you will avoid interaction of events between elements. In this way the events mouseenter mouseleave and the attached logic will bind isolated to each instance of an element with that class, instead of binding to all elements of that class.
I have a timed event I want to behave differently accordingly to what HTML element the mouse pointer is on.
Is there a way, assuming I have the HTML element, to know if the mouse pointer is currently on top of it.
I am well aware of the onmouseover/onmouseout events and how to use them.
I am using JQuery.
I am obviously looking for some kind of flag, as I need to check a state and not handle an event.
again, I know how to implement this with events.
I'm not aware of any built-in way to ping an element for the status of mouse hovering.
However, you can create one by updating a flag at mouseenter and mouseleave -- which is where Brian Driscoll's suggestion of .hover comes in:
jQuery.fn.tracking = function () {
this.data('hovering', false);
this.hover(function () {
$(this).data('hovering', true);
}, function () {
$(this).data('hovering', false);
});
return this;
};
jQuery.fn.hovering = function () {
return this.data('hovering');
}
You'll need to initialize tracking for each element you care about:
$('#elem1,#elem2').tracking();
But then you can get the status of any of them:
if ($('#elem1').hovering()) {
// ...
} else if ($('#elem2').hovering()) {
// ...
}
Demo: http://jsbin.com/amaxu3/edit
Have you looked into jQuery.hover()? http://api.jquery.com/hover/
You need to give name to html andme and on mouseover you need to check document.getelementsbyName. Then check what your are getting as output. Now you can take decision is it html control or asp.net.
When you use collObjects = object.getElementsByName("htmlcontrol") then compare id of both.
1 morething why you needed to check this in javascript. there may be some other solution for that. Just share with us.
You might have some luck with document.elementFromPoint, although I believe there are some inconsistencies in older browser implementations (http://www.quirksmode.org/dom/w3c_cssom.html#documentview).
$('#elem').mousemove(function(e){
if (this == document.elementFromPoint(e.clientX, e.clientY)) {
// Do stuff
}
});
Or outside of a handler
if ($('#elem').get(0) == document.elementFromPoint(x, y)) {
// Do stuff
}
Aside from that, the only other option that comes to mind is using event handlers to keep track of which element the mouse is over.