We Keep Coding

Remove Class when current toggle is clicked

The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});

Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});

What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked

Change CSS style depending on textbox value onload in jQuery?

I'm trying to make some buttons CSS change onload depending on the textbox value using jQuery 1.9.1 but I'm unable to do that. Suppose, after the page loads, if the value of a textbox is YES then button color should be green and if the value of another textbox is NO then the button color should be blue. In HTML, only "blue" class is assigned as default but jQuery has to change that onload. Here's my code:
$(document).ready(function () {
$('.btn').load(function () {
var isYes = $(this).next('.assignCheck').val('Y');
if (isYes) {
$(this).toggleClass('color-blue color-green');
}
});
});
JSFiddle Demo
How can I change the CSS style depending on a value given after the page loads?

UPDATE
Working Solution,
$('.btn').each(function () {
if ($(this).next('.assignCheck').val() == 'y') {
$(this).toggleClass('color-blue color-green');
}
});
JSFiddle Demo
Your first problem is this line:
var isYes = $(this).next('.assignCheck').val('Y');
What that is doing isn't testing it, it's assigning 'y' to the value of .assignCheck. What you need is something like:
var isYes = ($(this).next('.assignCheck').val() == 'y');
or just
if ($(this).next('.assignCheck').val() == 'y') {
$(this).toggleClass('color-blue color-green');
}
More info # http://api.jquery.com/val/.
Secondly, .load() has been deprecated, use each() instead since the code will run on document load anyway.
$('.btn').each(function() { ...

Merging JQuery & Javascript

I'm using some JavaScript to copy a value when an input is clicked. This works well.
Normally I do a JavaScript alert, but now I would like to use a query fading div.
If I run the jquery or javascript in separate scripts then they work fine, as soon as I join them they fail.
I think this is because I use a onMouseOver for the copy, but an input click event for the fading alert.
Any idea how I can merge these ?
<script language="JavaScript">
function toClip(me,vals) {
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setText(vals);
clip.glue(me);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input').click(function() {
$messageCont = $('<div class="message_cont">');
$message = $('<div>DONE</div>').hide();
$messageCont.append($message);
$('body').prepend($messageCont);
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
});
$message.fadeIn(200, function() {
setTimeout(function(){
$messageCont.fadeOut();
//code to clean up container
}, 1500)
})
})
});
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
});
</script>
This is called via :
<div class='copy' onmouseOver="toClip(this,'$val')"><input type="button" value="Copy"/></div>
Thanks :)
UPDATE 15th April:
Sort of got this working using jquery instead of Javascript.
<input type="button" id="copy_button" data-clipboard-text="Copy Me!" Value="Click ME">
<script src="js/ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById("copy_button"), {
moviePath: "js/ZeroClipboard.swf"
} );
clip.on( 'complete', function(client, args) {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
});
} );
</script>
Only issue I have is it only works with on button. I have lots I'd like it to work with.
Anyone know how to resolve that ?
Thanks :)

Several points :
New $messageCont/$message probably don't need to be created each time an input is clicked? The rest of the code suggests reuse.
The $messageCont = ... expression has incomplete HTML. You must ensure the div tag is closed, either with <div>...</div> or with <div />.
The script fades in $message but fades out $messageCont. This is OK on first use, but you will see precisely nada subsequently; there's no expression to fade $messageCont back in.
Delay in an animation queue can be achieved with .delay(), which is cleaner than using setTimeout().
It's hard to see what the second $messageCont.css(...) expression is supposed to achieve when $messageCont is positioned before it's contents are shown. If it is necessary to position $messageCont initially, then it's better to do so with a stylesheet directive, or in jQuery inside the $(document).ready(function() {...}) structure.
Reading between the lines, I think you probably want something more like this :
$(document).ready(function() {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$('input').on('click', function() {
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
//code to clean up container
});
});
});

jQuery change hover on color, then return back to original color

I've got some buttons on a page whose color is changed via jQuery, illustrating which one's active. I'd like to add a color change ONLY when hovering, after which it's returned to the original color (which is dictated by jQuery) when left.
I first used css: .showlink li:hover {color:#aaa;} which works appropriately except for that when the pages are switched and jQuery changes the colors, it superceeds the CSS.
Then I decided to use simple jQuery that says when something's hovered on, change it's color. this doesn't completely work because it permanently changes the color. To mitigate this, I added in a bit to the function that returns it to a different color.
is there some way I can return it to the original color from before it was changed on hover?
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
$(this).css('color', '#aaa');
},
function(){
$(this).css('color', '#f3f3f3');
});
});
//Changes color depending on which page is active, fades that page in
$(function(){
$('#show_one').css('color', '#ffcb06');
$('#two, #three').hide();
});
$('.showlink').click(function(){
$('.showlink').css('color', '#f3f3f3');
$(this).css('color', '#ffcb06');
var toShow = this.id.substr(5);
$('div.page:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});

.showlink li:hover {color:#aaa !important;}
will superceede everything else.

I'd recommend using an array to record the original color value, and use that in the mouseleave (second) function of hover():
var originalColors = [];
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
originalColors[$(this).index('.showlink')] = $(this).css('color');
$(this).css('color', '#aaa');
},
function(){
$(this).css('color', originalColors[$(this).index('.showlink')]);
});
});
JS Fiddle demo.
You could also use addClass() and removeClass():
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
$(this).addClass('hovered');
},
function(){
$(this).removeClass('hovered');
});
});
JS Fiddle demo.
Which would simply use CSS to apply the changed colour, and wouldn't require any kind of local storage of the CSS colour to reimplement it on mouseleave.

when I have issues like this where original data on an element is lost, I call myElement.setAttribute("oldcolor",myElement.style.color) before changing it, and when I want to revert, I just set it to that. myElement.style.color = myElement.getAttribute("oldcolor")

Although it may be best to use CSS for this, there are times when JavaScript is preferred for one reason or another. Even if CSS is always batter, the concept below should help you with other things in the future as well. So, that being said:
On hover, before changing color, get the current color and store it in the element's data. On hover-out, read that color back.
Demo:
http://jsfiddle.net/JAAulde/TpmXd/
Code:
/* Changes color on hover */
$( function()
{
$( '.showlink' ).hover(
function()
{
/* Store jQuerized element for multiple use */
var $this = $( this );
$this
/* Set the pre-color data */
.data( 'prehovercolor', $this.css( 'color' ) )
/* Set the new color */
.css( 'color', '#aaa' );
},
function()
{
/* Store jQuerized element for multiple use */
var $this = $( this );
$this
/* Set the color back to what is found in the pre-color data */
.css( 'color', $this.data( 'prehovercolor') );
}
);
} );

Use jQuery .mouseout() this is like the inverse of .hover(). If the mouse goes over .showlink element and then off of it again, .mouseout() is called.
$('.showlink').hover(function(){
$(this).css('color', '#aaa');
}
$('.showlink').mouseout(function(){
$(this).css('color', '#bbb');
}

Javascript change style on mouse click

i have a little jquery script :
$('.product_types > li').click(function() {
$(this)
.css('backgroundColor','#EE178C')
.siblings()
.css('backgroundColor','#ffffff');
// $('.product_types > li').removeClass(backgroundColor);
});
that colors me a div onclick. The problem is that i want only the last element clicked to be colored. And i dont know can i remove the style (the css style) after every click ?
thank you

I would use a css class like .lastClicked and using jquery to remove all instances of .lastClicked when a new element is clicked.
.lastClicked{ background-color:#EE178C; }
.lastClicked (siblingName) { background-color: #ffffff; }
your jquery code would look something like:
$('.product_types > li').click(function() {
$(".lastClicked").removeClass("lastClicked");
$(this).addClass("lastClicked");});

You can store lastly clicked element in global variable, and on click reset its color :
var lastElm = null
$('.product_types > li').click(function() {
if( lastElm ) $(lastElm).css('backgroundColor','#[Your original color]')
lastElm = this;
$(this)
.css('backgroundColor','#EE178C')
.siblings()
.css('backgroundColor','#ffffff');
// $('.product_types > li').removeClass(backgroundColor);
});

You need a variable that store the actual colored div and remove style on it. Something like this (not tested) should do the trick :
(function(){
var coloredDiv = null;
$('.product_types > li').click(function() {
var item = $(this);
if(coloredDiv != null) coloredDiv.removeClass('someCSSClassThatColorMyDiv');
item.addClass('someCSSClassThatColorMyDiv');
coloredDiv = item;
});
})();
NB: I also suggest to use CSS class instead of manualy set the CSS property in the Javascript. This leads to better separating of the code logic and displaying.
I also put the whole stuff in a closure so the variable cannot be overriden by some other script by mistake.