We Keep Coding

Toggling HTML visibility using CSS and jQuery

Ok so I have a div that contains a canvas and a span which contains an image. I want it such that if the user hovers over or focuses on the div that the image inside of the span will appear. The image wil be invisible otherwise.
Long story short I want to have a canvas with a red 'X' on the corner that is only visible when the canvas is active
$('image-canvas').hover(function() {
$('delete-image').addClass('active');
}, function() {
$('delete-image').removeClass('active');
})
.delete-image {
position: absolute;
top: 0px;
right: 0px;
}
.delete-image>img {
width: 32px;
visibility: hidden;
}
.delete-image.active>img {
width: 32px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
<canvas id="imageCanvas"></canvas>
<span class="delete-image">
<img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
</span>
</div>
The hover event fires just fine but the image refuses to toggle visibility. Any help?

When you use a class within your selector, write it like this:
$('.myDiv')
When you use an ID within your selector, write it like this:
$('#myDiv')
For further informations, check out jQuery's learning center website.

Seems like you have misspelled or have not specified the jQuery selector type (class . or id #). Please try this:
$('#imageCanvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})

See here .
$("#control").mouseover(function(){
$('#img').show();
});
$("#control").mouseout(function(){
$('#img').hide();
});
#img{
display:none;
}
#control{
margin-bottom:10px;
padding:5px;
background-color:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='control'>Show/Hide</div>
<img src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg' id='img'>

The question is not well-phrased, so I ain't sure I totally understood what you wanted.
When you try to select by class, don't forget the dot '.'
$('image-canvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
When using functions 'addClass', 'removeClass', 'toggleClass', etc. - you don't use the '.' sign because it is a function that refers only to classes. On the other hand, when using jQuery selector $(' ') or vanilla querySelector(' '), you should declare what kind of attribute you are selecting by, those will be '#' for ID, '.' for Class, and if you want to select by anything else you can use $('*[anyattribute=anyvalue]'), in your clase it could be $('span[class=delete-image]').
Good luck

Removing and adding class on hover

I am making a panel of photos/text. All the panels will have an overlay color on them except the first one which has an active class on page load which removes the overlay. As you hover over the second/third etc panels, the overlay active class will remove from first panel and go onto the one that is hovered.
Right now it is only active on page load, I can't seem to get the class off the first div and onto the second div on hover.
if ( $(".overlay:first") ){
$(".overlay:first").addClass("active");
}
else {
if ( $(".overlay:not(:first)").hover ){
$(".overlay:first").removeClass("active");
}
}
https://jsfiddle.net/egdkuh16/3/

There is no need to use JavaScript or jQuery for this. It's best used in CSS with the :hover pseudo-selector. It's also much easier today.
.overlay:first-child {
background: white;
}
.overlay:first-child:hover {
background: gold;
}
If you insist on using jQuery, you can try this
$(".overlay:first").on("mouseover", function() {
$(this).addClass("active");
}).on("mouseout", function() {
$(this).removeClass("active");
});
.active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>
This approach is highly frowned upon though

In jQuery, you could do it like this:
$(document).ready(function() {
// Make the first active
$(".overlay:first").addClass("active");
// On hover remove all active classes from .overlay
// and add .active only to the one that is hovered
$(".overlay").hover(function() {
$(".overlay").removeClass("active");
$(this).addClass("active");
});
});
but Richard Hamilton's answer is much better and cleaner.

You can use jQuery's on. For example:
$(".overlay:first").addClass("active");
$(".overlay").on("hover", function(){
$(this).addClass("active");
$(".overlay:first").removeClass("active")
});

jQuery changing body's background color

This is frustrating and I can't figure this out.
I just need to change/toggle back/foreground color
for the entire body when user clicks on a link, 'theme'.
Following is my html file.
...
<style>
highlight {
background-color: black;
color: white;
}
</style>
<script>
$(document).ready(function () {
$('.theme').on('click', function () {
$(document.body).toggleClass("highlight");
//$(document.body).css({"background-color": "black"});
});
});
</script>
When I use $().css({...}), it works but when I try to use
class to be able to toggle, it doesn't. Please help.

Agree with Rayon. "highlight" in the style is not a class if missing the period in front. jQuery is not able to toggle the "highlight" class since there's no "highlight" class to toggle. The code works here: http://liveweave.com/T6c7Mz

change the following line
$(document.body).toggleClass("highlight");
with
$("body").toggleClass("highlight");

This will work
HTML
Click Me
CSS
body { background-color:red; }
.highlight
{
background-color:yellow;
}
JQUERY
$("#theme").click(function() {
$("body").toggleClass("highlight");
});
Here is the working code
http://jsfiddle.net/CLwE5/119/

Select <divs> within parent <div> using jQuery

I have a parent <div>, #amwcontentwrapper, which has a series of divs within it with their own classes and ids.
I want to use jQuery to select these child divs, and IF they have the class .amwhidden, do nothing, but if not, remove the .amwshown class and add the .amwhidden class.
This is what I have so far, but it is not working. I think it may be my selecting of the child divs within the parent.
Can anybody see any obvious problems? Thanks for your help.
if ($('#amwcontentwrapper > div').hasClass('amwhidden')){
} else {
$('#amwcontentwrapper > div').fadeIn(600, function(){
$('#amwcontentwrapper > div').removeClass('amwshown');
$('#amwcontentwrapper > div').addClass('amwhidden');
});
}
And here is the basic html that I am using:
<div class="amwshown" id="amwintro">
Intro Section, which should have the 'amwshown' class removed, and the
'amwhidden' class added, when the jQuery runs. Currently, this does not happen.
</div>
UPDATE: Using War10ck's solution in the comments below (i.e. $('#amwcontentwrapper > div.amwshown')) I have managed to get the classes changing as I wished. However, those which have had the .amwshown class removed and .amwhidden class added still show on the page, despite the CSS looking like this:
.amwhidden {
display:none;
}
.amwshown {
display:block;
}
Looking at the Dev Tools, it seems that, when the jQuery is run (on a click event) the classes are changing, but any classes which are having the .amwshown class added (thus displaying them on the page) are also having the a <style> tag added to them which makes them display:block;
When I then press another button, which should hide the aformentioned <div> to make way for another one, the class is being changed to .amwhidden, but that <style> tag is not being deleted, so even though it has the .amwhidden class, it is still on the page.
I've created a JSFiddle here, if anybody still wants to help!
`
$(document).ready(function() {
$('#buybutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwbuy').hasClass('amwshown')) {} else {
$('#amwbuy').fadeIn(600, function() {
$('#amwbuy').removeClass('amwhidden');
$('#amwbuy').addClass('amwshown');
});
}
});
$('#phdbutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwphd').hasClass('amwshown')) {} else {
$('#amwphd').fadeIn(600, function() {
$('#amwphd').removeClass('amwhidden');
$('#amwphd').addClass('amwshown');
});
}
});
});
#sidebar {
position: absolute;
left: 1%;
top: 1%;
font-size: 5em;
color: #000000;
width: 10%;
display: block;
background-color: red;
}
#amwcontentwrapper {
position: absolute;
left: 20%;
top: 5%;
}
.amwshown {
display: block;
}
.amwhidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amwsidebar">
<span class="sidebarbutton" id="phdbutton">PhD Button</span>
<br />
<br />
<span class="sidebarbutton" id="buybutton">Buy Button</span>
</div>
<div id="amwcontentwrapper">
<div class="amwshown" id="amwintro">
<p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
<br />
<br />
</div>
<div class="amwhidden" id="amwbuy">
Buy Section
</div>
<div class="amwhidden" id="amwphd">
PhD Section
</div>
</div>
`

You can use not to remove the elements you do not want, like this:
$('#amwcontentwrapper > div').not('.amwhidden')
.removeClass('amwshown')
.addClass('amwhidden');
And work with that.

Try this
$(document).ready(function() {
$("#amwcontentwrapper").children().each(function(elem, x) {
if ($(x).attr("class") == "amwhidden") {
alert($(x).attr("class"));
$(x).removeClass("amwhidden").addClass("amwshow");
alert($(x).attr("class"));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="amwcontentwrapper">
<div class="amwhidden"></div>
<div></div>
<div></div>
</div>

You can try each as follow,
$("#amwcontentwrapper div").each(function(){
if($(this).hasClass('amwhidden'))
//DO something
else
//DO something
});

Thank you for all help, it has prompted some brainstorming which has solved this issue.
Instead of adding the .amwhidden class and removing the .amwhidden class using jQuery, I have just created a .amwsection class, which all the sections belong to which has an initial display value of none. So far, so good; all of the sections are not there when you load up the page.
Then I use the .css jQuery function to change the display:none to display:block when the corresponding button is clicked, and changing all other .amwsections to display:none. This works just fine, but the effect is quite abrupt; there is no fading in, as you would get if you used the .animate function. .animate, however, does not work with the display value.
.fadeOut and .fadeIn to the rescue! By wrapping the .css change in these, I can create a fading in/out effect and can still use the display value.
Here is one example of this code.
The #buybutton is the button to be pressed.
#amwintro is just something which appears when the page loads - it will now be set to display:none if this is the first button pressed.
The .amwsection are all of the hidden sections. This portion of the code just resets all of them. This and the #amwintro section happen very quickly (1/100th of a second) to keep response time good.
The #amwbuy is the specific section that I want to reveal. As you can see, this fades in over a longer period.
Currently only tested in Chrome, but I think I've got it!
$(document).ready(function () {
$('#buybutton').click(function() {
$('#amwintro').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('.amwsection').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('#amwbuy').fadeIn(600, function() {
$(this).css({
display:'block',
});
});
});
});

Changing DIV Background Image with JavaScript Not Working

I'm trying to change a div background image on hover, I want to do this with JaveScript so that it works cross browser without any issues. The current code I have is:
<div class="staff" style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);" onmouseover="this.style.background=url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);" onmouseout="this.style.background=url(wp-content/uploads/2013/08/IMG_1828-300x237.png);">
</div>
CSS:
.staff{
width: 300px;
height: 237px;
}
Can anybody see what is causing the problem?

<style>
.staff{
width: 300px;
height: 237px;
background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);
}
.staff:hover {
background-image: url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);
}
</style>
<div class="staff"></div>

You can use simple css too.. and it will work on all browsers
.staff { background: url("url/img.png")}
.staff:hover { background: url("url/hoverimg.png")}
<div class="staff"></div>

Better use CSS than inline CSS and javascript to achieve the effect.
If you still want to do it inline, here is a example.
jsfiddle
onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

you can use css like this:
.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}
or javascript like:
onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

WORKING DEMO
CHANGE I MADE
onmouseover="this.style.background='url()';"
You have to enclose the url in single qoutes...
I would also suggest you use CSS rather than JS to do this. But since you asked how to do it in JS, this is your answer

Most browser should support :hover in css, so there is no need to use JavaScript for this (relevant fiddle here):
.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}
If you really want to use JavaScript, than you have to wrap url(...) in quotes like so:
<div class="staff"
style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);"
onmouseover="this.style.background='url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png)';"
onmouseout="this.style.background='url(wp-content/uploads/2013/08/IMG_1828-300x237.png);'">
</div>

I think you can use this script :
$('.staff').mouseover(function() {
$(this).attr('style',"background:grey;");
})
$('.staff').mouseout(function() {
$(this).attr('style',"background:white;");
})
Change the color to the image path.

$(document).ready(function(){
var staff = $(".staff"); //Avoid repeated traverse
$("img").hover(function(){
staff.css("background",'url(' + $(this).attr('src') + ')');
//Assuming you want to set current image as background image
});
$( "img" ).mouseout(function(){
staff.css("background","none");
});
});
Okay this works for me so when you hover over an image the background of the set div is changed. So when ever you hover over an image .staff background is changed.
I believe that is what you want?