1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Hide Extra User Info with CSS Effect

Hides the extra user info in messages, displays extra user info when hovering the message user block

  1. Steve F

    Steve F Well-Known Member

    Steve F submitted a new resource:

    Hide Extra User Info with CSS Effect - Hides the extra user info in messages, displays extra user info when hovering the message user block

    Read more about this resource...
     
    Mirovinger and JABRONI like this.
  2. zagorskey

    zagorskey Active Member

    Nice little addition. However, one can't predict the exact height of the div depending on the custom fields users have filled in. So I took the liberty of altering your code and the best approach would be to use max-height instead:

    Code:
    .messageUserBlock .extraUserInfo
    {
        opacity: 0;
        max-height:0;
        overflow: hidden;
        transition: .5s ease-in;
    }
    
    .messageUserInfo:hover .extraUserInfo
    {
        opacity: 1;
        max-height: 300px; /* higher than your content will ever get */
    }
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        html .messageUserBlock .extraUserInfo
        {
            opacity: 1;
            height: auto;
            transition: none;
        }
        .messageUserInfo:hover .extraUserInfo
        {
            height: auto;
        }
    
    }
    </xen:if>
    That does the trick and this way you always get the exact height needed.

    Cheers :)
     
    NUT65, maryflower, Thomas.B and 5 others like this.
  3. tajhay

    tajhay Well-Known Member

    I would assume we can use something similar to hide the publicControls div unless the messageContent div was hovered over? Would anyone be so kind to share that code?
     
  4. DEZero

    DEZero Well-Known Member

    Ill give that a try and let you know
     
    Steve F and tajhay like this.
  5. Steve F

    Steve F Well-Known Member

  6. Steve F

    Steve F Well-Known Member

    Using a opacity would be best for that. I thought there may have been a resource already but can't seem to find it.

    Add to EXTRA.css

    Code:
    .message .privateControls, .message .publicControls
    {
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }
    
    .message:hover .privateControls, .message:hover .publicControls
    {
        opacity: 1;
    }
     
    RoldanLT, otto and tajhay like this.
  7. drastic

    drastic Well-Known Member

    works great on your frag template!
     
    Steve F likes this.
  8. Steve F

    Steve F Well-Known Member

    Sorry, just seen your post :p

    I posted the code above, I have used it before so was easily available :)
     
    DEZero likes this.
  9. imthebest

    imthebest Formerly Super120

    Would be awesome if instead of automatically expand the extra user info you provide a clickable arrow or something like that so people can click on that and expand the info.
     
  10. JABRONI

    JABRONI Well-Known Member

    I use some tooltips in my extra info, and it seems to throw them off a little bit when I apply this CSS. Could you test & see if you get the same result as me?
     
  11. Steve F

    Steve F Well-Known Member

    Not something I plan on adding, there are add-ons that do that already.

    Yea send me a link if you can, bout to head off for the night so hurry! :p
     
  12. imthebest

    imthebest Formerly Super120

    Could you please link to one of those? I didn't knew they are available!
     
  13. JABRONI

    JABRONI Well-Known Member

    Just tried it in an incognito tab, and the tooltips work fine. Doesn't when I'm logged in though - weird.

    Don't worry about it tonight man, we can get it fixed whenever you got more time.

    Edit: It looks like it fixed itself, weirdly enough.
     
  14. Steve F

    Steve F Well-Known Member

    imthebest likes this.
  15. otto

    otto Well-Known Member

    Thanks for your hint, but i have a issue with the Style addon "Online Status Banner" on a xenforo 1.3.3 - look:

    hide_error_01.jpg

    How can i fix this?
     
  16. Steve F

    Steve F Well-Known Member

    Could I get a link to your site to see this?

    Thanks
     
  17. MichaelDance

    MichaelDance Well-Known Member

    Amazing feature thanks guys.
     
  18. otto

    otto Well-Known Member

  19. RoldanLT

    RoldanLT Well-Known Member

    BTW, ToogleME addon is overkill just for hide and collapse extra user info block.
    This implementation is much better, Thanks @Steve F (y)
     
  20. RoldanLT

    RoldanLT Well-Known Member

    If someone can come up with an idea to load those extra user info via ajax, that would be great :)
    Like when you hover on the inbox/alerts menu ajax will load your latest messages/alerts :)
     

Share This Page