We Keep Coding

Changing background colour of toggle after click via custom JS in wordpress

I am currently trying to add a custom JS function (via the Live Code Editor Plugin) to my wordpress website. The goal is to change the background colour of a toggle after click (i.e. from red -> green). I have tried this function but although the selector works for CSS, the JS function is not working:
CSS:
\23 toggle-id-1 {
background-color: red;
}
JS:
var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");
\23 toggle-id-1.onclick = function(){
\23 toggle-id-1.style.backgroundColor = "green";
}
In JSFiddle this worked without any problems, is there anything different for this plugin?
Thank you!

jQuery solution:
$("#toggle-id-1").click(function () {
$(this).toggleClass("green");
});
#toggle-id-1 {
background-color: red;
height: 100px;
width: 100px;
}
#toggle-id-1.green { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle-id-1" class=""></div>

You can't have spaces in variable names. Name your variable something else.

Enlarge one pic onclick

I'm making a website with images on it, and if you click on one of the images it should enlarge. I did that by using the toggleClass function in jquery
I enlarged the selected image like so:
$(".img1, .img2").on('click',function(){
$(this).toggleClass('enlarged');
});
the used class:
.enlarged{
position:absolute;
z-index:2;
width:500px;
height:600px;
top:-10%;
left:300px;
}
it's hard to explain but right now what happens is, when you click an image it enlarges. when you click another image, it enlarges too but overlaps/stays hidden behind the other image that's enlarged.
What I would like to happen is when img1 is enlarged and the user selects img2, it should "close" img1 and enlarge img2.
Thank you :)
UPDATE
it now works barely, it opens after spamclicking and once enlarged I can minimize it again. but then I can't enlarge it anymore.
Can anybody help me with this?
<script>
$(document).ready(function() {
$("#header").load("header.html .header");
$("#footer").load("footer.html .footer");
$("body").on('click', function(){
if(!$(".img1, .img2").hasClass('enlarged')){
$(".img1, .img2").on('click',function(){
$(this).addClass('enlarged');
});
}else{
$("body").on('click', '.enlarged', function(){
$(this).removeClass('enlarged');
});
}
});
});
</script>

You could do something like the following. This will remove the enlarged class. Then add it to the image that you have clicked on. (See jsfiddle here)
$(".img1, .img2").on('click', function() {
$(".img1, .img2").removeClass("enlarged");
$(this).toggleClass('enlarged');
});
See working example below:
$(".img1, .img2").on('click', function() {
$(".img1, .img2").removeClass("enlarged");
$(this).toggleClass('enlarged');
});
.enlarged {
position: absolute;
z-index: 2;
width: 500px;
height: 600px;
top: -10%;
left: 300px;
}
label {
font-weight: bold;
}
input[type=text] {
width: 20em
}
p {
margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="https://placehold.it/350x150" alt="image" />
<img class="img2" src="https://placehold.it/350x150/F2F5A9" alt="image" />

Add a generic class to all clickable images, like 'gallery'
then
$(".gallery").on('click',function(){
//removes enlarged class from all images
$(".gallery.enlarged").removeClass('enlarged');
//adds enlarged class to clicked image
$(this).addClass('enlarged');
});

If you want to have only one "enlarged" class for the img you click on, I think the simpliest is to remove all "enlarged" class then add the class for the right element :
$(".img1, .img2").on('click',function(){
$(".img1, .img2").removeClass('enlarged');
$(this).addClass('enlarged');
});

Toggle jQuery controls when clicking another object

I am trying to put together a Leaflet based map for our college. We have just about everything done, but I'm running into a problem with the jQuery controls. We are using this block of code to highlight the jQuery buttons and send commands to Leaflet.
<script type="text/javascript">
jQuery(function(){
$(".img-swap").on('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<style type="text/css">
.img-swap {cursor: pointer;}
</style>
<p align="center"><img src="images/item1_off.png" class="img-swap" width="94" height="93" alt="Locate Item 1" /></p>
<p align="center"><img src="images/item2_off.png" class="img-swap" width="106" height="76" alt="Locate Item 2" /></p>
This code works just fine when you click on the objects. The issue we have is that we need to fire an event to deselect an object (and undo the corresponding Leaflet events) when a new object is clicked.
For example, if we have five items, and you click item one, it turns red and the map highlights some buildings. When you click item two, it should turn red, turn item one back to normal, and un-highlight the buildings that one highlighted.
I can't find a way to make this happen. It only works for items that are clicked, not the other items. Is there a modification to this code that does that?
Thanks!

Try the following:
jQuery(function(){
var selected = null;
$(".img-swap").on('click', function() {
if (selected) {
selected.src.replace("_on","_off");
$(selected).removeClass("on");
}
this.src.replace("_off","_on");
$(this).addClass("on");
selected = this;
});
});

Not tested but I would defined my on and off states in css then just change the class name on click.
<style>
.onImage
{
height: 20px;
background-repeat: repeat-x;
background-image: url("images/item1_on.png")
/* path relative to where the css is if not in page. */
}
.offImage
{
height: 20px; /* set the match the size of the icon */
background-repeat: no repeat;
background-image: url("images/item1_off.png")
/* path relative to where the css is if not in page. */
}
</style>
<script>
$(document).ready(function (){
$(".switch").on('click', function(evtObj) {
$(".onImage").removeClass("onImage").addClass("offImage");
$(evtObj.target).removeClass("offImage").addClass("onImage");
});
});
</script>
<div class='switch offIcon'></div>
<div class='switch offIcon'></div>

click to change background toggle

When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks

JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/

Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE

You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>

Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/

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?