I currently have the following piece of angular code:
function MyController($scope) {
var items = [];
$scope.addRow = function () {
items.push({ value: 'Hello, world!' });
$scope.items = items;
}
}
Along with the following snippet of html:
<table ng-controller="MyController">
<tr ng-repeat="item in items">
<td>
{{item.value}}
</td>
</tr>
<tr>
<td>
<button ng-click="addRow()">Add row</button>
</td>
</tr>
</table>
As expected, each time I click Add Row a new row is added with the text Hello, World!.
How can I extend this so that the newly added row glows or flashes as it appears for a brief moment? The idea being that in the real app the item will be added dynamically without a button click so I'd like to draw the users attention to the newly added item.
if you include the ng-animate module you can use css classes(the ngAnimate page also shows how to use in javascript)
http://docs.angularjs.org/api/ngAnimate
<tr ng-repeat="item in items" class="slide">
<td>
{{item.value}}
</td>
</tr>
<style type="text/css">
.slide.ng-enter, .slide.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.slide.ng-enter { } /* starting animations for enter */
.slide.ng-enter-active { } /* terminal animations for enter */
.slide.ng-leave { } /* starting animations for leave */
.slide.ng-leave-active { } /* terminal animations for leave */
</style>
in the .ng-enter, .ng-leave classes you would specify the attribute you would want to animate, eg opacity,width,height etc
For triggering animations from javascript look for the JavaScript-defined Animations section of the ngAnimate page
For animation examples see http://www.nganimate.org
im not a great angular developer but i think you need to use the ngAnimate directive, and then use css transitions, here is an example from the oficial documentation
Related
I have a nested HTML table. I would like to show parts of the nested table depending on the header clicked using javascript
http://jsfiddle.net/TtWTR/103/
so far it shows all three parts. I want to click header A and show only optionA, click headerB and only show optionB etc etc. Not sure if ive set it up right as all three are showing. thanks
To achieve expected result, use below option oh hide() and show() methods
$('.trigger').click(function() {
console.log($(this).text())
var selectedHdr = $(this).text();
$('.nested tr').hide();
$('.nested tr#'+selectedHdr).show();
});
https://codepen.io/nagasai/pen/vdabJQ
Usually I find it convenient to use CSS class selectors on the "root" element (in your case that would be .toptable) allowing you to toggle it to show and hide child elements.
<table class="toptable">
<tr class="accordion">
<td class="A trigger">A</td>
<td class="B trigger">B</td>
<td class="C trigger">C</td>
</tr>
<tr>
<td>
<table>
<tr class="content A">
<!-- will toggle using show-A -->
</tr>
</table
</td>
</tr>
</table>
Then you can make sure to hide the .content rows using CSS unless specific classes are set on the top table:
.content {
display: none; /* content hidden by default */
}
.show-A .A.content {
display: table; /* show when the parent table has .show-A set */
}
Now you just have to add event listeners to your triggers to toggle the classes for the different content rows:
const toptable = document.querySelector('.toptable');
['A', 'B', 'C'].forEach((group) => {
const trigger = document.querySelector(`.${group}.trigger`);
trigger.addEventListener('click', () => {
toptable.classList.toggle(`show-${group}`);
});
});
This can be done using the following script
$('.nested').hide();
$('tr .trigger').click(function() {
var target_id= "#"+$(this).attr('id')+"-table";
$('.nested').not(target_id).hide();
$(target_id).show();
});
and is shown in http://jsfiddle.net/TtWTR/152/
what im trying to achieve is the following.
I have an accordion menu. Now I want to Build an accordion Menu(I call this now Top) inside an accordion Menu(I call this now Bottom).
Im doing this, to present loads of data from a database in a clean way.
Now im trying to adapt the accordion menu that I already got on this.
The data of both, top and bottom, are presented in tables. So first i builded tables inside tables.
If the users clicks on the first Element of each row, the “bottom” menu with the table should slide down.
HTML
<!-- 2016 -->
<div id="sh_details">
<div class="sh_wasserzeichen"></div>
<article>
<dl id="sh_accordion">
<dt id="sh_2016">Headline1</dt>
<dd><table>
<tr>
<th>Überschrift1</th>
<th>Überschrift2</th>
</tr>
<tr>
<td class="inhalt">Inhalt1</td>
<td>Inhalt2</td>
</tr>
<!-- Untertabelle1_1 -->
<td>
<table class="table2">
<tr>
<th>Sub_Überschrift1</th>
<th>Sub_Überschrift2</th>
</tr>
<tr>
<td>Sub_Inhalt1</td>
<td>Sub_Inhalt2</td>
</tr>
</table>
</td>
<tr>
<td class="inhalt">Inhalt3</td>
<td>Inhalt4</td>
</tr>
<!-- Untertabelle1_2 -->
<td>
<table class="table2">
<tr>
<th>Sub_Überschrift3</th>
<th>Sub_Überschrift4</th>
</tr>
<tr>
<td>Sub_Inhalt3</td>
<td>Sub_Inhalt4</td>
</tr>
</table>
</td>
</table></dd>
<dt id="sh_january">Headline2</dt>
<dd>125153226262</dd>
</dl>
</article>
</div>
CSS
/***************************************
************ Details *****************/
#sh_details {background-color:#fff;position: relative; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:none;flex-direction: column;}
.table2 {display:none;}
/***************************************
************ Accordion *****************/
.sh_active {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
article {position:absolute;color: black;width: 90%; height: auto;margin: 0 auto 0 auto;padding-top:75px;padding-left:75px;}
dt, dd {padding:0.5%;width: 50%; height:auto;float: left; margin:0;border-top:1px solid #222;}
dt {font-weight:bold;text-transform: uppercase; background-color:black; color:#ff6600; cursor:pointer;}
dt:first-child {border:none;}
dt:hover {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
dd {background-color:#444; line-height:25px; word-spacing:3px;color:#999; display:none;}
**jQuery (only the accordion stuff) **
/*SUBTABLE*/ <<<---- not working
$(document).on('click', 'td', function (event) {
if($(this).hasClass('inhalt')) {
$(this).next('.table2').removeClass('table2');}
event.stopPropagation();
});
$('#sh_accordion dt').stop().click(function(){
<--- Working
if($(this).hasClass('sh_active')) {
$(this).removeClass('sh_active');
$(this).next().slideUp(300);
} else {
$(this).parent().children().removeClass('sh_active');
$(this).addClass('sh_active');
if($(this).next().is('dd')) {
$(this).parent().children('dd').slideUp(300);
$(this).next().slideDown(300);
}
}
});
https://jsfiddle.net/u4y2o270/1/ (dont know why the code is not working, i disabled the display:none's beacause of this)
So every "Sub..." Menu should be hidden by default. If i click on "Inhalt1", the first "bottom" menu should appear and so on.
Hide and Show the top Menu works fine (Headline1, Headline2), but not the bottom menu (table inside table)
Example: Default is this:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Inhalt3 Inhalt4
User clicks "Inhalt1":
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Sub_Überschrift1 Sub_Überschrift2
Sub_Inhalt1 Sub_Inhalt2
Inhalt3 Inhalt4
//EDIT:
Start:
Everything is hidden, besides the Headlines (Headline1, Headline2) (this is already working, but not in the fiddle)+
It looks like this:
Headline1
Headline2
User is clicking on Headline1,
The user can only see the following:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Inhalt3 Inhalt4
Headline2
The user is now clicking on "Inhalt1"
The user now sees this the following:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Sub_Überschrift1 Sub_Überschrift2
Sub_Inhalt1_1 Inhalt2_2
Inhalt3 Inhalt4
Headline2
//EDIT2:
Updated the fiddle http://jsfiddle.net/u4y2o270/7/
This is what is working so far.
If the user is now under Headline1 clicking Inhalt1 the table under it should slideDown // should be showed, the table has the class .table2 which is by default on display:none to be hidden. My idea was, to find the next Item with class table2 and remove the class or slide it down. But its not working.
Same obv. for Inhalt3
Below is the tabular structure for expand & collapse, i have done using table. Now i have used the below script for collapse & expand. But sometime i succeeded in expand & sometime don't.
What i did, when i got response from the api, i call this function :
$timeout(function (){
$scope.initExpandCollapse();
},1000);
$scope.initExpandCollapse = function () {
angular.element(document).on("click", ".table_exp", function(){
var TBODY = angular.element(this).parents(3);
if(TBODY.hasClass("open")){
TBODY.children("tr.expand-table-row").hide();
TBODY.removeClass("open");
return false;
}
TBODY.addClass("open");
TBODY.children("tr.expand-table-row").show();
});
}
If you guys, can help me out for this problem . Thanks.
CSS:
tr.expand-table-row {
display: none;
}
tr.expand-table-row.open {
display: initial;
}
Angular
$scope.expandCollapse = function expandCollapse (item) {
item.open = !item.open
}
HTML
<table>
<tbody>
<tr ng-repeat="item in items track by $index"">
<td ng-click="expandCollapse(item)">++++</td>
<td>
<table>
<tr ng-class="{'open': item.open}" class="expand-table-row open">
<td>{{item.name}}</td>
<td ng-repeat="data in item.options">{{data.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You need nested tables so the click marker does not simply vanish with the rest, apart from that the salient point is the ng-class="{'open': item.open}" espression that sets the class open if the property open on item is set.
Try to use window.onload instead of $timeout, or add you script to the end of body tag.
Here is a simplified fiddle
I have a table with sub-groupings inside of it. I want these sub-groupings to be hidden until the user clicks the sub-header row, which looks like this:
<tr class="title" name="titleGroup"
onmouseover='this.innerHTML=this.innerHTML.replace("---","+++");'
onmouseout='this.innerHTML=this.innerHTML.replace("+++","---");'
onclick="$('.Group').toggle();">
<td colspan="2">--- Group ---</td>
</tr>
So, onmouseover, should change the row to look like: +++ Group +++
and onmouseout should change it back to: --- Group ---
However, only the onmouseover triggers and I cannot get the text to go back.
I initially had the mouse over/out calling a function, but that has the same result. Also note that this page is dynamically generated so the text is not always "Group".
What am I doing wrong and how can I get onmouseout to reset the text?
Maybe you wanted to use onmouseleave event? :)
The proper use of replace function in your case and onmouseleave event:
<table width="550px">
<tr class="title" name="titleGroup" >
<td
onmouseover='this.innerHTML=this.innerHTML.replace(/-{3}/g,"+");'
onmouseleave='this.innerHTML=this.innerHTML.replace(/\+{3}/g,"-");'
onclick="$('.Group').toggle();"
colspan="2">--- Group ---</td>
</tr>
<tr class="Group" style="display:none;">
<td>
<b>Group</b>
HCS:</td>
<td>
<input type="checkbox" name="did4" />
</td>
</tr>
<tr class="Group" style="display:none;">
<td>
<b>Group</b>
NCD:</td>
<td>
<input type="checkbox" checked="" name="did5" />
</td>
</tr>
</table>
ANOTHER EDIT:
Firefox doesn't support onmouseleave event on TR marks! Move those events deffinition to
<td>
Building off of adeneo's fiddle, using jQuery with mouseleave is the way to go. However, the text could include a - or + so I had to update a bit to specifically look for 3 in a row.
Here is the final jQuery:
$('.title').on('mouseenter mouseleave', function(e) {
$('td', this).text(function(_,txt) {
return txt.replace(/[+]{3}|[-]{3}/g, function(x) {
return x=='---' ? '+++' : '---';
});
});
});
http://jsfiddle.net/jQRR7/29/
Checkout http://jsfiddle.net/jQRR7/30/
This works (at least in webkit browsers, Firefox still to be done)
onmouseover='this.innerHTML=this.innerHTML.replace(/-/g,"+");'
onmouseleave='this.innerHTML=this.innerHTML.replace(/\+/g,"-");'
It contains 2 issues:
a) replace() will replace only 1x, unless you hand over a regular expression (attention: do not surround the regex by quotes!) More about replace() can be found at http://devdocs.io/javascript/global_objects/string/replace DevDocs.io JS replace()
b) mouse over seems to be called, but mouseout just 1x,so only 1 time +++ will be replaced
Can you switch to CSS3 (pseudo elements like :after are supported by all major browser version) or do you need to stick on js?
take a look at http://jsfiddle.net/jQRR7/31/
HTML
<table>
<tr class="title" name="titleGroup" style="background: #c3c3c3" onclick="$('.Group').toggle();">
<td colspan="2">Group with CSS3</td>
</tr>
</table>
CSS
.title td {
font-weight: bold;
text-align: center;
cursor: pointer;
}
td:before{
content: '+++ ';
}
td:after{
content: ' +++';
}
tr:hover td:before{
content: '--- ';
}
tr:hover td:after{
content: ' ---';
}
I am using datables plugin for drawing a table on my web app.
But here is the problem.
I have a print button which calls me this function:
function printHTML(clonedDive){
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.contentWindow.onunload = function(){
$("#submenu").show("fast");
$(".content-secondary").animate({
width: '15%'
});
$(".content-primary").animate({
width: '83%'
});
};
iframe.contentWindow.document.body.appendChild(clonedDive);
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
This is how I call this function:
printHTML( document.getElementById("results").cloneNode(true));
now results div looks like this:
<div id="results">
<table id="stops" width="100%" border="1" cellspacing="2" cellpadding="5" >
<thead>
<tr class="even">
</tr>
</thead>
<tbody>
</tbody>
</table>
</br>
<hr>
<p id="title"><b>Map</b></p>
<div id="map_find">
</div>
</div>
So table is working like this: when you click on the row, the row got highlighted and map is shown. So problem is occurring when I click print button.
On the print preview I can see the table but the row is not highlighted and the Google map is not shown. It seems like it is showing me the div that is firstly initialized and there is not highlighted rows and Google maps is not shown.
What can I do?
Have you considered changing to use #media types?
#media print
{
*{
visibility: hidden;
}
#results{
visibility: visible;
}
}
You can set the visibility of everything you would like to not print with visibility: hidden and anything you would like to print with visibility: visible.
Then on click you would call:
window.print()
EXAMPLE WITH MEDIA TYPE
EXAMPLE WITHOUT MEDIA TYPE