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.
Related
in my code i have around 11 image tags , all of them have an id of "#bigimage"
i want to change the style of an image on each click on a specific button for the specific image
meaning on the first click changing the #bigimage [0]
second click changing the #bigimage [1]
etc...
this is what i did:
<script>
//click event
$('.jssora05r').click(function() {
var abc=$('#bigimag').length;
var ind=0
$("#bigimag").index(ind).css("display", "block !important");
ind++;
});
</script>
it's not working, could someone help me?
just declare ind out side of the click event
also you need to change that id selector to some class selector and add same class to all images
<script>
var int = 0;
//click event
$('.jssora05r').click(function() {
// change id to some class
var abc=$('.someclass').length;
$(".someclass").index(ind).css("display", "block !important");
ind++;
});
I appreciate all the suggestions I've gotten so far-thank you!
I'll try to describe a bit better what I'm trying to do:
I want to switch a CSS class on the active (clicked on) tab item on a item (to make a highlight effect while its related content is showing).
The JS Fiddle http://jsfiddle.net/4YX5R/9/ from Vlad Nicula comes close to what I'm trying to achieve, however I can't get it to work in my code.
The tabs are linked to content which is shown on the page when the tab is clicked. This part is working fine. I just want to change the CSS style on the ContentLink items when its content is being shown.
I'd also like to keep the content for ContentLink1 visible when the page loads, as it is now in the code, and for ContentLink1 to have the CSS .infoTabActive class when the page loads. When the ContentLink tab is not clicked, it should have the .infoTab class.
This is what I have so far:
HTML:
<article class="grid-70 infoContainer">
<a class="infoTab" id="aTab" href="javascript:show('a')">ContentLink1</a>
<a class="infoTab" id="bTab" href="javascript:show('b')">ContentLink2</a>
<a class="infoTab" id="cTab" href="javascript:show('c')">ContentLink3</a>
<div id="a">
<p> Inhalt 1111111.</p></div>
<div id="b">
<p>Inhalt 222222222
</p></div>
<div id="c">
<p>Inhalt 33333333
<7p></div>
</article>
Javascript:
window.onload = function () {
document.getElementById("a").style.display = "block";
}
function show(i) {
document.getElementById('a').style.display ="none";
document.getElementById('b').style.display ="none";
document.getElementById('c').style.display ="none";
document.getElementById(i).style.display ="block";
}
basic CSS for tab styles I want to apply:
.infoTab {
text-decoration:none;
color:red;
}
.infoTabActive {
text-decoration:none;
color:yellow;
}
Any pointers would be appreciated!
You can switch the classes simply bu using class property on DOM element.
To replace the existing class use
document.getElementById("Element").className = "ClassName";
Similarly to add a new class to exisiting classes use
document.getElementById("Element").className += "ClassName";
Change show function to be like this:
function show(i) {
document.getElementById('a').style.display ="none";
document.getElementById('a').className ="";
document.getElementById('b').style.display ="none";
document.getElementById('b').className ="";
document.getElementById('c').style.display ="none";
document.getElementById('c').className ="";
document.getElementById(i).style.display ="block";
document.getElementById(i).className ="selected";
}
I changed a little bit your code to make it suits your needs.
First, change the onload part in the Fiddle, by no wrap.
Then, you need to hide each elements at start like this :
window.onload = function () {
var list = document.getElementsByClassName("hide");
for (var i = 0; i < list.length; i++) {
list[i].style.display = "none";
}
}
I added an hide class to achieve it. Your show function works well then.
I would do it like this:
add a class called .show which sets the element to display block.
then toggle the classname.
Here's a JSFiddle
And here's an example:
HTML
<article class="grid-70 infoContainer">
<a class="infoTab" id="aTab" href="javascript:show('a')">Werbetexte</a>
<a class="infoTab" id="bTab" href="javascript:show('b')">Lektorate</a>
<a class="infoTab" id="cTab" href="javascript:show('c')">Übersetzung</a>
<div class="box" id="a">
<div class="col1"> <p>Inhalt 1111111.</p></div>
</div>
<div class="box" id="b">
Inhalt 222222222
</div>
<div class="box" id="c">
Inhalt 33333333
</div>
</article>
JavaScript
window.onload = function () {
show('a');
}
function show(elm) {
// get a list of all the boxes with class name box
var shown = document.getElementsByClassName('box');
// loop through the boxes
for( var i=0; i<shown.length; i++ )
{
// set the classname to box (removing the 'show')
shown[i].className = 'box';
}
// change the classname to box show for the element that was clicked
document.getElementById( elm ).className = 'box show';
}
CSS
.box {
display:none;
}
.box.show {
display:block;
}
Simplest way I could think of is this : http://jsfiddle.net/4YX5R/9/
Basically you don't want to listen to each element. If you do that you will have issues with new tabs. If you listen to the parent element like in my example you can add new tabs without having to write any more javascript code.
<a class="infoTab" data-target='a' id="aTab">Werbetexte</a>
Each tab button has a data-target attribute that will describe the div to show as the tab content. Hiding and showing content will be done via css, not style - which is a recommended best practice -.
tabs.addEventListener("click", function ( ev ) {
var childTarget = ev.originalTarget || ev.toElement;
...
}
When a tab is clicked, we check to see which element was clicked from the event listener on the parent, and then get the data-target from it. We use this as a id selector to show the new tab. We also need a reference to the old tab that was active, so we can hide it.
The logic is not that complicated, and with this you can have any number of tabs. I would recommend jQuery for this, since the event delegation might not work in all browsers with the current code.
I hope this helps :)
I'm creating a PHP script that will dynamically generate tr and td elements for a table. When the user clicks in a specific cell in the first column, an AJAX function executes to display additional content. This is working as it should, however, I'm having trouble with what should be simple styling. When the user clicks on a given cell, I want that row to change colour (works) until they click on another cell (doesn't work).
Since my PHP file is rather large, I'm only posting the relevant parts.
<?php
$myFiles = showMyAttrs();
foreach($myFiles as $myFile) {
echo("<tr class = 'gradeC' onClick = 'changeColour(this)' onchange = 'restoreColour(this)' >");
echo("<td onClick = 'sendCell(this)' ><img src = $msEx /></td>");
echo("<td>$myFile</td>");
echo("</tr>");
}
I've also tried using onblur instead of onchange but that gave the same result.
The Javascript functions:
function changeColour(z) {
z.style.backgroundColor = "#FFFFFF";
}
function restoreColour(y) {
y.style.backgroundColor = "#00FF00";
}
Before I also tried:
function changeColour(z) {
document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
z.style.backgroundColor = "#FFFFFF";
<!-- document.getElementsByTagName("td").style.backgroundColor = "#00FF00"; -->
}
function changeColour(z) {
z.style.backgroundColor = "#FFFFFF";
document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
}
$('tr').click(function() {
$('tr').css('backgroundColor', '#0F0');
$(this).css('backgroundColor', '#FFF');
});
With each of them (except the last), the colour does change to white, however, when the user clicks on any other row, the previous row doesn't return to green. I don't mind if this works with Javascript or JQuery, as long as it is compatible across browsers. Even a fancy CSS trick I'm fine with using.
You're on the right track. I think adding/removing a class would be a good way to go. You could try this:
jQuery
$('tr').on('click', function() {
$('tr').children('td').removeClass('active');
$(this).children('td').addClass('active');
});
CSS
.active { background-color: yellow; }
See jsFiddle
Try using a css class to assign the background color:
$('.gradeC td').on('click',function(e){
if(!$(this).closest('tr').hasClass('green')){
$(this).closest('tr').addClass('green');
}else{
$(this).closest('tr').removeClass('green');
}
});
See demo here
So here's my code:
<input type = checkbox id = "kinch" name = "link" > Bunz </input>
<div id = bootypipe></div>
Here's the JavaScript:
$("#kinch").click(function(){
if ($("#kinch").is(":checked")) {
//Add image to div bootypipe
$("#bootypipe").append("<image id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'>HA!</image>");
} else {
$("#chink").remove();
}
});
Here's the jsfiddle: http://jsfiddle.net/shrimpboyho/wUu34/13/
The image removes and appends, but when I remove the image the text Ha! still stays and builds up over time. How can I remove this?
Cant you just do :
$("#bootypipe").empty();
instead of removing image.
Because you only remove the image tag not the text. You could do like this
wrap the image and text with one div and then remove the div tag like
$("#kinch").click(function(){
if ($("#kinch").is(":checked")) {
//Add image to div bootypipe
$("#bootypipe").append("<div id='chink_outer'><img id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'/>HA!</div>");
} else {
$("#chink_outer").remove();
}
});
Demo
<image id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'>HA!</image>
is invalid HTML markup; the element can't actually contain text. And the correct tag is <img>. I suspect it is actually being interpreted as
<img id='chink' src='...' > HA!
meaning the text isn't part of the element, and isn't removed with it.
Instead of doing $('#chink').remove(), do $('#bootypipe').empty() to remove everything you added.
The <img> element is self closing, like <br> or <hr> (your demo code is invalid, as mentioned in another answer).
But your code works, if you just include a wrapper (<p>,<span>,<div>) around the image. Then remove the wrapper (ie $('p').remove();). Do not add additional ids, classes (you've already created a function around #kinch. why add to the code?). Just target the wrapper. $('#chink').parent().remove(); works too, and it's unbiased to what element is the parent.
$("#kinch").click(function(){
if ($("#kinch").is(":checked")) {
$("#bootypipe").append("<p><image id = 'chink' src = '...'>HA!</p>");
} else {
$('p').remove();
// or $('#chink').parent().remove(); // pick your poison
}
});
i have a little javascript function that does something when one clicks on the element having onclick that function.
my problem is:
i want that, into this function, to set a font color fot the html element having this function onclick. but i don't suceed. my code:
<script type="text/javascript">
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23=document.addtobasket.number;
number23.options.length=0;
if (stock>=6) stock=6;
for (i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
}
</script>
and how i use it:
<li id = "product_types">
<a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a>
</li>
any suggestions? thanks!
i have added another function (jquery one) that does partially what i need. the new problem is: i want that background color to be set only on the last clicked item, not on all items that i click. code above:
$(document).ready(function() {
$('.product_types > li').click(function() {
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','#ffffff');
});
});
any ideas why?
thanks!
I would suggest
$(document).ready(function() {
$('.product_types > li').click(function() {
$('.product_types > li').css('background-color','#FFFFFF');
$(this).css('background-color','#EE178C');
});
});
Your element could have this code:
<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>
To change the foreground color of that element:
function selecteazaElement(element)
{
element.style.foregroundColor="#SOMECOLOR";
}
If you want to change the background color on only the last element clicked, each element must have a different id. I'd suggest naming each one something like product_types1, product_types2, ..., product_typesN, and so on. Then have a reset function:
function Reset()
{
for (var i = 1; i <= N; i = i + 1)
{
document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR";
}
}
When you call your selecteazaElement(this) function, first call the Reset function, then set the new element:
function selecteazaElement(element)
{
Reset();
element.style.backgroundColor="#SOMECOLOR";
}
This way all of the elements that start with product_types followed by a number will be reset to one particular color, and only the element clicked on will have the background changed.
The 'scope' of the function when invoked is the element clicked, so you should be able to just do:
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23 = document.addtobasket.number;
number23.options.length=0;
if (stock>=6){
stock=6;
}
for (var i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
// Alter 'this', which is the clicked element in this case
this.style.backgroundColor = '#000';
}
$(function() {
/*if product_types is a class of element ul the code below
will work otherwise use $('li.product_types') if it's a
class of li elements */
$('.product_types li').click(function() {
//remove this class that causes background change from any other sibling
$('.altBackground').removeClass('altBackground');
//add this class to the clicked element to change background, color etc...
$(this).addClass('altBackground');
});
});
Have your css something like this:
<style type='text/css'>
.altBackground {
background-color:#EE178C;
/* color: your color ;
foo: bar */
}
</style>
Attach a jQuery click event to '#product_types a' that removes a class from the parent of all elements that match that selector; then, add the class that contains the styles you want back to the parent of the element that was just clicked. It's a little heavy handed and can be made more efficient but it works.
I've made an example in jsFiddle: http://jsfiddle.net/jszpila/f6FDF/
try this instead:
//ON PAGE LOAD
$(document).ready(function() {
//SELECT ALL OF THE LIST ITEMS
$('.product_types > li').each(function () {
//FOR EACH OF THE LIST ITEMS BIND A CLICK EVENT
$(this).click(function() {
//GRAB THE CURRENT LIST ITEM, CHANGE IT BG, RESET THE REST
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','transparent');
});
});
});
If I am correct, the problem is that the click event is being binded to all of the list items (li). when one list item is clicked the event is fired on all of the list items.
I added a simple .each() to your code. It will loop through each of the list items and bind a event to each separately.
Cheers,
-Robert Hurst