I'm making an angular directive that hides element a when the user scrolls on element b. It works fine, but I can't figure out this behaviour:
It might be hard to tell, but essentially when you scroll to the bottom the scroll bar expands because element a sits above element b, so essentially the thing I'm scrolling on has more space available. After that, I'm not sure why it scrolls up. Here's a gif of the full page if that makes it any clearer:
My directive is written in typescript (angular version 1.5.7 NOT 2.x), I'll work on translating it to javascript but in the interest of getting this question out there as quickly as possible here's the ts:
interface IScope extends ng.IScope {
showHeader: boolean;
}
export class IncodeHideHeaderDirective implements ng.IDirective {
restrict = "AE";
require: "ngModel";
scope: Object;
replace = true;
link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;
oldy: number;
justScrolled = false;
constructor() {
const self = this;
this.link = (scope: IScope, element: ng.IAugmentedJQuery) =>
{
element.bind("scroll",
() => {
if (element[0].scrollTop > self.oldy) {
console.log("collapsing");
scope.$eval("showHeader=false");
}
else if (element[0].scrollTop < self.oldy)
{
console.log("expanding");
scope.$eval("showHeader=true");
}
self.oldy = element[0].scrollTop;
}
);
element.bind("load",
() => {
console.log(scope);
this.oldy = element[0].scrollTop;
});
};
}
public static factory(): ng.IDirectiveFactory {
const directive = () => new IncodeHideHeaderDirective();
return directive;
}
}
angular.module("incode.module")
.directive("ixHeader", incode.directives.label.IncodeHideHeaderDirective.factory());
pretty basic stuff. How do I get the scrollbar to stop doing this weird stuff?
Here's a fiddle demonstrating the problem.
That's not an Angular answer, but why not just remove your header bar from the flow by making it position: fixed (or absolute) ? It would not cause the reflow of the main contents, and you would have none of the issues you are experiencing.
.slideUp {
/* ... */
position: fixed;
}
https://jsfiddle.net/e8j938g8/3/
Related
I'm using an internal private reusable component. My problem is that the width is not being dynamically updated when the viewport is updated. Here are snippets of relevant code:
component.ts
export class Component {
modalWidth: string | undefined;
ngOnInit() {
this.breakpointServiceSubscription$ = this.breakpointService.breakpoint$.subscribe(() => {
if (this.breakpointService.isSmall()) {
console.log("small")
this.modalWidth = "50px";
}
else {
this.modalWidth = "500px";
}
}
}
component.html
<modal [width]="modalWidth">...</modal>
The width and height are supposed to change dynamically as the browser is resized, but it stays the same size as when it was rendered. If I open the modal in a specific viewport the size is always correct, it's only a problem once I am trying to resize with the modal open.
When logging the subscription to the breakpoint service, it is always correct and will log dynamically.
I've tried converting modalWidth and modalHeight to observables and using an async pipe in the html but it still has the same behaviour.
Any tips or suggestions?
you can inject ChangeDetectorRef in the component and after changing modalWidth, call changeDetectorRef.detectChanges() to let angular apply the change immediately to the view.
constructor(private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.breakpointServiceSubscription$ = this.breakpointService.breakpoint$.subscribe(() => {
if (this.breakpointService.isSmall()) {
console.log("small")
this.modalWidth = "50px";
}
else {
this.modalWidth = "500px";
}
// apply change immediately
this.cdr.detectChanges();
}
I have an Angular project where I am extensively using the Angular Material library. I would like to use the Progress Bar Component to show when a page is loading or when I make an api call. For example, while I'm waiting for a response from Stripe.
Starting the progress bar seems simple, just use a global variable in a service to signal when the page is loading. I'm thinking of using the router for that.
However, I would like to show the actual progress of the page load. An example would be when you go to a youtube video.
The component api uses a value property to display the amount of progress. But how to get the progress of the page load?
I know there are other libraries such as ngx that use this but I would like to use the Angular Material library if possible.
Any ideas how to achieve this?
Too late but maybe someone else needs it:
There are packages for this, for example ng2-slim-loading-bar.
But if you want to do it manually with Material Progress Bar then take a look at this example.
It really gives a false illusion of progress because it increases over time, and in case it reaches 95% without the load being finished then it stops until that happens. I don't know if there is any way to calculate the true progress of a request, that would be perfect.
Edit: Check Angular docs about Tracking and showing request progress, with that you may be able to implement a fairly real progress bar.
Component:
import { Component } from '#angular/core';
import {
NavigationCancel,
Event,
NavigationEnd,
NavigationError,
NavigationStart,
Router,
} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
progressValue = 0;
progressColor = 'primary';
progressTimer: number;
// This will be used to force stop (if an error occurs, or the user stops loading)
stopProgress = false;
constructor(private router: Router) {
this.router.events.subscribe((event: Event) => {
this.navigationObserver(event);
});
}
private navigationObserver(event: Event): void {
if (event instanceof NavigationStart) {
// Increase 1% every 25 milliseconds, adjust it to your preference
this.progressTimer = setInterval(() => {
this.loading();
}, 25);
}
if (event instanceof NavigationEnd) {
// When the navigation finishes, fill the bar completely
this.progressValue = 100;
/*
* Uncomment this block to simulate a delay (for testing), because if you
* are in a local environment or the request is to a 'light' or very fast resource,
* the progress bar will appear at 100%.
*/
/*
setTimeout(() => {
this.progressValue = 100;
}, 2000);
*/
}
/*
* If the navigation is canceled or an error occurs,
* stop the progress bar and change its color.
*/
if (event instanceof NavigationCancel) {
this.stopProgress = true;
this.progressColor = 'accent';
}
if (event instanceof NavigationError) {
this.stopProgress = true;
this.progressColor = 'warn';
}
}
// Function to increase the value of the progress bar
private loading(): void {
/*
* Leave 5% in case an unusual delay occurs, in the previous
* function it is filled to 100% if the load ends successfully
*/
if (this.progressValue >= 95 || this.stopProgress) {
clearInterval(this.progressTimer);
} else {
this.progressValue++;
}
}
}
Template:
<mat-progress-bar [value]="progressValue" [color]="progressColor">
</mat-progress-bar>
<div *ngIf="progressValue == 100; else elseBlock">
<h1>Loaded!</h1>
</div>
<ng-template #elseBlock>
<h1>Loading...</h1>
</ng-template>
if you see their example they have given the solution here
export class ProgressBarConfigurableExample {
color = 'primary';
mode = 'determinate';
value = 100; // this value from 0 to 100 changes progess bar
bufferValue = 100;
}
In Angular 2 I am trying to animated in new components via the Router onActivate method.
I have set up a Plunk with a demonstration of the issue here:
http://plnkr.co/FikHIEPONMYhr6COD9Ou
An example of the onActivate method in one of the page components:
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
document.getElementsByTagName("page3")[0].className='animateinfromright';
}
The issue that I'm having is that I want the new components to animate in on top of the existing component, but the old component is removed from the DOM before the new component is added.
Is there any way to delay the removal of the previous page while the new one animates in?
I found this similar issue: Page transition animations with Angular 2.0 router and component interface promises
but the technique just delays the removal of the previous component before the new one is added.
Eventually I will have different animations depending on which page we are moving from / to, hence having the onActivate in each of the page components.
Many thanks for any help!
You could add an "EchoComponent" where your <router-outlet> is, create a <canvas> in it and drawImage() on routerOnDeactivate()... Something like:
#Component({
template: `<canvas #canvas *ngIf="visible"></canvas>`
})
class EchoComponent {
#ViewChild("canvas") canvas;
public visible = false;
constructor(private _shared: SharedEmitterService) {
this._shared.subscribe(el => el ? this.show(el) : this.hide(el));
}
show(el) {
this.canvas.drawImage(el);
this.visible = true;
}
hide() {
this.visible = false;
}
}
#Component({...})
class PrevRoute {
constructor(private _eref: ElementRef,
private _shared: SharedEmitterService) {}
routerOnDeactivate {
this._shared.emit(this._eref.nativeElement);
}
}
#Component({...})
class NextRoute {
constructor(private _eref: ElementRef,
private _shared: SharedEmitterService) {}
routerOnActivate {
this._shared.emit(false);
}
}
This is just a pseudo code (writing it from memory), but it should illustrate what would you need for this approach.
I am trying to add an autogrowing textarea to my app but for some reason it is not working. The module that I am using is https://github.com/tagged/autogrow (it was recommneded on the ionic forum)
The answer above does not shrink - here is an improved version:
https://codepen.io/benshope/pen/xOPvpm
angular.module('app').directive('expandingTextarea', function () {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs, $timeout) {
$element.css('min-height', '0');
$element.css('resize', 'none');
$element.css('overflow-y', 'hidden');
setHeight(0);
$timeout(setHeightToScrollHeight);
function setHeight(height) {
$element.css('height', height + 'px');
$element.css('max-height', height + 'px');
}
function setHeightToScrollHeight() {
setHeight(0);
var scrollHeight = angular.element($element)[0]
.scrollHeight;
if (scrollHeight !== undefined) {
setHeight(scrollHeight);
}
}
$scope.$watch(function () {
return angular.element($element)[0].value;
}, setHeightToScrollHeight);
}
};
});
This will transform all your textareas to grow/shrink.
Hope that helps!
I wrote a very simple directive that works with Ionic 2 and ion-textarea. Here it is:
import { Directive, HostListener, ElementRef } from "#angular/core";
#Directive({
selector: "ion-textarea[autoresize]" // Attribute selector
})
export class Autoresize {
#HostListener("input", ["$event.target"])
onInput(textArea: HTMLTextAreaElement): void {
this.adjust();
}
constructor(public element: ElementRef) {
}
ngOnInit(): void {
this.adjust();
}
adjust(): void {
let ta = this.element.nativeElement.querySelector("textarea");
ta.style.overflow = "hidden";
ta.style.height = "auto";
ta.style.height = ta.scrollHeight + "px";
}
}
Here is a gist: https://gist.github.com/maxt3r/2485356e91a1969bdb6cf54902e61165
EDIT: Look at the gist for other suggestions from other people.
I found a much more better way to do this without using any other third party library or directive.
$scope.updateEditor = function() {
var element = document.getElementById("page_content");
element.style.height = element.scrollHeight + "px";
};
Then simply adding ng-keypress="updateEditor()" to the textarea would do the job.
<textarea ng-keypress="updateEditor()" ng-model="bar"> </textarea>
I Hope this helps others who might face this problem in the future.
Update: Here is a codepen for this: http://codepen.io/kpourdeilami/pen/KDepk
Update 2: Use the snippet provided by #benshope
Update 3: If you're on Ionic/Angular 2, use the answer provided by "Max Al Farakh"
Try Angular-Elastic. It is an angular directive built to auto-expand a textarea. Use bower to install it.
bower install angular-elastic
add it to your project, then you can use it as an attribute
<textarea msd-elastic ng-model="foo"> </textarea>
or as class
<textarea class="msd-elastic" ng-model="bar"> </textarea>
From Ionic 4.4 it's built-in, see the autoGrow property:
TextArea#Properties
<ion-textarea auto-grow="true" rows="1"></ion-textarea>
Do you mean vertically auto-growing? I tried this:
<textarea ng-model='doc.description'
rows='{{doc.description.length/50 + 1}}'
cols='50'></textarea>
Kinda hackish, but after having determined an expected column length, lets define the row length based on the length of the inputed text. It starts growing vertically when I start typing! (no scrolling/out of view text).
With ionic-5 , there is an option called auto-grow, set it to true in your view.
In css, set min-height, max-height, to control the text grow.
ion-textarea {
min-height: 100px;
max-height: 200px;
}
Also, after the above fix, if you get some odd behaviour with placeholder text, add below inside the ion-textarea
::ng-deep textarea {
min-height: 100px;
}
If it can serve someone, I changed a little bit benshope's solution since I needed the textarea to grow even when user do a carriage return.
So instead of listening to the changes on the input value (which didn't always fire when doing a carriage return) I listent the input event on the textarea.
(function () {
'use strict';
angular
.module('app')
.directive('expandingTextarea', expandingTextarea);
function expandingTextarea() {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs, $timeout) {
$element.css('min-height', '0');
$element.css('resize', 'none');
$element.css('overflow-y', 'hidden');
setHeight(0);
$timeout(setHeightToScrollHeight);
function setHeight(height) {
$element.css('height', height + 'px');
$element.css('max-height', height + 'px');
}
function setHeightToScrollHeight() {
console.log('set height');
setHeight(0);
var scrollHeight = angular.element($element)[0]
.scrollHeight;
if (scrollHeight !== undefined) {
setHeight(scrollHeight);
}
}
angular.element($element)[0].addEventListener("input", setHeightToScrollHeight);
}
};
}})();
juste install :
bower install angular-elastic or
npm install angular-elastic;
then import the elastic.js file in your index.html like this
<script src="js/elastic.js" type="text/javascript"></script>
the after that inject it in you angular module like this:
angular.module('yourApp', ['monospaced.elastic']);
the after that in your html file, in your footer-bar do like this:
<ion-footer-bar style="height: auto; overflow: visible !important"><textarea rows="1" msd-elastic ng-model="myMsg">
</textarea>
I have 3 boxes and once user hovers any, if changes the content of the big main div from default to the related div via featVals hash table
At the if ($('#estate-feature, #carrier-feature, #cleaning-feature').is(':hover')) { part of my code, I want to check if any of these 3 div boxes are currently hovered, if not display the default content (defaultFeat variable).
However I am getting Uncaught Syntax error, unrecognized expression: hover error from Google Chrome Javascript Console.
How can I fix it ?
Regards
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(function () {
var currentFeatCont = featVals[$(this).attr('id')];
headlineContent.html(currentFeatCont);
}, function () {
headlineContent.delay(600)
.queue(function (n) {
if ($('#estate-feature, #carrier-feature, #cleaning-feature').not(':hover')) {
$(this).html(defaultFeat);
}
n();
})
});
:hover isn't an attribute of the element. Also, you are binding to the hover out there so you know that you have left the hover and can restore the default content. If you want the hover-triggered content to remain for a period after the point has left the trigger element then you'll either need to assume that you aren't going to roll over another trigger or implement a shared flag variable that indicates if the default text restore should be halted. e.g.
var isHovered = false;
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(
function() {
var currentFeatCont = featVals[$(this).attr('id')];
headlineContent.html(currentFeatCont);
isHovered = true;
},
function() {
isHovered = false;
headlineContent.delay(600)
.queue(function(n) {
if (!isHovered) {
$(this).html(defaultFeat);
}
n();
})
}
);