Sticky Headers with Pure JavaScript and CSS

https://github.com/vhiremath4/Balloon

by vhiremath4 • 14 years ago

13 34 14 years ago

github.com

No jQuery. No other libs. Further testing probably necessary, so submit issue reports if you find any.

gdg92989• 14 years ago

Anyone have an example? I really dont want to download this.

laacz• 14 years ago

It should be mandatory to include an example in such projects, so I do not have to clone it.

cstrat• 14 years ago

Agree!

chengyinliu• 14 years ago

I created one for him simply by renaming the example.html file and host on github. Zero credit claimed.

http://chengyin.github.com/Balloon

dotborg• 14 years ago

"pure javascript" ?

tim_heap• 14 years ago

Pure, as opposed to using a library like jQuery. Plain would have been a better word.

vhiremath412• 14 years ago

Yeah plain is more accurate.

hollerith• 14 years ago

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.

chrismorgan• 14 years ago

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.

vhiremath412• 14 years ago

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.

vhiremath412• 14 years ago

Yeah sorry about not having an example page up, and thanks for getting on it Chengyin. I'll make a proper example page next.

0r3jq4a0j• 14 years ago

Partially broken on iOS.

vhiremath412• 14 years ago

Unfortunately, there are bound to be bugs. Please submit an issue report on the repo.

andersnolsen• 14 years ago

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.

vhiremath412• 14 years ago

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.

cheald• 14 years ago

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. :)

freddywang• 14 years ago

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.

vhiremath412• 14 years ago

http://vhiremath4.github.com/Balloon/

Also outlined on the README.

Axsuul2• 14 years ago

Does anyone know of a jQuery plugin that does this?

vhiremath412• 14 years ago

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/

Axsuul2• 14 years ago

Thank you kindly. And great job, got to check out the example.

edwinyzh• 14 years ago

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...

mmilo• 14 years ago

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' :)

ralph• 14 years ago

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

vhiremath412• 14 years ago

Firefox issues are fixed for page up/down and home/end keys.

Narretz• 14 years ago

Not sticky at all in FF 15.0.1? Anyone else?

vhiremath412• 14 years ago

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.

naiquevin2• 14 years ago

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)

vhiremath412• 14 years ago

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.

naiquevin2• 14 years ago

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.

crescentfresh• 14 years ago

    balloonInst.inflate({'header1', 'header2'});

That's not valid js. The array example (`[]`) is fine on its own.

vhiremath412• 14 years ago

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.

heyadam• 14 years ago

This is very helpful and the no jQuery dependency is very convenient. Thanks!

vhiremath412• 14 years ago

Issues with Firefox should be fixed now (on the home/end keys as well as page up/down).

Sticky Headers with Pure JavaScript and CSS

Related Stories