I set the scroll bar for the table. When I scroll to the bottom of the current page and click on the next page, the scroll position does not get back to the top. How can I get it back to the top after the data is refreshed? Thanks.
It could be done a lot of ways, how are you handling pagination? You could place a ng-click on the pagination button that scrolls you to the top. A code sample or plunkr would be helpful.
You could do something like below using regular JS.
var btn = document.getElementById('x');
btn.addEventListener("click", function() {
var i = 10;
var int = setInterval(function() {
window.scrollTo(0, i);
i += 10;
if (i == 200) clearInterval(int);
}, 20);
})
body {
background: lightblue;
height: 600px;
}
\HTML in view layer
<button id='x'>click</button>
Related
Hi Guys My requirement is to make an element draggable across the screen and set the position of the element to the place where users stops dragging. So far I am able to make a element draggable across the screen but once released it is going back to its old position (position where it was earlier) I am using ngDraggable directive of angular. Sorry I am new to Ionic and angular. Any help will be highly appreciated.
My code goes as follows
<div ng-drag="true" id="draggableAxis" ng-style="{{draggedStyle}}" ng-drag-success="onDragComplete($data,$event)">
<img src="img/axis.png" >
<img ng-src="img/other.png" style="width:75px">
</div>
In my controller:
$scope.draggedStyle = {top: '96px',
right: '90px'};
var onDraggableEvent = function(evt, data) {
if(evt.name=='draggable:start'){
console.log('draggable-start');
console.log(data.x);
console.log(data.y);
}else{
console.log('draggable-end');
console.log(data);
console.log(data.element.centerX +' '+data.element.centerY);
console.log(evt);
$scope.setPosition(data);
}
}
$scope.onDragComplete=function(data,evt){
console.log("drag success, data:", data);
console.log(evt);
}// this fn doesnot gets triggered
$scope.$on('draggable:start', onDraggableEvent);
$scope.$on('draggable:end', onDraggableEvent);
$scope.setPosition=function(data){
$scope.draggedStyle = {
top: data.x+'px',
right: data.y+'px'
};
}
SCREEN SHOT OF MOBILE VIEW
I updated the fix to https://plnkr.co/edit/fVaIUVvAd7jLETkwVepm?p=preview
One of the problems was
ng-style="{{draggedStyle}}"
which should be
ng-style="draggedStyle"
Also, I switched the setPosition method to flip the x and y and used left because x indicates position from the left and not right.
$scope.setPosition = function(data) {
$scope.draggedStyle = {
top: data.y + 'px',
left: data.x + 'px'
};
}
Hope that helps
For my Angular js grid work, I am using ui-grid(v3.1.1) to implement the grid table. When I change the pagination size, I am having trouble to scroll down using mousewheel. When I hover over the mouse on scrollbar, then scroll up and down both are working fine. Strangely, the scroll up using mousewheel is working fine too. Its just the scroll down that doesn't seem to work. I fail to understand the reason for it.
I have disabled the scrolling when not required using:
.ui-grid-render-container-body .ui-grid-viewport {
overflow: auto !important;
}
Other than this I have not changed any of the default settings. Why is it that the mousewheel scroll down won't work when hovered over ui-grid? Please help
I commented out event.preventDefault() on line 2859 of v4.0.2 (in gridUtil.on.mousewheel function).
Can't say what other impact this may have, but worked for my usage.
Experienced this mousewheel/trackpad drag issue in v4.0.2 & v4.0.3 in a grid with pagination & filtering enabled and with CSS modifications to enable cell word-wrap.
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
overflow:visible;
}
.ui-grid-cell {
display : table-cell;
height: auto !important;
overflow:visible;
position: static;
}
.ui-grid-row {
height: auto !important;
display : table-row;
position: static;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
Tried Paul's fix and it worked but requires change to core code. Also, our requirements called for showing the entire table on the page based on the data rather than a fixed height table with scroll. So we couldn't use.
Instead, I worked around the issue by implementing a dynamic grid height solution.
Added ng-style to the grid as follows:
<div ui-grid="gridOptions" style="float:left" ui-grid-selection ui-grid-pagination ng-style="gridHeight()" class="myGrid"></div>
Disabled grid scrolling:
$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;
Wrote function gridHeight as follows (uses jQuery):
$scope.gridHeight = function() {
var outerHeight = 50; //buffer for things like pagination
$('.ui-grid-row').each(function() {
outerHeight += $(this).outerHeight();
});
$('.ui-grid-header').each(function() {
outerHeight += $(this).outerHeight();
});
return { height: outerHeight+"px"};
};
This satisfied our requirements.
Another way to solve this - if the grid has no scroll at least - is to redefine the prototype function atTop & atBottom on uigrid's ScrollEvent. This will not need changes to uigrid's code, one just has to inject ScrollEvent in the controller or app.run().
The grid swallows any scroll event if its possible to scroll, but does not handle it if there are no scrollbars present.
The original code also fails an isNaN check on this.y.percentage - i think it should be as it is in the comment below.
ScrollEvent.prototype.atTop = function(scrollTop) {
return true;
//return (this.y && (this.y.percentage === 0 || isNaN(this.y.percentage) || this.verticalScrollLength < 0) && scrollTop === 0);
};
ScrollEvent.prototype.atBottom = function(scrollTop) {
return true;
//return (this.y && (this.y.percentage === 1 || isNaN(this.y.percentage) || this.verticalScrollLength === 0) && scrollTop > 0);
};
I have an angular-ui ui-scroll directive (1.3.0) living in a div that is hidden by default with an ng-show. When it is hidden, ui-scroll just keeps loading data from the datasource even though the ui-scroll-viewport's height is set. If the div is shown, it behaves correctly. So, for now my div is 1px wide :/
I'm sure I can solve this with an ng-if to dynamically add this to the DOM. However, I wanted the div to hide/show responsively - so driven off of css.
Any suggestions on how to have ui-scroll only load 1 page from the buffer when hidden? thank you.
You can try to manage it through the datasource implementation:
$scope.datasource.get = function(index, count, success) {
// prevent data getting while ui-scroll is invisible
if (!$scope.isScrollerVisible) {
return; // or let him request for 1 pack and prevent others, any logic
}
// get required data and pass it into success callback
var result = [];
for (var i = index; i <= index + count - 1; i++) {
result.push({text: "item #" + i});
}
success(result);
}
Also you probably need to initiate scroll reloading once (adapter doc):
$scope.$watch('isScrollerVisible', function(value) {
if(value) {
$scope.datasourceAdapter.reload()
}
});
I have an element that appears when the user clicks a button elsewhere on the screen. The element appears to come out of the top of the screen. The element by default needs to be tucked out of view above the screen, so I will have a margin-top style that is based on the height of the element (and will be a negative value). This cannot be hardcoded in css because the element height may vary. When I click the button, I want the element margin-top to change to 0 and I want a transition animation.
The sample shown on angularJS documentation is for adding a removing a class. This would work fine if I knew the values to be set and could code them in CSS, however I cannot. What is the correct way to solve this?
The code below works for displaying and hiding my element using a margin but there is no animation. How do I trigger an animation here when the margin changes?
https://docs.angularjs.org/guide/animations
Quote Total: {{salesPriceTotal + taxesTotal - tradeInsTotal | currency}}
<div class="totals" ng-style="setTopMargin()">
// totals stuff here.
</div>
$scope.setTopMargin = function() {
return {
marginTop: $scope.marginTop
}
};
$scope.$watch('showTotals', function() {
var margin = $scope.showTotals ? 10 : -160 + $scope.modelTotals.length * -200;
$scope.marginTop = margin.toString() + 'px';
});
I added the following code per a suggested solution, but this code is never hit.
myApp.animation('.totals', function () {
return {
move: function (element, done) {
element.css('opacity', 0);
jQuery(element).animate({
opacity: 1
}, done);
// optional onDone or onCancel callback
// function to handle any post-animation
// cleanup operations
return function (isCancelled) {
if (isCancelled) {
jQuery(element).stop();
}
}
},
}
});
As the documentation explains: "The same approach to animation can be used using JavaScript code (jQuery is used within to perform animations)".
So you basically needs to use animate() from jQuery to do what you want.
I've got a responsive sticky sidebar started here: http://codepen.io/cmegown/pen/fjqzH. I've got the sticky part down, and it's responsive in relation to the width of the original viewport width. However, if you scroll down and then change the viewport size you'll see that the width of the sidebar does not change.
I know I need to update the sidebarWidth variable, but I'm sure exact how/where to do that.
Any help is appreciated, thanks!
EDIT:
This one kind of got left behind amid some other projects, but I'm back to finish this. I got a little further, but still can't seem to figure out how to update the sidebar width if the user scrolls down the page then expands their browser (or rotates their device). I have some commented code in the JS panel where I left off.
Just put the width calculation in your scroll function.
$(function () {
// cache selectors
var wrapper = $('.wrapper');
var sidebar = $('.sidebar');
// get some maths
var sidebarTop = sidebar.offset().top;
var sidebarOffset = 25; // is .wrapper padding
// sticky logic
$(window).on('scroll', function () {
var windowTop = $(window).scrollTop();
var sidebarWidth = Math.round(wrapper.width() * 0.3); // is .sidebar width
if (sidebarTop < (windowTop + sidebarOffset)) {
sidebar.css({
position: 'fixed',
top: sidebarOffset,
width: sidebarWidth
})
} else {
sidebar.css({
position: 'static',
width: '30%' // original CSS value
})
}
})
})
There's a little bit of overhead there, since it has to calculate the width every time you scroll. The alternative would be to put it into a $(window).resize() function so it figures out the width when you resize the window.