Ram Shengale
Hi, I just bought this plugin. I'm getting the following error: ionCoverHeader - no .bar-header element found. I'm using <ion-nav-bar> instead of <ion-header-bar>. http://prntscr.com/8jyoyq
Amazing profile/details page with cover pictures for your app
Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.
USING IONIC v2/v3? CHECK OUT http://market.ionic.io/plugins/ionic-2-ion-cover-header
Plugin by icliclabs.com
Description
Ionic Cover Header allows you to add a transparent nav bar to your profile and details pages easily. The nav bar will automatically become opaque as you scroll down the page. You can simply reproduce the design of the amazing details pages of the facebook app, airbnb app or even the play store app.
Test Before You Buy
You can test the app using Ionic View and enter the app id 797ecd0e.
Features
Installation
That's all!
Usage
That's all. Here is an example of a view:
<!-- add the directive ion-cover-header to your ion-pane or ion-view, the parameter is the height in pixels when the header bar should be fully opaque (default 200)-->
<ion-view class="playstore" ion-cover-header="120">
<!-- regular ionic header bar -->
<ion-header-bar class="bar-balanced playstore-header">
<div class="buttons">
<a class="button button-icon ion-arrow-left-c" ui-sref="home"></a>
</div>
<h1 class="title">Facebook</h1>
<div class="buttons">
<a class="button button-icon ion-ios-search"></a>
<a class="button button-icon ion-android-more-vertical"></a>
</div>
</ion-header-bar>
<!-- end of ionic header bar -->
<ion-content>
<img class="cover-img" src="img/facebook_cover.jpg"/>
<div class="row">
<div class="col">
<img class="logo-img" src="img/facebook_logo.png"/>
</div>
<div class="col col-75">
<b>Facebook</b><br />
Facebook<br />
Social
</div>
</div>
</ion-content>
</ion-view>
Other Popular Plugins:
Need Custom Work?
If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.
Hey there! You'll need to log in before you can leave a comment here.
Hi, I just bought this plugin. I'm getting the following error: ionCoverHeader - no .bar-header element found. I'm using <ion-nav-bar> instead of <ion-header-bar>. http://prntscr.com/8jyoyq
Hi Ram, I just sent you an email to follow up.
Hi Didier, Your plugin only work inside a <ion-header-bar> have you plan to upgrade this plugin in order to support a <ion-nav-bar> ?
Hi Lasso, I am currently working on the ion-nav-bar support. I sent the fix to another developer so he can test it. Once he confirmed everything is ok, I will publish an update for everybody. In the meantime, if you want to have access to this new version, you can purchase the current version and I'll send you an email with the update. If you're not happy with the update, I can always refund you after. Let me know. Didier.
Hi Didier, thanks for sending the updated plugin, it now works well with ion-nav-bar as well.
Thanks Ram for testing and for posting the review. The 2.2 version now contains the support for ion-nav-bar. In case of any issue, don't hesitate to contact me at didier.baquier [at] gmail.com. Cheers.
Hi, I have already bought this plugin, Thanks for the update I test and I'll let you know. Good job.
The ion-nav-bar support works well, Thanks.
Hello, I can't buy from ionic market, because I am using VISA card from China, and it shows "card decline". Could you setup the purchase in codecanyon.net so every in the world can buy your nice plugins. Thanks, and please send me an email if you have setup in codecanyon, mypersonal1971@gmail.com, thanks a lot
Hi @mypersonal, I am going to follow up with you by email.
A very nice plugin. I'm using the cover header with tab interface. Looks great on iOS but on android, the tab bar appear floating on top. Any idea to make it better?
Hey Goh Kian Liang, Let's follow up by email (can you please email me more details at icl1clabs@gmail.com). It's going to be easier for me to help you and improve this plugin to support tabs. Cheers.
hey Didier, nice work on this plugin. Thanks for this. there is a tiny issue when jquery was added in since the scroll event will be updated to be a jquery event. so var e = e.originalEvent || e; should be added to onScroll event to remove the impact.
Is it possible to get an invoice for this purchase?
Hi Andrés, please email me at icl1clabs@gmail.com, I'll email the receipt. Cheers.
Im having issues of this directive not working properly using it with ion-nav-bar (that is in a ion-side-menus). Do you still put the ion-cover-header in the ion-view? Thats not working for me. Tried puting it in other tags as well with no luck. (It works with ion-header-bar in the same project.) Would be nice to get some example file of it working with ion-nav-bar. Would that be possible?
Hi Andrés, let's follow up by email for your issue.
Hello, do you have a example with the tabs template ? Because, on Android, the tabs menu is on the top. Example : http://image.noelshack.com/fichiers/2015/49/1449407599-capture-d-ecran-2015-12-06-a-14-12-46.png
Hey Alexandre, Let's follow up by email (email me at icl1clabs@gmail.com) so I can help you. Thanks.
Hello. I'm also trying to get the directive working with the ion-nav-bar in a side menu project. Can't seem to get it right. Tried switching out some of the nav content, but I end up with the main content being rendered in a tiny block instead of the full view height. Any chance you have a working sample in a side menu project?
Hi. I'm having the same problem as Stephen. I want to use it on a side menu pre-made project template, on the "playlists" template, but I can't get it right.
Hey Donald & everybody else who needs help to get started with the side menu template. Email me at icl1clabs@gmail.com, I'll be happy to send you the sample project. Cheers.
Do you have an ionic-v2 version ? I'd love to purchase.
Hey Rajkiran, The ionic 2 version of this plugin will come in a few weeks once the version is getting more stable.
Any update on the Ionic 2 version please? I will buy it again for Ionic 2 version (don't mind the Ionic 2 version a different plugin - cause I love the Ionic 1 version so much)
Thanks for the love. I am waiting for the ionic's first RC. The beta versions are still too unstable.
Hi, as ionic's RC0 and RC1 have been out now - is there a range of time where we can expect this to be updated? Otherwise we'll have to implement it on our own.
very nice plugin, and I enjoy it! Quick question, how can I exactly control the scroll top and the image height ? I set image height 200px and ion-cover-header="200", the fadeAmt NOT full working when scroll 200 from top
on your demo, the image height is 260. However, the ion-cover-header = "220", what's the 40 between them?
I have sent an email describing an issue. Will you please answer the same? I'll provide more info, if needed
Please check your inbox :)
Shared the details, please help
Please reply....
Wonderful plugin. However, it doesn't work with cached view. when used with ui-router, I have to set cache-view="false", otherwise, when return from other routes, the headbar will not get re-rendered. How to fix it
Ionic 2 version released: http://market.ionic.io/plugins/ionic-2-ion-cover-header
Hi I've tried few header shrink plugins with ionic but none of them really worked well with native scroll. Is this work with native scroll? That would be super helpful :)
Hey @yoonseokChoi, I haven't tried personally. Feel free to try by yourself and if you are encountering any issues, hit me up at icl1clabs@gmail.com (I ll be able to refund you if you are unhappy with the plugin). Cheers.
Hi, It is possible to show header text after the finish header image. Because there are two names shown at a time like as your "screenshot_4.png"
Hey @surajkumargorai, you can play with the opaqueAt value ion-cover-header="220"
Hi, any ideas about this issue? The animation seems to be too slow and navigation bar appear without gradient animation. It work fine only if i scroll with long touch (without remove finger from screen). Link di download https://we.tl/mva8It7Hg8 Please help me!!! tnx regards
https://we.tl/mva8It7Hg8 contains a short video of this issue ;)
Ok I found the problem... If native scroll is working, the cover header have some problems It work fine only with jsScolling -> //$ionicConfigProvider.scrolling.jsScrolling(false);
I am having problems with nav icons that are not visible with low contrast backgrounds. Is there any way to change the color of the nav icons dynamically depending on the background color gamut? And by the way... Great plugin! Thanks!
@SergioMartell the tricky part here is to detect the background image main color so adjust your icon. I am not aware of an easy way to achieve that.
Hi, before purchasing I want to know if you can put the cover image in a fullscreen app, that is to say, aplying the background image in the 20px of the black header of the top (in example images). Thanks!
Hi, I'm having problems with the title, always appears on the nav-bar with ion-nav-bar, and i need to remove there if there are an image, please help.
Hi, I'm having problems with the title, always appears on the nav-bar with ion-nav-bar, and i need to remove there if there are an image, please help.
Hi, before purchasing I want to know if you can put the cover image in a fullscreen app, that is to say, aplying the background image in the 20px of the black header of the top (in example images). Thanks!
I am having problems with nav icons that are not visible with low contrast backgrounds. Is there any way to change the color of the nav icons dynamically depending on the background color gamut? And by the way... Great plugin! Thanks!
@SergioMartell the tricky part here is to detect the background image main color so adjust your icon. I am not aware of an easy way to achieve that.
Hi, any ideas about this issue? The animation seems to be too slow and navigation bar appear without gradient animation. It work fine only if i scroll with long touch (without remove finger from screen). Link di download https://we.tl/mva8It7Hg8 Please help me!!! tnx regards
https://we.tl/mva8It7Hg8 contains a short video of this issue ;)
Ok I found the problem... If native scroll is working, the cover header have some problems It work fine only with jsScolling -> //$ionicConfigProvider.scrolling.jsScrolling(false);
Hi, It is possible to show header text after the finish header image. Because there are two names shown at a time like as your "screenshot_4.png"
Hey @surajkumargorai, you can play with the opaqueAt value ion-cover-header="220"
Hi I've tried few header shrink plugins with ionic but none of them really worked well with native scroll. Is this work with native scroll? That would be super helpful :)
Hey @yoonseokChoi, I haven't tried personally. Feel free to try by yourself and if you are encountering any issues, hit me up at icl1clabs@gmail.com (I ll be able to refund you if you are unhappy with the plugin). Cheers.
Ionic 2 version released: http://market.ionic.io/plugins/ionic-2-ion-cover-header
Wonderful plugin. However, it doesn't work with cached view. when used with ui-router, I have to set cache-view="false", otherwise, when return from other routes, the headbar will not get re-rendered. How to fix it
I have sent an email describing an issue. Will you please answer the same? I'll provide more info, if needed
Please check your inbox :)
Shared the details, please help
Please reply....
very nice plugin, and I enjoy it! Quick question, how can I exactly control the scroll top and the image height ? I set image height 200px and ion-cover-header="200", the fadeAmt NOT full working when scroll 200 from top
on your demo, the image height is 260. However, the ion-cover-header = "220", what's the 40 between them?
Any update on the Ionic 2 version please? I will buy it again for Ionic 2 version (don't mind the Ionic 2 version a different plugin - cause I love the Ionic 1 version so much)
Thanks for the love. I am waiting for the ionic's first RC. The beta versions are still too unstable.
Hi, as ionic's RC0 and RC1 have been out now - is there a range of time where we can expect this to be updated? Otherwise we'll have to implement it on our own.
Hey Rajkiran, The ionic 2 version of this plugin will come in a few weeks once the version is getting more stable.
Do you have an ionic-v2 version ? I'd love to purchase.
Hey Donald & everybody else who needs help to get started with the side menu template. Email me at icl1clabs@gmail.com, I'll be happy to send you the sample project. Cheers.
Hi. I'm having the same problem as Stephen. I want to use it on a side menu pre-made project template, on the "playlists" template, but I can't get it right.
Hello. I'm also trying to get the directive working with the ion-nav-bar in a side menu project. Can't seem to get it right. Tried switching out some of the nav content, but I end up with the main content being rendered in a tiny block instead of the full view height. Any chance you have a working sample in a side menu project?
Hey Alexandre, Let's follow up by email (email me at icl1clabs@gmail.com) so I can help you. Thanks.
Hi Ram, I just sent you an email to follow up.
Hi Andrés, let's follow up by email for your issue.
Im having issues of this directive not working properly using it with ion-nav-bar (that is in a ion-side-menus). Do you still put the ion-cover-header in the ion-view? Thats not working for me. Tried puting it in other tags as well with no luck. (It works with ion-header-bar in the same project.) Would be nice to get some example file of it working with ion-nav-bar. Would that be possible?
Hi Andrés, please email me at icl1clabs@gmail.com, I'll email the receipt. Cheers.
Is it possible to get an invoice for this purchase?
hey Didier, nice work on this plugin. Thanks for this. there is a tiny issue when jquery was added in since the scroll event will be updated to be a jquery event. so var e = e.originalEvent || e; should be added to onScroll event to remove the impact.
Hey Goh Kian Liang, Let's follow up by email (can you please email me more details at icl1clabs@gmail.com). It's going to be easier for me to help you and improve this plugin to support tabs. Cheers.
A very nice plugin. I'm using the cover header with tab interface. Looks great on iOS but on android, the tab bar appear floating on top. Any idea to make it better?
Hi @mypersonal, I am going to follow up with you by email.
Hello, I can't buy from ionic market, because I am using VISA card from China, and it shows "card decline". Could you setup the purchase in codecanyon.net so every in the world can buy your nice plugins. Thanks, and please send me an email if you have setup in codecanyon, mypersonal1971@gmail.com, thanks a lot
The ion-nav-bar support works well, Thanks.
Hi, I have already bought this plugin, Thanks for the update I test and I'll let you know. Good job.
Thanks Ram for testing and for posting the review. The 2.2 version now contains the support for ion-nav-bar. In case of any issue, don't hesitate to contact me at didier.baquier [at] gmail.com. Cheers.
Hi Didier, thanks for sending the updated plugin, it now works well with ion-nav-bar as well.
Hi Lasso, I am currently working on the ion-nav-bar support. I sent the fix to another developer so he can test it. Once he confirmed everything is ok, I will publish an update for everybody. In the meantime, if you want to have access to this new version, you can purchase the current version and I'll send you an email with the update. If you're not happy with the update, I can always refund you after. Let me know. Didier.
Hi Didier, Your plugin only work inside a <ion-header-bar> have you plan to upgrade this plugin in order to support a <ion-nav-bar> ?
Hi, I just bought this plugin. I'm getting the following error: ionCoverHeader - no .bar-header element found. I'm using <ion-nav-bar> instead of <ion-header-bar>. http://prntscr.com/8jyoyq
Hello, do you have a example with the tabs template ? Because, on Android, the tabs menu is on the top. Example : http://image.noelshack.com/fichiers/2015/49/1449407599-capture-d-ecran-2015-12-06-a-14-12-46.png
Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.
Very useful plugin, saved me a lot of time. Works really well. Great customer support. Cheers!
Great plugin. Works really well. Congrats
willing to see more wonderful features for this plugin
Awesome work.
Great plugin and excellent support! Very happy with the purchase!
Awesome work.
Doesn't work with cache and the creator do not respond.
{{ rating.comment }}
{{ rating.comment }}
Doesn't work with cache and the creator do not respond.
Awesome work.
Great plugin and excellent support! Very happy with the purchase!
Awesome work.
willing to see more wonderful features for this plugin
Great plugin. Works really well. Congrats
Very useful plugin, saved me a lot of time. Works really well. Great customer support. Cheers!