Three steps working for my table row highlighting.
on hover the background is highlighted blue.(basically, to show you can highlight it)
click event highlights the background row blue.
click a highlighted row it un highlights.
These are working good.
The problem
When i click a highlighted row to un highlight it wont show that it's un highlighted while the mouse is hovering. Only, on mouse leave.
I need it to be able to disable the hover so it can show that its un highlighted as soon as its clciked to un highlight. Trick is i only need the hover disabled only on that click. I need it to be able to hover again, and go through the same process.
HTML
<table class="superusertable" cellpadding="5" cellspacing="0">
<tbody class="table-font">
<tr ng-init="highlightAllRows(source)" ng-repeat="source in userData"
ng-model="source.fromSourceID"
ng-class="{'sourcesSelected': source.sourcesSelected}"
ng-click="select(source)">
<td width="290px">
<div class="action-checkbox"; width="290px">{{source.fromSourceID}}
</div>
</td>
</tr>
</tbody>
</table>
angular
highlight all rows sets all the rows initially highlighted.
$scope.highlightAllRows = function(item){
item.sourcesSelected = true;
};
$scope.select = function(item) {
item.sourcesSelected = item.sourcesSelected ? false : true;
};
CSS
.superusertable tr:hover{
background-color: #80CCFF !important;
}
is there a simple css,jquery, angular solution to disable the hover when highlighted row is clicked. I need hover to work again when you hover back
Related
I am fairly new to do things in Angular so I might overlook something:
I am generating a multiple div rows with *ngFor. Each of the row has a toggle button and a hidden sub-div (and the sub-divs can also have hidden sub-divs).
What I want to try and do is to show and hide the sub-divs independently when clicking on the toggle button (and also the toggle button icon should change). I managed to get it working either with opening all divs at the same time or when clicking on one row-toggle it will open the sub-div.
But when I click on another it will close the previous one that was clicked and open the currently clicked on one.
I was thinking about using an array but that would only work for the first layer of divs and not for the nested ones (since I don´t know how many, initially).
Here some illustration of opened sub- and sub-sub divs:
rows rows
>AA -AA
>BB >aa
>CC -> >BB
>DD -CC
>FF -cc
c
>DD
-FF
>ff
<div *ngFor="hero of heroes">
{{ hero.name }}
<button (click)="hero.show = !hero.show">show/hide</button>
<div class="sub" *ngIf="hero.show">
more info here
</div>
</div>
Add some css to emphasize the sub section
You need accordion
try this:
You can make use of simple CSS and make it simple.
HTML
<table class="table">
<tbody>
<tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
<div (click)="getSub(game.label);">
<!-- use the uniqueId here -->
<td>{{game.date}}</td>
<td>{{game.label}}</td>
<td>{{game.score}}</td>
</div>
<table>
<tbody [ngClass]="{activetab: isActive(game.label)}">
<tr *ngFor="let subgame of game.sub">
<td>{{subgame.date}}</td>
<td>{{subgame.label}}</td>
<td>{{subgame.score}}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
CSS
tr .activetab {
display: block !important;
}
TS
isActive(id) {
return this.selected === id;
}
getSub(id) {
//TODO//
this.selected = (this.selected === id ? null : id);
}
I think this should work fine.
I am building a schedule view, which is currently in a preliminary stage, where I add events and then I can rearrange them, either by dragging the event vertically upwards or downwards, or by resizing it vertically. For resizing, I'll click a button contained within the event and drag it up or down to resize the event. For a better view, please have a look at this opensource calendar.
I am currently facing an issue, in making my elements draggable. None of the drag events fire, although other (click, mouseover) do work. The following are snippets from what I've done till now. Please excuse me for my work, I'm still a little rusty at Angular.
*.component.html:
<table>
<tbody *ngFor="let item of FullHours; let i = index" >
<tr [ngSwitch]="returnItem(Doc)" [ngStyle]="{'background-color':returnItem(Doc) === ',' ? 'white' : 'yellow' }">
<td [style.height.px]="unitHeight" >
<div ondrop="drop($event)" ondragover="allowDrop($event)" *ngIf="hasEvent(i)" class="event-container" style="background-color: white;">
<div class="event" draggable="true" ondragstart="drag($event)">
<div style="width:100%; float:left" class="content">04:30PM -- 05:30PM</div>
<div style="width:100%; float:left" class="content">event {{i}}</div>
<button draggable="true" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" class="eventbtn" style="position: absolute; left:0; right:0; bottom:0" >
=
</button>
</div>
</div>
<div *ngIf="!hasEvent(i)" (click)="createEvent(i)" class="event-container"></div>
</td>
</tr>
</tbody>
</table>
*.component.ts:
onDrop(event: any) {
alert('on-drop');
event.preventDefault();
event.stopPropagation();
// your code goes here after droping files or any
//try to change height
}
onDragOver(evt) {
alert('on-drag-over');
evt.preventDefault();
evt.stopPropagation();
}
onDragLeave(evt) {
alert('on-drag-leave');
evt.preventDefault();
evt.stopPropagation();
}
I've put in alerts on all binded functions, but none of them work. I did try this earlier with the whole event too but it still didn't work. I've created simple drag and drop divs wit JavaScript code but even those don't work in here. Do let me know if I need to provide anything else.
I'd be grateful for any guidance that can make my drag and drops work. Thanks in advance.
I have the following table:
<table>
<tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" data-ng-click=...>
when a row is clicked than the row expands and additional information is shown to this row - this works fine.
In this row there is also a column (myColumn) which can be clicked.
If this column is clicked than first the row expands and than the proper click event is handled. Is there a way to prevent the expandation of the row when the column myColumn is clicked?
The reason it is happening because of event bubbling and to stop it event.stopPropogation() can be used.
While clicking the column bind a method; and use $event to prevent default
<table>
<tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" data-ng-click="toggleColumn($event)">
And in Controller:
$scope.toggleColumn = function(e){
e.stopPropogation(); //This would prevent event bubbling from td to tr
e.preventDefault(); //This will prevent default action like link load on click of hyperlink
//toggle functionality
}
You need to bind the row click event in column and remove from the row.
Please check the bellow.
<table>
<tr data-ng-repeat-start=... data-ng-click="">
<td class="myColumn" data-ng-click="contactGroup.expanded = !contactGroup.expanded; <columnClickEventHandl>">
try
<table>
<tr data-ng-repeat-start=...
ng-click="!contactGroup.expanded && contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" ng-click=...>
note, that assignment in the row's ng-click's expression will be executed only when contactGroup.expanded is false
I have a table where the user can add rows to it but each row is numbered. Now the user enters a number in a textbox for the number of rows he/she wants to add before they actually start adding rows. Below is the code where if the number of rows that has been added is over the number entered by the user, then it stops adding the rows.
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
Example: if user entered in the number 5 in a textbox, then the user can only add 5 rows, if the user tries to add another row, then no row is added because user can't add more than 5 rows.
What my question is that if the user has already reach the max number of rows they have added, then I want it to disable a textarea (user wont be able to click in the textarea and I want to give it the correct colour so that you can tell the textarea is disabled). I also want to disable a hyperlink so that user cannot click on the hyperlink (again suitable color change so user can tell hyperlink is disabled) Does anyone know how to do this?
Below is code for hyperling and the textarea:
<table id="question">
<tr>
<th colspan="2">
Question Number <span id="questionNum">1</span>
</th>
</tr>
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
<span href="#" class="link">[Question link]</span>
</td>
</tr>
</table>
Jquery code showing example of how a table row is added:
function insertQuestion(form) {
var questionarea=(form.questionText.length)
? form.questionText[0]
: form.questionText;
var context = $('#optionAndAnswer');
var currenttotal = context.find('.answerBtnsOn').length;
alertErrors = "";
// Note, this is just so it's declared...
if (questionarea.value == ""){
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $qid = $("<td class='qid'>" + qnum + "</td>");
$tr.append($qid);
$tbody.append($tr);
}
Html table where the table row is added to:
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="qid">Question No</th>
</tr>
</thead>
<tbody></tbody>
</table>
look at this jsfiddle for example here, you can write a question on top using the textarea and when you have done that then click on the button to add it in a new row. It is the top textarea I want to disable only if the number of rows has met its limit.
Are you adding rows via JavaScript/Ajax or on page load?
If the former (which I'm guessing your first code example illustrates), use a JavaScript counter to represent the number of rows, and when they trigger the add row function (which you write), check that number first; alert and disabled accordingly:
jQuery allows you to disable form elements, and just replace the link with the link text (ie. minus the tag), and modify it's color, either with a $(ele).css() call, or by wrapping it in a span tag.
If the latter, you can just write the textarea via PHP with the disabled="disabled" property added to the opening tag. The link: use the same method as above (wrapping it in a span tag, rather than an a tag).
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
Obviously, you need to include the jQuery framework. I usually use Google's: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.
i have simple application which should work on keyboard events like onfocus and onblur instead of onmouseover and onmouseout.
here is my code snippet to zoomin/zoomout:
<script>
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
calling this function in this way:
<td align=center valign=middle >
<figure>
<button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
<figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
</figure>
</td>
but problem is when i select image using tab key i cant see any zoomin/zoomout effect. if i replace onfocus/onblur with onmouseover/onmouseout respectively it works well.
please some one help me where i am going wrong.
regards
rashmi
You will not get focus on an img element by tabbing but on the button element instead. Move your onblur/onfocus events to the button element. This will change your button's size each time you focus/lose focus on it, but it will not change your image size. What you have to do then is to modify your code so the change is mapped on the button's contained image dimensions as well. Something that I can think of right now is
<script type="text/javascript">
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
{
theImage = whichElement.firstChild;
theImage.style.width=nW;theImage.style.height=nH;
oW=whichElement.style.width;oH=whichElement.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichElement.style.width=nW;whichElement.style.height=nH;
theImage.style.width=nW;theImage.style.height=hH;
}
</script>
Here, the first child of the button element, which happens to be the image, takes the same height and width with the button, whenever that changes.