We Keep Coding

How can I toggle background color and toggle slide at the same time?

I want to toggle background-color and slideToggle on click. I also want a hover-over effect on all buttons. My hover-over effect stops working after the first click. I also haven't figured out a good way to toggle background-color as you will see by my code.
Here is my jsfiddle. This JavaScript code doesn't work if the same button is clicked twice:
$('#11').show().css({'background-color':'#cccccc'});
$('#22,#33,#44,#55,#66').show().css({'background-color':'white'});
Also, if you have any suggestions on how to make my JavaScript code cleaner/shorter, I'd like to see them.

With a little clean up you can simplify this whole thing a lot:
jquery
$(document).ready(function(){
$('.button')
.on('click', function () {
$('.button').not(this)
.removeClass('selected')
$('p.displayed').not($(this).next().next())
.slideUp()
.removeClass('displayed')
$(this)
.toggleClass('selected')
.next(/*br*/).next(/*p*/)
.slideToggle()
.addClass('displayed')
})
});
css
button.selected {
background-color: #ccc;
}
src: https://jsfiddle.net/yLr5equc/14/ (sorry, at first I forgot to hide the previous slideDown.. this is resolved now)

"Also, if you have any suggestions on how to my my javascipt
cleaning/shorter, I'm happy to listen. "
You don't need to repeat $(document).ready(function(){} every time for every new function/object. One $(document).ready(function(){} can store all your javascript/jquery code. That will shorten your code alot and make it less messy.
Like I did here: https://jsfiddle.net/yLr5equc/3/

Because the style defined in CSS has been overridden by jQuery-added inline style, therefore in .button:hover, add !important to background-color to make it the highest priority.
.button:hover {
background-color: #e6e6e6 !important;
cursor: pointer;
}
Updated solution: https://jsfiddle.net/yLr5equc/17/
No more !important as I answered above. I created the class .selected for .button and toggle it instead of inserting the style inline.
.button.selected {
background-color: #ccc;
}
I also have refactored the scripts, now shorter and work more effectively.
$(document).ready(function() {
$(".button").on("click", function() {
var $this = $(this),
$next = $(this).next(".slide");
if($next.hasClass("opening")) {
$this.removeClass("selected");
$next.slideUp("fast").removeClass("opening");
} else {
$this.addClass("selected");
$this.siblings().removeClass("selected");
$next.slideDown("fast").addClass("opening");
$next.siblings(".slide").slideUp("fast").removeClass("opening");
}
});
});

Easiest way to make disabled button look disabled with jQuery

When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );

Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle

I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}

it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/

Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}

The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}

Setting up a call to external js class

It may be a simple question, but being a newbie it is hard to get it to run.
So I have this leanModal javascript class, which I want to use for a modal popup.
here is the example paragraph that has to appear once an image is clicked:
<p id="lean_overlay"> Some text to appear</p>
Following is the css that is applied to it:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
The tutorial of leanModal class says the following:
Step 3: call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element.
$("#trigger_id").leanModal();
What I want to be done is once an img is clicked, the leanModal method to be called, but I got lost in the previous tutorial, in particular which element is a modal trigger and which one is the target element. Moreover, how to call a function once an image is clicked?
any help is much appreciated.

Since you mentioned image is clicked, then you can check its target by
$('img').click(function (e) {
alert(e.target);
});

Making an image change once it is clicked

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.

I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>​
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}​
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});​​
​
JsFiddle example

If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};

You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.

That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}

Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator

how to disable whole body other than a div

I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal

You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;

That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>

What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.

OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...