We Keep Coding

Jquery how to add a class containing two dashes?

I have a simple page which toggles the visibility of departments, with a nice icon to show whether or not it is visible.
I am using font-awesomes icons "fa-eye" and "fa-eye-slash"
Problem is when using addClass jquery ignores the second "-" making
$(this).addClass("fa-eye-slash")
Add the class "fa-eye".
Its very strange and i've never encountered something like this with jquery. Please can someone assist me on how to overcome/work around this.
heres the fiddle http://jsfiddle.net/m5cdpnhk/
Thanks

You have two if conditions which run one after the other.
If the first if runs, then one of the things it does is $(elm).addClass('fa-eye-slash');.
The second if condition is if ($(elm).hasClass("fa-eye-slash")) so if the first if runs then the second will always run.
You need an else statement.
$(elm).addClass('fa-eye-slash');
} else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");

Add an else option (the problem is the two if without the else in this case)
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
//if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
//}
}
});
or toggle the class
.red:before{
color:red
}
.green:before{
color:green;
}
$(".box-body ul li i").click(function () {
var elm = $(this);
$(elm).toggleClass("fa-eye").toggleClass("red");
$(elm).toggleClass("fa-eye-slash").togglesClass("green");
});

i don't know why your code don't work but try this :
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}
});
http://jsfiddle.net/m5cdpnhk/2/

You have done mistake.you have to place "else if" at second if condition.
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}
else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}

sliding in and out div from right using same image - JQuery

Need some JQuery help...
I want to slide in a div from the right taking 25% of the screen width.
How can I use the same '#trigger-left a' to slide out the div? (i.e. width: 0px)
JQuery:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
rightCol.animate({width:'25%'},350);
return false;
});
});
HTML:
<div id="trigger-left"><img src="images/menu-icon.png" border="0"></div>
<div id="right-col">Content right column</div>
Looking forward to your solutions!

Try this:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(rightCol.width()==0)
{
rightCol.animate({width:'25%'},350);
}
else
{
rightCol.animate({width:'0%'},350);
}
return false;
});
});

If you mean by clicking the same link the div will slide out.
Here you are:
$(function () {
var div = $("#"right-col");
$("#trigger-left a").click(function (e) {
if ($(div).width() != 0) {
$(div).animate({width:'0px'},350);
} else {
$(div).animate({width:'25%'},350);
}
});
});
Try that if it didn't work I will edit my answer. Good luck ;)

Easiest way would be to just track what state it's in. In this way can keep direction going which may not be possible if clicked in the middle of a transition if using the widths.
$(function() {
var triggered = false;
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(!triggered){
rightCol.animate({width:'25%'},350);
triggered = true;
} else {
triggered = false;
rightCol.animate({width:'0%'},350);
}
return false;
});
});

Div animate disappears, rather than resizing

For some reason, when I try to toggle a div between two sizes using .animate, it simply disappears rather than scaling to the size I want it to. I have played with all of the the syntax and little things in so many ways, but nothing works. Here is the jquery that I have used and messed around with a bunch.
$("#expandable").click(
function() {
$("#expandable").toggle(
function() {
$("#expandable").animate(
{width:600, height:600}
)
},
function() {
$("#expandable").animate(
{width:400, height:200}
);
}
);
}
);
I have a jsfiddle here for you to look at.
http://jsfiddle.net/justinbc820/qt7GV/

Try it without using toggle
http://jsfiddle.net/qt7GV/9/
$(document).ready(function(){
$("#expandable").click(function(){
var divheight = $(this).height();
if (divheight == 400)
{
$(this).animate({height:'150px', width:'150px' });
}
else
{
$(this).animate({height:'400px', width:'400px' });
}
});
});

Take a look at this http://jsfiddle.net/qt7GV/4/
$("#expandable").click(function() {
if ($(this).width() < 600) {
$(this).animate(
{width:600, height:600}
)
} else {
$(this).animate(
{width:400, height:200}
);
}
});

http://api.jquery.com/toggle/
Description: Display or hide the matched elements.
var on = false;
var box = $("#expandable");
box.click(
function() {
if (on = !on) {
box.animate(
{width:600, height:600}
)
} else {
box.animate(
{width:400, height:200}
);
}
}
);

According to http://api.jquery.com/toggle-event/
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Here is one way to do it
$('#expandable').data('flag', true);
$("#expandable").click(
function() {
$("#expandable").animate(
$(this).data('flag')
? {width:600, height:600}
: {width:400, height:200}
)
$(this).data('flag', !$(this).data('flag'));
}
);

Link style with javascript

I have this code for hiding\showing link depends on state of cBoxoverlay. But when i click to close this item(display:none), and then click again to show it(display:block) my link(#close-news) still not showing.
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").css("display", "none")) {
jQuery("#close-news").css("display", "none");
} else if (jQuery("#cBoxOverlay").css("display", "block")) {
jQuery("#close-news").css("display", "block");
Where did i make mistake?

try this - no need for if statements. You can just set the #close-news to whatever #cBoxOverLay is
$(document).click(function () {
$("#close-news").css("display", $("#cBoxOverlay").css('display'));
}

Use classes, does a cleaner job.
In case you don't want to use classes, try to use jQuery's toggle, which does basically exactly what you try to achieve: http://api.jquery.com/toggle/

Use is(":visible") to check if the element is visible, and then either show or hide...
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").is(":visible")) {
jQuery("#close-news").hide();
} else {
jQuery("#close-news").show();
}
});

You can try:
if ($("#cBoxOverlay").css("display") == "none") {
// ...
}
however you can use is method:
if ( $("#cBoxOverlay").is(':hidden')) {
// ...
}
$(document).click(function(){
if ($("#cBoxOverlay").is(":hidden")) { // if #cBoxOverlay is hidden
$("#close-news").hide() // hide the #close-news
} else if ($("#cBoxOverlay").is(":visible")) { // if #cBoxOverlay is visible
$("#close-news").show() // // show the #close-news
}
})
you can remove the the second condition and use else instead as when element is not hidden it is visible, of course.

Try this, based on #Raminson's answer:
$(document).click(function () {
if ($("#cBoxOverlay").is(':hidden')) {
$("#close-news").css("display", "none");
} else{
$("#close-news").css("display", "block");
May be give a try on this one, too:
$(document).click(function(){
$('#close-news').css('display', function(){return $('#cBoxOverlay').css('display');});
});

Jquery fadein and fadeout script not working

This function should fadeIn the id="Box" when class="display" is clicked if the Box is not animated and has a display value of none Or fadeOut if the #Box had a display value of is not none. What is wrong?
$(document).ready(function() {
$('.display').click(function() {
var currentDisplayValue = $('#Box').css('display');
if (':animated') {
stop()
};
else if (currentDisplayValue == 'none') {
$('#Box').fadeIn("slow");
};
else {
$('#Box').fadeOut("slow");
};
});
Thanks

Try:
$(function() {
$(".display").click(function() {
var box = $("#Box");
if (box.is(":animated")) {
box.stop();
} else if (box.is(":hidden") {
box.fadeIn("slow");
} else {
box.fadeOut("slow");
}
});
});
You've got some syntax errors (eg semi-colons after the curly braces) and stop() needs to be applied to a jquery set. Lastly, don't check the current display CSS value like you're doing. Use the :hidden selector instead.