News for hackers. Stuff that matters.
Re:Sticky Headers with Pure JavaScript and CSS by edwinyzh on Monday October 15, 2012 @04:21AM (#4654204)
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...
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by ralph on Monday October 15, 2012 @04:56AM (#4654282)
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
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Sunday October 21, 2012 @04:21PM (#4680678)
Firefox issues are fixed for page up/down and home/end keys.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by mmilo on Monday October 15, 2012 @04:51AM (#4654276)
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' :)

[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by laacz on Monday October 15, 2012 @02:53AM (#4654022)
It should be mandatory to include an example in such projects, so I do not have to clone it.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by chengyinliu on Monday October 15, 2012 @03:09AM (#4654056)
I created one for him simply by renaming the example.html file and host on github. Zero credit claimed.

http://chengyin.github.com/Balloon

[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by cstrat on Monday October 15, 2012 @03:06AM (#4654046)
Agree!
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by naiquevin on Monday October 15, 2012 @06:07AM (#4654390)
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)
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @12:16PM (#4655716)
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.

[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by naiquevin on Thursday October 18, 2012 @11:53PM (#4672201)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by hollerith on Monday October 15, 2012 @03:20AM (#4654076)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by chrismorgan on Monday October 15, 2012 @04:01AM (#4654164)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @04:47AM (#4654267)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by andersnolsen on Monday October 15, 2012 @04:00AM (#4654162)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @04:04AM (#4654170)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by freddywang on Monday October 15, 2012 @10:22AM (#4655148)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by cheald on Monday October 15, 2012 @05:03AM (#4654290)
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. :)
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by crescentfresh on Monday October 15, 2012 @10:19AM (#4655134) 

    balloonInst.inflate({'header1', 'header2'});
That's not valid js. The array example (`[]`) is fine on its own.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @11:32AM (#4655474)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by dotborg on Monday October 15, 2012 @03:13AM (#4654063)
"pure javascript" ?
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by tim_heap on Monday October 15, 2012 @03:20AM (#4654078)
Pure, as opposed to using a library like jQuery. Plain would have been a better word.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @03:39AM (#4654121)
Yeah plain is more accurate.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @04:03AM (#4654167)
http://vhiremath4.github.com/Balloon/

Also outlined on the README.

[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @03:35AM (#4654112)
Yeah sorry about not having an example page up, and thanks for getting on it Chengyin. I'll make a proper example page next.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Saturday October 20, 2012 @05:14PM (#4678246)
Issues with Firefox should be fixed now (on the home/end keys as well as page up/down).
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by heyadam on Monday October 15, 2012 @01:46PM (#4656180)
This is very helpful and the no jQuery dependency is very convenient. Thanks!
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by gdg92989 on Monday October 15, 2012 @02:42AM (#4654015)
Anyone have an example? I really dont want to download this.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by Axsuul on Monday October 15, 2012 @04:19AM (#4654198)
Does anyone know of a jQuery plugin that does this?
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @04:27AM (#4654220)
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/

[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by Axsuul on Monday October 15, 2012 @04:29AM (#4654226)
Thank you kindly. And great job, got to check out the example.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by Narretz on Monday October 15, 2012 @04:46AM (#4654266)
Not sticky at all in FF 15.0.1? Anyone else?
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @12:28PM (#4655773)
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.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by 0r3jq4a0j on Monday October 15, 2012 @03:37AM (#4654117)
Partially broken on iOS.
[ Parent | on HN ]
Re:Sticky Headers with Pure JavaScript and CSS by vhiremath4 on Monday October 15, 2012 @03:39AM (#4654124)
Unfortunately, there are bound to be bugs. Please submit an issue report on the repo.
[ Parent | on HN ]