Resource icon

Hide Extra User Info with CSS Effect

Overview Updates (1) Reviews (13) Discussion
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

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:...
Click to expand...

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?
 
tajhay said:
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?
Click to expand...

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?
 
Super120 said:
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.
Click to expand...

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

JABRONI said:
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?
Click to expand...

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

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 :)
 
You must log in or register to reply here.
Back
Top Bottom