I'm having trouble making my else statement work. I want to change the background color from red to blue if the background color is red, if the background color is blue I want to change it to red. I cannot see why the code below is not working, can anybody help?
$(".box").css({
"background-color": "red"
});
$(".box").click(function() {
if ($(".box").css({
"background-color": "red"
})) {
$(".box").css({
"background-color": "blue"
});
} else {
$(".box").css({
"background-color": "red"
});
}
});
.box {
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="box"></div>
</body>
</html>
The problem is your if condition, the .css() method which when used in setter format returns the jQuery object which is alsways truthy that is why the else part is not executed.
If you want to compare the background-color then you need to use the getter version of .css() like if($(".box").css('background-color') == 'red'), but the value of color properties returned by the browser will depend on the browser(Some browser may return the rgb value of the hexa value) so comparing it may not always work.
One easy solution here is to use css classes to style the elements and toggle them use toggleClass(), in the below snippet we assigns the background color red to the box class, then the clicked class overrides the color to blue then we uses toggleClass to add/remove the class on click of the element.
$(".box").click(function() {
$(this).toggleClass("clicked");
});
.box {
height: 100px;
width: 100px;
background-color: red;
}
.box.clicked {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="box"></div>
just check the value of css property background-color
var color = $(".box").css( "background-color" );
here is the complete code
$(".box").css({
"background-color": "red"
});
$(".box").click(function() {
var color = $(".box").css( "background-color" );
if ( color == "rgb(255, 0, 0)" ) {
$(".box").css({ "background-color": "blue" });
} else {
$(".box").css({ "background-color": "red" });
}
});
.box {
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="box"></div>
</body>
</html>
Related
I need help converting a Jquery code into a javascript code where it changes the border radius of a div when hovering over it.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="SampleQ3.css" />
</head>
<body>
<div>
<h4>Pasta</h4>
</div>
<script src="SampleJavaScript.js"></script>
</body>
</html>
JS
$(document).ready(function () {
$("div").hover(function () {
$(this).css("border-radius", "0%");
}, function () {
$(this).css("border-radius", "200px 200px 200px 200px");
});
});
You can do all of that only using css, but I will provide both solution js and css.
javascript code:
let divs = document.getElementsByTagName("div");
for(div of divs) {
div.addEventListener("mouseenter", function( event ) {
event.target.style.borderRadius = 0%;
}, false);
div.addEventListener("mouseover", function( event ) {
event.target.style.borderRadius = '200px';
}, false);
}
To do the same with css you can add a class to make it easer to target.
// css
<style>
.div-round {
border-radius: 200px;
}
.div-round:hover {
border-radius: 0%;
}
</style>
//add class to div
<div class='div-round'>...</div>
JQuery beginner here. I'm trying to get a group of divs to change from red to blue when I click on them. When I click them again, I want the divs to change back to red. I tried using jQuery's animate() method (with the jQuery color plugin) to change the div's color. However, the code below only partially works.
$(document).ready(function(){
$("div").click(function() {
$("div").each(function() {
if (this.style.color !== "blue") {
$(this).animate({
color:'blue'
},1000);
} else {
this.style.color = "red";
}
});
});
});
When I click a div, the if statement works fine. The divs change to blue. However, when I click a div again, the divs don't change back to red. The else statement doesn't seem to work. Any ideas on my mistake? The else statement works when I replace $(this).animate({...}) with this.style.color = "blue"; which so I think I'm doing something wrong with the animate() method.
Here is the HTML file
<!DOCTYPE html>
<html>
<head>
<title> each() test1 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body{
background-color: #000000;
color: #ffffff;
}
div {
font-size: 3em;
color: #ff0000;
text-align: center;
cursor:pointer;
font-weight: bolder;
width: 300px;
}
</style>
</head>
<body>
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</body>
<script src="theJavaScriptFile.js"> </script>
</html>
Just don't use blue or red color codes. It will get converted to RGB code.
For example this.style.color will be RGB(0,0,255) not blue so your expression always returns true no matter what color is it.
I create this example in different color mode for you to take a look https://jsfiddle.net/3tpncgr1/1/
Anyway, if you want to have special logic for particular color then keep using this approach. Otherwise, use class name instead of color code to determine. Because browsers always return rgb value for color attribute
I would manage it by using a active class to control the states.
In that case I would succes changing
$(document).ready(function(){
$("div").click(function() {
$.each( $(this).parent().children("div"),function() {
if (!$(this).hasClass('active')) {
$(this).addClass('active');
$(this).animate({
color:'blue'
},1000);
} else {
$(this).removeClass('active');
this.style.color = "red";
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> each() test1 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body{
background-color: #000000;
color: #ffffff;
}
div.active{ }
div {
font-size: 1em;
color: #ff0000;
text-align: center;
cursor:pointer;
font-weight: bolder;
width: 300px;
}
</style>
</head>
<body>
<div id="containerOne">
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</div>
<div id="containerTwo">
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</div>
</body>
<script src="theJavaScriptFile.js"> </script>
</html>
I'm trying to use javascript to toggle the size of a div. In order to understand the basic idea of how to do this I tried replicating this example: Toggling Div (JSFiddle)
But for some reason it is not working, despite me having copied it from the working JSFiddle. Why is that? Here is my replicate:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">#topbar {
background: orange;
color: white;
height: 10px;
text-align:center;
}</style>
<script type="text/javascript">
$("#topbar").click((function() {
var i = 0;
return function() {
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
}
})());
</script>
</head>
<body>
<div id='topbar'>toggle me</div>
</body>
</html>
Wow! You haven't added jQuery at all! Add this in your <head> before you call the script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You must have got this error in the console:
Reference Error: $ not defined.
You are using this not in context. When you put it inside a function, then it gets screwed up. Do it this way:
$(function () {
$("#topbar").click(function () {
var i = 0;
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
return false;
});
});
The this you used, will be taking your inner function as its context. And since your <div> comes after the <script>, please enclose it inside the $(function () {}).
I got a problem with tag. I have list of clickable phone numbers on the page and I want to mark used urls.
I created small example and tried to use :visited selector to change color for clicked urls, but it doesn't work.
Let me show the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone:visited {
color: red;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="tel:#">Call me</a>
</body>
</html>
I found in Google Chrome inspector, that css works correctly (I manually added "visited" class and url's color was changed), but browser doesn't mark url as visited after click.
Is there any chance to fix this behavior?
Thank you!
Nothing will happen on desktop, because desktop browsers don't know what to do with tel:.
You could use something like jQuery to achieve this on desktop.
$('.phone').click(function() {
$('.phone').css({"color": 'red'});
});
You have to assign class through jquery.
$('.phone').click(function () {
$(this).addClass("visited");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.visited {
color: red !important;
background-color: yellow;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="#">Call me</a>
<a class="phone" href="#">Calling you</a>
</body>
</html>
So manage with javascript session and additional css class will be handle your problem
<style type="text/css">
.selected {
color: red !important;
}
.phone {
color: blue;
}
</style>
JS
<script type="text/javascript">
var a = document.getElementsByTagName("a");
//I assumed there is only one a link so tried with index 0
if(sessionStorage.getItem("visited") != null) a[0].classList.add("selected"); //check visited link then add class selected
a[0].addEventListener("click",function(){
sessionStorage.setItem("visited","true");//set session visited
this.classList.add("selected");
});
</script>
You need to declare .phone first before .phone:visited in your css.
I've been looking thru the docs and another question that was close to what I needed for help with the jRate star rating jQuery plugin, but I was not able to get the output I was looking for. What I am looking to do is to get an output of the numerical rating value when I click a button.
With this html :
<div id="ratingContainer">
<div id="currentValue" style="width: 70px; height: 70px; border: 1px solid black; background-color: blue; color: white" >Rating value</div>
<input type="button" id="ratingClicker" value="get rating!" onclick="getRatingValue()" />
</div>
and this javascript :
function getRatingValue(){
$(document).ready(function(){
$('ratingContainer').jRate({
onSet: function(rating){
$('ratingValue').text(rating);
}
})
});
}
function getSimpleStarRatingHtml(){
$(document).ready(function() {
$("#ratingContainer").jRate({
width: 60,
height: 60,
startColor: '#3366FF',
endColor: '#9966FF'
});
});
}
The getSimpleStarRatingHtml() function populates the empty stars in the ratingContainer div when the user pulls a select dropdown.
The getRatingValue code was cribbed from the other StackOverflow question I linked to.
I realize this is probably a basic jQuery Q; I'm a little bit of a noob with it. Thanks.
Update
The code below does give me the output for the rating value I want, but does not allow me to set any options for the appearance of the stars (height, color, etc):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function createJrate(){
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text(rating);
}
});
}
</script>
<style>
#rating{
width: 300px;
height: 140px;
border: 1px black solid;
}
</style>
</head>
<body>
<h1>test</h1>
<input type="button" value="create rating" onclick="createJrate()" style="margin-bottom: 15px"/>
<div id="rating"></div><div id="ratingValue"></div>
</body>
</html>
Have tried a bunch of variations, like adding the rating function after the close bracket that ends the options, tried tying the $('#ratingValue').jRate() to a var, and then calling the function, as in jRate.change(function(){// stuff in here});.
Any other ideas you may have?
thanks
If your logic works and you're just looking to change the styling, have you considered simply overriding the standard CSS for the script to have it render with the colors and formatting that you'd prefer?
was able to get it working by defining the jRate obj this way...
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text("rating " + rating);
},
startColor: 'blue',
endColor: 'blue',
width: 50,
height: 50
});