I have an img tag with following details: id="hover1" src="hello.png"
Using two separate buttons, I'm able to swap images with following jQuery:
$('#button1').click(function(){
$('#hover1').attr('src', 'hello_hover.png');
});
$('#button2').click(function(){
$('#hover1').attr('src', 'hello.png');
});
However, when I try to swap images with the following code nothing seems to happen.
$('#hover1').hover(function(){
$(this).attr('src', 'hello_out.png');
}, function(){
$(this).attr('src', 'hello.png');
});
The code looks ok to me. What is causing it to fail? Please help me out.
I'm using jQuery 2.1.0 , Mozilla 26.0, Windows7.
Thanks.
$(function () {
$('a img').hover( function () {
$(this).attr('src', $(this).attr('src').replace(/\.jpg/, 'yourImageName.jpg') );
});
let see this ..Thank you
Works well for me here... try using this JQuery code, and waiting to run it until the document is done loading :
$(document).ready(function(){
$('#hover1').hover(function(){
$(this).attr('src', 'hello_hover.png');
}, function(){
$(this).attr('src', 'hello.png');
});
});
Working Fiddle :
http://jsfiddle.net/st7sM/1/
Probably it's not what are you looking for but maybe it could help
Why you don't only use CSS?
Here the fiddle
#hover1{
background-image: url('http://lorempixel.com/400/200/sports/4');
height:200px;
width:400px;
}
#hover1:hover{
background-image: url('http://lorempixel.com/400/200/sports/1/');
}
To swap images easily, you can use the open source library bootstrap-spacer via NPM
npm install swapimagesonhover
or you can visit the github page:
https://github.com/chigozieorunta/swapimagesonhover
Using the above library, the data-img attribute is used to attach the second image of your choice you would want swapped. Once this is done, simply add your swim class to the image element and you're good to go (make sure jQuery script is included, it requires it to work properly).
Here's a sample below:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="swapimagesonhover.css" rel="stylesheet" type="text/css"/>
<script src="swapimagesonhover.js" type="text/javascript"></script>
</head>
<body>
<img src="image1.jpg" data-img="image2.jpg" class="swim"/>
</body>
Related
So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code
Alright so I only need to learn JQuery for a couple of animations on a site I'm building.
I've been reading the tutorials on the JQuery site and am just trying to implement a simple diagonal move animation.
I'm still extremely new to JQuery (as in, started today) but from everything i understand, the following code should work. What error am i making?
<head>
<script type="text/javascript" src="JQuery.js">
</script>
<script>
$(document).ready(function(){
$("#moveme").click(function(event){
$("#moveme").animate({right: '+=50', bottom: '+=50'}, 1000);
});
});
</script>
</head>
<body>
<div id="moveme">
Move this text
</div>
</body>
Edit:
Added relative property from css and fixed parenthesis issue with document but still not working.
It seems that you forgot some parenthesis to select the elements correctly.
What about that?
$(document).ready(function(){
$("#moveme").click(function(event){
$(this).animate({right: '+=50', bottom: '+=50'}, 1000);
});
});
Edit:
Also, make sure that you are importing the jQuery script library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
You missed $(document) in the line
$document.ready(function(){
Also
your jquery animate function is changing CSS of your id="moveme"
i'd make sure that in your css you have this.
#id {
position: relative;
}
You can definitely do this:
$(document).ready(function(){
$("#moveme").click(function(event){
$(this).animate({'margin-left': '+=50', 'margin-top': '+=50'}, 1000);
});
});
Working demo here (just click on the div saying 'hello'): http://jsfiddle.net/px2jz/
I just can't figure this one out. The Dialog Box doesn't popup. I've tried all sorts of things but it just doesn't work. Here's my code:
<head>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
</script>
Open Dialog
<div id="dialog">This should popup</div>
</body>
What's wrong here? Any help appreciated.
Try to use this it might be work.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
Where is jquery.ui.dialog.js in this scode?????
Please add this file into code as script tag....
you can put this JS file from here :
http://jqueryui.com/ui/jquery.ui.dialog.js
<script></script> is not enough. Should be <script type="text/javascript"></script>
I think the script tag just after body missing type="text/javascript". ie. <body><script type="text/javascript">...
You have to include the script block after the
Open Dialog
<div id="dialog">This should popup</div>
block just before the body element and it should work.
You have to include also all the styling of the jQuery UI so that it looks nicer.
I have a same problem.
It is probably a compatibility issue, try including the below instead of what you have
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
Also to display the dialog properly, replace jquery-ui-1.8.xx.custom.css to match the jquery-ui.min.js version, I could not find a google ajax link.
I want to find an alternative solution but no idea if I can find one.
I was animating an a element in jQuery using jQuery 1.3.2 and jQuery color plugin. I was animating the 'color' and 'backgroundColor' properties at the same time. In IE8 and FF it worked just fine. Chrome animated the mousehover color and then stopped. The background stayed the same and the mouseout did not undo the effect as it should have.
Chrome's developer tools said something about something being undefined. I know that I'm being somewhat vague here, perhaps this is a known issue?
EDIT - Code(, finally!):
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
EDIT:
#Bernhard Hofmann - What do you mean "issues with the properties you've chosen"? Please elaborate.
It would seem that Chrome has a few issues with the properties you've chosen. I managed to get the animation working using mouse enter and leave events in Chrome. Here's the script and mark-up for those wanting to fiddle and have a go as well.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(event){
$(".nav a").
mouseenter(function(){$(this).animate({fontSize:"2em"}, 900);}).
mouseleave(function(){$(this).animate({fontSize:"1em"}, 900);});
/*
$(".nav a").hover(function(){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
*/
});
</script>
</head>
<body>
<div class="nav" style="color:#000;background:#cfc;padding:2em 2em 2em 2em;margin:2em 2em 2em 2em;">
StackOverflow
</div>
</body>
</html>
This seems to be a bug with the color animation plugin with webkit browsers with their rgba(r,g,b,opacity) format for background color style.
The fix is simple, just add these lines in the appropriate place inside the getRGB(color) function of the plugin.
// Look for rgba(num,num,num,num)
if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
EDIT: Here is a working version with the fix http://jsbin.com/ekoli
Can you provide some HTML? I tried out with Google Chrome 4 BETA on Mac OS and Chrome 3 on XP and it worked as intended.
The HTML I used is as follows
<head>
<!-- These are my local jquery files. Use yours or the ones from Google -->
<script src="/osr/javascript/dev/librarys/jquery.js" type="text/javascript"></script>
<script src="/osr/javascript/dev/librarys/jquery-ui/js/jquery-ui.js" type="text/javascript"></script>
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
</head>
<body>
<div class="nav">
<a>aighosvaovhaovuho</a>
</div>
</body>
I have the same issue, using jQuery.animate
Works fine in FF, IE 7 & 8
The code..
$(document).ready(function(){
jQuery.noConflict();
jQuery('.boxgrid.caption').hover(function(){
var s = jQuery(".cover", this).stop();
s.animate({width: "50%"},{queue:false,duration:300});
jQuery(".cover", this).stop().animate({top: "180px"},{queue:false,duration:300});
}, function() {
jQuery(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
});
Produces:
ERROR : (from chrome dev tool) :
Uncaught TypeError: Cannot set
property 'width' of undefined