We Keep Coding

Accordion Up Down Arrows

I am trying to add a downward arrow when the section is closed and an upper arrow when the section is open - at the right end of the head of each tab in the accordion.
Below is the HTML that I've used. It has for-each loops.
-- Javascript
$(function () {
$('tr.accordion').click(function () {
$(this).nextUntil('.accordion').slideToggle(20);
});
});
td.bg-light-blue{ background-color:rgb(233,242,253) }
.text-mid{ font-size:14px }
<div class="box-table" id="div_SummaryReport">
<table class="research table text-center" id="tblSummary" width="100%">
<thead style="position:relative;">
<tr style="position:relative;">
<th align="center" width="20%" style="position:relative;"> </th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Total Calls"> Total Calls</th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Contacted"> Contacted</th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="#of saved calls"> Saved</th>
<th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Percent"> Percent %</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.GroupingData) {
<tr class="accordion">
<td class="bg-light-blue text-mid" colspan="5"><span class="text-blue">#item.Key</span></td>
<td class="bg-light-blue">downarrow</td>
</tr>
foreach (var data in item.Value) {
<tr class="hidden-row">
<td>#data.Name</td>
<td>#data.TotalCalls</td>
<td>#data.Contacted</td>
<td>#data.Saved</td>
<td>#data.Percentage</td>
</tr>
} }
</tbody>
</table>
</div>
The actual page looks close to this Fiddle:
https://jsfiddle.net/jmmanne/35nne25r/ This is sample html without loop

solution in fiddle. simplest method is using a class and a pseudoelement. you'll probably want to use font-awesome or an image for the arrows, but I just used v and > for example. https://jsfiddle.net/VeritoAnimus/avw0d9j1/1/
CSS Update
tr.accordion td:last-child:after { float: right; }
tr.accordion td:last-child:after{ content: 'v'; }
tr.accordion.collapsed td:last-child:after{ content: '>' }
JS Update
$(function () {
$('tr.accordion').click(function () {
var acdn = $(this);
$(this).nextUntil('.accordion').slideToggle({
duration: 20,
complete: function () {
/* if we were just doing one element, we could do a simpler complete function this will only change when the animation completes. since there's multiple rows, this would be called multiple times, so that's a pain. hence why I check the row for which way I was going. */
if($(this).is(':hidden') && !acdn.hasClass('collapsed'))
acdn.addClass('collapsed');
else if (!$(this).is(':hidden') && acdn.hasClass('collapsed'))
acdn.removeClass('collapsed');
}
});
// if you don't care about when it changes, you could just do this instead.
// $(this).toggleClass('collapsed');
});
});
just realized I did the arrows backwards per your request. I'm used to seeing > as closed and V as open. It's an easy enough switch though.
tr.accordion td:last-child:after{ content: '>'; }
tr.accordion.collapsed td:last-child:after{ content: 'v' }

Array "sometimes" not defined

I am trying to implement a button that will delete events from a users selected set of events. For troubleshooting sakes right now I have 5 events hard coded in the page, but eventually they are called from localStorage. The delete button is supposed to delete elements from localStorage as well as the page. My problem is it throws an error when the Remove buttons are not clicked in order. Any and all help is appreciated. To see the errors please open console. Here's a fiddle: http://jsfiddle.net/roob/65j6ktnL/
here's a shorter version of the code:
<div id="result">
<div class="10am target-stage stage-only saturday eventer" id="row0" rel="0">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
<span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
<span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" ><b>map</b></span>
<span class="premove hidden" rel="0">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span></p></span>
<span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
<span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" > <b>map</b></span>
<span class="premove hidden" rel="1">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
<span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
<span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit"><b>map</b></span>
<span class="premove hidden" rel="2">Remove</span></p></span></td>
</tr>
</table>
</div></div>
<script>
$(document).ready(function(){
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;
for (var i=0; i<storageLength; i++)
{
var el = $(localStorage[storaged[i]]);
$("#result").append(el);
}
$("#buttn2").click(function(){
localStorage.clear();
$("#result").html('');
console.log("Storage is cleared");
});
$(".premove").click(function (event) {
event.preventDefault();
var a=$(this).attr("rel");
console.log(a);
var eventsArray = document.getElementsByClassName("eventer");
var eventSelctd=(eventsArray[a]).outerHTML;
localStorage.removeItem("schedule " + a, eventSelctd);
eventsArray[a].outerHTML="";
});
});
</script>

You are adding rel=(number) to each item in the list and using that number to get its reference in the array defined by document.getElementsByClassName("eventer") - each time you remove an item the array gets shorter because the removed item is now gone and you redefine it with each click of the remove button. What happens is you eventually start looking for item #4 and it isn't there because only two items exist in the list.
Another way to do this would be to look for the element closest to your button and remove it.
var eventSelected = $(this).closest('.eventer');
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();

Make tr width match thead width on sticky table header

I have a sticky table header that I am working on. Right now, the user scrolls passed the header, and the header sticks correctly. The problem I am having is that tableHeaderRow is not the same width as tableHeader.
Current steps for sticky header:
Ajax call to fill table with data
Save column widths
Make tableHeader position:absolute
Set column widths back into tableHeader (this is where it gets close but about 100 pixels short)
Tried
Set tableHeaderRow to the expected width.
Set tableHeaderRow to 100% width.
Remove padding and margin
HTML
<table id="table" class="table tablesorter table-responsive table-striped table-hover" style="overflow:auto;border-collapse:collapse;">
<thead id='tableHeader' style="background-color:LightBlue;">
<tr id='tableHeaderRow' >
<th id="col1" class='header'>Column1</th>
<th id="col2" class='header'>Column2</th>
<th id="col3" class='header'>Column3</th>
<th id="col4" class='header'>Column4</th>
<th id="col5" class='header'>Column5</th>
<th id="col6" class='header'>Column6</th>
<th id="col7" class='header'>Column7</th>
</tr>
</thead>
<tbody id='tableBody'>
</tbody>
</table>
Save off widths
col1Width = $('#col1').width();
col2Width = $('#col2').width();
col3Width = $('#col3').width();
col4Width = $('#col4').width();
col5Width = $('#col5').width();
col6Width = $('#col6').width();
col7Width = $('#col7').width();
Stick Scroll Event Listener
var tableHeaderTop = $("#tableHeader").offset().top;
var above = true;
//Window scroll event listener to fix table headers
$( window ).scroll(function() {
if(tableHeaderTop - $(window).scrollTop() <= 0){
if(above){
$('#tableHeader').css({
position:'absolute',
top: $(window).scrollTop() - $("#top").height() -15,
width:$('table#table').width(),
});
$('.column1Value').width(col1Width);
$('#col1').width(col1Width);
$('.column2Value').width(col2Width);
$('#col2').width(col2Width);
$('.column3Value').width(col3Width);
$('#col3').width(col3Width);
$('.column4Value').width(col4Width);
$('#col4').width(col4Width);
$('.column5Value').width(col5Width);
$('#col5').width(col5Width);
$('.column6Value').width(col6Width);
$('#col6').width(col6Width);
$('.column7Value').width(col7Width);
$('#col7').width(col7Width);
above = false;
}else{
$('#tableHeader').css({
top: $(window).scrollTop() - $("#top").height() -15,
});
}
}else{
$('#tableHeader').css({
position:'static',
});
above = true;
}
});
Please ask for any clarification. Working on a bootply to show issue.
Note: I made a bootply for the issue, but it works as I would want it to on bootply. This leads me to believe it would be some sort of 3rd party plugin that changes CSS. I will update with an answer when I have one, in the mean time if anyone wants to use my custom sticky table header code (thanks to others who helped) you're welcome to do so.

Well, this may not completely answer your question.
But, for what you're trying to do - this jQuery plugin is pretty much the best I've seen out there: http://www.fixedheadertable.com/
Doing a google search I also found a pure css solution (that I have no personal experience with, but if it works as intended that's just cool!): http://jsfiddle.net/dPixie/byB9d/3/
I did a script like that myself once too.
A simplified version of it was looking something like this.
jsFiddle: http://jsfiddle.net/L0oy2L01/
HTML (sorry for inline css styling... feel free to add your own classes!)
<div>
<table>
<tr style="background-color: #ccc;">
<td data-col="1" class="header">
Column1
</td>
<td data-col="2" class="header">
Column2
</td>
<td data-col="3" class="header">
Column3
</td>
</tr>
</table>
</div>
<div id="contentDiv" style="max-height: 50px; overflow-y: auto;">
<table class="contentTable">
<tr>
<td data-col="1" class="content">
My Content1
</td>
<td data-col="2" class="content">
My Content2
</td>
<td data-col="3" class="content">
My Content3
</td>
</tr>
<tr>
<td data-col="1" class="content">
My Content4
</td>
<td data-col="2" class="content">
My Content5
</td>
<td data-col="3" class="content">
My Content6
</td>
</tr>
<tr>
<td data-col="1" class="content">
My Content7
</td>
<td data-col="2" class="content">
My Content8
</td>
<td data-col="3" class="content">
My content9
</td>
</tr>
</table>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function(){
var totalWidth = 0;
$('.header').each(function(){
var colwidth = $(this).outerWidth();
var colnumber = $(this).data('col');
$('.content[data-col="'+ colnumber +'"]').each(function(){
if($(this).outerWidth() >= colwidth){
colwidth = $(this).outerWidth();
}
});
$('td[data-col="'+ colnumber +'"]').css('width',colwidth);
totalWidth += colwidth;
});
//if table height is bigger than contentDiv height there will be a scroll.. therefor we adjust contentDiv to it's content + scrolling
if($('.contentTable').outerHeight() > 50){
$('#contentDiv').outerWidth(totalWidth + 30);
}
});
</script>

Change cell color via ng-click

I have change color of my cell when I click in my button but when I click second time my color cell is not keep.
I wish that when I click a second time on another button my first cell keeps color
First click:
Second click:
HTML:
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr class="warning">
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
CSS:
.selected { background-color: #ffff05; }
JS:
scope.moveLeft = function (index, group) {
move(scope.properties, group.id, index, 'left');
};
scope.moveRight = function (index, group) {
move(scope.propertiescible, group.id, index, 'right');
};
var move = function (properties, groupId, origin, destination) {
unregister();
var value;
if (destination === 'right') {
scope.selectedRowRight = origin;
} else {
scope.selectedRowLeft = origin;
}
...

You might need to create an array to keep the cells that are selected thus background color is changed.
Also you will need to change the ng-click function to check the array, and implement the following logic "if there is a record for the clicked row as selected change it's bg-color to yellow"

You will need to do something like this
<td ng-repeat="group in groups" ng-class="{'selected': check == group.title}" ng-click="select(group)">{{group.title}}</li>
in css make sure you have this selected class defined
.selected {
background: 'red';
}
in controller
$scope.check = '';
$scope.select = function (group) {
$scope.check = group.title
};
See this plunker http://plnkr.co/edit/pLbLMWsJ7A6Zr1Z9uAmz?p=preview

Dynamic append Div using Jquery or Javascript

I want to append multiple div’s one after another.
In my scenario I retrieve data from SharePoint and from that I get some variable values like this
Variable :- StartTime, EndTime, MeetingTitle , RoomNo.
$(xData.responseXML).find("z\\:row, row").each(function() {
var StartTime = $(this).attr("ows_EventDate");
var EndTime = $(this).attr("ows_EndDate");
var MeetingTitle = $(this).attr("ows_Title");
var BuildingName = $(this).attr("ows_BuildingName");
var RoomNo = $(this).attr("ows_Facilities");
}
After getting variable value every iteration of loop, I want to append those variable value in div’s one after another. And create page body.
In the div I want to assign the value at below position
span id – RoomNo - RoomNo (Variable value)
span id – StartTime - StartTime (Variable value)
span id – EndTime - EndTime (Variable value)
td id= MeetingTitle – MeetingTitle (Variable value)
Div is look like below,
<div class="box" style="float:left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="acqabold">Room No.</span><br />
<span class="numberbold" id="RoomNo">01</span></td>
<td align="right"><span class="smacqabold" id="Today">YYYY<br>
DD Month </span><br>
<span class="bluebold" id="StartTime">08.00</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">10.00</span></td>
</tr>
</table>
</td>
<tr>
<td align="center" class="bluehead" id="MeetingTitle">
XYZ Meeting.
</td>
</tr>
</table>
</div>
<div class="box" style="float:left">
//same as above
</div>
<div class="box" style="float:left">
//same as above
</div>
<div class="box" style="float:left">
//same as above
</div>
.............
.
.
The number of div's equals to loop iteration.
So please suggest me how to implement it.
Many thanks and Regards,
Digambar Kashid

If you could give the container box an Id (for this example id="container") you could use jQuery:
$("#container").append("<div ...");

Add one parent Container id i named parentContainer in this below example
var boxLength = $( ".box" ).length();
for(var i=0;i<=boxLength;i++){
$("#parentContainer") . append ('<div class="box" style="float:left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="acqabold">Room No.</span><br />
<span class="numberbold" id="RoomNo">' + RoomNo + '</span></td>
<td align="right"><span class="smacqabold" id="Today">YYYY<br>
DD Month </span><br>
<span class="bluebold" id="StartTime">' + StartTime + '</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">'+EndTime+'</span></td>
</tr>
</table></td>
<tr>
<td align="center" class="bluehead" id="MeetingTitle">
'+ MeetingTitle +'</td>
</tr>
</table>
</div> ');
}