Develop Reference

customize the code for tab view with using href

Actual html file
It is coded for table but i need it for anchor
<table>
<tr>
<td>click me</td>
</tr>
<tr>
<td>click me</td>
</tr>
<tr>
<td>click me</td>
</tr>
<tr>
<td>click me</td>
</tr>
<tr>
<td>click me</td>
</tr>
</table>
script.JS
var rows = document.getElementsByTagName('tr');
function rowHighlight() {
var selectedRows = document.getElementsByClassName('selected');
for (var n = 0; n < selectedRows.length; n++) {
selectedRows[n].className = '';
}
this.className = 'selected'
}
for (var i = 0; i < rows.length; i++) {
rows[i].addEventListener('click', rowHighlight);
}
css file
.selected {
background-color:red;
}
table:hover {
cursor:pointer;
}
The above code are the actual code but i want to customize it for my below code
html file
it is my code for tab view in ionic
<div class="tabs">
<a ng-class="tab-item" ng-click="a('top')">
Top News
</a>
<a ng-class="tab-item" ng-click="a('latest')">
Latest News
</a>
<a ng-class="tab-item" ng-click="a('popular')">
Popular News
</a>
</div>
<div>

Here is the fiddle!
.red
{
background-color:red;
}
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
<div class="tabs" ng-app>
<a ng-class='{"red":tog==1}' ng-click='tog=1'>
Top News
</a><br/>
<a ng-class='{"red":tog==2}' ng-click='tog=2'>
Latest News
</a><br/>
<a ng-class='{"red":tog==3}' ng-click='tog=3'>
Popular News
</a>
</div>
Hope it helps!

Using jquery with dynamically created elements from angular doesnt work

Im trying to use jquery to manipulate elements created by angular, but I am not able to get it to work. I was wondering if anyone could help me out. Thanks
Here is the HTML
<div class="patients">
<tbody ng-repeat="patient in patients">
<tr>
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<div class="sendreminder">
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style=" background-color: #00e699; border-color:#00e699; " ng-click="post($index) " "$parent.selected = $index" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
</div>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">
</a>
</td>
</tr>
</tbody>
</div>
Here is the jquery
$(function() {
$('.patients').on('click', ".sendreminder",function(e){
alert('worked');
});
});

ng-repeat recreates DOM everytime it detects changes(and hence, all the attached events will be gone). So to reattach the events after ng-repeat finishes, you can do
<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">
$last will be set to true if its the last item for ng-repeat
and in you controller, create ngRepeatFinish() function
$scope.ngRepeatFinish = function(){
$('.sendreminder').click(function(e){
alert('worked');
});
}
you can also make custom directives for this which is better than this, but this will suffice for a quick solution.
See this for a solution with custom directives

You should call that code immediately after you dynamically create the new element since that code sets the handler for the actual elements (when you call the function) that have class .patients, not the new ones...

i recommend you to use Angular instead of Jquery
added both methods below
//using Jquery
$('.patients').on('click', ".sendreminder", function(e) {
alert('from JQuery');
});
function TestCtrl($scope) {
$scope.patients = [{
name: 'one',
number: 1,
date: '2016-08-16',
reminded: true
}, {
name: 'two',
number: 2,
date: '2016-08-16',
reminded: true
}, {
name: 'three',
number: 3,
date: '2016-08-16',
reminded: false
}];
//using angular
$scope.post = function(i) {
alert('from Angular');
var selectedPatient = $scope.patients[i];
console.log(selectedPatient);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
<div class="patients" ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Date</th>
<th>Reminded</th>
<th>Request</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="patient in patients">
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style="background-color: #00e699; border-color:#00e699;" ng-click="post($index)" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">test
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Dynamically changing colour of the text using directive Angular JS

My directive does not seem to be working, here is my code:
//profile colour directive
app.directive('profileColour', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var imageDiv = scope.$eval(attrs['profileColour']).imageId;
var colour = scope.$eval(attrs['profileColour']).colour;
var divName = '#name' + imageDiv;
//$(divName).addClass("purpleText");
$(divName).addClass("purpleText");
}
};
});
HTML:
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2">
<span></span>
</th>
<th class="col-xs-8" ng-click="sort('firstName')">
<span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th class="col-xs-2">
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="showModal($event, user.emailAddress)" change-image="{imageId: {{$index}}, colour: 'blue'}" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>
<!--img class="round" src="/images/profile-placeholder.jpg" width="50" height="50">
</img> -->
<img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
</td>
<!-- <td><img src={ {user.profileImageUrl}} width="100" height="100"></img></td> -->
<td>
<div style="padding-top:1em"><span profile-colour="{imageId: {{$index}}, colour: 'blue'}" id='name{{$index}}'>{{user.firstName}}</span>
<br>{{user.lastName}}
<br>{{user.profession}}</div>
</td>
<td>
<div style="padding-top:1em">
<img id={{$index}} src="images/arrow-right-purple.png" width="50" height="50"></div>
</td>
</tr>
</tbody>
</table>
I want to be able to dynamically change the colour of the span:
> <span profile-colour="{imageId: {{$index}}, colour: 'blue'}"
> id='name{{$index}}'>{{user.firstName}}</span>
upon the table loading using the above directive by attaching a class, but it is not having any effect. My CSS is:
/*purple text */
.purpleText {
color: #6c58bF;
font-weight: 900;
text-transform: uppercase;
font-style: bolder;
}
How can I get this to work, thanks!

If I am understanding this correctly, and you have the desired dynamic color choice stored in user.profileColour, then you can do something like this
<span ng-class="{ 'purpleText' : user.profileColour === 'purple'; 'greenText' : user.profileColour === 'green'}">
And so on.
You can abstract this to a function where you pass in user.profileColour and return the class as well, depending on where you want the logic (if you turn it into a function you could have it all in the controller). So something like -
<span ng-class="setColor(user.profileColour)" >
and in the controller
$scope.setColor = function(color) {
//assuming profileColour is purple this would return "purpleText"
return color + "Text";
}
This is assuming all the profileColour are strings.

table column hover load separate div

I'm having a bit of trouble figuring something simple out. I have a large datatable, and I want that when hovering any column, a specific div (and different for each column) is loaded somewhere on the page, outside the table.
How should I go about that? I'm having trouble defining columns (I'm using jquery dataTables), and then finding a way to load a different image for each column.
Here is my current code that doesn't take columns into account:
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
And the HTML:
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
....
</tbody>
Thanks!

Im not sure if this is what you want, but check it out:
This code will show the name of the div you are hovering in another div.
https://jsfiddle.net/5jy071t5/4/
HTML
<ul>
<li name="first">Hoover me</li>
<li name="second">And me</li>
</ul>
<div id="output"></div>
Javascript
$( "li" ).hover(
function() {
$("#output").html($(this).attr("name"));
//you can also load an image if you like
}, function() {
$("#output").html("");
}
);

It works as charm. Maybe you were missing either id or class.
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
.loaded{
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
</tbody>
</table>
<div id="sp1" class="loaded">sp1</div>
<div id="sp2" class="loaded">sp2</div>
<div id="bb1" class="loaded">bb1</div>
<div id="br1" class="loaded">br1</div>
<div id="br2" class="loaded">br2</div>
<div id="br3" class="loaded">br3</div>

Accessing element from click event in jquery widget

I am trying to make a custom widget that creates tabs .But the problem Im facing is ,I have a click event defined on clicking on one of the tabs but I am unable to access the attributes associated with that tab element (like myid="summarytab")
Here is a code snippet for the same
jquery.tabs.js
$.widget('ui.tabs', {
options: {
},
_create: function() {
alert('attaching')
var me = this
me._on('td', {
click: "_selectedTab"
})
},
_selectedTab: function(el) {
alert("coming" + el.attr('goto'))
},
_destroy: function() {
}
});
jstChking.html
<table id="tabs-container" goto="summary">
<tbody>
<tr class="a-detail-menu">
<td myid="summary" goto="summary" class="selected">
<i class="fa fa-bank deco"></i>
Summary
</td>
<td goto="applicability" myid="applicabilityTab" >
<i class="fa fa-tags deco"></i>
Applicability
</td>
<td goto="assessments" myid="assessmentTab">
<i class="fa fa-check-circle-o deco"></i>
Assessments
</td>
<td class="ignore"></td><td class="ignore"></td>
</tr>
</tbody>
</table>
<div class="a-section summary" >
<h2>HTML Markup for these tabs</h2>
content1
</div>
<div class="a-section applicability" style="display:none">
<h2>JS for these tabs</h2>
content2
</div>
<div class="a-section assessments" style="display:none">
<h2>CSS Styles for these tabs</h2>
content3
</div>
The idea is to hide all tabs and show the one that is clicked.I am trying to do that in jquery using the goto="xyz" and and show only that div. Now when i m trying to make in widget then i m not getting the attribute.Also if u have any suggestions ,that would be welcome.
Thanks in advance