Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Transitions in hidden blocks elements of a list

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #43222
    nhereveri
    Member

    Hi there!

    I had this code but need to improve usability and add some requirements.

    • I need to all text (CSS :after content) show in one line. The last item (No Data) is displayed incorrectly.
    • All labels (loaded via JS) show in one line.
    • :hover action must be with soft animation (labels content).
    #127401
    nhereveri
    Member

    To prevent line breaks:
    white-space: nowrap


    Still need an animation in CSS3 transitions of labels (from display none to block).

    #127425
    Kitty Giraudel
    Participant

    1. We don’t use CSS generated content as real content, especially not for labels. It is not indexed, it is not accessible, it is not a good idea.
    2. However you could use pseudo-elements to create the markers. That would be appropriate.
    3. You don’t have to use JavaScript for such things. Simply use a hidden element after each label (like a span or something), and display the element when hovering the label.

    #127429
    Paulie_D
    Member

    Kind of like this: http://codepen.io/pen/

    Sorry…only had a couple of minutes so it’s pretty rough.

    #127439
    CrocoDillon
    Participant

    Pretty rough, yes :P

    #127452
    Kitty Giraudel
    Participant

    Not sure if trolling or simply linked to wrong URL.

    #127456
    Paulie_D
    Member

    Balls…not sure I saved it.

    EDIT…Aha ===>

    http://codepen.io/Paulie-D/pen/mCGke

    #127486
    nhereveri
    Member

    http://codepen.io/nhereveri/pen/jIaJK

    OK Hugo, using :pseudo elements is much elegant.

    I use JS to push content from JSON into labels.

    Content can be static. At least for this project.

    But lost the transition on bullets.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.