I'm newbie in jquery. I use this code for changing the current image on hover or click by another with jquery. But it dosn't work!!
<head>
<title> Visite </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.1.min.js"> </script>
<script>
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
})
</script>
</head>
<body>
<img src="logo11w.png" alt="photo" />
</body>
</html>
i give this example from http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/
Try wrapping the jQuery code in a document ready
$(document).ready(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
Or alternatively
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
This will only give you the mouse over. You may need to pass in the mouse out function as well: hover
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
}, function() {
//mouse out function
});
});
Related
I am creating a website and I need some help with an issue. I will upload a picture for you to understand it better.
I have a big image in the middle, and below it there are some words that act like links(). I need this to happen:
1. The big image appears as the website loads.
2. When I click on a button (the words acting as links), I want the big image to fade out, then change the image src (so a different image will be displayed in the big image container) and then this different image will appear fading in.
It's something like this:
I've already tried to get this by using some jQuery, but I don't get it to work. I thought it would be something like this, but it's not working, as the image src changes, then the image appears, and after that the image fades out, leaving an empty space instead of the image:
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").fadeIn("slow");
}
});
$('.button4').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project4.jpg');
$("#change-image").fadeIn("slow");
}
});
etc.
Can anybody help me solving this? I know how to fade out, how to change image src, and how to fade in, but I can't do all together as I would like.
Thank you very much!!
fadeOut takes a second parameter, a function. You can then do what you need to do after the first image is faded out.
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow", function() {
$('#change-image').attr('src', 'https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
$("#change-image").fadeIn("slow");
});
}
});
img {
height : 150px;
width : 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg"/>
<br/><button class="button3">Click</button>
I suggest you use animate.css(https://daneden.github.io/animate.css/) so you can just manaipute this by just adding class or removing class.
npm i animate.css
Make sure #change-image has this class "animated"
$('.button3').on({
'click': function(){
$("#change-image").addClass('fadeOut');
// let keep a time out, so that it will give us a little delay to see the effect of fadeOut before fadeIn happens
setTimeout(() => {
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").removeClass('fadeOut').addClass('fadeIn');// remove the first class...else it will have the two class fadeOut and fadeIn...
}, 1000);
}
});
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
</body>
</html>
Try the below code..Replace the image src after fadeout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
<script>
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
</script>
</body>
</html>
I tried some methods in old questions but it is not working in chrome.
Can please any one suggest me the solution.i'm using php for validation.
if i click submit button twice it through an error so restrict the issue i disable the submit button but it not working in chrome.
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').attr('disabled','disabled');
});
});
</script>
You could use prop jquery method, or just set the disabled attribute to true.
$(document).ready(function(){
$('#submit').on('click', function(e){
//$(this).prop('disabled', true);
this.disabled = true;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="submit">submit</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It could be that there are multiple submit buttons on the page. You can try using this code.
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
// It is best practice to use `true` instead of
// any true-y kind of value like non-empty string.
jQuery(this).attr('disabled', true);
});
});
There are different ideas were given but the code seems working properly. Please make sure you imported the jQuery library.
The following code is the tested code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#button').click(function () {
jQuery('#button').attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="submit" id="button" value="If you click on me, I will be disabled."/>
</body>
</html>
Try, using the prop of element and making the attribute true, using
jQuery('selector').prop('disabled',true);
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').prop('disabled',true);
});
});
</script>
how i would add disabled:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" disabled>').insertBefore(this);
$(this).remove();
});
});
</script>
how i would change the button back to normal:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" >').insertBefore(this);
$(this).remove();
});
});
</script>
you can use $('selector').prop('disabled',true);
How do I display an image on mouse over? I also need to underline the text next to the image on mouse over? On mouseout I have to hide the image and make the text normal again.
This is my html field
<img src="img.jpg"> Name
Now when I load the page I want not to display the image unless I have the mouse over the place it should appear.
CSS
#test{
display:none
}
HTML
<img id="test" src="img.jpg"/> <span>Name</span>
jQuery
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
DEMO
Documentation
jQuery
document.ready
jquery.on()
jQuery.show()
jQuery.hide()
jQuery.mouseenter
jQuery.mouseleave
You can do it the below way using the hover event.
jQuery:
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline'); //to make text underlined on hover
$('#image').show(); //displays image on mouse in
},function(){
$(this).removeClass('underline'); //remove underline on mouse out
$('#image').hide(); //hides image on mouse out
});
});
HTML:
<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>
CSS:
.hidden{
display: none;
}
.underline{
text-decoration: underline;
}
Working Demo
As answered by Anton, you can use this one as well.
$(document).ready(function () {
$('span').hover(
function () {
alert("1");
$('#test').show();
},
function () {
alert("2");
$('#test').hide();
}
)
});
Jquery:-
$(document).ready(function(){
$("#textDiv").mouseover(function(){
$("#imageDiv").hide();
});
$("#textDiv").mouseout(function(){
$("#imageDiv").show();
});
});
HTML:-
<div id="textImage">
<div id="imageDiv" style="float:left;">
<img src="../images/login_background.png"></img>
</div>
<div id="textDiv"style="float:left;">
Name
</div>
</div>
CSS:-
#textImage a {text-decoration:none;}
#textImage a:hover {text-decoration:underline;}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type='text/javascript' src='http://identify.site88.net/jquery-1.9.1.js'></script>
<style type='text/css'>
#test{
display:none
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
});
</script>
</head>
<body>
<img id="test" src="http://www.shop.hidra.com.tr/wp-content/uploads/image_1306_1.jpg"/> <span>Name</span>
</body>
</html>
I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>
I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.
instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});
I am not having any luck getting jqueryrotate example #2 on this page to work on a simple html page. What am I doing wrong? Thanks for the help.
Here is my code -
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<STYLE type="text/css">
#img { margin:100px 100px;}
</STYLE>
</head>
<body>
<script type="text/javascript">
$("#img").rotate({
bind:
{
mouseover : function() {
$(this).rotate({animateTo:180})
},
mouseout : function() {
$(this).rotate({animateTo:0})
}
}
});
</script>
<img id="img" src="https://www.google.com/images/srpr/logo3w.png">
</body>
</html>
you code works just fine, see here.
You should probably use ready.
$(document).ready(function() {
$("#img").rotate({
bind: {
mouseover: function() {
$(this).rotate({
animateTo: 180
})
},
mouseout: function() {
$(this).rotate({
animateTo: 0
})
}
}
});
});
Also, I would not recommend using the id #img it's not that it's wrong, it's just sort of ugly IMO.