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
Related
I have two different div with classes called "red" and "blue". By default these are hidden. I want to clone and display them into a single container called "cont". Red button appends red div's blue button appends blue div's.
function redCreator(word){
var red =document.getElementsByClassName('red')[redPos];
redPos++;
var redClone = red.cloneNode(true);
document.getElementById('cont').appendChild(redClone);
item.style.display = 'inline';
item.innerHTML=word;
}
function blueCreator(word){
//same as red
}
Right now the red divs appear separately from blue div. Ignoring the time and order I clicked them
red1|red2|red3|blue1|blue2
How do I allow the divs to display in the order I clicked them? Regardless of the class.
red1|blue1|red2|blue2|blue3
One solution I came up with was to use a common class name and add the red/blue class later.
function redCreator(word){
var item =document.getElementsByClassName('input-item')[itemPos];
itemPos++;
var itemClone = item.cloneNode(true);
itemClone.className += " red";
document.getElementById('cont').appendChild(itemClone);
item.style.display = 'inline';
item.innerHTML=word;
}
However this doesn't work as expected. CSS is messed up
In Case you are looking for a pure JS solution :
HTML :
<div class="red input">red</div>
<div class="blue input">blue</div>
<div id="cont">
</div>
<button onclick="redCreator('red');">RED</button>
<button onclick="blueCreator('blue');">blue</button>
CSS
.input {
display: none;
padding:10px;
}
.red {
background:red;
}
.blue {
background:blue;
}
JS:
function redCreator(word){
var red =document.getElementsByClassName('red')[0];
console.log(red);
var redClone = red.cloneNode(true);
document.getElementById('cont').appendChild(redClone);
redClone.style.display = 'inline-block';
redClone.innerHTML=word;
}
function blueCreator(word){
var blue =document.getElementsByClassName('blue')[0];
var blueClone = blue.cloneNode(true);
document.getElementById('cont').appendChild(blueClone);
blueClone.style.display = 'inline-block';
blueClone.innerHTML=word;
}
Just add some lines to get the numbering and you will be fine.
Happy coding.
So using jQuery (the fiddle is using 1.9.1 - but it should be forward compatible) I have put together a fiddle:
https://jsfiddle.net/27oa1pb7/
In this - it takes contents of hidden divs and appending them in the order you click them into the "cont" container ... using CSS, you could change the display of the divs, etc. It uses a very basic chain of jQuery commands:
...
$("#reddiv").clone().show().appendTo( "#cont" )
...
This code is what I came up with using your description, as there is no HTML or CSS example stating exactly what you may need.
Hope this helps!
Happy coding!
What i am trying to achieve is, i want to make it work like star rating. When you enter mouse star becomes yellow, when you leave mouse it turns gray and then if you click it again becomes yellow.
Not getting how to achieve it, I have added code to show you what i have tried so far.
JSfiddle
$(".na").hover(
function () {
$(this).addClass("clickstar");
},
function () {
$(this).removeClass("clickstar");
}
);
$(".na").on("click",function(){
$(this).toggleClass("clickstar");
});
.clickstar{
background: #00A1EF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="na" style="border:1px solid #c0c0c0;border-radius:50%;width:115px;height:115px;display:inline-table;margin-right:5px;"></div>
You should consider using 2 different classes, .hoverstar and .clickstar, then :
http://jsfiddle.net/xLxbw216/1/
You would have one class for each case, which seems more logical ?
You can also make it simpler by removing .hover() method, and do it with CSS :
http://jsfiddle.net/xLxbw216/8/
I probably choose the second one, even if the first solution seems to be more "readable".
You can do it like this:
$(".na").on("click",function(){
$(this).toggleClass("clickstar");
});
Fiddle Example
You should use a different class for permanent start and hover star
I have created a working example in JSfiddle
$(".na").hover(
function () {
var $this = $(this);
if (!$this.hasClass("permstar")) {
$this.addClass("clickstar");
}
},
function () {
var $this = $(this);
if (!$this.hasClass("permstar")) {
$(this).removeClass("clickstar");
}
}
);
$(".na").on("click",function(){
$(this).toggleClass("permstar");
});
add/remove class on hover events was conflicting with on click event, so i have moved the hover functionality to css
css:
.clickstar{
background: #00A1EF;
}
.na:hover{
background: #00A1EF;
}
live demo:
http://jsfiddle.net/dreamweiver/xLxbw216/7/
Happy Coding :)
The below code takes into account different tags and turns the background red if the tag is clicked on. I want to code it so that if it is clicked on again, it changes back from red and 'deletes' the background, or at least set it to null. I have tried an if statement to no avail. I know that I can just make another click event that changes the background to white, but this is for experimental purposes and i was wondering if this CAN be done with if statements. thanks to ya.
<script>
$(document).ready(function() {
$("p, h1").click(function() {
$(this).css("background-color", "red");
if ($(this).css("background-color", "red")) {
$(this).css("background-color", "null");
}
});
});
</script>
First you need to use the getter version of .css() like
if($(this).css("background-color") == "red"){
but it still won't work because, the css getter will return a rgb format value and will return non consistent values across browsers.
So the solution is to use a css based solution using toggleClass()
.red {
background-color: red;
}
then
$(document).ready(function() {
$("p, h1").click(function() {
$(this).toggleClass("red");
});
});
Demo: Fiddle
$('p, h1').click(function() {
var $this = $(this);
var altColor = $this.data('altColor');
$this.css('background-color', altColor ? '' : 'red');
$this.data('altColor', ! altColor);
});
This answers your question, but you should really be using a CSS class for this.
This is easily done using CSS, and is a bit more straight forward. If you create a CSS class for the click, then you can just toggle it on/off each time the item is clicked:
CSS
p, h1 {
background-color: none;
}
p.red, p.h1 {
background-color: red;
}
JavaScript:
$('p, h1').click(function() {
$(this).toggleClass('red');
});
I have been using
$(function(){
$("#print").hover(function(){
$("#headerright").toggleClass("img/divright.jpg");
});
});
when I mouseover on my div id "print" (which has an image in it) is it possible to change the background of my other div (headderright)?
$("#headerright").toggleClass("img/divright.jpg")
you have to give tha class name but you are giving image path. you can do this way
.class1{
background-image:url('image1.gif');
}
.class2{
background-image:url('image2.gif');
}
and on hove change toggleClass to
$("#headerright").toggleClass('class1').toggleClass('class2')
and initially put class1 as a class of your div with id headerright
EDIT
what i understand from your discussion. change your hover function to this
$("#print").hover(function() {
$("#headerright").css("background-image","url('img/divright.jpg')");
},function(){
$("#headerright").css("background-image"," ");
});
you can try this
Create a new class
.backgroungEG {
background-image : "img/divright.jpg"
}
$("#print").hover(function(){
$("#headerright").addClass("backgroungEG ");
});
I hope this works..
Try this: it will change the background:
$(function(){
$("#print").hover(function(){
$("#headerright").css("background-image","url('img/divright.jpg')");
});
});
If u have image on print div it will change the src and display the other image..
Try
$("#print").hover(function() {
$("#headerright").addClass("my-background");
},function(){
$("#headerright").removeClass("my-background");
});
Then define a css style
.my-background{
background: img/divright.jpg;
}
Demo: Fiddle
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.