Develop Reference

Change image onclick

I want to display a different image when clicking on my image. A demo is here. When clicking on the image the image should change to an arrow pointing up instead of pointing down. How do I do that?
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div id="flip"><img src="http://i.imgur.com/YCf5zYt.png"></div>
<div id="panel" style="display: none;"><p><i><strong>CONTENT</strong></i></p>
</div>
</td>
JS
var toggled = false;
$("img").click(function () {
if (!toggled) {
$(this).css("", "url(http://i.imgur.com/YCf5zYt.png)");
toggled = true;
} else {
$(this).css("", "url(http://i.imgur.com/V4fKMWS.png)");
toggled = false;
}
$("p").slideToggle();
})
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideToggle("slow");
});
});

Here's another solution with toggleClass() and attr() function :
See this fiddle
$(document).ready(function () {
$("img").click(function () {
$(this).toggleClass('active');
if($(this).hasClass('active')){
$(this).attr("src","http://i.imgur.com/V4fKMWS.png");
} else {
$(this).attr("src","http://i.imgur.com/YCf5zYt.png");
}
$("#panel").slideToggle();
});
});

There are a couple of issues with the code:
First of all, you have to attach all of the event handlers from within the document ready callback. As it stands right now, it is possible that event handler is not attached because image tag may be not yet loaded when you try to attach the handler.
You also have to modify the src attribute of the image, not the css's url style:
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");

you can change the attribue src.
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
Refer link: https://jsfiddle.net/sj7o9x58/2/

there a mistakes in your code try this
var toggled = false;
$("img").click(function () {
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
$("p").slideToggle();
});

Try to write all your code in $(document).ready(); And you have a big mistake.
You should use .slideToggle() for $("#panel"). And this is easier way to do it(without any variables):
$(document).ready(function(){
$("#flip").click(function(){
if($("#panel").css("display") === "none"){
$("#panel").slideToggle().css("display", "block");
$("img").attr("src", "http://i.imgur.com/V4fKMWS.png");
} else if($("#panel").css("display") === "block"){
$("#panel").slideToggle();
$("img").attr("src", "http://i.imgur.com/YCf5zYt.png");
}
});
});
And demo is here

$(document).ready(function () {
var toggled = true;
$("img").on('click',function () {
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
$("#panel").slideToggle("slow");
});
});
The updated fiddle: https://jsfiddle.net/sj7o9x58/3/
I don't know if that's the image behavior you want, if it's the oposite just change te toggled initialization to false and the image by default on the src (html).

How to iterate through a variation of an id name using jQuery (such as idname1, idname2) [duplicate]

This question already has answers here:
jQuery or CSS selector to select all IDs that start with some string [duplicate]
(4 answers)
Closed 7 years ago.
I have a column of 10 checkboxes, with an additional checkbox at the top titled "Select All". Each checkbox has a sequential id, like "cbox1", "cbox2", etc. When each of these cboxes are clicked, they make an image become visible which resides within a div next to that checkbox. This div is called "tinybox" and it has an id which is sequential and matches it's respective cbox. So the 4th checkbox has an id of cbox4 and upon clicking, it opens tinybox4.
I'm trying to use jQuery, so that when you click the "Select All" checkbox, it loops through each of the cboxes and uses .show() or .hide() on all the tinybox variants.
The following jQuery runs when a user clicks "Select All" checkbox, and currently only either shows or hides #tinypic1. Instead of just tinypic1, it should loop(?) through tinypic1,2,3,4,... so how do I adapt this code to iterate through tinybox(n) where (n) represents an increasing integer from 1-10:
<script type="text/javascript">
$(document).ready(function() {
$('#selectall').click(function() {
if ($('#selectall').prop('checked')) {
$("#tinypic1").show();
$('.cboxes').each(function() {
this.checked = true;
});
} else {
$("#tinypic1").hide();
$('.cboxes').each(function() {
this.checked = false;
});
}
});
});
</script>
Hopefully I'm being clear. I'm trying to verbalize my concept of the solution as best as possible. Thanks for your time

There are 2 ways you can go about this that are quick.
you can add a loop to your script like the following:
Here is a fiddle of this way Fiddle
$('#selectall').click(function() {
if ($('#selectall').prop('checked')) {
for ( i = 1; i <= 10; i++ ) {
$("#tinypic" + i).show();
$("#cbox" + i).prop("checked", true);
}
} else {
for ( i = 1; i <= 10; i++ ) {
$("#tinypic" + i).hide();
$("#cbox" + i).prop("checked", false);
}
}
});
You can just do a begins with on the id like so: here is a fiddle of this way fiddle
if ($('#selectall').prop('checked')) {
$("[id^='tinypic']").show();
$("[id^='cbox']").prop("checked", true);
} else {
$("[id^='tinypic']").hide();
$("[id^='cbox']").prop("checked", false);
}

$('#selectall').toggle(
function() {
$('.cboxes').each(function(){
$(this).prop('checked', true);
$(this).next().show();
});
},
function() {
$('.cboxes').each(function(){
$(this).prop('checked', false);
$(this).next().hide();
});
}
);

You can select everything that starts with a string in your selector:
function toggleAll(state) {
if (state===true) {
$( "[id^='tinyPic']" ).show();
$( "[id^='cbox']" ).prop('checked', true);
} else {
$( "[id^='tinyPic']" ).hide();
$( "[id^='cbox']" ).prop('checked', false);
}
}

enter code hereMove your line of code $('#tinypic1').show() to the each block and change it to
this.next().show();
And the same idea for the hide part

hiding div if clicked anywhere in DOM

I have a a textbox in my app, onkeyup I show a div that gets result from database. so whenever user enters something I show the div, the problem is that I want to hide the div if users clicks somewhere else in the DOM.
just like when you select a drop down if you click somewhere else the drop down is closed.
Is there any builtin mechanism for this in jquery or javascript?

$( "body" ).click(function() {
$( "#yourDivIdHere" ).hide();
});
https://api.jquery.com/hide/

Use event delegation and check the originator of a click event. Something like:
$('body').on('click',function (e) {
var origin = e.target || e.srcElement;
if (/* [origin.id != your dropdowndiv.id] */) {
/* hide your dropdowndiv */
}
});

Try this.
Demo: http://jsbin.com/xatanicu/4/edit
$(document).ready(function() {
$('input').focusout(function() {
$(document).click(function(e) {
var targetId = $(e.target)[0].id;
if((targetId !== 'hide-div')) {
$('div').hide();
}
});
});
});

You can hide the result div when the textbox loses focus:
//vanilla JavaScript
textBoxId.onblur = divId.style.display = 'none';
//jQuery
$("#textBoxId").blur(function() {
$("#divId").hide();
});
UPDATE:
It should not hide the result div if the user clicked on the result div itself. (The answer is based on Action on blur except when specific element clicked with jQuery)
var keepFocus = false;
function hideList(){
if(!keepFocus){
$('#divId').hide();
}
}
$('#textBoxId').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 100);
}).focus(function(){
keepFocus = true;
});
$('#divId').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 100);
}).click(function(){
keepFocus = true;
});
See this solution in action here:
http://jsfiddle.net/XC2D7/

Use the same button to trigger two different JQuery events

I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.
I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.
$(document).ready(function() {
$(".selected").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected selected_btn');
});
$(".selected").on("click", function() {
alert('selected');
});
$(".selected_btn").on("click", function() {
alert('de selected');
});
});
With the present code the alert is always 'selected'.

$(document).ready(function() {
$(".selected_btn").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected');
if($(this).hasClass("selected"))
alert("Selected")
else
alert("de-Selected")
});
});
here is a fiddle:
http://fiddle.jshell.net/prollygeek/3LLN2/

Here is a simple and readable example on how to do this:
$(document).ready(function() {
$('.select-img').on('click', function(){
var $el = $(this);
var isSelected = $el.attr('data-selected');
if( isSelected != 'true' ){
firstFn();
$el.html('Use Image').attr('data-selected', true)
}else{
secondFn();
$el.html('Select').attr('data-selected', false)
}
})
var firstFn = function(){
alert('first thing to do');
}
var secondFn = function(){
alert('second thing to do');
}
})
Demo

Use *Class functions:
hasClass
removeClass
addClass
Working code:
$("a").on("click", function() {
if($(this).hasClass("bob")) {
// do delete
alert("delete");
$(this).removeClass("bob");
} else {
// do insert
alert("insert");
$(this).addClass("bob");
}
});
Demo

$(".selected").on("click", function() {
alert('selected');
});
Overrides the event you put on the beginning of the document.ready, I think.
(might not be true, but I think it is)

jquery foreach for checkbox

i have jquery for disable buttons
if check box checked then button enabled
document.getElementById('disabler').onchange = function() {
if ($(disabler).is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
}
});
there is many checkbox but this code work only for first check box only !

Use this:
$(document).on("change", "<selector for disablers>", function() {
if (this.checked) {
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css('cursor', 'not-allowed');
}
});
<selector for disablers> should probably be a class (.disabler) rather than id, since you said you have many of them.

there is many checkbox but this code work only for first check box only !
IDs must be unique.. You should class instead.
Example of using class selector
$('.disabler').change(function () {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});

Try use only jQuery:
$('#disabler').change(function() {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});

Try this:
$("#disabler").change(function(){
if ($("#disabler").is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
}
else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
});

I agree, you are already using jQuery, so use it.
However, and in addition, you are calling the jQuery object far too many times. If you are parsing through to get the jQuery object more than once, then you should create local variables.
Second, you might consider using the power of closures for things like this:
function wireDisabler() {
// closures
var $cbxDisabler = $('#disabler');
var $btnSubmit = $("#signin_submit");
var fOnChange = function() {
var bChecked = $cbxDisabler.is(':checked');
$btnSubmit.prop('disabled', !bChecked)
.css('cursor', (bChecked ? 'pointer' : 'not-allowed'));
};
// handle event
$cbxDisabler.change(fOnChange);
}

if you have more than one disabler in you page, firstly you should use class attribute instead of ID, then easily do this:
$(document).on("change", ".disabler", function(){
//your stuff
});
ID attribute is used as a unique identifier.
check this working DEMO;