i am trying to make the value of a button change when hovering, but then change back on mouse off.
To change the value this does work:
$(".followbuttony").hover(function () {
$(".followbuttony").toggle('value', 'Unfollow');
});
But of course it stays that value. The problem is that the button value is dynamically loaded in the first place so i cant just set another value on mouse off.
Any help on making this a toggle style action?
I have this jsfiddle to show:
http://jsfiddle.net/T5Vm2/
Thanks!
That's not the way to do it, you have to use both handlers in hover()
$(".followbuttony").hover(function () {
$(".followbuttony").val('Unfollow');
},function() {
$(".followbuttony").val('Following');
});
FIDDLE
Personally, I like this better
$(".followbuttony").on('mouseenter mouseleave', function(e) {
$(".followbuttony").val(e.type=='mouseenter'?'Unfollow':'Following');
});
To store the initial value, change it, and then get it back, you can do :
$(".followbuttony").on('mouseenter mouseleave', function(e) {
if (e.type=='mouseenter') {
$(this).data('val', this.value).val('Unfollow');
}else{
$(this).val($(this).data('val'));
}
});
FIDDLE
You can pass two functions to hover event like this :
$(".followbuttony").hover(function () {
$(".followbuttony").prop('value', 'Unfollow');
},function() {
$(".followbuttony").prop('value', 'Following');
});
Click here - Jsfiddle
Related
When I click the button, I want to hide that button and show the div. I want this to be slow.For this:
$('#add_note').on('click',function (){
$(this).hide(200);
$('#add_note_form').show(200);
})
i used this.
But, I want to make this using prop('hidden',true/false).
$('#add_note').on('click',function (){
$(this).prop('hidden',true);
$('#add_note_form').prop('hidden',false);
})
It works like this but is it possible to do it slow?
You can't animate a slow transition using the boolean hidden property.
However you can use fadeOut() instead, then set the property in the callback when the animation completes:
$('#add_note').on('click',function() {
$(this).fadeOut(1000, function() {
$(this).prop('hidden', true);
});
$('#add_note_form').fadeIn(1000);
})
I'm trying to use jQuery to hide and show elements on a button click. I have the following code:
$(function(){
$('#link-form').hide()
$('#link-submit').hide()
$('#main-header-submit').on("click", function() {
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
$(this).on("click", function() {
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
})
})
})
This successfully shows and hides the divs when I click the 'main-header-submit' button, but when I click the button (effectively for a third time) to make the elements show again nothing happens. Any help much appreciated.
If you rewrite your code like this, it should work:
$(function(){
$('#main-header-submit').on("click", function() {
$('#link-form').toggle("fast");
})
})
The toggle function hides the elements if they are shown and shows them if they are hidden. Check here http://api.jquery.com/toggle/
The issue is because you're attaching another click handler on each successive click. The first shows the link-form, while the second hides it. This is why you never see any change.
From what I can see of your code, to achieve what you require you simply need to use toggle() and fadeTo() with a ternary instead. Try this:
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1);
});
Working example
Essentially, using $("selector").on('click', function() { ... }); will run the ... on the click event for that element.
Inside the ... function definition, you're overwriting the .on('click') by another function.
So in other words, the first time you click, you're telling the code to show your element, then rebind the click to hide. So every subsequent click will hide the already hidden element.
What you need to do is to something like this:
$('#main-header-submit').on("click", function() {
if ($(this).is(":visible")){
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
}
else{
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
}
});
use toggle() and fadeToggle
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeToggle("fast")
})
I went through many post from SO but not able to relate with my scenario.
I have this code on button click. by which User can create as many div on runtime as he wants to on UI.
$('#adddiv').click(function () {
debugger;
$('#main').append('<div class="ara-dynamic-div">
<div class="box box-solid bg-light-blue-gradient">
</Div></div>');
});
code to get buttonclick event from that div
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
function showMakeAndHold(obj) {
alert(obj);
$('.ara-dynamic-div').fadeOut();
}
Now the problem is that I have to create multiple dynamic div. and each div will have button to close itself. When I call this function it will close all created div's instead of the one which button is clicked.
I am not able to find the proper div by which request for close come. I am new to DOM and JQuery. not able to relate the things
First of all, if you're using multiple divs you shouldn't give the close button an ID, but a class instead (let's say, .close)
Next you can use event delegation to find the correct element:
$(document).on('click', '.ara-dynamic-div .close', function( event ) {
$(this).closest('.ara-dynamic-div').fadeOut();
} )
The delegator handles all click events in any .ara-dynamic-div .close button, catching them all and allowing you to use $(this).closest(...) to get to the parent container.
Edit: Corrected a mistake
You can use jQuery's .closest() function.
function showMakeAndHold(obj) {
alert(obj);
$(obj).closest('.ara-dynamic-div').fadeOut();
}
JSFiddle
Replace this:
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
by this:
$(document).on('click', '#remove', function () {
$(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function () {
$(this).remove();
});
});
Here is the JSFiddle demo
What the code does is that it remove all other .ara-dynamic-div except the one for which the button was clicked.
I have a css image that has a close button attached to it. I'd like to click the close button, and have the entire span fade out with jquery. This is basically my html:
<span class="topic_new_button">
</span>
And I tried:
$(".closebutton").on("click", function(event) {
var $row = $(this);
$row.animate({ opacity: 0.05}, function() {
$row.find(".imglink").fadeIn();
});
});
But that doesn't work, can someone point out the error of my ways?
To fadeout the entire span, call fadeOut() on the clicked element's parent
$(".closebutton").on("click", function (event) {
$(this).parent().fadeOut();
event.preventDefault();
});
first thing you used fadeIn which used for showing instead use fadeOut or hide
if you are not using anymore <span class="topic_new_button"> then below will workout
$(".closebutton").on("click", function (event) {
$("#topic_new_button").fadeOut();
});
OR
$(".closebutton").on("click", function (event) {
$("#topic_new_button").hide();
});
If this and the above example do not work, your jQuery may be out of date.
$(document).ready(function() {
$('.closebutton').click(function() {
$('span').fadeOut();
});
});
Also, there is a mistake in your HTML code (extra quote mark), and when you have link with no reference, it returns an error, use something else as a button.
Here is a JSFiddle example using a <button> tag instead.
I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.
You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);
This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});
See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}
May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})
jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});
Try this that works for me:
$('#bar').mousedown();
Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.
Just use this:
$(function() {
$('#watchButton').trigger('click');
});
You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.