1 quick problem basically my function is working however it only works when I click on actual color picker and not the button however I would like to modify that function in a different way so it works like this.
1.User clicks on a color they want to use.
2.When they click on a div it applies choosen color as a background.
Here's my code:
$(document).ready(function() {
var storage;
$("#changeColor").click(function(){
$("#colorChoice").click(function(){
$('#' + storage).css('background', $(this).val());
});
});
$('#content-link2').on('click', 'div', function(e) {
storage = ($(e.target).attr("id"));
});
});
<input type="color" id="colorChoice">
<button id="changeColor" class="btn-primary pull-right">Change</button>
So, my question is how could that function be modified to work as intended?
Trying to answer your question(s):
First: You shouldn't nest a click function into another click function. Like this you "initialize" the event listener of the color field each time you click on your button.
Second: By Using click on the color input field you listen to the event when you open the dialog, not when you set/ select the color. You should use the input event instead.
$(document).ready(function() {
var storage;
$("#colorChoice").on('input',function(){
storage = $(this).val();
});
$('#content-link2').on('click','div',function(e) {
$(this).css('background',storage);
});
});
Third: How to change the background color on different elements. I am not sure what you want to do - but if you want to change the background-color of the body when you click on it, you can do something like this:
// change the body background by clicking anywhere (inside the body)
$('body').on('click', function(e) {
$(this).css('background',storage);
});
If you want to add this functionality to all elements inside a container you could use the wild-card selector:
// would add the click handler to all elements which are inside
// an element with the ID content-link2.
$('#content-link2').on('click','*',function(e) {
});
Or you can bundle a set of different selectors, for example:
$('#YourColorSetButton').on('click','*',function(e) {
$('body, #content-link2, #content-link3').css('background',storage);
});
To complete this answer, here is the fiddle link from the comment above.
Related
How to prevent click another button if first is clicked...
Example
http://jsfiddle.net/C5AVH/3/
$(function(){
$('.vote_like').one('click',function(){
$('.vote_dislike').removeClass('vote_dislike');
alert('Done!')
});
$('.vote_dislike').one('click',function(){
$('.vote_like').removeClass('vote_like');
alert('Done!');
});
});
Like -
Dislike
When you click Like button i want disable click on Dislike button and inversely...
im try with removing class but seems that not working...
$('.vote_like').removeClass('vote_like');
You can remove the click handler
$(function () {
$('.vote_like').one('click.like', function () {
$('.vote_dislike').off('click.like');
console.log('like!')
});
$('.vote_dislike').one('click.like', function () {
$('.vote_like').off('click.like');
console.log('dislike!');
});
});
Demo: Fiddle
Because you've attached the .one handler to each button, it will still be executed at most one time according to the jquery docs. To prevent the click you must remove the handler after one is clicked.
$('.vote_like').one('click',function(){
$('.vote_dislike').off();
alert('Done!')
});
$('.vote_dislike').one('click',function(){
$('.vote_like').off();
alert('Done!');
});
});
Like -
Dislike
But better yet, why not just attach the one handler to both elements and check which was clicked:
$(function(){
$('.vote_like,.vote_dislike').one('click',function(){
if($(this).is('.vote_like')){
//set data for like
}
else{
//set data for dislike
}
//make ajax call
});
Anchors don't have a way to disable them, so you'd either need to remove the anchor or set a boolean in your javascript to track if it's been clicked.
Or, you can convert them into actual button elements, play with the disabled state.
Or you can use jquery to add custom data attributes to the anchor to track if it's "disabled"
Demo
$(function(){
$('.vote_like, .vote_dislike').on('click',function(){
$(this).siblings('.vote_like, .vote_dislike').add($(this)).prop('disabled',true);
if ($(this).hasClass('vote_like')) {
/* Do like things */ alert('like');
}else{
/* Do dislike things */ alert('dislike');
}
});
});
Can use one handler for both buttons and remove click handler within it for both
var btns=$('.vote_like, .vote_dislike').on('click',function(e){
e.preventDefault();
var isLikeBtn=$(this).is('.vote_like');
/* remove click handler for both, remove class from other button */
btns.off('click').not(this).removeClass( isLikeBtn ? 'vote_dislike' : 'vote_like');
});
Since using off on both would be equivalent of using one
I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?
The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE
i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});
Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle
try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.
Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.
Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example
You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});
I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});
You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle
var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/
Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/
First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});
I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});
fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});
I have the following and it works as it lets me control the the background color of a button. However, I do not have any control over when the button is hovered on.
popUpDialog.parent().find('button:contains("Save")').addClass('gb').removeClass('ui-state-default');
popUpDialog.parent().find('button:contains("Save")').addClass('gb').removeClass('ui-state-hover');
Is there a way to modify the hover class or effect what happens to the button when it gets a hover?
Try the following.
$(function(){
var button = popUpDialog.parent().find('button:contains("Save")');
button.addClass('gb')
.hover(function(){
$(this).removeClass(''ui-state-hover'');
}, function(){
$(this).removeClass(''ui-state-default');
});
});
You can unbind the hover event for the button which will keep the class from being added in the first place:
popUpDialog.parent().find('button:contains("Save")').unbind('mouseenter').unbind('mouseleave')