Resource icon

Hide Extra User Info with CSS Effect

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

First off this is a quickie, not tested with anything other than a default setup. So there will be limited support for this but it is so simple there really shouldn't be much support required. Pure CSS so there are some limitations and it could be accomplished with JS, which I will probably update this if I get time to make the script..

This is a simple little CSS snippet that hides the Extra User Info in messages until someone does a mouseover (hover) on the Message User Block..

Know issue:...

Read more about this resource...
 
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 :)
 
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?
 
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?

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;
}
 
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.
 
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?
 
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.

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

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?

Yea send me a link if you can, bout to head off for the night so hurry! :p
 
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

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

How can i fix this?
 
BTW, ToogleME addon is overkill just for hide and collapse extra user info block.
This implementation is much better, Thanks @Steve F (y)
 
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 :)
 
Back
Top Bottom