Develop Reference

how to change css in jquery with set Attribute method?

i have a simple of jquery ios button, and i want when user clicks on it and it is on, background color of page should be black and when button is off background color should be red for instance....
this is jsfiddle: https://jsfiddle.net/urbb4rgx/
what i appended to jquery:
var one = getElementsByClassName("switch"),
var two = getElementsByClassName("switchOn"),
if (two.hasOwnProperty("switchOn")) {
document.getElementsByClassName("switchOn").background: red;
}
else {
document.getElementsByClassName("switchOn").background: black;
}
please explain me what i did wrong
thanks...

With jQuery try the following . --Update
Everything in your code looks fine . Just modify it to the following
$(document).ready(function(){
$('.switch').click(function(){
$(this).toggleClass("switchOn");
$("body").toggleClass("black");
});
$('.switchBig').click(function(){
$(this).toggleClass("switchBigOn");
});
});
You will need to create a class to set Default background color :
body {
background-color:red;
}
.black{
background-color:black;
}
Working example here: http://codepen.io/theConstructor/pen/bpgPvB

Toggling Background Color on Click with Javascript

I am working on a class project and need to be able to toggle the background color of a transparent png on click. I have been working through a number of examples from the site, but I can't get it working. I am a total novice at Javascript and haven't had luck trying to plug in jQuery code either.
Here is the targeted section:
<div class="expenseIcon"><a href="#">
<img src="images/mortgage.png"></a><br/>
<p>Rent or Mortgage</p>
</div>
On clicking the linked image, the goal is for the background on the image to change to green. Clicking it again would change it back to the default, white. Here's the CSS I'd like to toggle on/off with click.
.colorToggle {
background: #A6D785;
}
I had tried adding class="iconLink" to the href and class="iconBox" to the image with the following Javascript adapted from another post, but it didn't work.
var obj = {};
$(document).ready(function () {
$(".iconLink").click(function () {
var text = $(this).find(".iconBox");
obj.var1 = text;
//alert(obj.var1);
//return false;
$('.iconBox').removeClass('colorToggle');
$(this).addClass('colorToggle')
});
});
Any advice would be greatly appreciated!

Let's break down what is happening with your current code when you click the link.
var obj = {};
$(document).ready(function () {
$(".iconLink").click(function () {
var text = $(this).find(".iconBox");
obj.var1 = text;
$('.iconBox').removeClass('colorToggle');
$(this).addClass('colorToggle')
});
});
JQuery finds all elements with the classname "iconBox". In your case, this is the img element. The reference to that element is then saved in "obj.var1". You do not end up doing anything with this reference, so these two lines can be removed.
All elements with the class "iconBox" have the class "colorToggle" removed. Your img element didn't have this class on it, so nothing happens.
The class "colorToggle" is added to the anchor element. Yes! Now the element wrapping the img has a background color.
Unfortunately, clicking the anchor tag again won't do anything, since the anchor tag will already have the "colorToggle" class and all we would be doing would be trying to add it again. Hmm. Let's try changing addClass to toggleClass. Here's our new code:
$(document).ready(function () {
$(".iconLink").click(function () {
$(this).toggleClass('colorToggle');
}
});
Also, note that because we're working with the anchor element, the p element won't be affected by this change. If you want the entire div to change background colors, use this line instead:
$(".expenseIcon").toggleClass('colorToggle');

Using the given markup:
<!-- to toggle the bg-color onClick of anchor tag -->
<div class="expenseIcon">
<a href="#">
<img src="images/mortgage.png">
</a>
<br/>
<p>Rent or Mortgage</p>
</div>
since the question asks for javascript, heres an option for updating the background-color of an element using the built-in js.style method
//get a handle on the link
//only one element w/ className 'expenseIcon'
//first child of 'expenseIcon' is the anchor tag
var link = document.getElementsByClassName('expenseIcon')[0].children[0];
//get a handle on the image
var image = link.children[0];
//listen for click on link & call bgUpdate()
link.addEventListener('click', bgUpdate, false);
function bgUpdate() {
if(image.style.backgroundColor === 'lightgoldenrodyellow'){
image.style.backgroundColor = 'aliceblue';
} else if (image.style.backgroundColor === 'aliceblue') {
image.style.backgroundColor = 'lightgoldenrodyellow';
}
else console.log('image bgColor: ' + image.style.backgroundColor);
}
a similar example

css
.expenseIcon{
background: red;
}
.colorToggle {
background: blue;
}
jquery
$(".expenseIcon").click(function () {
$('.expenseIcon').toggleClass('colorToggle');
});
By default, the div will have expenseIcon background. ToggleClass will toggle the div class with colorToggle so will override the previous color.
You don't need an hyperlink tag A to manage clicks, just put it on the DIV.

After showing div on hover, hide it if anywhere other than that div is hovered

I want the div (.modal) to disappear on mouse out but only if the hover is not on the .modal or .tooltip classes.
My code:
jQuery('html').hover(function() {
jQuery('.modal').fadeOut('fast');
});
jQuery('.tooltip, .modal').hover(function(event){
var toolTipId = jQuery(this).attr('id');
modal = jQuery(this).parent().next().find('.'+toolTipId+'');
if(!modal.is(":visible")) {
modal.stop().fadeIn('fast');
}
event.stopPropagation();
});
This works perfect if using click instead of hover. How can I adapt this to work on hover?

can you do something like this:
jQuery('.tooltip, .modal').mouseenter(function(event){
//not sure what your modal variable is in your original code but it looks as if it is just the object you are hovering as you use it's id to get it in again so I replaced it with jQuery(this)
if(!jQuery(this).is(":visible")) {
jQuery(this).stop().fadeIn('fast');
}
event.stopPropagation();
});
jQuery('.tooltip, .modal').mouseleave(function() {
jQuery(this).stop().fadeOut('fast');
});

JQuery - Toggle an image inside of a div on click?

So I have a toggled div with an image inside of it that toggles the scrolling of the next div:
<div class="section">
<img src="on.png"> Stuff </div>
<div class="under" style="height:302px;"> Hi </div>
Here's the JQuery for it:
$(".section").click(function(){
$(this).next('div').slideToggle(1200);
});
How would I make it so on the click function for my div, it toggles the image to "off.png"? And if the src is "off.png", it toggles to "on.png"? Thanks. (Sorry I'm still a noob at JQuery)

$(function(){
$(".section").click(function(){
$("img").attr('src',
($("img").attr('src') == 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
? 'http://kiwianon.com/forums/Themes/Simple_Green/images/on.png'
: 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
)
)
});
});
demo

$(".section").click(function(){
var img = $(this).find("img").eq(0); //add an Id to your img tag so you can refine this selector.
if(img.attr("src") == "on.png")
{
img.attr("src","off.png");
}
else{
img.attr("src","on.png");
}
$(this).next('div').slideToggle(1200);
});

Ken, this is very simple! Just use the code below:
$('.section').click(function(){
var currentimg=$(this).find('img').attr('src');
if(currentimg=="off.png"){
$(this).find('img').attr('src','on.png');
}
else{
$(this).find('img').attr('src','off.png');
}
});

Use $(selector).attr("src", "theImageFilePath") to change the image.
The state could be represented in several ways, including global/module variable, $(selector).data(...), or simply by checking the current value of the "src" attribute.

How to switch between 2 CSS colors with jQuery?

I want a string of text to change color from default to #c30 when I click a button somewhere on the page, and it changes back to default when I click the button again.
My code looks like this:
$("#button").click(function() {
var anno = $(#text);
if (anno.css('color') == '#c30') {
anno.css('color', '');
} else {
anno.css('color', '#c30');
}
});
But it doesn't seem to work on FF3. Works in IE though. Any idea?

I would try to separate the presentational details as much as possible, i.e. change the classes to which the element belongs, and leave the colour information in a separate stylesheet.
$("#button").click(function() {
$("#text").toggleClass('somethingDescriptive');
});

If you use named colors, this will work.
$("#button").click(function(){
$("#text").css('color', $("#text").css('color') == 'white' ? 'black' : 'white');
});
Hex values do not.
This is a bad way to do it anyways, I agree with the most voted up answer here. So I have updated my answer after some research.
<style type="text/css">
.color1 { color:#fff; }
.color2 { color:#000; }
</style>
<script>
$("#button").click(function(){
$("#text").toggleClass('color1').toggleClass('color2');
});
</script?
<div class="color1">Text</div>

The color #c30 is converted to #cc3300 - that's why it is not working.