In My angularJs application, I have a problem with scroll bar. There is a pop up which show a list of data in it and I refresh that data after every 5 seconds, by calling my API service in every 5 seconds.
Problem is that after refresh, side scroll bar goes automatically to the bottom. I google for that but dn't get satisfied solution, I used $anchorScroll in my config file which is not help full as well.
I am using Angular Material's md-dialog-content for popup list.
<md-dialog-content>
<div layout="row">
<div class="simple-table-container" flex>
<table class="simple" ms-responsive-table>
<thead>
<tr>
<th>ProcessItem</th>
<th>ElapsedTime</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="info in vm.process.data">
<td>{{info.item}}</td>
<td>{{info.time}}</td>
<td>{{info.Status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
vm.process.processInterval = $interval(function () {
api.getdata.get({ 'ID': id },
function (response) {
if (response.data[0].hdata[0].pdata)
vm.process.data = response.data[0].hdata[0].pdata;
$scope.$watch(
"vm.process.data",
function (newObj, oldObj) {
if (newObj !== oldObj) {
vm.process.data = newObj;
}
}, true
);
},
function (response) {
console.error(response);
}
);
}, 5000);
Any Idea guys?
As I understand after ajax update page your scroll position not change. This is normal situation and in this case you should manual trigger scroll top to element that you want: element.scrollTop = pixels.
In other case you have some hash in url that trigger scroll to bottom element. And in this case you should clear it.
Related
I found a function to move data between table cells but the functions never seem to stick to whatever tag is "attached" to the cell itself. I'm not sure if I was using ids wrong. I need help finding a way to "attach" a function to a tag that moves between cells.
Can you help me create a button to move a tag (unit 1) upwards and downwards through a table such that it stops at the end of the table?
Original code attached here
//Send to the "bottom"
function sendOS() {
var node = document.getElementById("r1c1").lastChild;
document.getElementById("r1c3").appendChild(node);
/*
var node = document.getElementById("r1c3").lastChild;
document.getElementById("r1c2").appendChild(node);
*/
}
//Send to the "top"
function sendTop() {
var node = document.getElementById("r1c2").lastChild;
document.getElementById("r1c1").appendChild(node);
}
table,
th,
td {
border: 1px solid black;
width: 32px;
height: 32px;
}
<table>
<tr id="row1">
<td id="r1c1">Unit1</th>
<td id="r1c2">Unit2</th>
<td id="r1c3">Unit3</th>
</tr>
<tr id="row2">
<td id="r2c1">r1c2</td>
<td id="r2c2">r2c2</td>
<td id="r2c2">r2c3</td>
</tr>
<tr id="row3">
<td id="r2c2">r3c1</td>
<td id="r2c2">r3c2</td>
<td id="r2c2">r3c3</td>
</tr>
</table>
<!--Table ends -->
<!-------------------------------------------------------------->
<button onclick="sendOS()">move to the other side</button>
<button onclick="sendTop()">move to the right</button>
I can't help you with creating all that. You should try it out for yourself, you'll learn a lot more.
But I can help you with the code you provided.
A lot of your id attributes are the same. Every id on the page should be unique.
Change your HTML structure slightly by adding a <span> around the texts inside your cells (<td><span id="target-1">Text</span></td>). That way you can select elements inside your cells and move those around. Using lastChild to get the TextNode is not the right approach.
The functions should check if there is a cell next to it in the direction you want to move the text. If there is, move the text. If not, then do nothing.
Below I've made a small demonstration on how this might work. Here target is the element that we move. It's the <span id="target">Foo</span> element in the HTML.
When clicking either button, the code will go one element up from the target element with parentElement, that will be the <td> our target is in.
It then tries to access the previous or next <td> in the row (depending on the direction). If a neighbouring <td> is found, it will append the element.
The advantage of this approach is that you always have a reference to the element that you are moving.
const target = document.querySelector('#target');
const buttonLeft = document.querySelector('.js-target-move-left');
const buttonRight = document.querySelector('.js-target-move-right');
function targetMoveLeft() {
const previousCell = target.parentElement.previousElementSibling;
if (previousCell) {
previousCell.append(target);
}
}
function targetMoveRight() {
const nextCell = target.parentElement.nextElementSibling;
if (nextCell) {
nextCell.append(target);
}
}
buttonLeft.addEventListener('click', targetMoveLeft);
buttonRight.addEventListener('click', targetMoveRight);
<table>
<tbody>
<tr>
<td><span id="target">Foo</span></td>
<td><span>Bar</span></td>
<td><span>Baz</span></td>
</tbody>
</table>
<button class="js-target-move-left">Left</button>
<button class="js-target-move-right">Right</button>
I hope this will at least push you in the right direction. Good luck with implementing the other features.
I have implemented a horizontal scrollbar on the top and bottom of the table but I could see only the bottom scrollbar. But I would like this scrollbar to be also on top of the table.
I have used jquery code for scrolling and directive for the table.
Expected :
Currently, I See Only the bottom bar
demo
Demo you can see working code
angular.module('components', [])
.directive('master',function () { //declaration
function link(scope, element, attrs) {
scope.$watch(function(){
scope.duelScroll = {
width:element[0].offsetWidth+'px'
};
});
}
return {
restrict: 'AE',
link: link
};
})
angular.module("datatable", ['ngRoute', 'ngMaterial', 'md.data.table']).controller("datacontroller", ['$scope', function($scope) {
$(function () {
$("[name='upperScroll']").scroll(function () {
$("[name='wireTable']").scrollLeft($("[name='upperScroll']").scrollLeft());
});
$("[name='wireTable']").scroll(function () {
$("[name='upperScroll']").scrollLeft($("[name='wireTable']").scrollLeft());
});
$("[name='upperScroll']").css({ 'height': ($("[name='wireTable']").height() + 'px') });
});
$scope.DataSet = [1];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
<div ng-app="datatable" ng-controller="datacontroller">
<form name="Information">
<md-content layout-padding ng-repeat="Data in DataSet">
<ng-form name="invoice{{$index}}">
<md-card style="background-color:Gainsboro">
<div ng-init="isShowAll =true" ng-show="isShowAll">
<md-card>
<div name="upperScroll" style="overflow-x:scroll; overflow-y: hidden; max-height:20px; width:100%">
<div name="innerScroll" ng-style="duelScroll" style="height:20px;"></div>
</div>
<div ng-style="getStyle($index)">
<md-table-container name="wireTable" infinite-scroll="loadMore($index)" infinite-scroll-distance="1" infinite-scroll-parent="true" ng-init="isShow=true" ng-show="isShow">
<table master md-table md-progress="aPromise" name="innerWireTable">
<thead md-head md-order="sortOrder" style="background-color:#e0dcff; ">
<tr md-row style="height:45px">
<th md-column><span>Test1</span></th>
<th md-column><span>Test2</span></th>
<th md-column><span>Test3</span></th>
<th md-column><span>Test4</span></th>
<th md-column><span>Test5</span></th>
<th md-column><span>Test6</span></th>
<th md-column><span>Test7</span></th>
<th md-column><span>Test8</span></th>
<th md-column><span>Test9</span></th>
<th md-column><span>Test10</span></th>
<th md-column><span>Test11</span></th>
<th md-column><span>Test12</span></th>
<th md-column><span>Test13</span></th>
<th md-column><span>Test14</span></th>
<th md-column><span>Test15</span></th>
<th md-column><span>Test16</span></th>
<th md-column><span>Test17</span></th>
<th md-column><span>Test18</span></th>
<th md-column><span>Test19</span></th>
<th md-column><span>Test20</span></th>
</tr>
</thead>
<tbody>
<tr>
<td md-cell>Test1</td>
<td md-cell>Test2</td>
<td md-cell>Test3</td>
<td md-cell>Test4</td>
<td md-cell>Test5</td>
<td md-cell>Test6</td>
<td md-cell>Test7</td>
<td md-cell>Test8</td>
<td md-cell>Test9</td>
<td md-cell>Test10</td>
<td md-cell>Test11</td>
<td md-cell>Test12</td>
<td md-cell>Test13</td>
<td md-cell>Test14</td>
<td md-cell>Test15</td>
<td md-cell>Test16</td>
<td md-cell>Test17</td>
<td md-cell>Test18</td>
<td md-cell>Test19</td>
<td md-cell>Test20</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
</md-card>
</div>
</md-card>
</ng-form>
</md-content>
</form>
</div>
someone help me with this
I have already checked some questions related to the scrolling bar but I want to fix this code so please someone help me here to fix this issue
also, it should support scrolling if we have multiple table http://jsfiddle.net/e1w0vmns/1/
Made few changes to your code.
Added unique class based on ng-repeat index to div upperScroll
class="upperScroll{{$index+1}}" custom-index="{{$index+1}}"
Added similar class to wireTable
class="wireTable{{$index+1}}" custom-index="{{$index+1}}"
Updated the script to use those classes to make specific target to support multiple table scroll
$("[name='upperScroll']").scroll(function () {
var upperIndex = $(this).attr('custom-index');
$(".wireTable"+upperIndex).scrollLeft($(this).scrollLeft());
});
$("[name='wireTable']").scroll(function () {
var wireIndex = $(this).attr('custom-index');
$(".upperScroll"+wireIndex).scrollLeft($(this).scrollLeft());
});
Jsfiddle - http://jsfiddle.net/7t9pmkqa/
I'm not very much familiar with angular but going through the demo, I found the issue is with the width of innerScroll. You just need to set that width equal to table width
$("[name='innerScroll']").width($("[name='innerWireTable']").width());
You can find the working demo here
working demo
Did you try CSS overflow property?
overflow: scroll; /* Scrollbar are always visible /
overflow: auto; / Scrollbar is displayed as it's needed */
How to use it:
To use this plugin, just include the main JavaScript file jquery.doubleScroll.js after jQuery library:
<script src="//code.jquery.com/jquery.min.js">
<script src="jquery.doubleScroll.js">
Then call the function doubleScroll() on the scrollable container and done.
$('.element').doubleScroll();
Recompute the top ScrollBar requirements when the window is resized.
$('.element').doubleScroll({
resetOnWindowResize:true
});
Set the time to wait for the last update event (useful when browser fires resize event constantly during resizing):
$('.element').doubleScroll({timeToWaitForResize: 30});
Hide the top scrollbar if the bottom one is not present.
$('.element').doubleScroll({onlyIfScroll:true});
Override the default CSS styles:
$('.element').doubleScroll({
scrollCss:
{'overflow-x':'auto','overflow-y':'hidden'},
contentCss:
{'overflow-x':'auto','overflow-y':'hidden'},
});
Specify the element to use as the scroll reference. First child element is used if nothing is specified.
view source
$('.element').doubleScroll({
contentElement: undefined
});
My requirement is I want to fix the table header after certain scroll to up,while the table body is scrolling.
My app.html is below.
<table class="table table-fixed-ok" #scroller [class.fixed]="fixed">
<thead >
<tr class="row-hor-heading">
<th colspan="3" scope="row"><span class="bank-name">
{{offer.name}}</span>
</tr>
</thead>
<tbody>
<tr class="row-2-data bg-white">
</tr>
</tbody>
</table>
So i want to listen the scroll of this table only(app.html contains many more other div.i want this div scroll to be listened.)
My app.ts section is below
#HostListener('window:scroll', ['$event'])
onWindowScroll(event: Event) {
debugger;
let num = this.el.nativeElement.querySelector('.table-fixed-ok').scrollTop;
if ( num >50 ) {
this.fixed = true;
}else if (this.fixed && num < 5) {
this.fixed = false;
}
}
But this is not working as i needed.While printing the num variable always giving 0.And also it is triggering whole whole body scrolling.How to solve this.Please give me a solution.
There is no way to specify an element for #HostListener(), but you can just apply the event binding to the element directly like:
<div (scroll)="myScrollHandler($event)"
I'm working on a website where the owner has exhibitions which he can add, edit and delete. The exhibitions are showed per year, once clicking on the 'Read more' button. I'm running into a weird problem with my pages, since I'm loading the content in a new div once clicking on 'Read more' and I need an unique identifier for this div. I'm using id="#Year here" to identify this div, however I run into this problem:
As you can see, it is not loading properly. I have the following code to load in all exhibitions per group:
#if(Model.Exhibitions.Count() > 0)
{
<h3 style="text-align: left; margin-left: 10px; padding-top: 10px;">#Model.Year</h3>
<table class="extable">
<tr>
<th style="width: 15%">#Translations.EXHIBITIONSTARTDATE</th>
<th style="width: 15%">#Translations.EXHIBITIONENDDATE</th>
<th style="width: 15%">#Translations.EXHIBITIONEVENT</th>
<th style="width: 40%">#Translations.EXHIBITIONDESCRIPTION</th>
<th style="width: 15%">#Translations.GALLERY</th>
</tr>
#foreach (Exhibition item in Model.Exhibitions)
{
#Html.Partial("_Exhibition", item)
}
</table>
}
<div class="more-exhi" id="#Model.Next"></div>
<script type="text/javascript">
(function () {
$('.more-exhi##Model.Year').attr('class', '');
$('.show-more').attr('data-year', '#Model.Next');
}) ();
</script>
#Model.Year is the year being send to the controller (for example, 2014). #Model.Next is the next existing year with exhibitions in descending order (for example, 2010). However the code is above is not working right, and I am not sure why. This is my javascript once someone clicks on the button 'Read more':
<script type="text/javascript">
(function () {
var div = $('#exhibitions');
div.find('.show-more').click(function () {
div.find('.more-exhi').hide().load('#Url.Action("Exhibitions", "Exhibition")', { year: $(this).attr('data-year') } ).fadeIn('1500');
div.find('.show-less').show();
});
})();
</script>
Could someone help me fixing this problem? I think I'm overseeing a problem here, as this shouldn't be too difficult.
Try to change this line of code into:
$('.more-exhi#' + #Model.Year).attr('class', '');
:)
So basically I have a Boostrap Popover that is being created inside a parent for hovering. This way, the user can initiate the popover, and then also hover over and around the popover to click links within it.
Although, I need to slightly move this popover down approximately 10px (top value + 10px) so that the user can easily move their mouse to the popover. At the moment, the only way to move the mouse to the popover is by follwing the small arrow underneath the popover.
Here is an example:
jQuery:
$('td.chartSection').each(function () {
var $thisElem = $(this);
$thisElem.popover({
placement: 'auto',
trigger: 'hover',
html: true,
container: $thisElem,
animation: true,
title: 'Name goes here',
content: 'This is the popover content. You should be able to mouse over HERE.'
});
});
HTML:
<table>
<tr>
<td class="chartSection">Chart 1</td>
</tr>
<tr>
<td class="chartSection">Chart 2</td>
</tr>
<tr>
<td class="chartSection">Chart 3</td>
</tr>
</table>
What I have tried:
I attempted to use the events that Bootstrap provide to give the popover a different top position after it is loaded. Although, when hovering over the popover, you could clearly see it moving which looked very bad. Example:
$('td.chartSection').on('shown.bs.popover', function () {
var $thisElem = $(this).find('.popover');
var theTop = $thisElem.css('top');
theTop = parseInt(theTop);
$thisElem.css('top', (theTop + 10) + 'px');
});
WORKING DEMO
Very simple:
Demo http://jsfiddle.net/d9qJQ/1/
.chartSection .popover {
margin-top:10px; //or any value that you want
}