Sticky Headers with Pure JavaScript and CSS(github.com)
github.com
Sticky Headers with Pure JavaScript and CSS
https://github.com/vhiremath4/Balloon
No jQuery. No other libs. Further testing probably necessary, so submit issue reports if you find any.
15 comments
Thanks for your contribution to the open source community, and with respect, I think page headers sticking to the top or bottom are huge screen estate wasters for wide screens, Twitter Bootstrap's default menu style, Gmail and Google Groups's new look are example come to my mind...
And with my browser, Firefox, they break Page Up/Down, and therefore Space (also pages down). Instead of the slight overlap for context that Firefox normally gives, there's now a gap so it's Space, cursor-up a bit to continue reading, Space, ... http://catb.org/jargon/html/B/brain-damaged.html
Firefox issues are fixed for page up/down and home/end keys.
His example might be a page header, but there is nothing that explicitly states that this needs to be for a page headings. In fact this particular project doesn't seem to be intended for that purpose at all, more for long list of grouped items.
While I think your opinion is valid, I'm not convinced addressing it at this particular project is warranted. Just sayin' :)
While I think your opinion is valid, I'm not convinced addressing it at this particular project is warranted. Just sayin' :)
It should be mandatory to include an example in such projects, so I do not have to clone it.
I created one for him simply by renaming the example.html file and host on github. Zero credit claimed.
http://chengyin.github.com/Balloon
http://chengyin.github.com/Balloon
Agree!
I like your style of using 'jeeves' as the namespace for useful helper functions :-) BTW, I have been recently working on a sticky buttons plugin myself https://github.com/naiquevin/jquery-sticky-buttons Uses jquery, no hosted example, not quite well documented and I have no idea if it works on iOS but I am planning to fix the last these points soon (except jquery)
Haha glad someone found the humor in it. :-)
You may want to check that Magneto website in your readme though. It doesn't seem to exhibit the behavior you wish to showcase. You should just create a GitHub project page that shows how your plugin works. I got some fire for not having one for Balloon.
You may want to check that Magneto website in your readme though. It doesn't seem to exhibit the behavior you wish to showcase. You should just create a GitHub project page that shows how your plugin works. I got some fire for not having one for Balloon.
The readme refers to the administration panel of a magento instance and not the magento website. May be I should remove the link to the website to avoid any confusion. Any way, will try to set up github project page this weekend.
I want a Firefox preference or extension that makes all sticky elements into ordinary, non-sticky elements so that I never have to experience sticky HTML elements.
If it's very narrow, I don't mind it much. But thick ones reduce screen space drastically - worst of all, rendering the Space bar (which should scroll down a page at a time) useless. Now that I really do hate.
If this is a general discussion about sticky headers, then I'll have to agree with you guys. If you're referring to Balloon itself, it shouldn't matter what size the object you want to stick is. It should stick if you just inflate it with the API.
Not bad but it needs some more testing. After some up and down scrolling with home, end, page up and down it totally blew up in Chrome.
Yes I agree. It needs a good amount of more testing. Could you file an issue on the repo? I'd really appreciate it. I'm also aware that there are issues on iOS.
The catch: don't go for native scrolling if you want iOS issue fixed. Try emulated scrolling what iScroll did before iOS5 came out. When inertia scrolling kicks in (the moment your release your touch and page continue its momentum scroll), any offset, scrollTop information is not updated. You are out of luck trying to fit any positioning calculation based on outdated offset/position. At the moment, there is no solution for this until Apple fix it.
position: fixed on iOS is basically a non-starter, FWIW. If you can fix all the issues with it you'll be a minor internet hero. :)
balloonInst.inflate({'header1', 'header2'});
You're correct. I should have specified that the values do not matter. I have updated the README to account for this. The reason why I wanted to make this an option is because, in certain cases, someone may want to keep their headers as a collection of ids pointing to something else, and I wanted to allow them to be able to just pass in this collection/object literal without having to convert it to an array.
"pure javascript" ?
Pure, as opposed to using a library like jQuery. Plain would have been a better word.
[deleted]
Yeah plain is more accurate.
http://vhiremath4.github.com/Balloon/
Also outlined on the README.
Also outlined on the README.
Yeah sorry about not having an example page up, and thanks for getting on it Chengyin. I'll make a proper example page next.
Issues with Firefox should be fixed now (on the home/end keys as well as page up/down).
This is very helpful and the no jQuery dependency is very convenient. Thanks!
Anyone have an example? I really dont want to download this.
Does anyone know of a jQuery plugin that does this?
Yes there are a few good jQuery plugins if you just Google for them. This was intended to be without jQuery or any other JavaScript libraries. Here are a couple jQuery plugins that look promising:
https://github.com/imakewebthings/jquery-waypoints http://polarblau.github.com/stickySectionHeaders/
https://github.com/imakewebthings/jquery-waypoints http://polarblau.github.com/stickySectionHeaders/
Thank you kindly. And great job, got to check out the example.
Not sticky at all in FF 15.0.1? Anyone else?
Is it not sticky, or are there issues with pageup/down/spacebar? Because the latter is a known issue, and I've filed a GitHub issue fix request.
Partially broken on iOS.
Unfortunately, there are bound to be bugs. Please submit an issue report on the repo.