Here's a fiddle :
http://fiddle.jshell.net/ggw6hqsj/1/
Here's my problem (for example) :
When the first button is clicked, the second is hidden.
But I don't know how to make reappear the hidden button when the first button is clicked once again.
Any idea ? Thanks.
$(document).ready(function(){
$('.button1').click(function(){
$('.button2').toggle();
});
});
http://fiddle.jshell.net/ggw6hqsj/3/
The easiest way in your code would be to change
$('.button2').hide();
to
$('.button2').toggle();
for button 1 and 2.
fiddle
Probably the simplest change to your existing code would just be to use .toggle() instead of .hide():
$('.button2').toggle();
You only need to show the clicked button and hide the other one.
try this
function activateButton(num){
var activeButton = ".button" + num;
var otherButton = ".button" + (num === "1" ? "2" : "1");
$(this).toggleClass('active');
$(activeButton).show();
$(otherButton).hide();
}
$(document).ready(function(){
$('.button1').click(activateButton("1"));
$('.button2').click(activateButton("2"));
});
Related
I wrote a code to create a bootstrap panel and add some elements and remove them when clicked on Remove icon. When I click on Remove icon, background of all elements will be removed. I don't want this to happen. I want background of particular element whose Remove icon is clicked to be removed. My Code:
$(document).ready(function (){
$(".remove_gly").click(function () {
//alert('Clicked');
//var catName = $(span).closest('a').text();
// var index = subscriptionArrays.indexOf(catName);
// if (index > -1) {
//subscriptionArrays.splice(index, 1);
// }
//span.parentNode.innerHTML = span.innerHTML;
$("a").closest(".droggIng").removeClass("droggIng");
});
});
JSFiddle link: https://jsfiddle.net/kqcs0pq9/8/
How can I do it?
Remove a and add this
$(this).closest(".droggIng").removeClass("droggIng");
use this :
$(this).closest(".droggIng").removeClass("droggIng");
Updated Fiddle
Please try this code, it will do the job-
$(document).ready(function (){
$(".remove_gly").click(function () {
$(this).parent(".droggIng").removeClass("droggIng");
});
});
There are some buttons at my page i.e button "one", button "two" etc. There is a text too which contains "Set This".
Requirements:
When user click on the button "One",
(a) the button should be turned to dark background color(Selected/Active state)
(b) Text, "Set this" should be changed to text according to clicking button's text. In this case, "Set this" will be changed to "Set One"
When user click on the button "One" again,
(a) the button should be returned to it's previous state(light background version)
(b) Changed text ("Set One") should be reset and returned back to default state("Set This")
Same requirements for other buttons. I could make the requirements 1 and 2(a) But I can't make 2(b). How can I make it?
My fiddle Work: http://jsfiddle.net/learner73/VFPLf/
$('.btn').click(function(){
$(this).toggleClass("active");
$('.changeText').text($(this).data("text"));
});
If I am understanding the problem correctly, this would probably be your best bet
$('.btn').click(function(){
$(this).toggleClass("active");
if ($('.changeText').text() == $(this).data("text")) {
$('.changeText').text("This");
} else{
$('.changeText').text($(this).data("text"))
}
});
JSFiddle
Fiddle Demo
$('.btn').click(function () {
var $this = $(this);//cache selector
$this.addClass('active').siblings().removeClass('active');//addClass to current element clicked and remove class from siblings
$('.changeText').text($this.data("text"));
});
.siblings()
.addClass()
.removeClass()
Like this?
$('.btn').click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
$('.changeText').text($(this).data("text"));
});
http://jsfiddle.net/prollygeek/Azw4t/2/
$('.btn').click(function () {
if(!$(this).hasClass('active'))
{
$(this).addClass('active').siblings().removeClass('active');
$('.changeText').text($(this).data("text"));
}
else if($(this).hasClass('active'))
{
$(this).removeClass('active')
$('.changeText').text("This");
}
});
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 am using jQuery with .load function to update count, however if the button is clicked so fast, it can be hacked. Also I can't use unbind as this makes the button unusable after the first click.
Here is the jQuery I use when button is clicked.
<script type="text/javascript">
$(function() {
// update "likes" of a post
$(".bubble-like a").click(function() {
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-like').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});
// remove my like from a post
$(".bubble-unlike a").click(function() {
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-liked').fadeOut(200);
$(this).parent().parent().children('.bubble-unlike').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});
});
</script>
If I clicked on like too fast or vice versa, the load is executed more than once. I also explained that unbind does not help.
Any idea?
UPDATE
I am not sure if I am doing that correct, but it seems to resolve it in my case.. can anyone correct/make me wrong ?
I added this line to my click handlers
// update "likes" of a post
$(".bubble-like a").click(function() {
$(this).css({'display' : 'none'});
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-like').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});
// remove my like from a post
$(".bubble-unlike a").click(function() {
$(this).css({'display' : 'none'});
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-liked').fadeOut(200);
$(this).parent().parent().children('.bubble-unlike').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});
I added this line to my loaded scripts add_post_like and remove_post_like:
$('.bubble a').show();
Now it seems to accept only one click.. Is that reliable?
You can disable the click event whenever the button is clicked til the end of loading process. Then activate the event after it's completed within the callback function.
gory details: http://api.jquery.com/load/
UPDATE:
I've made a quick example for you: http://jsfiddle.net/hvfc5/1/
As you click the button, it would firstly remove the event binding on the button, then bind it back again after the image loaded. But if you click it again after this, you'd figure that the event still can be unbinded, but it never comes back. It's because the image has been loaded, therefore the load() function won't even be triggered.
This is just a demo sample for you to understand how to manipulate things, you still need to customize your own version as demanded.
You can disable the button as it is clicked and enable on when other button is clicked like toggle e.g. When likes is clicked disable it and enable unlike and vice versa.
The one() function comes to mind.
http://api.jquery.com/one/
Yes: first action of button click would be disabling the button itself. That way, fast clicks are no longer possible. Of course, you,'d have to re-enable the button after the load.
Update
Sigh... It's all about teh codez right?
$(".bubble-like a").click(function() {
$(".bubble-like a").attr('disabled', 'disabled');
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-like').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number,
function(){
$(".bubble-like a").removeAttr('disabled');
});
});
$(".bubble-like a").click(function() {
var button = $(this);
$(this).wrap($('<button/>', {
"class" : "disButton",
disabled: true,
width: button.width()
}
)); // wrap the anchor with button with disabled property
...
..
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, function() {
button.unwrap(); // remove the wrapping button
});
});
You have to right some css to make the button look like a simple text. For example,
button.disButton {
border: none;
background: transparent;
}
button.disButton a{
color: #ddd;
text-decoration: none;
}
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