SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Sticky block challenge

    I'm trying to achieve an effect that is present in long lists on iOS.

    In the contact app there's a long list of names and there's a sticky letter showing which is the letter you have scrolled to. When you scroll and the letters overlap the previous is pushed out if the way.

    Even with scripting I'm finding it difficult to achieve this effect. How would you do it?

    Interested in horizontal and vertical solutions.

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Which is the contact app? It would be handy to see this in practice.

    EDIT: O, I see—you mean in the Contacts section of the Phone app?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you mean something like this Mark from CSS tricks?

    There is also a jquery plugin that might fit the bill.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Do you mean something like this Mark from CSS tricks?

    There is also a jquery plugin that might fit the bill.
    Yeah that's close to the effect. You really have to see it to know what I mean though. In the contacts section of the phone app when you scroll to the letter B, the letter A becomes unfixed an b pushes A out of the way. I believe these solutions would all snap the headers at a switch point.

    It's the effect of the two letters pushing each other just before they get fixed in place I am trying to achieve.






  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mark,


    Here's my attempt at the above assuming I've understood correctly as I don't have an iphone

    http://www.pmob.co.uk/temp/ios-scroll6.htm

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    That's brilliant, Paul. I think you've nailed it.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's brilliant, Paul. I think you've nailed it.
    Thanks Ralph - I like a challenge

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Perfect!

    Sorry for the late response, just got back home after 10 weeks in India and Nepal.
    Now to see what magic you have conjured up..

    Thanks again!

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    One thing this solution doesn't nail is that the javascript scroll event listeners only fire when a scroll animation has ended on iOS which breaks the effect.
    Should be able to make something work with different events like touch or simple timers if need be.

    Cheers!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Perfect!

    Sorry for the late response, just got back home after 10 weeks in India and Nepal.
    I wondered where you had got to

    Hope you had a good time.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I just noticed there's a similar demo here but it doesn't seem as smooth as mine and is about a 1000 lines more code.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •