• 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

Steve F

Well-known member
#1
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...
 

zagorskey

Active member
#2
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 :)
 

tajhay

Well-known member
#3
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?
 

Steve F

Well-known member
#6
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;
}
 

imthebest

Well-known member
#9
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.
 

JABRONI

Well-known member
#10
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?
 

Steve F

Well-known member
#11
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
 

JABRONI

Well-known member
#13
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.
 

otto

Well-known member
#15
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?
 

RoldanLT

Well-known member
#20
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 :)