I have two images with which I am using in an anchor tag. I am using jquery toggle on the click event of the anchor tag to swap between images.
$(document).ready(function(){
$('#registrationForm').hide();
$('#callform').append("<a id='formlink'>IMAGE 1</a>");
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
$('#formlink').empty().append(IMAGE 2);
});
});
});
This works fine the first time around, however i want to toggle between the two images whenever the other is clicked.
Any ideas ?
I'd suggest adding both images initially, but hiding the second image. You can then toggle both images each time the link is clicked without needing to track the state of the images:
$(document).ready(function(){
$('#callform').append("<a id='formlink1' class='formlink'>IMAGE 1</a>");
$('#callform').append("<a id='formlink2' class='formlink' style='display: none;'>IMAGE 2</a>");
$(".formlink").click( function(){
$('#formlink1').toggle();
$('#formlink2').toggle();
});
});
You could just setup a flag when you change to IMAGE1.
selected_image = 'image1'
if(selected_image == 'image1')
toggle to image 2
else
toggle to image 1
Your code is designed to append 'IMAGE 2' after the toggle is complete, and nothing else.
You probably want something like:
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
var imageToShow = $(this).css('display') == 'none')?'IMAGE 1':'IMAGE 2';
$('#formlink').empty().append(imageToShow);
});
});
$(document).ready(function(){
var i = 0;
$('#registrationForm').hide();
$('#callform').append("<a id='formlink'>IMAGE 1</a>");
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
if ( ++i % 2 ) {
$('#formlink').empty().append(IMAGE 2);
} else {
$('#formlink').empty().append(IMAGE 1);
}
});
});
});
this is how I toggle an image
$('.accordion').live('click',function() {
if($(this).attr("src").indexOf('closed') == -1){
$(this).attr("src",'img/accordionclosed.gif');
}else{
$(this).("src",'img/accordionopen.gif');
}
});
hth
Related
Hy guys, I would like to know how remove css styles after click event,
In fact at the first click I add css and remove some other things but I would like at the second click get the same css code at the beginning.
$('#show').click(function (){
$('.sub-menu').css('width', '185px');
$('.sub-menu').css('-webkit-transform', 'none');
$('.sub-menu').css('transform', 'none');
// and second click
$('.sub-menu').css('width', '');
$('.sub-menu').css('-webkit-transform', 'scale(0)');
$('.sub-menu').css('transform', 'scale(0)');
})
I don't want use toggleclass method cuz I don't want touch the css file.
Thanks.
A very simple option is to keep some kind of boolean marker.
var applied = false;
$('#show').click(function() {
if (!applied) {
$('.sub-menu').css('width', '185px');
$('.sub-menu').css('-webkit-transform', 'none');
$('.sub-menu').css('transform', 'none');
applied = true;
} else { // and second click
$('.sub-menu').css('width', '');
$('.sub-menu').css('-webkit-transform', 'scale(0)');
$('.sub-menu').css('transform', 'scale(0)');
applied = false;
}
})
You mentioned that you don't want to touch the css file. How about you create a css rule using jQuery and append it to the head tag.
var rule = $('<style>.myclass{width:185px; -webkit-transform:none; transform:none;}</style>');
$('html > head').append(rule);
$('#show').on('click',function(){
$('.sub-menu').toggleClass('myclass');
});
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' });
});
});
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
Hey guys I am trying to make a button that will open and close based on if it is clicked the first time - it opens, if the second time - it closes and resets.
Here is my code I have so far - it only opens and wont close:
var val;
$(".confirmed").click(function(){
if (val == 1){
hide();
}
val = 1;
$(".confirmedtable").show();
$(".searchconfirmed").show();
});
function hide(){
$(".confirmedtable").hide();
$(".searchconfirmed").hide();
val = 0;
}
Thanks
You can just use the toggle() function in jquery to do this. See: http://api.jquery.com/toggle/
$('#button').click(function() {
$('#div_to_show_hide').toggle('slow', function() {
// Animation complete.
});
});
The toggle will show an element if it's currently hidden, and hide an element if it's currently shown.
$(".confirmed").click(function(){
$(".confirmedtable, .searchconfirmed").toggle();
});
FIDDLE
As an alternative to the toggle() based answers:
$('.confirmed').click(function(){
$('.confirmedtable, .searchconfirmed')[$('.confirmedtable').is(':visible') ? 'hide' : 'show']();
});
JS Fiddle demo.
It is, though, at best merely an alternative; the toggle() approach is more concise.
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"));
});