I am developing a app in angular.js and html, i got stuck at one place
There is a dropdown on the top, on change of dropdown i want to change background color of some cells like given in image.
Here is my code snippet:
HTML page
<div class="row">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
<h3 style="color: white">Time Slot</h3>
</div>
<div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center">
{{time}}
</div>
</div>
<!-- <div id="selectedDateRange"> -->
<div class="row" ng-repeat="(dateindex, date) in dateArray">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
<h3 style="color: white">{{date}}</h3>
</div>
<div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}"></div>
</div>
code for controller.js
Here is the click event of dropdown change:
$(function () {
$('#seldate').change(function () {
//Here i want to change color of cell located in 1st row and 1st column
//also i want to change color of cell located in 2nd row and 2nd column
})
})
How do i change background color of cell?
Please help and thanks in advance !!
use track by $index in your ng-repeat
and then inside the style of the cell something like
color : $index === 1 ? 'red' : 'green'
Or use ng-style
I think you can change your content by using this kind of code (maybe enhanced, but you have a first idea)
<div class="row">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
<h3 style="color: white">Time Slot</h3>
</div>
<div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center" ng-change="currentColor = time.color">
{{time}}
</div>
</div>
<!-- <div id="selectedDateRange"> -->
<div class="row" ng-repeat="(dateindex, date) in dateArray">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
<h3 style="color: white">{{date}}</h3>
</div>
<div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}" ng-style="{'background-color':currentColor}"></div>
</div>
You just have to apply the background on the good cell (set a boolean maybe ?)
When dealing with stuff like this I like to add an id element to the thing being repeated, and then in the onclick pass the element just like you are, where then you can change it using jQuery or whatever you like.
<div class="row" ng-repeat="(dateindex, date) in dateArray">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
<h3 style="color: white" id="dateArray_{{dateindex}}>{{date}}</h3>
</div>
<div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}" ng-style="{'background-color':currentColor}"></div>
And then in your controller
$scope.selectCell = function(dateindex, timeindex){
$("#dateArray_" + dateindex)
.css({
'color' : 'green'
});
}
you can apply dynamic CSS properties in angular js using ng-class
example:
<p ng-class="bold:isbold"> Applying properties Dynamically </p>
<input type="checkbox" ng-model="isbold">make text bold
whenever value of isbold will be true bold property will be applied
P.S. You can apply multiple properties in ng-class
Related
So i'm using a While loop in PHP to return results from my database. Basically images with a button on each, when that button is clicked I want to display the mapOverlay div which will have a map on it. How do I select only the div that relates to the button i'm clicking? I can get it to open them all or just the first one but not the exact one with the button i'm click on.
This code sits within echo tags but i've removed to ease of reading:
<div class="resultContainer">
<div class="mapOverlay animated slideInLeft"></div>
<div class="resultsInfo">
<div class='resultsInfo_user'>
<div class='results_dp' style='background-image:url($row[dp])'></div>
<p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>ucfirst($row[firstName])</p>
</div>
</div>
<div class='resultsImage' style='background-image: url($row[image])'>
<div class='resultsImage_overlay'>
<div class='resultsImage_overlay_info'>
<p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>$row[title]</p>
<p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>$distanceMiles</p>
<p style='margin:0;font-size:0.9em;color:#828282'>$row[expiry]</p>
</div>
<div class='resultsImage_overlay_button'>
<button class='button-green openMap'>Get Directions</button>
</div>
</div>
</div>
</div>
Here's the javascript I've got:
var button = document.getElementsByClassName("openMap")
for(var i = 0; i < button.length; i++){
button[i].addEventListener("click", function(){
var overlay = document.getElementsByClassName("mapOverlay")
overlay.style.display = "block"
})
}
I'm going to toggle a class when I get it working but just using style.display to get it working first for ease of testing. I also want resultsImage_overlay to display above the overlay so the button remains visible / able to close the div overlay again.
I'm looking to be pointed in the right direction here, complete solutions welcome but I appreciate I haven't provided all the blocks!
You can try with closest() and previousElementSibling on this object.
Demo:
var button = document.getElementsByClassName("openMap")
for(var i = 0; i < button.length; i++){
button[i].addEventListener("click", function(){
var overlay = this.closest('.resultsImage').previousElementSibling.previousElementSibling;
overlay.style.display = "block"
})
}
.mapOverlay {display: none}
<div class="resultContainer">
<div class="mapOverlay animated slideInLeft">mapOverlay 1</div>
<div class="resultsInfo">
<div class='resultsInfo_user'>
<div class='results_dp' style='background-image:url($row[dp])'></div>
<p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>John</p>
</div>
</div>
<div class='resultsImage' style='background-image: url($row[image])'>
<div class='resultsImage_overlay'>
<div class='resultsImage_overlay_info'>
<p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>Some Title</p>
<p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>50</p>
<p style='margin:0;font-size:0.9em;color:#828282'>12-12-2020</p>
</div>
<div class='resultsImage_overlay_button'>
<button class='button-green openMap'>Get Directions</button>
</div>
</div>
</div>
<div class="mapOverlay animated slideInLeft">mapOverlay 2</div>
<div class="resultsInfo">
<div class='resultsInfo_user'>
<div class='results_dp' style='background-image:url($row[dp])'></div>
<p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>Michael</p>
</div>
</div>
<div class='resultsImage' style='background-image: url($row[image])'>
<div class='resultsImage_overlay'>
<div class='resultsImage_overlay_info'>
<p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>Some Title 2</p>
<p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>40</p>
<p style='margin:0;font-size:0.9em;color:#828282'>11-11-2020</p>
</div>
<div class='resultsImage_overlay_button'>
<button class='button-green openMap'>Get Directions</button>
</div>
</div>
</div>
</div>
I need to create a layout in which you have three columns, in each column the corresponding row needs to have the same height. The requirements for this are.
Three columns
Inside each column there are multiple rows.
Each corresponding row must be the same height.
On mobile the columns will turn into a slider.
I've considered 2 layout options for this.
target each row in each column and set the height with Javascript
<div class="container">
<div class="col">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
</div>
<div class="col">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
</div>
<div class="col">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
</div>
</div>
This layout is ideal as I can target the column and add the drop shadow styles without having to target each row and apply to each one. Implementing the slider on mobile would be easier as there is three container columns. But, looping through each column and getting the corresponding row and updating the height on each one seems like a lot of work especially since the height will need to be recalculated every time there is an api call (there's filter above with allow you to update the data).
Use flex
<div class="container">
<div class="row">
<div class="col">
row 1 col 1
</div>
<div class="col">
row 1 col 2
</div>
<div class="col">
row 1 col 3
</div>
</div>
<div class="row">
<div class="col">
row 2 col 1
</div>
<div class="col">
row 2 col 2
</div>
<div class="col">
row 2 col 3
</div>
</div>
<div class="row">
<div class="col">
row 3 col 1
</div>
<div class="col">
row 3 col 2
</div>
<div class="col">
row 3 col 3
</div>
</div>
</div>
This approach is appealing because I don't need to use JS to set the height of each corresponding row in each column. But, i'll need to set the individual styles like drop shadows to each row which means i'll need to use all sorts of trickery so as not to apply the drop shadow to the top and bottom of each row, there's also the risk that this will not display correctly in different browsers (needs to go back as far as IE 10). Also the only slider effect i'll be able to active is overflow scroll which doesn't fit the requirments.
So, my questions are, are there other options i'm not considering? What would you do?
I would consider option 1 for the following reasons:
Your markup is semantically correct (3 columns, each with some rows) and clean
Your column styles can easily be applied
Looping through all rows just to calculate the maximum height isn't that cumbersome especially if you only have a few rows.
A solution with vanilla JavaScript could look like the following. You can wrap the code into a function and call it, whenever your filter is applied:
var rows = document.querySelectorAll(".col:nth-child(1) > .row").length, n
for (n = 1; n <= rows; ++n) {
var cells = document.querySelectorAll('.row:nth-child(' + n + ')')
var maxHeight = 0, i
for (i = 0; i < cells.length; ++i) {
maxHeight = (cells[i].clientHeight > maxHeight) ? cells[i].clientHeight : maxHeight
}
cells.forEach(function(cell){
cell.style.height = Number(maxHeight-10) + 'px'
})
}
.col {
display: inline-block;
width: calc(33% - 41px);
margin: 10px 10px;
padding: 10px;
border-radius: 15px;
box-shadow: 0 0 20px #aaa;
vertical-align: top;
}
.row {
border-top: 3px solid black;
margin: 5px 0;
padding: 5px;
}
<div class="container">
<div class="col">
<div class="row">row 1 Compare text 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
</div>
<div class="col">
<div class="row">row 1 Compare text 1 this text is longer</div>
<div class="row">row 2</div>
<div class="row">row 3 with a little more text</div>
</div>
<div class="col">
<div class="row">row 1 Compare text 1 this text is even much much longer</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
</div>
</div>
I'm writing a dynamic list and for some reason all my events are triggered using the same ID (all rows of the list can trigger the event, but using the same ID). My rows have different IDs but for some reason, the event is triggered with the latest entry on the list.
Here is the code of the list:
<div class="listContainer" style="width: 100%; overflow-y: auto;">
<div id="card-list" class="container-fluid">
<div class="row row-space" id="row1">
<div class="row-basic" id="rowClass1" style="background-color: rgb(247, 245, 248);">
<div class="circle"></div>
<div class="testTitleContainerBar" style="color: rgb(79, 101, 114);">#1</div>
<div class="totalNumberContainerBar" style="color: rgb(79, 101, 114);">5 Images</div>
<div class="square"><img src="assets/Menu 2-24.png"></div>
<div class="onePixelSeparatorBar"></div>
</div>
<div class="row-advanced" style="height: 0px; visibility: visible;"> </div>
</div>
<div class="row row-space" id="row2">
<div class="row-basic" id="rowClass2">
<div class="circle"></div>
<div class="testTitleContainerBar">#2</div>
<div class="totalNumberContainerBar">5 Images</div>
<div class="square"><img src="assets/Menu 2-24.png"></div>
<div class="onePixelSeparatorBar"></div>
</div>
<div class="row-advanced" style="height: 0px; visibility: visible;"> </div>
</div>
</div>
The event listner is added dynamically like that:
row = document.createElement('div');
row.classList.add('row');
row.classList.add('row-space');
idNumber = total_Tests;
row.id = "row"+idNumber;
row.addEventListener('click', function() {openRow('#'+row.id)});
Can someone help me to understand what's going on?
You are reusing variable row inside a loop, and by the time click handler executes it references the last row. Capture the current id value:
row.addEventListener('click', (function(id) {
return function() { openRow('#'+id); }
})(row.id));
or
row.addEventListener('click', function() {openRow('#'+this.id)});
i have a foreach in my view it will fetch data from database as per request.
i need to display 10 result per page. what i mean is i have to diplay 10 result in div 1 , and another 10 result in div 2.. is this possible to do. how to do this. or if u have any other idea related to this share with me.. thanks
My view code:
#if (Model != null)
{
if (Model.Count() != 0)
{
<div class="">
#foreach (var item in Model)
{
<div class="tiptext">
<b style="margin-left: 0px; font-size: large;color: #1A0DB2;">#item.BusinessName</b>
<h3 style="margin: 5px 0px 5px 0px;color: rgb(0, 145, 0);"> #item.FirstName</h3>
<h3 style="margin: 8px; color:black">#item.BusinessCategory </h3>
<div class="description">
<div class="description_image">
<img src="~/Images/popup_pointer.jpg" />
<div class="POP_UP_outer">
<div class="description_background">
<div class="description_map">
<b>Map</b>
</div><hr />
<div class="description_body">
<b>Description </b><h4 class="des">#item.BusinessDescription</h4>
<b>Address2 </b><h4 class="des">#item.Address1</h4>
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
}
else
{
<label id="lblErrorMsg" title="Record not fount...!" style="color:red;">Record not found...!</label>
}
}
To start, you can simply use Take(). Then you can figure out your paging strategy:
#foreach (var item in Model.Take(10))
{
}
This will take the first 10 of that list. You can mix it with Skip() if you need to.
I'm sure the answer is really simple, but I can't figure this out :
http://jsfiddle.net/VfQAH/
I have a bunch of divs in a table style layout like so :
<div class="row">
<div class="col boxname">Box Name</div>
<div class="col length">Length</div>
<div class="col width">Width</div>
<div class="col height">Height</div>
</div>
<div class="row">
<div class="col boxname">A</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
<div class="row">
<div class="col boxname">B</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
I want rows to change color on hover, for that I have :
.row :hover{
background: #003366;
}
But the background changes only on the hovered cell, instead of the whole row.
Do I have to use JS to make it happen like I want, or is there a simple CSS trick that I don't know?
You'd use .row:hover instead of .row :hover to highlight the whole row.
.row:hover{
background: #003366;
}
Your original selector, .row hover, selects all hovered elements which descend from .row, instead of .row itself.
jsFiddle here.
You need to remove the space
.row:hover{
background: #003366;
}
Otherwise it is interpreted as
.row *:hover{
background: #003366;
}
jsFiddle