Animating a gif on hover - javascript

I've looked for the answer for this and I found it, but I don't know how to use it.
Stop a gif animation onload, on mouseover start the activation
Guffa's answer to that question is exactly what I want, but I don't know how to use that code.
I have the jquery plugin, but where do I put the code (not the plugin; the code that was in Guffa's answer)? How do I use it in reference to the images? Is there a function I have to call to get it to work? If so, what would be the best way to call it?
Sorry for asking a question that has already been answered, but his answer wasn't specific enough and I couldn't comment to ask him for a more specific answer.

Here is a working example for what you need - http://jsfiddle.net/EXNZr/1/
<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />
<script>
$(function() {
$("#imgDino").hover(
function() {
$(this).attr("src", "animated.gif");
},
function() {
$(this).attr("src", "static.gif");
}
);
});
</script>

I haven't read the link, however the easiest way to do this is to change the img tags src attribute with javascript on hover like this (jQuery)
$(function() {
$('a').hover(function() {
$(this).attr('src','path_to_animated.gif');
},function() {
$(this).attr('src','path_to_still.gif');
}
});
No plugins required... you might want to preload the animated gif by adding $('<img />',{ src: 'path_to_animated.gif'}); before the hover bind.
Hope that helps

Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>

Related

Working with CSS, top propery in JQuery

I want to change top position of class bbb after 100 ms, but it took out that .css(top) does not work.
Please help.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="ddd"><div class='bbb'>Bobobo</div></div>
</body>
<script>
$(function myFunction() {
setInterval(alertFunc, 100);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
</script>
</html>
You should use setTimeout() instead of setInterval() this way alertFun() will only run once.
let alertFunc = function() {
$('.bbb').css('top', 100 + 'px');
}
setTimeout(alertFunc, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
Just like #jhpratt mentioned. You need to add position:relative to the .bbb class.
See below.
$(function myFunction() {
setTimeout(alertFunc, 500);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
.bbb {
position: relative;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
As others have already said, if you want to use the top attribute you need to give
position:relative;
to the element. This way the element will be set relative to his position and this could be a little tricky. By the way i usually prefer to make a container box relative ad put the positionable element absolute in it, so it will be displayed relative to his container:
.container{
position:relative;
}
.element{
position:absolute;
}
This is the html:
<div class="container">
<div class="element"></div>
</div>

Jquery animation entering page

I'm a newbie with jquery and I'm trying to code a very simple animation. I've already coded the div movement but I would like the animation to start automatically when entering the page without clicking or hovering anything.
So this is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script>
<style>
#div02{background:url(norahalf.png) no-repeat; background- size:contain;height:100px;width:100px;position:absolute;}
#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>
<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>
Any help would be greatly appreciated!
Nora
Try not having the animate function executed after hovering the paragraph, then:
$(document).ready(function(){
$("#div02").animate({left:'150px'});
$("#div01").animate({left:'180px'});
}
To start automatically you just need to trigger mouseover event on page load:
$(function() {
$("p").hover(function() {
$("#div02").animate({ left: '150px' });
$("#div01").animate({ left: '180px' });
})
.trigger('mouseover');
});
I'm not sure if you still need this p hover event at all though.
Demo: http://jsfiddle.net/rDMGC/

JQuery: Image appear by mouse move?

I want to make a image appear on my site when the mouse moves. It can appear to be a stupid thing to do, but it's really important that when the page loads the image is not yet visible.
My HTML is like this:
<html>
<head>
</head>
<body>
<div class="page-container">
<div>
<a id="entrar" href="_pt/log_in.html"><img src="_assets/entrar.jpg" alt="entrar"></a>
</div>
</div>
<script src="_js/jquery-1.10.2.js"></script>
<script src="_js/jquery-ui-1.10.3.js"></script>
<script src="_js/exp.js"></script>
</body>
</html>
In my CSS i'm making the image not visible
#entrar {
display: none;
}
And in my Javascript:
function PrepareHandlers() {
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
}
...
window.onload = function(){
....
PrepareHandlers();
}
Could anyone tell me what I'm doing wrong plz. Thanks
Declare this in your source file , not inside a function !
$(document).ready( function(){
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
})
It appears likely the page container is not taking up any space, and therefore it never receives a mousemove event. Here is an easy CSS fix to test this theory:
body { position : absolute; top :0; bottom : 0; left : 0; right: 0;}
.page-container { width : 100%; height : 100%; background-color : #ddd; }
Check out this solution.
You should preload the image to minimize or avoid an annoying/confusing lag like so:
var img = new Image();
img.src = '//your/url/to/image';

Why don't auto height work on images?

What I am trying to accomplish is that, when you put an image on 100% it nicely scales the height accordingly. I like to catch that height and process it.
<div id="view" style="width:950px;">
<img src="1.png" />
</div>
The image is 950x500pixels. However when I ask the view $( '#view' ).height() what the height is, it returns 16pixels. Does anyone know why it does this? Why doesn't it return 500pixels as that's the size of the image.
You need image to be loaded first. Try this:
<!DOCTYPE HTML>
<html>
<style>
div { width: 950px; }
img { width: 100%; }
</style>
<body>
<div>
<img src="1.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('img').load(function() {
var height = $('div').height();
console.log(height);
});
</script>
</body>
</html>
I have test to alert the size of <Div> It's return the valid value, that return the size of image.
But from your code $( 'view' ).height() I have change to $( '#view' ).height();
Here is my code it's return correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function loaded() {
var height = $( '#view' ).height();
alert(height);
}
</script>
</head>
<body onload="loaded();">
<div id="view" style="width:950px;">
<img src="Desert.jpg" />
</div>
</body>
</html>
Please do not use local image, you can use an image with URL, like "http://www.veryued.org/wp-content/uploads/2012/02/less-online.png".
Please read jQuery API carefully:
Caveats of the load event when used with images:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

How to make a Jquery Popup note

How would you make a JQuery popup Note ? This is what I currently have,
Note Code Example
<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css" rel="stylesheet">
#popup {
border: 1px solid black;
width: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".HoverMe").mouseenter(function() {
var left = $(".HoverMe").position().left;
var top = $(".HoverMe").position().top;
$("body").append("<div id=\"popup\"> </div>");
$("#popup").css("left",left);
$("#popup").css("top",top);
$("#popup").append("<p> Hello World </p>");
});
$(".HoverMe").mouseleave(function() {
$("#popup").fadeout("fast");
});
});
</script>
</head>
<body>
<div class="HoverMe">
Hover Me
</div>
</body>
</html>
Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.
Any examples would be useful,
Thank you!
How about using someone else's code for this? I recommend tipsy.
Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:
http://sixrevisions.com/css/css-only-tooltips/

Categories

Resources