css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Since Mac OS doesn't always show scroll bars, I thought I'd make some little indicators to show where the user is on long pages.

Comments

  1. Fantastic idea! Would I be able to pinch this for an online novel I'm working on?

  2. Absolutely! Glad you like it. It's set up to follow <h1>'s inside of <article>'s, but you should be able to change that to whatever you want pretty easily.

  3. Nice and innovative, and surprisingly supportive to an issue I'm dealing with at the moment. Many thanks for this one!

  4. Interesting solution for a problem that honestly should not even exist. This whole "hide the scrollbar" thing is idiotic IMO.

  5. That's really neat, thanks for sharing.

    One issue though: if you click one of the bullets, it doesn't always move up. Right now, if you start at the top, click Washington DC and scroll to Philadelphia from there, the Washington and NYC bullets stay at the bottom.

  6. @ryne - Glad you found it useful! @sandwich - Yeah agreed. It's nice visually to have that extra space but it definitely creates some big usability issues. Love your username btw. @marcvangend - Thank you for catching this! I reworked some of the javascript for performance and broke that in the process. I think I've fixed it now.

  7. This actually reminds me of the mac pro link.

    Nice to see it fully being used.

  8. Such a great and useful idea, so simple yet so brilliant.

  9. An improvement to this - to make it more of a scroll indicator than a section indicator - would be to have the dots themselves indicate how far you've scrolled through a section. Maybe their size or opacity. Currently you only get a sense how far you've scrolled when the end is in within the viewport, won't work for larger passages of text.

  10. I gets funked-up when you scroll fast or press page-up / page-down. I love the concept though!

  11. Love it, awesome concept :)

  12. This is really nice and clean, and i really like the use of the tooltip

  13. I'm really loving the idea. I’m so going to use it in some projects. Good job bro :)

  14. @samthejarvis - I like the opacity idea, maybe I'll play with that next. @marcaube - Ugh you're right :( I reworked it a bit before I posted it to make the code a bit prettier and more performant, but I'm now realizing that the enhancements I made actually broke it when you scroll too fast (fast scrolling doesn't always trigger the scroll event that this depends on). Maybe I'll post the old code in case anyone wants it.

  15. Love this navigation solution. I've been playing with this code and I have question. How would I go about increasing the space between the indicators while they are "inactive"? I've set the tooltips to stay showing while they the indicators are inactive but it leaves them overlapping. Thanks.

  16. @dypsilanti - Glad you like it! On line 17 of the javascript, I set the margins to be 0.5em. Change the two mentions of 0.5 on that line to be any number of em's you want. Sorry this bit is confusing - I realize this type of thing should be in the css, but since it needs to calculate the offset based on how many inactive indicators there are, the js needs to know of the number.

  17. @zacharyolson - After trying that it appears that it only changes the margins between the top or bottom of the page and the whole stack of indicators. I was asking about a way to create space between each individual indicator in the stack. No worries if it's not something easy to edit or might require a whole new slab of code. I'm pretty new at javascript so I appreciate you taking the time to respond to my last post.

    I'll post a link to the fork soon so you can see what I'm doing with the code.

  18. @dypsilanti - Ah, you're right - sorry about that! I understood your question but got the answer completely wrong. I've already forgotten how to use my own code. Figured out the answer now I think. On line 17 it adds 1em for every item before it + 0.5em for the bottom as you said (And the opposite for the top - 1 for every iInverse, the number after it + 0.5 for the top margin). If you multiply i and iInverse x some number, it will increase the space added for every indicator, effectively adding space between the indicators. What I'm trying to say is, look at line 17 again (I just updated it), and replace 1.5 in both places with whatever number you'd like. Looks like 1.5 might not be enough to get the tooltips to not overlap so you might want to up it to 2 or something. Hope that helps!

  19. @zacharyolson - Works like a charm! Thanks!

  20. @zacharyolson - You think there is a way to get smooth scrolling when you click the dot/tooltip? - I cannot get that to work..

  21. Hey @naturfenomen - smooth scrolling isn't natively built into javascript, so you have to get some extra work to get that to happen. Chris Coyer made a little snippet that will smooth scroll to a spot - http://css-tricks.com/snippets/jquery/smooth-scrolling/ There are also a few jquery plugins that do the same I think if you'd prefer that. In order to get it to work with these tooltips, you'll have to redo how the link works. Right now it uses an anchor tag, so the browser is handling the link. In order to get smooth scrolling to work, youll need to handle the link yourself with javascript. You'll need to remove the href of the tooltiip and add an onclick to the tooltip that will do the scrolling.

  22. Thank you @zacharyolson. I have the query snippet on my testsite, and it works on any links on the page, but not on the tooltips. I will try the onclick() method. And sorry for the ugly code on the page...

  23. @zacharyolson - It makes perfect sense! I'll have a go at it. Thank you!

  24. @naturfenomen @zacharyolson just came here to ask the same question and it's already been solved! thanks!!!

  25. Cool! This is what I wanted to make! Awesome!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...