I have a basic HTML using bootstrap, container > row > col > div ID > panel in that order, the class is placed in div ID, the thing is that I need to remove that class from that DIV and put it in another DIV(the one you click on), I know how to check if the class exist in any div inside of a div but I don't know how to delete it from there and add it to another.
I have made a Fiddle to illustrate this question. When you load the page, the class is already there. If you click any of the boxes it will alert you that in fact the class exist but don't know which div has it. The idea is to remove the class from whaveter that might be and add it to the div you click.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
JS
$("#s1").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s2").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s3").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s4").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
You can reduce your code to:
$("#s1,#s2,#s3,#s4").click(function () {
$(".selection").removeClass('selection');
$(this).addClass('selection');
});
jsFiddle example
In your example:
$(".selection")[0].removeClass('.selection'); doesn't need [0] and there should be no period in the class you pass to removeClass()
You reference the div you click on with $(this)
As long as the selection class exists somewhere, if($(".selection")[0]) { will always be true, so it didn't really make sense to use that as a condition.
Here is a way to achieve what you required . What i have done with your code is
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1" class="divs">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection divs">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3" class="divs">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4" class="divs">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
CSS
.container {
max-width:400px;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
border: 1px solid black;
cursor: pointer;
}
.selection {
background-color: black;
padding:15px;
}
JQUERY
$(document).ready(function(){
$(".panel").on("click",function(){
var divid="#"+$(this).parent().attr("id");
$(".divs").removeClass("selection");
$(divid).addClass("selection");
});
});
Note that i have just added a simple class as "divs" to each of the parent div of the panel.
What i have done here is i have first got the id of the parent div of the panel which has been clicked by the user . Then i have removed the class "selection" from the parent divs "s1 s2 s3 s4" accessing it with the help of the common class "divs" . then i have added the class "selection" to the div which has been clicked.
Here is the DEMO for your reference.
NOTE: This code will work for any number of panels you create.
do it like this:
$("#s1").click(function() {
// Check class on the clicked section
if($(this).hasClass('selection') ) {
alert('Class exist');
// class found then remove it.
$(this).removeClass('.selection');
}
});
Take a look on these to know more: .hasClass(), .addClass(), .removeClass()
Related
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
I have multiple divs that has the same class and 'itemprop' attribute and I need to be able to create a function that will return the Quantity (which in the example above is '5')
the catch here is that the structure you see above changes in other pages. In the example above, the Condition and the Color shows but on other pages those do not appear which means the structure changes except the class name and the attribute value of the 'itemprop'. See below:
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
How do I get the Quantity into a JavaScript function and return the value of 5? Without having to edit the code of the site itself?
I have been playing with this but I am sure this is completely and utterly incorrect.
function () {
var x = document.getElementsByClassName("SameClass").getAttribute("itemprop");
if (x = 'price')
{
var a = document.getElementsByClassName("SameClass").getAttribute("itemprop").innerText;
return a;
}
}
The following might work for you:
function getQty() {
var arr=document.getElementsByClassName("SameClass-value");
for(var i=0;i<arr.length;i++)
if (arr[i].getAttribute("itemprop") == 'qty') return arr[i].innerHTML;
}
Or, even shorter, you can do
function getQty() {
return document.getElementsByClassName("SameClass-value")
.find(d=>d.getAttribute("itemprop") == 'qty').innerHTML;
}
Sorry for the repeated edits. It's been a long day for me today and I was trying to quickly put something together on my little smartphone.
If the classes don't change, you can select all the relevant elements then get the value from the one you need.
function getQty() {
var qty;
document.querySelectorAll("div.SameClass-value").forEach(function(element) {
if (element.getAttribute("itemprop") === "qty") {
qty = element.innerText;
}
});
return qty;
}
console.log(getQty());
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
<div class="SameClass-value" itemprop="qty"> 5 </div>
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
</div>
Heyo,
I cant figure out how to make a Script work like this: I want to have a Button that changes the Class of div's on click. But I don't want to make it change all the div's at the same time. I only want to change the first div on the first click, the second div on the second click and so on and so forth.
I've allredy tryed it but failed. Heres the code:
$('button').click(function() {
// give first $(.div).addClass('active') on first click, second div on second click ...
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
With the .eq method, you can pass the index of the element you want, and the jQuery collection of only that element will be returned. Start with an index of 0, increment it on every button click, and add the class to the appropriate element:
let i = 0;
$('button').click(function() {
$('.div').eq(i).addClass('active');
i++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
Here a little one liner that grabs the first element that doesn't has the active class.
$('button').click(function() {
$('.div:not(.active):first').addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
You can find the first element and add the active class on that. Then rotate the class so on.
$('button').click(function() {
var activeElem = $('.outer').find('.inner.active');
if(activeElem.length){
activeElem.removeClass('active');
activeElem.next('.inner').addClass('active');
} else {
$('.outer').find('.inner').first().addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>
Increment for each click and apply:
var count = 0;
$('button').click(function() {
$('.inner:eq('+count+')').addClass('active');
count++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
I'm trying to make a click event to change my element style.
I'm using Bootstrap and Angular.
This is the panel, It does show all the groups I have in DB as it should.
<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<p><bold>{{y.GroupName}}</bold></p>
</h4>
</div>
<div class="panel">
<div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
<!-- <div class="panel-footer">Panel Footer</div> -->
</div>
</div>
</div>
And after clicking on it, I do get a few of all the group members as it should.
But how can I change the group style?
I tryed panel-click:
.panel-click:active{
padding: 20px;
box-shadow: 0 0 14px 5px #31b0d5;
}
But I guess I don't understand css functions...
Also tried to get element by ID, but every time I send ID to ng-click function the function get stuck and don't work...
Please help!
you can use
ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}"
like;
<div class="col-sm-6 panel-group panel-hover" ng-repeat="y in allGroups" ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<p><bold>{{y.GroupName}}</bold></p>
</h4>
</div>
<div class="panel">
<div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
<!-- <div class="panel-footer">Panel Footer</div> -->
</div>
</div>
</div>
and then you can use "active" class
.active{/* do something */}
<div class="col-sm-6 panel-group" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)">
<div class="panel panel-default" ng-class="{'active-panel': y.id == selectedPanel}">
<div class="panel-heading">
<h4 class="panel-title">
<p><bold>{{y.GroupName}}</bold></p>
</h4>
</div>
<div class="panel">
<div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
<!-- <div class="panel-footer">Panel Footer</div> -->
</div>
</div>
</div>
you can add in your controller something like that :
function showGroupsMembersList(id){
// your code
// and then add
$scope.selectedPanel = id;
}
in your css now
.active-panel{
padding: 20px !important;
box-shadow: 0 0 14px 5px #31b0d5 !important;
}
Use ng-class. Suppose you want to change the background color of the panel based on click.
In your html: add ng-class active, and ng-click function: setSelectedY
<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups" ng-click="showGroupsMembersList(y.GroupId); setSelectedY(y._id)" ng-class="{active: y._id === idSelectedY}">
Rest of your code here<
/div>
In your controller,
// set default selected Y to null
$scope.idSelectedY = null;
// switch selected Y to active element
$scope.setSelectedY = function (idSelectedY) {
$scope.idSelectedY = idSelectedY;
};
In your css file
.active {background-color: #ccc}
These code lines should work!
I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
I have a trouble with jquery index function.
I have div with another divs in it, and I want to figure out if its first, second or third div inside that parent div.
So ia have something like this:
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Now, when I click on the last child for example, the event.target will be last div with class row.
Now I do:
$(event.target).parent().index($(event.target));
But this fails as its returning me value -1 insted of 2 ( if indexed from zero ).
Do you have any idea? Thank you.
EDIT:
So, I'm simplified the structure first and thought I just need to understand the concept, but looks like you need to know whole structure so here it is:
<div class="ten wide column schichtplan-body">
<div class="row">
<div class="eight wide column"></div>
<div class="eight wide column schicht-buttons">
<!-- Radio buttons for schicht selection -->
<div class="ui form">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="schichtMode" value="8hx3">
<label>8 Stunde schicht</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="schichtMode" value="12hx2">
<label>12 Stude schicht</label>
</div>
</div>
</div>
</div>
<!-- End of radio form -->
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active"> {{day.date.sec|date('d.m.Y')}}</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">F</div>
<div class="">N</div>
<div class="">frei</div>
</div>
</div>
</div>
I click on one of the buttons, but I want to find out the index of the .ui.grid.row in which the buttons are. So I need to go throught few parent element and then find which .ui.grid.row is actually selected relatively to .ten.wide.column
You need to use the following jQuery :
$(".column div").click(function () {
alert( $(this).index() );
});
NOTE : This will return a zero-based index
See this below :
$(".column div").click(function () {
alert( $(this).index() );
});
.row {
background-color: orange;
margin: 10px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
EDIT : Based on my understanding of the edited part of the question, here's the answer. The second alert will give you the index of the ui grid row (which will contain the clicked element) with respect to the main ten wide column. I have added coloring to make it clear. Please see this below :
I am not sure if javascript's alerts do display here. In case it doesn't, check out this fiddle : http://jsfiddle.net/ynu0x0jw/
$(".button-row > div").click(function () {
$(this).addClass('red');
var currentElementIndex = $(this).index();
var parentIndex = $(this).closest(".ui.grid.row").index();
alert("Index of the selected element with respect to its parent (div with class of ui.grid.row) is " + currentElementIndex);
$(this).removeClass('red');
$(this).closest(".ui.grid.row").addClass('red');
alert("Index of the selected element's parent (ui.grid.row) with respect to the main container (ui.grid.row) is " + parentIndex);
$(this).closest(".ui.grid.row").removeClass('red');
});
.button-row > div {
background-color: orange;
cursor: pointer;
margin: 10px;
height: 50px;
text-align: center;
transition: all 0.4s ease-in;
}
.ui.grid.row {
background-color: white;
transition: all 0.4s ease-in;
}
.button-row > div.red, .ui.grid.row.red {
background-color: red;
}
<div class="ten wide column schichtplan-body">
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">First ui.grid.row (Index : 0)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">A (Index : 0)</div>
<div class="">B (Index : 1)</div>
<div class="">C (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">Second ui.grid.row (Index : 1)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">D (Index : 0)</div>
<div class="">E (Index : 1)</div>
<div class="">F (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">Third ui.grid.row (Index : 2)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">G (Index : 0)</div>
<div class="">H (Index : 1)</div>
<div class="">I (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row" id="III">
<div class="four wide column">
<div class="date-field active">Fourth ui.grid.row (Index : 3)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">J (Index : 0)</div>
<div class="">K (Index : 1)</div>
<div class="">L (Index : 2)</div>
</div>
</div>
</div>
</div>
Hope this helps!!!
You need to use $(this).index() or $(event.target).index() asssuming you want the index of the specific row. Below example is with the .click, but it will work as long as this or event.target is one of the row div.
$('div.row').on('click', function(event) {
$('#result').html($(event.target).index()); //or use $(this).index()
});
.row {
height: 10px;
background-color: lightblue;
margin: 5px;
}
#result {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div>Index is: <span id="result"></span>
</div>