Set default image after click with jQuery - javascript

I want just when I click on the image I see the new image and just after the click I want the new image changes with the default one, but I have to drag the mouse to see the default image but I don't want that.
This is my code:
$(document).ready(function(){
$(".img-button").live('click', function () {
$(this).attr("src","images/pressed.svg");
});
});

If you only have one image, I suggest you give it an ID instead of (ab)using the classname.
If you have several and use the same image for all, then change $("#myImage") below to $(".img-button")
Toggle
$(document).ready(function(){
$("#myImage").toggle(
function() {
$(this).attr('src','images/pressed.jpg');
},
function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap after leaving
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
});
$('#myImage').on("mouseleave",function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap half a sec after pressing
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
setTimeout(function() {
$('#myImage').attr('src',"images/default.jpg");
},500);
});
});

Related

Delayed change text

I have a problem with the script jquery:
I have a paragraph of an e-mail. When I click on it. I want the text changed to "Copied to clipboard" with fade effect. After 3 seconds returned the original text with fade efect
I have a problem back to the original text (link)
try this in click event
$('.icon-email').click(function () {
var email =$(this).text();
$(this).fadeOut(500, function() {
$(this).text('Copied to clipboard').fadeIn(500,function()
{
$(this).fadeOut(3000, function() {
$(this).text(email).fadeIn(500);
});
});
});
});
you can use the animate function for the above requirement:
$('.icon-email').click(function () {
$(this).animate({opacity:0},function(){
$(this).text("new text")
.animate({opacity:1},3000); //3000 is the speed that you wanted to fade in and fade out
})
});

Why changing img src with jQuery works incorrectly?

Well, the task is to change img src on click.
It was not a problem to do it.
But I'd like to have some effect while changing it.
So, I used fadeOut and fadeIn. Problem is when the img src is changing the img starts "sparkling / blinking".
You can see an example here
http://www.coffee-cult.ru/slidersupreme
(rectangle in top right corner activates slider buttons)
and the code,
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[0]);
}).fadeIn(400);
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[1]);
}).fadeIn(400);
});
you can try to use
$(this).attr();
instead of
$main_image.attr();
It has something to do with your other scripts on the page. Here in the fiddle it looks kind of alright with the same code: http://jsfiddle.net/ewyLcm0s/
var images = ['http://lorempixel.com/100/100/people/1','http://lorempixel.com/100/100/people/2'],
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[0]).fadeIn(400);
});
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[1]).fadeIn(400);
});
});

Removing and Adding CSS Class with jQuery

I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.
$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});
Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});

autoload bootstrap tooltip

I have simple question, the bootstrap tooltip works on particular selector[tag] on hover[mouseover] as default i.e you need to hover on the tag to activate the tooltip or make it appear. I want to make it appear in an input tag when i left the tag or when cursor leaves that input tag automatically, not on hover[mouseover]...
The question at hand is by default the tooltip works on following
('selector').tooltip('show');
Is there anyway to make it according to my specifications above
Something like this
$('input').tooltip({
trigger: 'manual'
}).on({
blur: function() {
$(this).tooltip('show');
},
focus: function() {
$(this).tooltip('hide');
}
});
Example here - http://jsfiddle.net/UPRbm/
Try this:
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'manual'});
$('#example').blur(function() {
$('#example').tooltip("show");
setTimeout("$('#example').tooltip('hide');", 1000);
});
});
}
}

How check mouseover on two elements ?

I need hide tooltip on mouseout of link, BUT not if mouseover on tooltip (both have different parents)
For example: we can see it on Facebook when hover on names or avatars friends
I try this but every time i get FALSE
$('a').bind('mouseleave', function () {
var i = $('div.tooltip').is('hover');
if(i===true){
console.log('cursor over the tooltip, so dont hide');
}
else{
console.log('hide tooltip');
}
});
How i can check both condition?
Put both the link and the tool tip in the same parent:
<div id="parent">
link
<div id="tooltip">tooltip</div>
</div>
And then in the script you can just put the mouseleave function on the parent:
$("#parent a").mouseenter(function(){
$("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
$("#tooltip").css("display","none");
});
If you can't change your markup, use a timed event and abort it when the mouse enter either element, like so:
var timer;
$("a, .tooltip").mouseleave(function() {
timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
clearTimeout(timer);
});
function doSomething() {
console.log('hide tooltip');
}
Here's a FIDDLE

Categories