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.

jquery slideToggle with siblings not working

I would like to hide one div and show other div.
While hiding and showing other div, it should look like a slide, which can be achieved using slideToggle() in jQuery.
Please suggest the necessary changes in my javascript to make div appear as a slide when clicked on 1 or 2 to show corresponding div in the table. Please find the complete example in this fiddle.
When user clicks on 1 divOne12 should be shown and when user clicks 2 divTwo12 should appear and previous div should be hidden. How can i apply slideToggle() in the below javascript function.
Thanks.
Below is the javascript:
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).show().siblings('div').hide();
});
});

Example: http://jsfiddle.net/0p7djjnc/9/
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).slideDown(500).siblings('div').slideUp(500);
});
});
Is this what you're referring to?

Jquery selector issues with dropdown

I have dropdown menu. In the top level item has a background image ( Carrot indicator ) applied to the href tag on mouse over. I would like to keep or reset the same background image on the parent li href item when the cursor is on the sub menu items. I am a newbie with jQuery please help!
I tired to following but obviously don't know what I am doing
$('ul.sub-menu').parent('li a').hover(
function() {
$(this).css('background-image','/wp-content/themes/wp-crumblemagazine/images /bg/carrot.gif');
}, function() {
$(this).css('background-image','none');
});
});
});
Here is the url to the page
http://mec.staging.wpengine.com/

Firstly, your selector didnt return any objects,so its probably wrong...and secondly, i wouldnt make the arrow disappear when entering the submenu in the first place.
+ you also need to position the background image, not just enable it.
but ... a sample with color is below
jQuery('ul.sub-menu').parent().find('li>a').hover( function(){
jQuery(this).parent().parent().parent().find("a.sf-with-ul").css('color','red');
},
function(){
jQuery(this).parent().parent().parent().find("a.sf-with-ul").css('color','white');
}
);

JQuery toggle images CSS

I am using Jquery to change the css of some images.
It works and changes the image css size when clicked.
The only issue is that when I click on the next image, the previous image stays
with the new css toggle.
Is there a way that when I click on the next image, the previous image goes back to
the original css.
I have included a jsfiddle example here:
http://jsfiddle.net/webdott/hSFpp/
Here is the jquery code:
$('img').click(function() {
$(this).toggleClass('thumb fullview')
});
You can see that each image you click stays large.
Thanks

You need to remove the fullview class from all other img elements, before adding it to the one which was clicked. Try this:
$('img').click(function() {
$('img').removeClass('fullview'); // remove class from all
$(this).addClass('fullview'); // add class to clicked img
});
Updated fiddle

Try removing the class on img "fullview" and adding it to $(this) after.
$('img').click(function() {
$('img').removeClass('fullview');
$(this).addClass('fullview');
});
Fiddle
UPDATE:
I realized that though we both solved the problem, clicking the large image didn't toggle it. I added a function for that in the following code:
if ( $('img').hasClass('fullview') ) {
$(this).click(function() {
$(this).removeClass('fullview');
});
}
UPDATED FIDDLE

check this fiddle. I solved your issue. please check this fiddle http://jsfiddle.net/Resey/1/
$('img').click(function() {
$(this).toggleClass('fullview').siblings().removeClass('fullview');
});

jQuery to Toggle a form in a div, prevent hiding when clicking on inputs

Sorry if this has been asked, I am not sure how to best word it so I couldn't find a result on Google.
I currently have a div #divForm with some text and a table that has a form inside. I currently have it so when you click on the div it toggles to show the table:
$("#divForm").live('click', function () {
$(this).attr('class', 'closeForm');
$(this).find("table.formTable").slideDown();
});
The code that hides the div is as follows:
$(".closeForm").live ('click', function () {
$(this).attr('id', 'divForm');
$(this).find("table.formTable").slideUp();
});
This works. However, because there are inputs in the table/form, which is inside the div, clicking on the inputs to enter information causes the table to hide.
What is the best way to have it so the table/forms hides when clicking anywhere in the div EXCEPT when clicking on an input?

I'm not sure I completely understand your layout, but if .closeForm is the click target you could check the actual event target using .is() and :input like this:
$(".closeForm").live('click', function (e) {
if($(e.target).is(":input")) return;
$(this).attr('id', 'divForm');
$(this).find("table.formTable").slideUp();
});