Develop Reference

Specifiy input targeted blur function

My function works as it should. is there a way to remove the function from a specific input? Because it changes all inputs.. i have 2 check boxes and 1 input that i need to not have this function on.
$('input').blur(function(){
$('input').parent().removeClass("gray");
})
.focus(function() {
$(this).parent().addClass("gray")
});

Try adding a class to the input and checkbox that you don't want the onblur functions, then update the code as below
Add the class to the three inputs that you don't want this feature
$('input').not( ".class" ).blur(function() {
$(this).parent().removeClass("gray");
})
.focus(function() {
$(this).parent().addClass("gray")
});
Hope this helps what you need.

Use this context, $('input') will select all the <input> elements, this in the callback will hold the element on which event is invoked!
$('input').blur(function() {
$(this).parent().removeClass("gray");
})
.focus(function() {
$(this).parent().addClass("gray")
});
.gray {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>

If you have id's for those three inputs you can use this code snippet.
$('input').blur(function(){
$(this).parent().removeClass("gray");
})
.focus(function() {
$(this).parent().not( "#id1, #id2, #id3" ).addClass("gray")
});
It will add class to those inputs which do not match the selector.

If jQuery has Class do this action

I am trying to check whether or not a particular element has been clicked but am having trouble doing so. Here is my HTML:
<div id="my_special_id" class="switch switch-small has-switch" data-on="success" data-off="danger">
<div class="switch-on switch-animate"><input type="checkbox" checked="" class="toggle">
<span class="switch-left switch-small switch-success">ON</span>
<label class="switch-small"> </label>
<span class="switch-right switch-small switch-danger">OFF</span>
</div>
</div>
Here is my jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
</script>
I am guessing that my id "my_special_id" is not what is actually being clicked?

I guess click event should have event parameter.
$(document).ready(function() {
$('#my_special_id').click(function(e) {
if (e.target check condition) {
window.alert('ON!');
}
});
});
parameter 'e' above specified is the event object that has all info about click event.
so if u check all info under 'e.tartget', u will be able to find out which one is clicked.
Hope it's helpful for you.
Cheers :)

Since you are looking for a alert when the checkbox is clicked
$(document).ready(function() {
$('#my_special_id input.toggle').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
Demo: Fiddle

Simply put alert when you click on that particular class switch-on
<script type="text/javascript">
$(document).ready(function() {
$('#my_special_id div:first-child .switch-on').on('click',function() {
window.alert('ON!');
});
});
</script>
Or even try like
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($(this + 'div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});

This JavaScript works for me.
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
alert("On!");
}
});
});
You are sure you have JQuery?
Your code looks fine I think either you have a syntax error somewhere else or you do not have JQuert.
does this alert?
$(document).ready(function() {
alert("Jquery works");
});

The click event will trigger to whatever you're bound do. the only time you'd have to be worried is if you bound to both a parent and child (e.g. you had listed #my_special_id,.switch-small--then you'd have to look at e.target).
With that said, you can use scope to limit how jQuery finds the div:first-child. I'm not 100% sure what you're after, but the below appears to do what you're after:
$(document).ready(function() {
$('#my_special_id').click(function() {
// look for div:first-child within `this` (where `this=#my_special_id`
// per the .click selector above)
if ($('div:first-child',this).hasClass('switch-on')) {
window.alert('ON!');
}
});
});
If you're looking to bind to the on/off separately, you may want to change it around a bit. we can still check for .switch-on, just have to traverse differently:
// here we bind to the on/off buttons and not the container
$('#my_special_id .switch-small').click(function(){
// you want the facsimilee of `div:first-child`, so (because we're now
// within that node, we use .parent() to get back up to it
var $firstChild = $(this).parent();
if ($parent.hasClass('switch-on')){
alert('ON!');
}
});

HTML5 color pick change span color

I'm making a form where you can preview the result. I've made this:
HTML:
<input type="color" id="color" />
<span id="colorchange">Foo</span>
JS:
$(document).ready(function() {
$("#color").click(function() {
var color= $(this).attr('val'); // Not sure about this
$("#colorchange").css("color","+color+");
});
});
Which didn't work. Any ideas?
Thanks!
Edit: jsfiddle here: http://jsfiddle.net/xgm34/
New edit

Use the change event in jQuery:
$("#color").on('change', function() {
$("#colorchange").css({"color":$(this).val()});
});
http://jsfiddle.net/j27Bu/

use this code -
$(document).ready(function() {
$("#color").change(function() {
var color = $(this).val();
$("#colorchange").css("color", color);
});
});
see this fiddle - http://jsfiddle.net/xgm34/10/

using on keyup it will change the color while typing.
$("#color").on('keyup',function() {
$("#colorchange").css({"color":$(this).val()});
});
http://jsfiddle.net/tamilmani/j27Bu/1/

You forgot to close some braces and parentheses
$(document).ready(function() {
$("#color").click(function() {
$("#colorchange").css("color","+color+");
});
});
By the way:
The color type in input doesn't exist
dont forget to close yout input element />

jQuery toggle search button

I use old javascript code to flip my search button from search to searching in my forms as follows
<div id="search_clickable"> <input class="search" type="submit" value="search" onClick="javascript:flipSearchButton();"></div>
<div id="search_unclickable" class="hidden"><img src="/assets/img/searching.png" alt=""></div>
My javascript function is
function flipSearchButton()
{
document.getElementById('search_clickable').style.display = 'none';
document.getElementById('search_unclickable').style.display = 'block';
}
How to I achieve this with jQuery?

function flipSearchButton(){
$('#search_clickable').hide(); // or - $('#search_clickable').toggle();
$('#search_unclickable').show(); // or - $('#search_unclickable').toggle();
}
And stop using inline javascript:
$('.search').click(flipSearchButton);
Note that your search button is of type submit (?!) so it will submit the form, You probably want to change the type to button or return false from the callback:
function flipSearchButton(){
$('#search_clickable').hide();
$('#search_unclickable').show();
return false;
}

include jquery:
<script type="text/javascript" src="jquery.js"></script>
then:
function flipSearchButton()
{
$('#search_clickable').hide();
$('#search_unclickable').show();
}

i thought something like this:
$("#search_clickable").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
if you wanna toggle this element, use toggle() instead of hide() and show().

You can also consider to use fade effect to improve user experience
function flipSearchButton()
{
$('#search_unclickable').fadeIn('slow', function() {
// Animation complete
});
$('#search_clickable').fadeOut('slow', function() {
// Animation complete
});
};

You don't even need a separate function:
$("input[type=submit").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
Or use the id/class of the submit button if you want to on a specific button:
$(".search").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});

Please refer below URL for toggle Div.
Check below Working Demos
As per your question : Demo1
As per my opinion : Demo2
Thanks

Jquery anchor tag display problem

I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!

Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});

The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.

You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following: