Develop Reference

color picker function working upside down

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.

Why can't jquery remove these classes?

I have created a series of elements that when you click on any one of them, they will expand, pushing the other elements out of the way. Initially if you clicked on it again the element would contract, but now I want to take the close functionality and put it in a button with in the element.
Initially when you click on the element, I use jQuery to add a number of classes to a variety of elements.
$(".left > .elem").click(function () {
$(this).addClass("expand");
$(this).parent().addClass("WithLarge");
$(this).children(".bar").addClass("visible");
$(this).children(".reduce_button").addClass("visible");
$(".right").addClass("shift_right");
});
When I click the close button I would like to remove those classes.
$(".reduce_button").click(function () {
$(this).parent().removeClass('expand');
$(this).parent().removeClass("WithLarge");
$(this).parent().children(".bar").removeClass("visible");
$(this).parent().children(".reduce_button").removeClass("visible");
}
The problem is, those classes aren't budging.
You can try it out on the JSFiddle
Click on the yellow box(".left > .elem"), it expands pushing the others out of the way, click on the red box(".reduce_button"), and nothing happens. I tried
console.log($(this).parent().hasClass('expand'));
$(this).parent().removeClass('expand');
console.log($(this).parent().hasClass('expand'));
to see if it has been removed. It returns false, even though the class is still there.
Why can't I remove these classes?

You ARE removing the class. But, the click on the .reduce_button is also triggering the .elem click event, which adds the class back again.
EDIT:
As commented below by j08691, you can add stopPropagation to keep the event of going on to the next listener, like:
$(".reduce_button").click(function (e) {
$(this).parent().removeClass('expand');
e.stopPropagation();
...
Here is your fiddle updated: http://jsfiddle.net/HybHK/9/

Change Div Class on click takes multiple clicks before it works

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.

Hover only works when user clicks on the element

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"});
});
});​

Is there a way to detect mouse press in jQuery?

I want to add a class to a link when it is clicked, but I can't use:
$('a.someLink').click(function() {
// code
});
since click seems to detect when a user clicks and lets go of the mouse clicker on an element. I need to add the class as soon as the user has clicked on the element, even before he lets ago of the mouse clicker and after he lets go I need the class to be removed.
Basically I'm trying to mimic css's active state on links:
a:active
How can this be done?

mousedown() would be what you are looking for in the jQuery docs

You can use $('a.someLink').mousedown(function() { //code }); instead

$('a.someLink').mousedown(function() {
//code
});
http://api.jquery.com/mousedown/

With $('a.someLink').mousedown() you can add the class, and then with $('a.someLink').mouseup() you can remove it.
mousedow(): http://api.jquery.com/mousedown/
mouseup(): http://api.jquery.com/mouseup/

Try mousedown which is triggered even before click event.
$('a.someLink').mousedown(function() {
// code
});