I am looking for a good angular directive, that would handle sticky elements and append a compact class to it once they are out of the view...
so imagine a header element on a website, that has a normal height of 200px;... but when you start scrolling down, you would FIRST make the heater sticky (position fixed - top: 0) but when you scroll down for more than 200 px (I guess) you would append a "compact" class to it, so you would than see a compacted version of the header on top - lets say 70px;. This is quite established behaviour with modern [responsive] websites.
Which is fine and easy enough. The problem is when you want to stack more elements on top...
So to better explain myself... you would have the mentioned header with mentioned behavior... but further down on the page you would have a table, with it's theader row... and you would like to stack that on top, but after the header... and only when you scroll pass it...and also with "COMPACT" behavior (but not necessarily)
and imagine you would have some navigation even further down (tabs for example)... and you would like to stuck them on top as well, but only after the header and table...
so the directive would need to calculate the fixed top position depending on the elements already stuck there and if they are a compact version of themselves or not...
plus it should consider also the (css) animation bit (lets say you would put a transition animation on height of the element... so the transition of full to compact is smooth)
Anything similar out there already? I don't think this is something new in terms of expected behavior...so there must be some solutions out there already.
anyone?
I know this is an older topic, but I think I've a proper solution.
I'm the creator of Angular Sticky and already have this feature implemented.
You can view the demo displaying with most of what you're asking right here. The "collections" demo has more header like behavior though.
There is however some smart CSS that needs to be done to make the compacting happen, but I think it should be possible with the current functionalities of the plugin. I might need to look into this too anyway as I can imagine it can be a popular request.
ng-sticky could do with a little mod.
It has a body sticky class so you can change the behavior of the whole page after an element became sticky.
UPD1
As I stated before a little update of ngSticky would do the trick.
So I decided to do such changes
Here is my fork of ngsticky on Github
It is still very WIP and I'm planning to contribute it to the main ngSticky project when done.
But before that( and continuing my work on it) I wanted to check with you if this is the behavior you are expecting.
Any response will be helpful.
Related
This problem has surfaced in the past (e.g. Sticky header of p-table not working with [scrollable] = true in Primeng.?) though as the comment to the comment suggests, I too have experienced that previously shared solutions don't work
When we pass [scrollable]="true" primeng applies certain styles, from what I've seen, overflow auto is applied to p-datatable-wrapper thus binding the vertical sticky stylings to that overflow, instead of having horizontal scroll on the tbody and thead and keeping vertical scroll on page so sticky headers would be bound to the page's scroll. Quite tricky...
Here is a quick example, it's a ready playground to test both scenarios https://stackblitz.com/edit/primeng-tablescroll-demo-qm2ndu?file=src/app/app.component.ts
I've tried the obvious things like moving the overflows around but nothing has worked. At this point I don't really have an idea for a solution that's not hard coding a lot of logic to force calculations for constantly setting the top attribute of the headers when we scroll on the page to fake having sticky headers, since they don't work.
I'd love to see primeng update this somehow and provide an easy way to implement the desired behavior.
I've created an issue # https://github.com/primefaces/primeng/issues/11099
angular/ng-bootstrap context :
probably obvious answers for you experts but I tried since many days without success yet.
My header in fixed-top configuration is correctly displayed.
My Content in a container is also properly displayed with a top margin until I scroll down to a defined fragment by its id (like http://somewhere.com/page#fragment)
At this point, the browser jumps to the section but displays it at the top of the viewport which below the header and then makes it hidden by the header.
So I'd like to find a way to ban the top zone to be used by something else than the header.
Thx for any help in this matter.
I'm actually not sure what is "fixed-top configuration". Here is a nice solution for your markup requirements. It is a simple one and works without bootstrap or any other dependencies.
And take a look at the comment to that answer. There is an accessibility remark there.
I am a mostly skilled server-end developer, and am creating an ambitious website project - all by myself. I know c#, MVC, T-SQL, LINQ, and ASP.NET pretty well. Obviously, since I'm working by myself, I have knowledge in design too. I'm obviously good with html (who isn't?). And I absolutely love jQuery! The thing is, I'm decent in my understanding of css, but css is my least knowledgeable trait. I understand programming, I also am good in design, not just because I have a decent level of knowledge in css (and jQuery) - but also because I just know what looks good (I can draw and paint on real paper too).
The thing is, I know I can probably do this with jQuery code, but I was wondering if this could also be done with css alone. On my main design (Views/Shared/_Layout.cshtml) - I made the body to have a "min-width: (my value);" attribute, which, obviously isn't supported with older browsers, so I also included a transparent image of a default width of 1px that I set to stretch to my desired width also - it works in controlling the width of the page (to the minimum I desired). But - I have a site header div which resides at the top of the page. I have a part of that header div with elements positioned on the far right - which is nice when the browser is on a device that is large enough and the browser is in decent size, but once the browser is set to a size less than my desired minimum width, then the scroll bar shows up, and I can move it around as expected. But, the elements in that header div do not stay to the far right in conjunction with my minimum width - but stay on the right of the current window size instead. I have the main div holding the elements itself set to be in fixed position, I tried making those elements relative with no success. I tried a few ideas, the problem still persists.
So, as I said, I am well aware of concepts using jQuery that can do what I have previously described I desire in these regards, but, as I also said, I know a decent amount of css, but am the least close to an "expert" in css than anything else I know. I just have a strong suspicion what I desire here can be done with css and css alone (also, it would be nice to have it compatible with most browsers, or at the least most browsers made after the year 2008).
Can someone please give me some good information in these regards?
I just remembered asking this question.
I actually found a way to go about doing what I wrote I desired here through some experimentation that eventually got me to where I needed to be. What I did was instead of using relative positioning - which I thought was the proper way of doing this, I used absolute positioning inside the absolute positioned top header div. I didn't think this would be the solution at the time of asking the question, I assumed setting something as absolute positon - even inside something that is already absolute positioned - would put it in a new context of absolute positioning like any absolute positioned element inside the body tag. What I discovered was if I put an absolute positioned element inside another absolute positioned element - the context of the absolute positioning was based on the original absolute positioned element - so top (or left for that matter) 0px wasn't 0px from the context of the body (the very top of the page) - but - 0px from the element that the element is inside of. I think that's a pretty explanation of it, so I'll end explaining it here.
I'm sure there's plenty of people that know css much more than I do, and think this issue I had here is so basic, but, I did ask the question, and I might as well answer it based upon the solution I used. I could've posted an example on jsfiddle like asked for in a comment, but I thought my explanation was good enough, and since no one offered an answer based on my question alone, I decided to try to address the issue with experimentation, which I had success with.
This behavior is somewhat confusing to me, so I would appreciate some external help to understand what is happening.
I have prepared a fiddle to illustrate the behaviour http://jsfiddle.net/cseignc/mfoejqum/
I have an html table whose header is maintained fixed by absolute-positioning a second header via some CSS.
The table is generated thanks to the ng-repeat directive that loops through the array of columns and rows.
In order to provide horizontal scrolling, while maintaining the first column and the header fixed, I am filtering the array of columns to ng-repeat on by using the startFrom and LimitTo filters.
I am providing navigation buttons (left and right chevrons) to allow the user to scroll horizontally through the table. Those buttons increment/decrement the value passed to the startFrom filter.
This is working as expected for the table body but the second header fails to render properly. I am even finding it impossible to detect consistency in how the second header is rendering - or not.
I initially thought this was to do with $scope.$apply() not being called for, but all my code is within AngularJs, so I do not believe that there is a need for calling it...Correct me please if I am wrong.
I have found that resizing the screen will cause the header to render properly.
Any insight on this will be greatly appreciated.
Thanks !
EDIT:
The above issues appears to be Chrome specific. I have tested the behaviour in IE and Firefox and the header is rendering correctly in those browsers.
I made some changes to your fiddle that should give you a bit of a start in achieving exactly what you want:
http://jsfiddle.net/a06uvkr3/
The gist is that I:
1) initialized $scope.skip to 0 in the controller
2) Ditched the ng-repeat filters and used ng-show with some logic based on $index
3) tweaked the CSS so that the header's .tr-inner container is absolute rather than the things inside it and gave the header a fixed height. Also tweaked a bit of padding to account for the header items being thrown out a little
Obviously I can't verify that it fits your exact use cases, but you can see the result is much more promising.
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.