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>
Related
I'm trying to execute a function by clicking on a span, but it tells me that it is undefined.
$(document).ready(function() {
function callTo(param) {
alert(param);
}
});
.file-up {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #ccc;
color: #383f45;
font-size: 12px;
margin-bottom: 10px;
padding: 6px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
<div>
<span class="file-up" onclick="callTo('test')">Click to call</span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script>
function callTo(param) {
alert(param);
}
</script>
<div>
<span class="file-up" id="index" onclick="callTo('test')">
Click to call
</span>
</div>
</body>
This is a working example without using jQuery, just by vanilla javascript. Insert it and use it directly.
If you want me to post an answer which uses only jQuery for the stated task that you want to accomplish then please let me know.
This is code using jQuery, as you asked -
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#index').click (function callTo() {
alert("Your values is :"+ $(this).data("value"));
});
});
</script>
<div>
<span class="file-up" id="index" data-value="test">
Click to call
</span>
</div>
Try to move your function definition away from $(documents).ready
<script>
function callTo(param) {
alert(param);
}
</script>
Or define event listener like
<script>
$(document).ready(function() {
$('.file-up').click(function() {
//action
});
});
</script>
(I'd better give it an id in this case and change the selector to #id instead of .file-up because other elements can have the same class applied)
how i can create a javascript code to add class name to specific divs only
for Exapmle : i want to add a class_name to from div5 to the end of all divs ?
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
</script>
</body>
</html>
If you're looking to add a class name from one div to others, I would recommend using JQuery. This can be done like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function changeColor(){
$( document ).ready(function() {
$("div").addClass("work");
});
}
</script>
<style>
.work {
color: red
}
</style>
<div style="width: 100%" class="work"><h1>Hello</h1></div>
<div style="width: 100%" class=""><h1>Hello</h1></div>
<button onclick="changeColor()">Change second color by inserting class!</button>
function applyClass(elem_position, tagname, classname)
{
var div_elems = document.querySelectorAll(tagname);
for (var i = elem_position-1; i < div_elems.length;i++)
{
div_elems[i].className=classname;
}
}
Usage
Applies class some_class to div elements starting from position 3
applyClass(3,'div','some_class');
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'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>
I'm working on a Joomla website. Now I need a slider to change when someone hovers over a text link. I'm using some javascript. It's working on the first div with the id=slider, but not on the second div with id=slider in the article. Can someone tell me why it's doing this?
I'm using the following code in a custom code module for Joomla.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
.boxVisible {
background-color: #eee;
display: block;
padding: 5px;
float: left;
border: solid 1px #000040
}
.boxHidden {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(slider) {
theBox = document.getElementById(slider);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p>More</p>
</body>
</html>
This is my article:
<div id="slider" class="boxVisible">{loadposition slider1}</div>
<div id="slider" class="boxHidden">{loadposition slider2}</div>
<p><br /><br /><br /> {loadposition java}</p>
IDs must be unique identifiers. For multiple elements, use class names.
Id's should be unique on a page.
You could wrap your slider divs in a wrapper div and use that as basis for iterating through your sliders something like this.
HTML:
<div id="sliders">
<div class="boxVisible"></div>
<div class="boxHidden"></div>
</div>
Javascript:
function showHide2(slider) {
var sliders = document.getElementById(slider).getElementsByTagName("div");
for (s in sliders) {
if (sliders.hasOwnProperty(s)) {
if (sliders[s].className == "boxVisible") {
sliders[s].className = "boxHidden";
alert('changed visible');
} else if (sliders[s].className == "boxHidden") {
sliders[s].className = "boxVisible";
alert('changed hidden');
}
}
}
}
showHide2("sliders");
the dom elements can't have the same id's! if you give the same id to the multiple dom elements, javascript will take only the first one.