I have been trying some approaches for this exact topic for the last few days, I even left a comment in your ionic4-hidenav video, and now you just uploaded this video about this exact topic :D perfect timing for me haha, I'm super excited!! Danke Simon!
What a nice channel! Your tutorials skillfully deliver real value, are easily "digestible" and your passion is kind of contagious. Also: a tutorial about parallax effects / headers would be awesome. :)
I Had a problem in my android device, when i scroll to down, the header flicker, i found a solution and was a conversion problem, instead of "const hexDist = scrollTop.toString(16);" you need to parse first of all, like that: "const hexDist = parseInt(scrollTop,10).toString(16);" and problem resolved.
Hi @Simon i tried what you have implemented but i am getting this error Can't bind to 'appHideHeader' since it isn't a known property of 'ion-content'. what is the problem to solve this bug.
Hi Simon, how can I access a toolbar that is a component? I have the ion-content in a page but the ion-toolbar is imported as a component so I can't import sharedDirective in a component. Hope to have explained my issue well. Can you guess a solution? Thank you
Hello Simon. I wanted to have two toolbars inside my header, similar to what Amazon has. The thing is, I only want the second toolbar to hide on scroll. I did everything exactly the same as you, but I get an error on line 15 of hide-header.directive.ts, "Cannot read property 'el' of undefined" (When you set this.toolbar = this.toolbar.el;). When I remove the first toolbar from the home.html everything works fine. I was wondering if there's a solution to this issue.
@@galaxies_dev Hmm I will research into the ViewChild option... I mean the normal Amazon.com desktop webpage. It has a dark blue bar on top of a lighter one below with more options.
Hi Simon I have used this in one of my application (Android), Every thing works perfectly but there is one issue and I am not getting how to solve it. The issue is that when I scroll the page fastly , the Header flikers. and one more thing when we reach at the bottom and scroll little up and if again scroll down at this point also it get fliker... Any solution ?? Thanks
Please Show us how to hide addressbar on mobile web browser when scrolling. Take a look at facebook or instagram when opening on mobile browser. The addressbar is hidden when scrolling. Ionic apps look oldish without hiding the addressbar on mobile browsers. Thanks!
I have been trying some approaches for this exact topic for the last few days, I even left a comment in your ionic4-hidenav video, and now you just uploaded this video about this exact topic :D perfect timing for me haha, I'm super excited!! Danke Simon!
Haha happy I could help!
What a nice channel!
Your tutorials skillfully deliver real value, are easily "digestible" and your passion is kind of contagious. Also: a tutorial about parallax effects / headers would be awesome. :)
Awesome, thank you!
Thank you!! Please parallax effect! :)
Noted!
It's amazing all that I learned following this tutorial. thanks.
Hi Simon, how can I achieve the same effect when using cdk virtual scroll. I tried alot but didnt got right solution. Can u guide me?
Thanks for you time and videos!
Glad you like them!
I'm from Indonesia, I like this content
Thanks A lot for the tutorial👍😊 please parallax effect....
Coming soon...!
I Had a problem in my android device, when i scroll to down, the header flicker, i found a solution and was a conversion problem, instead of "const hexDist = scrollTop.toString(16);" you need to parse first of all, like that: "const hexDist = parseInt(scrollTop,10).toString(16);" and problem resolved.
Its working, thanks
Can u create a similar video for vuejs - no example exists for vue - would help a lot
Hi @Simon i tried what you have implemented but i am getting this error
Can't bind to 'appHideHeader' since it isn't a known property of 'ion-content'.
what is the problem to solve this bug.
That means you didn't import the sharedDiretives module inside your page!
@@galaxies_dev I have imported the sharedDirectives module inside my page, but still getting this error. :(. Any suggestions?
My new favorite tip!!
Is there any ways to do Shared element transition with ionic 5. Please reply
Thanks for the tutorial!
Happy to help!
hi and tnx for your great tutorials. did you created the parallax effect tutorial for this or not?
You can check out this: ruclips.net/video/TsIVWQf1qNA/видео.html
Hi Simon, how can I access a toolbar that is a component?
I have the ion-content in a page but the ion-toolbar is imported as a component so I can't import sharedDirective in a component.
Hope to have explained my issue well.
Can you guess a solution?
Thank you
Hmm in that case I guess you can use your component as a viewchild and from there access the toolbar which is a child of that custom component!
Muchas gracias!!! Saludos desde Cuba!!!!
Gracias Josué, encantado!
Thanks a lot ❤
You're welcome 😊
if i have list in different component?
Hello Simon.
I wanted to have two toolbars inside my header, similar to what Amazon has. The thing is, I only want the second toolbar to hide on scroll. I did everything exactly the same as you, but I get an error on line 15 of hide-header.directive.ts, "Cannot read property 'el' of undefined" (When you set this.toolbar = this.toolbar.el;). When I remove the first toolbar from the home.html everything works fine. I was wondering if there's a solution to this issue.
Hmm perhaps you could directly access the correct toolbar as a ViewChild instead somehow. Which Amazon app do you refer to btw?
@@galaxies_dev Hmm I will research into the ViewChild option... I mean the normal Amazon.com desktop webpage. It has a dark blue bar on top of a lighter one below with more options.
I did exactly like you, but after i export the app to apk, on phone header animations are laggy.. Why is that? I want to be smooth as facebook app has
Awesome video thanks sir 🙏🙏🙏🙏🙏🙏🙏🙏
Hi Simon
I have used this in one of my application (Android), Every thing works perfectly but there is one issue and I am not getting how to solve it.
The issue is that when I scroll the page fastly , the Header flikers. and one more thing when we reach at the bottom and scroll little up and if again scroll down at this point also it get fliker...
Any solution ??
Thanks
const hexDist = parseInt(scrollTop,10).toString(16);
Parallax effect please
Yes, it's on the list!
thnx bro
I'm here again 😍
Welcome back!
This function cannot be implemented on my iPhone but it can be implemented on Android
Have you encountered this situation? How to solve？
Por aquí uno de los primeros 😃
Please Show us how to hide addressbar on mobile web browser when scrolling.
Take a look at facebook or instagram when opening on mobile browser. The addressbar is hidden when scrolling.
Ionic apps look oldish without hiding the addressbar on mobile browsers.
Thanks!
This is a known bug, I can't do much about that :(
I can only see overengineering here...