I want have a list of items in which the color of a selected element turns red when it is selected and all of the other divs turn blue. How can I identify the selected div that would then turn red?
$(document).ready(function() {
$('#table_1 .tableRow div').click(function(event) {
//Set the style for all divs
var myElements = document.querySelectorAll("#table_1 .tableRow div");
for (var i = 0; i < myElements.length; i++) {
myElements[i].className = "blueText";
}
//Set the style for tyhe selected div
//selectedItem.className="selectedText";
});
});
.selectedText {
color: red;
}
.blueText {
color: blue;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="table_1" class="table">
<div class="tableRow">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
</div>
</div>
</body>
</html>
It's enough to change:
//selectedItem.className="selectedText";
to:
event.target.className="selectedText";
The snippet:
$(document).ready(function(){
$('#table_1 .tableRow div').click(function(event) {
//Set the style for all divs
var myElements = document.querySelectorAll("#table_1 .tableRow div");
for (var i = 0; i < myElements.length; i++) {
myElements[i].className="blueText";
}
//Set the style for tyhe selected div
event.target.className="selectedText";
});
});
.selectedText {
color: red;
}
.blueText {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_1" class="table">
<div class="tableRow">
<div>
Line 1
</div>
<div >
Line 2
</div>
<div >
Line 3
</div>
</div>
</div>
You can do it with this:
$('#table_1 .tableRow div').click(function() {
$(this).removeClass().addClass('selectedText').siblings().removeClass().addClass('blueText')
})
.selectedText {
color: red;
}
.blueText {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_1" class="table">
<div class="tableRow">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
</div>
</div>
Pure CSS solution using tabindex and :focus Selector for DIV's.
div:focus {
color: red;
}
div {
color: blue;
}
<div id="table_1" class="table">
<div class="tableRow">
<div tabindex="1">Line 1</div>
<div tabindex="2">Line 2</div>
<div tabindex="3">Line 3</div>
</div>
</div>
You can use the $(this) object to reference the element on which a jQuery handler was made:
$(document).ready(function(){
$('#table_1 .tableRow div').click(function(event) {
//Set the style for all divs
var myElements = document.querySelectorAll("#table_1 .tableRow div");
for (var i = 0; i < myElements.length; i++) {
myElements[i].className="blueText";
}
$(this).addClass('selectedText')
});
});
Also, if you want to use something other than just the CSS class to determine if an element is selected or not (outside of the jQuery callback), you could add a data-* attribute to it 1.
Related
I'm a beginner in javascript with HTML and CSS. I want to try is there a way to access child container class via parent container class. or can I add a new class("second_new") to "second" class via "first" class.
/* CSS */
.first {
background-color: red;
}
.first_new {
background-color: pink;
}
.second {
background-color: blue;
}
.second_new {
background-color: purple;
}
<!-- HTML -->
<div class="row">
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script>
var firstClass = document.getElementsByClassName("first");
function Mousein() {
this.classList.add("first_new");
};
function Mouseout() {
this.classList.remove("first_new");
};
for (var i = 0; i < firstClass.length; i++) {
firstClass[i].addEventListener('mouseover', Mousein);
firstClass[i].addEventListener('mouseout', Mouseout);
}
</script>
yes you can
Method 1
document.querySelector('.first .second');
Medthod 2
let parent = document.querySelector('.first');
parent.querySelector('.second');
Thanks Guys I found the answer this
/* CSS */
.first {
background-color: red;
}
.first_new {
background-color: pink;
}
.second {
background-color: blue;
}
.second_new {
background-color: purple;
}
<!-- HTML -->
<div class="row">
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script>
var firstClass = document.getElementsByClassName("first");
var child;
function Mousein() {
this.classList.add("first_new");
child = this.querySelector(".second");
child.classList.add("second_new")
};
function Mouseout() {
this.classList.remove("first_new");
child.classList.remove("second_new")
};
for (var i = 0; i < firstClass.length; i++) {
firstClass[i].addEventListener('mouseover', Mousein);
firstClass[i].addEventListener('mouseout', Mouseout);
}
</script>
Yes you can access bey selector. document.querySelector('parent child') . In your case would be: const childEl = document.querySelector('.first .second');
You can use getElementsByTagName() on any type of element.
This would be
var parents = document.getElementsByClassName('parent');
var child = [];
for (let i = 0; i < parents.length; i++) {
var child = parents.getElementsByTagName('div')[0];
children.push(child);
}
Or, Even Simpler:
var parents = document.querySelectorAll('.parent');
var children = document.querySelectorAll('.parent > div');
Note: Elements selected by querySelectorAll() are like arrays and array methods can be applied.
Note: To select one element use querySelector() method.
I have this HTML code div in 4*4 format :
$(document).ready(function() {
$("div").click(function(e){
var id_val=this.id;
var word = id_val.split("-").pop();
alert(word)
e.preventDefault();
for(var i=1;i<=4;i++)
{
if(i!=word)
{
$("#div-"+i+"").css("background-color","white");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>
I have written the jquery code when on click the particular div has to change colour to red and remaining div colour should be white
When I have executed this only the div1 has changing the colour to red and other divs are not changing the colour.
for eg :
if I click div1 change to red colour and other div2,div3,div4 should be in white
color
If I click div2 change to red colour and other div1,div3,div4 should be in white
color
You need to use e.stopPropagation(); to prevent the other div elements from triggering as well.
you didn't properly terminate the first two lines with }); at the end of the script.
$(document).ready(function() {
$("div").click(function(e) {
var id_val = this.id;
var word = id_val.split("-").pop();
if (word != null) {
alert(word)
e.stopPropagation();
for (var i = 1; i <= 4; i++) {
if (parseInt(i) === parseInt(word)) {
$("#div-" + i + "").css("background-color", "red");
} else {
$("#div-" + i + "").css("background-color", "white");
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>
Try something Like that
$("div").click(function(e){
$("div[id^='div-']").css("background-color","white");
$(this).css("background-color","red");
}
You need to use e.stopPropagation() and not e.preventDefault(). Also since divs are nested you should give a color to the inside p tag and not the div itself. Also terminate your function correctly.
$(document).ready(function() {
$("div").click(function(e){
var id_val=this.id;
$(this).first("p").css("background-color","red")
var word = id_val.split("-").pop();
alert(word)
e.stopPropagation();
for(var i=1;i<=4;i++)
{
if(i!=word)
{
$("#div-"+i+"").css("background-color","white");
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>
This worked for me
$("div").click(function (e) {
$(this).css("background-color", "red");
$('div:not(#' + this.id + ')').css("background-color", "white");
e.stopImmediatePropagation();
});
Try to use this simple code
$(document).ready(function() {
$("div").click(function(e) {
$('div[id^="div-"] p').css("background-color", "white"); //change the remaining elements who's id start with div- color to white
if ($(e.target).is('p')) {
$(e.target).css("background-color", "red"); //change the clicked element color
}
});
});
$("div").click(function(e) {
$('div[id^="div-"] p').css("background-color", "white"); //change the remaining elements who's id start with div- color to white
if ($(e.target).is('p')) {
$(e.target).css("background-color", "red"); //change the clicked element color
}
});
body {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>
Following some examples Ive seen, I am trying to be able to click to show/hide a Div ID. Content is hidden but when I click AFC Playoff Race,
nothing happens. Any ideas what I am doing wrong?
CSS Style sheet includes:
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
Here is the javascript:
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
Here is the HTML Code:
<div class="panel panel-afc nopad playoffs">
<div class="panel-heading">
AFC Playoffs
</div>
<div class="panel-body">
<div id="afc-playoff-container" class="hidden">
<div id="afc playoff">
<table class="data-table1" border="0" width="100%"></table>
</div>
</div>
</div>
</div>
function unhide() {
var item = document.querySelector(this.dataset.target);
if (item) {
item.classList.toggle('hidden');
}
}
window.onload = function() {
var toggleDivs = document.getElementsByClassName('toggleDiv');
if (toggleDivs) {
for (var i = 0; i < toggleDivs.length; i++) {
toggleDivs[i].addEventListener('click', unhide);
}
}
};
.hidden {
display: none;
}
#afc-playoff-container {
width: 120px;
height: 120px;
background: #DDDDDD;
}
<div class="panel panel-afc nopad playoffs">
<div class="panel-heading">
AFC Playoffs
</div>
<div class="panel-body">
<div id="afc-playoff-container" class="hidden">
<div id="afc playoff">
<table class="data-table1" border="0" width="100%"></table>
</div>
</div>
</div>
</div>
It works, you just didn't apply styles to the classes hidden and unhidden. See this codepen for what I mean.
Good luck!
How to show div multiple step using javascript ?
i want to create code for
click on CLICK HERE first time it's will show one
click on CLICK HERE second time it's will show two
click on CLICK HERE third time it's will show three
click on CLICK HERE fourth time it's will show four
click on CLICK HERE fifth time it's will show five
http://jsfiddle.net/x53eh96o/
<style type="text/css">
div{
display: none;
}
</style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
function myFunction() {
document.getElementById("1").style.display = "block";
}
</script>
how can i do that ?
THANK YOU
First of all, it would be better to add a common class to your divs, in order to make the selection easier. Then you should select all of needed divs by class name, and pass through each of them, setting needed visibility.
http://jsfiddle.net/x53eh96o/7/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = document.getElementsByClassName("some_class");
var divsLength = divs.length;
for(var j = divsLength; j--;) {
var div = divs[j];
div.style.display = (i == j ? "block" : "none");
}
i++;
if(i > divsLength) {
i = 0; // for a cycle
}
}
</script>
UPDATE
And here is jquery example: http://jsfiddle.net/x53eh96o/8/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = $(".some_class");
divs.hide().eq(i).css({display: 'block'});
i++;
if(i > divs.length) {
i = 0;
}
}
</script>
id values should not start with a number.
div {
display: none;
}
<div id="show_1">one</div>
<div id="show_2">two</div>
<div id="show_3">three</div>
<div id="show_4">four</div>
<div id="show_5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var show = 0;
function myFunction() {
try {
document.getElementById('show_' + ++show).style.display = "block";
} catch (err) {
show--
for (i = show; i > 0; i--) {
document.getElementById('show_' + i).style.display = "none";
show--;
}
}
}
</script>
My HTML
<body>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
</div>
</div>
</div>
</div>
<div class="abc"></div>
</body>
My Script
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$(".abc").css({position: "absolute", top: top_pos, left: left_pos });
$(".abc").show();
$(".popup").show();
});
});
I want to apply the left and top to abc class which is without parent and not to the class which is under id="txt_blog_editor"
According to this answer here is a working snippet:
jQuery.expr[':'].noparents = function(a,i,m){
return jQuery(a).parents(m[3]).length < 1;
};
var elts = $(".abc").filter(":noparents(#txt_blog_editor)");
elts.css({ "background-color": "green" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
ABC With Parent
</div>
</div>
</div>
</div>
<div class="abc">ABC WITHOUT Parent</div>
Basically, you create a new jQuery expression :noparents which returns elements not having selector given parents
You need to check if .abc has a parent #txt_blog_editor http://jsfiddle.net/ugv2pxdw/4/
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$('.abc').each(function(){
if (!$(this).parents('#txt_blog_editor').length) {
$(this).css({position: "absolute",top: top_pos, left: left_pos });
$(this).show();
$(".popup").show();
}
});
});
If abc classes are only direct childs of body, why not using body > .abc as your selector?