I'm at a bit of a problem with jQuery and an image.
I'm trying to create a simple system where an image changes on hover (which I've successfully made work with jQuery .hover()) however I'm now trying to set it up so if the user clicks on the image, the source is permanently changed to the hover image.
The problem I'm having is when I click, the source changes but when I hover off it changes back to the "off" image! Such a simple problem but I can't find a solution.
The hover code:
$("#image").hover(function () {
$(this).attr("src", getImageSourceOn("image"));
}, function () {
$(this).attr("src", getImageSourceOff("image"));
});
The functions getImageSourceOn / Off simply return a string based on the parameter with the new source.
The onClick code:
var imageSource = $(imageID).attr("src");
var onOff = imageSource.substring((imageSource.length - 5), (imageSource.length - 4));
if (onOff == "F")
{
//alert("Off\nstrID = " + strID);
$(imageID).attr("src", getImageSourceOn(strID));
}
else
{
//alert("On");
$(imageID).attr("src", getImageSourceOff(strID));
}
This code just takes the source and looks for On / Off within the source to put the opposite as the image. I tried using .toggle() instead of this substring method but I couldn't get it to work.
Declare a global variable. Attach a function on the click event:
var clicked = false;
$("#image").click(function(){
if(!clicked)
clicked = true;
else
$(this).attr("src", getImageSourceOff("image"));
});
Then modify you hover code
$("#image").hover(function () {
$(this).attr("src", getImageSourceOn("image"));
}, function () {
if(!clicked)
$(this).attr("src", getImageSourceOff("image"));
});
Related
I am trying to get an image to move over to a separate box upon clicking and then to be removed with a remove button I have in my html. I figured out how to add the image upon clicking it then removing it upon clicking the remove button.
The issue I am having is: when I click the image itself, it should copy over to the right but it should only copy one time and then I must .remove() the image using the button before I can click it again so it appears once more. Right now the image appears over and over upon clicking. I tried using .stop() but that stops the function entirely, I need it to work interchangeably. How do I do this using jQuery?
JQUERY CODE:
$(document).ready(function(){
$("#john").click(function(){
var johnImage = $("#john").clone(false);
$("h2").html("John is in the box");
$("h2").css({ 'color': 'red'});
$("#johnbox").prepend(johnImage);
});
Check out the below code. You should be setting clicked to false again in your remove handler.
Here is the full code after I got your remove code.
$(document).ready(function () {
var clicked = false;
$("#john").click(function () {
if (!clicked) {
var johnImage = $("#john").clone(false);
$("h2").html("John is in the box");
$("h2").css({ 'color': 'red' });
$("#johnbox").prepend(johnImage);
clicked = true;
}
});
$("#removejohn").click(function () {
clicked = false;
$("#john").remove();
$("h2").html("Click John to put him in the Box");
$("h2").css({ 'color': 'black' });
});
});
Please take a look at this jsfiddle
If you click on the divs on the top quickly enough, you'll find that eventually two divs end up appearing. I've had this problem with jQuery before as well. I just ended up disabling the buttons (or animation triggers) in that case, but I'm wondering if there is a more elegant solution to this.
Here is my jQuery code -
$(function () {
var _animDuration = 400;
$("#tabLists a").click(function () {
var attrHref = $(this).attr('href');
// Get shown anchor and remove that class -
$('.shownAnchor').removeClass('shownAnchor');
$(this).addClass('shownAnchor');
// first hide currently shown div,
$('.shownDiv').fadeOut(_animDuration, function () {
debugger;
// then remove the shownDiv class, show the clicked div.
$(this).removeClass('shownDiv');
$('#' + attrHref).fadeIn(_animDuration, function () {
// then add that shownDiv class to the div currently being shown.
$(this).addClass('shownDiv');
})
});
return false;
});
});
I'm using callbacks everywhere. I would like a solution that would queue up the animation rather than, not allow me to click
try this code with a check var:
$(function(){
var check = 1;
var _animDuration = 400;
$("#tabLists a").click(function(){
if(check == 1){
check = 0;
var attrHref = $(this).attr('href');
// Get shown anchor and remove that class -
$('.shownAnchor').removeClass('shownAnchor');
$(this).addClass('shownAnchor');
// first hide currently shown div,
$('.shownDiv').fadeOut(_animDuration, function(){
debugger;
// then remove the shownDiv class, show the clicked div.
$(this).removeClass('shownDiv');
$('#' + attrHref).fadeIn(_animDuration, function(){
// then add that shownDiv class to the div currently being shown.
$(this).addClass('shownDiv');
check = 1;
})
});
}
return false;
});
});
DEMO
I simply want to have a variable toggle between true and false and have the text on the button clicked to change as well. Here is my Jquery:
$("button").toggle(
function () {
$(this).text("Click to change to paint brush");
var erasing = true;
},
function () {
$(this).text("Click to change to eraser");
var erasing = false;
}
);
This looks 100% sound to me, but in my jsfiddle you will see that it is toggling the existence of the button before I can even click it! Why is this happening and how can I fix it?
This version of toggle has been deprecated (1.8) and removed (1.9). Now you need to handle it in button click itself.
Somthing like this:
var erasing = false;
$("button").click(function () {
erasing = !erasing;
$(this).text(function (_, curText) {
return curText == "Click to change to paint brush" ? "Click to change to eraser" : "Click to change to paint brush" ;
});
console.log(erasing);
});
Fiddle
Plus if you want to preserve the value of the variable just define them out of the click event scope, so that it is more global to be accessed outside.
See
.toggle
.text(func) syntax
Deprecated toggle
Thank you all for explaining how toggle is out of date...so that is all I needed and then I solved my problem with a simple if statement:
var erasing = false;
var i = 0
$("button").click(function () {
if(i%2==0){
$(this).text("Click to change to paint brush");
erasing = true;
}
else{
$(this).text("Click to change to eraser");
erasing = false;
};
i += 1
});
jsfiddle
As PSL said, the toggle you're looking for is gone and lost. if you want a click and hold solution (as your title suggests), you could look at using mouseup and mousedown.
var erasing;
$("button").on({
"mousedown": function () {
$(this).text("Click to change to paint brush");
erasing = true;
},
"mouseup mouseleave": function () {
$(this).text("Click to change to eraser");
erasing = false;
}
});
Demo : http://jsfiddle.net/hungerpain/ymeYv/6/
Morning folks. Have an issue with a simple jQuery gallery i'm making. It lets the user cycle through a collection of images via some buttons and at the same time, rotates through these images on a timer. My problem is that the user is able to click the button multiple times which queues up the fade in animation and repeats it over and over, e.g. user clicks button 5 times > same image fades in/out 5 times > gallery moves to next image.
I've tried using:
$('#homeGalleryImage li a').unbind('click');
After the click event is fired and then rebinding:
$('#homeGalleryImage li a').bind('click');
After it's done but this simply removes the click event after pressing a button once and never rebinds to it?
I've also tried disabling the button via:
$('#homeGalleryImage li a').attr('disabled', true);
To no avail... ?
There is a secondary issue where if you manage to click a button while the image is in a transition, the next image appears 'faded' as if the opacity has been lowered? Very strange... Here is the code for button clicks:
var i = 1;
var timerVal = 3000;
$(function () {
$("#homeGalleryControls li a").click(function () {
var image = $(this).data('image');
$('#galleryImage').fadeOut(0, function () {
$('#galleryImage').attr("src", image);
});
$('#galleryImage').fadeIn('slow');
$('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
$(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
i = $(this).data('index') + 1;
if (i == 4) {
i = 0;
}
timerVal = 0;
});
});
Here is the code that cycles through the images on a timer:
//Cycle through gallery images on a timer
window.setInterval(swapImage, timerVal);
function swapImage() {
$('#galleryImage').fadeOut(0, function () {
var imgArray = ["/Content/Images/Design/gallery placeholder.jpg", "/Content/Images/Design/1.jpg", "/Content/Images/Design/2.jpg", "/Content/Images/Design/3.jpg"];
var image = imgArray[i];
i++;
if (i == 4) {
i = 0;
}
$('#galleryImage').attr("src", image);
$('#galleryImage').fadeIn('slow');
});
var currentButton = $('#homeGalleryControls li a img').get(i - 1);
$('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
$(currentButton).attr("src", "/Content/Images/Design/btn_checked.gif");
}
I realise it might be a better idea to use a plugin but I'm very new to jQuery and I'd like to learn something rather than using some ready made code.
Any help at all, is much appreciated.
Thankyou
You could always try adding something to the element to cancel the click event?
For example
$(".element").click(function(e) {
if ( $(this).hasClass("unclickable") ) {
e.preventDefault();
} else {
$(this).addClass("unclickable");
//Your code continues here
//Remember to remove the unclickable class when you want it to run again.
}
}):
In your case you could try adding a check on the click.
$('#homeGalleryImage li a').attr('data-disabled', "disabled");
Then inside your click event
if ( $(this).attr("data-disabled" == "disabled") {
e.preventDefault();
} else {
//Ready to go here
}
Edit
Here is a working example showing the element becoming unclickable. http://jsfiddle.net/FmyFS/2/
if you want to make sure that the registered event is fired only once, you should use jQuery's one :
.one( events [, data ], handler ) Returns: jQuery
Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
see examples:
using jQuery: https://codepen.io/loicjaouen/pen/RwweLVx
// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);
using vanilly JS: https://codepen.io/loicjaouen/pen/gOOBXYq
// add a listener that run only once
button.addEventListener('click', once_callback, {capture: true, once: true});
I'm hacking a gallery plugin where I want to disable the click event for the thumbnail and replace it with a hover event.
This is what I did: http://jsbin.com/enezol/3
$(function() {
var galleries = $('.ad-gallery').adGallery();
$('.ad-thumb-list a').hover(function() {
$(this).click();
});
$('.ad-thumb-list a').click(function() {
return false;
});
});
The plugin doesn't allow me to set event to use. So Instead of changing it from their code, I'll just add a little tweak on top of it.
So I want to disable the click event for the 'thumbnail' and just use 'hover' event instead.
Any got and ideas? I'm also open to other approach as long as it meets my requirement.
Thank You!
Trying to implement Steph Skardal and Nicosunshine suggestion:
var thumbs = $('.ad-thumb-list a'),
oldfunction = thumbs.data("events").click["function () { context.showImage(i); context.slideshow.stop(); return false; }"];
thumbs.unbind("click").hover(oldFunction);
edit: My Solution:
I use return false to restrict it from going to the url but it does not restrict in calling the function. Any alternative ideas?
var galleries = $('.ad-gallery').adGallery();
var thumbs = $('.ad-thumb-list a');
thumbs .hover(
function () {
$(this).click();
},
function () {
}
);
thumbs.click( function () { return false; });
You want to use jQuery's unbind method, to unbind the click event. It will have to be called after the plugin is called. E.g.:
$('.ad-thumb-list a').unbind('click');
You could try to unbind the click method and then bind the original function to the hover.
If you can't get the original function you can get it by seeing what the console returns if you throw:
$('.ad-thumb-list a').data("events").click; //name of the property that has the function
then you grab that function and do:
var thumbs = $('.ad-thumb-list a'),
oldfunction = thumbs.data("events").click["theValueYouGotInTheConsole"];
thumbs.unbind("click")
.hover(oldFunction);
Edit:
Here is an example of what I ment with "theValueYouGotInTheConsole", in the image I'm accessing the click property, and then the "4" is where the function is stored.
If you don't want to hardcode the value you can do:
var dataEvents = thumbs.data("events").click,
oldFunction;
for(var functionEvent in dataEvents) {
oldFunction = dataEvents[functionEvent];
break; //I'm assuming there's only one event
}