Hover Over Avatar for Information

[Alanna 🥀🖤]

So, I started a thread in Code Requests & Support but got no luck and Tumbleweed told me to make a post here and cross my fingers.

So, for my board (moved from last position) Novam Terram, I would like to have a code that would move the "Latest Status:" into a fading transparent table that appears when the mouse scrolls over the avatar and disappears when you move the mouse away.

[Tumbleweed]

I've actually have this done. Just working out some minor details.

[♡ Kat Meows ♡]

This would be cool :3

[Tumbleweed]

♡ Kat Meows ♡,

I'll try to get this posted. @khristian is currently working on some other modifications so I was just holding off until she is set with those mods.

[Alanna 🥀🖤]

Update: Tumbleweed has given me the code even though it isn't perfect yet and I'm playing with it and trying to get things working and so far it isn't working quite well.
i. All the custom fields are not only appearing in the hover over, but below the avatar in the mini-profile.
ii. Nothing in the hover over is aligning correctly and I don't know how to fix it.
iii. The links are not functional and I don't want the links to even be full links, I want them to be "Application" and "Shipper."
iv. Everything in the hover over needs to appear even though a member may not have those custom fields filled in.
v. The hover over color, currently white, needs to be editable to anyone's liking, I can't figure out how to change it.

[Tumbleweed]

i. You'll need to comment out the extra one that is outside the hover bit. It should look something like this: (Comment out tags in red)

<!--
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
-->


ii.  Not sure if this is your issue but in the css I gave you there are styles for the custom fields. Whatever you named them needs to go in place of the blue part and use the top and left to position things. 

.custom-field-favoritecookie{
position: relative;
top:70px; left:0px;
margin-bottom:1px;
float-left;
}

iii. Not sure what you mean by not being full links. I know why they aren't clickable because they really aren't the top layer but maybe I can find a workaround. Give me a bit.

iv. I'll have to think about that. 

v. You mean editable by members? Because I wouldn't have a clue how to do that. If you mean just editable by you, you should be able to just add a color to this like I did below in blue:

.entry{
position:relative;
top:0px;
left:0px;
width: 152px;
height: 148px;
z-index:99;
background-color: #ff0000;
}

Actually on #v. you could use a semi-transparent image if you like, instead of the color: (I have a image in there if you want to test it and I found it makes the text show up a bit better since the text is in a fade-in type mode and you can fiddle with the jquery too but I found what I gave you works best.)

background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/11.png);
background-repeat: repeat;

[Alanna 🥀🖤]

i. Okay, got it.
ii. I have the custom field titles in there, it just isn't doing anything when I change the "top" and "left."
iii. Full link: http:// link. com/ <-- that is what is appearing but I want, instead, like the picture on the first post, "Application" which is a link to the members application... and the same for "Plotter."
iv. Okay.
v. Editable just by me... and I made my own image and put it in there but I have no idea what happened because now it is all acting funny and my image isn't showing up, it's just hovering white now and the hover over items are appearing below the Avatar and remaining after the hover goes away. I fixed it.

I know this is probably getting annoying... I'm sorry, but after I thought about how the hover looked and considering how small the latest status is allowed to be, I made another image that is an example of what I want it to look like.

This is just the hover over, not the avatar behind it. I made this image, to be the hover over, not including the text and 100x100 image of the person. The black triangle and white rectangles, however, will be on the hover over image to make sure that is it always visible even though a member doesn't have information inserted (that was my way around it). Okay, I want the text in the boxes to be uppercase (I can't figure out how to do that) and the color #000 but the links #a0a0a0. I want the latest status to be in that position... and the image of the person... I wanted to add another custom field of a image URL that added a 100x100 image of their character right there positioned over the black triangle.

Also, I want thinking... to make it easier for you to figure out how all of this can appear EVEN when a member doesn't have information inserted, to have default inserts when nothing is in the fields... like, for default links: http:// link. com/ and for default Orientation, just have "orientation" there and the same for Relationship... just have "relationship" appear if nothing is in the Custom Text Field in the member's profile... and also for Played By... just "alias" would be the default. OH, and before I forget... I want to be clear that "PLAYED BY" isn't part of the inserted text in the custom field... "ALIAS" is what will be changed when a member puts their alias into the custom field... 

I hope this is all possible.

Tumbleweed,

Okay, ignore EVERYTHING above because I got my dad, a programmer, to help me out and I have EVERYTHING working the way I want it to 'cept for four things:
i. I don't want the hover image to have a transparency on it because I added that myself making the image... I don't know how to take off the transparency in the code itself...
ii. The links are still not clickable because you said it's not the top layer.
iii. Get that Kiwi6 URL for the Music Player out of the hover! Got it!
iv. The Personal Text/Latest Status is positioning and appearing differently every other post.

[IMAGES REMOVED]

The first image is what I WANT the Personal Text/Latest Status to look like, the second image is what it looks like on every other post... Like Post1 and Post2 are not the same. You can also see, by these images, that the URL of the Music Player is behind the Mini picture... I don't want it in the hover at all. THANKS!

Thank you so much! I updated my main forum and deleted my test forum, here is the main one now: sinnerstouchv3.proboards.com/

[Tumbleweed]

Edit: Hold off on this,@khristian, I ran into a snafu and don't have time to work it out at the moment. (Not showing on every post...dang it)


I wish you would have kept your test site or just make a new V5 one to test this on. In order to get the links clickable I had to redo the way the code was working  so it if up to you if you want to try this after your dad got everything working, or nearly. If you don't make a new site, please save what you have so you can refer to it for all the other things you've done.

This will replace the jquery:


<!--New hover code-->  
    <script type="text/javascript">
     $(document).ready(function() {

       $('.the_fade').css({'opacity' : 0});

       $('.the_entry').mouseenter(function(){
         console.log("enter: "+$('#the_fade').css('z-index'));
         $('#the_fade').addClass('hovery').fadeIn();
         });          
       $('#the_fade').mouseleave(function(){  
          console.log("Exit: "+$('#the_fade').css('z-index'));
          $('#the_fade').removeClass('hovery').fadeOut();
          });                      
       });                  
   </script>  

This part of your css....

/* this just sets things up for positioning */
.entry{
position:relative;
top:0px;
left:0px;
width: 152px;
height: 148px;
z-index:99!important;
background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/11.png);
background-repeat: repeat;

}
/* this is the background behind the fade description. Height width should be same as entry above */
.image{
position: absolute;
background-color: #647592;
top:0px;
left:0px;
width:152px;
height:148px;
z-index: 120;
}


...with this...

.hovery{
z-index:20!important;
}
#the_fade {
width: 150px;
height: 150px;
position: absolute;
top: 0px;
z-index: 0;
display:none;
}
.the_entry {
width: 150px;
height: 150px;
background: #ff0000;
color: #fff;
position: relative;
z-index: 10;
}


Now this is the layout. I've added comment tags so you know what part does what:


<div class="the_entry">

Whatever you want behind the fade goes here
       

     <div id="the_fade">
<a href="http://support.proboards.com">Clickable link</a>
The content of what shows up on hover
     
     </div>
   </div>


Now that will get your links clickable (I have one in there for testing) but if those are custom fields (I'm pretty sure they are), that may be a secondary problem. But you should be able to just add what you've customized so far. It looks pretty darn good so you should be proud of both yourself and your Dad. (Nice having a programmer dad.)

[Alanna 🥀🖤]

Okay, I did it... and, the hover does not work and it screwed up my mini-profile. <-- I take that back. The hover is working, it's just not picking up the coding I wrote for the all the items in the hover so NOTHING is showing up but a simple link that isn't connected to the custom field will work but that isn't what I want. Are you sure there isn't an easy fix to this? I really don't want to have to rewrite this all just a new format.

Yes, those links are custom fields... I'd really like this to be an easy fix... not a whole new code... please and thank you.

[♡ Kat Meows ♡]

omg this is looking super cool! I am seriously code fangirling over here xD

[Alanna 🥀🖤]

How are you doing on this Tumbleweed?

[Tumbleweed]

Sorry @khristian, I took on a second job because I was going nuts with all this free time after recent events. I haven't really had a chance to look at either option and because I had spent so much time on it, prior, I need to help a few other people first who might be needing help. Gotta split the time fairly. I promise to try to work something out for you in the next couple days hopefully using the first coding. I have a couple ideas up my sleeve. 

[Alanna 🥀🖤]

Just letting you know my updates on the code: Novam Terram
- I have changed the layout a little for a new skin... sorry for being so... indecisive, but I think this new layout will be easier to work with.

Under if $[user.is_member]: (in Mini-Profile Layout Template)
- Instead of an image as the hover, I tried making them colored tables but they remain after I take my cursor away. Also, I found out how to make the links clickable, I just made them the top layer using z-index but now of course, they are ALWAYS the top layer after I hover over it and hover away.

<!--CUSTOM FADE BY TUMBLEWEED-->
<div class="entry">
<div class="image">
{if $[user.avatar]}
  <center>
           <div class="avatar">$[user.avatar]
           </div>
       </center>
       <br />
{/if}
</div>
<div style="display:none;">
       <div style="position:relative;top:20px;left:25px;background-color:white;width:140px;height:231px;"></div>
       <div style="position:relative;top:35px;left:25px;background-color:#221e1f;width:140px;height:115px;"></div>
       <div style="width:140px;position:relative;top:-310px;left:25px;text-transform:uppercase;font-family:georiga;font-size:.8em;">{if $[user.is_online]}
           <span><span style="font-size:.7em;letter-spacing:2px;height:20px;border-bottom: 1px solid #000;">User Is Currently</span><br/>
               <b><font color="#69775c">Online</font></b></span>
{else}
           <span><span style="font-size:.7em;letter-spacing:2px;height:20px;border-bottom: 1px solid #000;">Last Online</span><br/>
               $[user.last_online]</span>
{/if}</div>
           <div style="background-color:#69775c;width:110px;padding:8px;position:relative;top:-225px;left:32px;text-transform:lowercase;font-family:georiga;font-size:.9em;font-style:italic;">$[user.posts] POSTS</div>
           <div style="background-color:#69775c;width:110px;padding:8px;position:relative;top:-220px;left:32px;text-transform:lowercase;font-family:georiga;font-size:.9em;font-style:italic;"><div class="money_symbol"></div><div class="money_amount"></div> CAPS</div>
<!--WRITTEN BY TRINITY-->
{foreach $[user.mini_custom_field]}
       {if $[user.mini_custom_field.name] == "Played By"}
       <br /><span class="$[user.mini_custom_field.content_class]">
       <div style="width:140px; text-align: center; font-family:georiga;"><span style="font-size:.7em;letter-spacing:2px;height:20px;border-bottom: 1px solid #000;">Played By</span><br/> <b>$[user.mini_custom_field.value]</b></div></span>
       {elseif $[user.mini_custom_field.name] == "Plotter"}
       <br /><span class="$[user.mini_custom_field.content_class]">
       <div style="width: 140px; height:15px; text-align: center;"><a href="$[user.mini_custom_field.value]">Plotter</a></div></span>
       {elseif $[user.mini_custom_field.name] == "Tracker"}
       <br /><span class="$[user.mini_custom_field.content_class]">
       <div style="width: 140px; height:15px; text-align: center;"><a href="$[user.mini_custom_field.value]">Tracker</a></div></span>
       {elseif $[user.mini_custom_field.name] == "Application"}
       <br /><span class="$[user.mini_custom_field.content_class]">
       <div style="width: 140px; height:15px; text-align: center;"><a href="$[user.mini_custom_field.value]">Application</a></div></span>
       {elseif $[user.mini_custom_field.name] == "Mini"}
      <br /><span class="$[user.mini_custom_field.content_class]">
       <img src="$[user.mini_custom_field.value]"></span>
       {elseif $[user.mini_custom_field.name] == "Music"}
       <br /><span class="$[user.mini_custom_field.content_class]"><div style="display:none;"></div></span>
       {else}
       <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.value]</span>
       {/if}
{/foreach}
<!--END WRITTEN BY TRINITY-->
   <br /><br />
</div>
</div>
<!--END CUSTOM FADE BY TUMBLEWEED-->

Bottom of Layout Template:
- I don't know how to edit the hover over code... so I can't fiddle with it to make it how I want, so that's why I tried the tables that are in the above code.

<!--THE START OF HOVER-->
    <script type="text/javascript">    
$(function() {
   $('.entry').hover(function() {
       $('.image',this).stop().fadeTo('slow',.5)
           .siblings().stop().fadeTo('slow', 4);
   }, function() {
       $('.image',this).stop().fadeTo('slow', 1)
           .siblings().stop().fadeTo('slow', 4);
   });
});
</script>
<!--END OF HOVER-->

<style type="text/css">
/*SETS UP FOR POSITIONING*/
.entry{
position: relative;
top:0px;
left:5px;
margin-bottom:-10px;
width: 180px;
height: 400px;
z-index:99!important;
}
   
/*BACKGROUND BEHIND FADE DESCRIPTION. HEIGHT x WIDTH SHOULD BE SAME AS ABOVE.*/
.image{
position: absolute;
top:0px;
left:5px;
margin-bottom:-10px;
width:180px;
height:400px;
z-index: 0;
}
   
/*CUSTOM FIELDS*/
.custom-field-mini{
position: absolute;
top:69px; left:32px;
z-index: 2;
}
.custom-field-application{
font-size: .8em;
text-transform: uppercase;
position: absolute;
top:297px; left:25px;
z-index: 2;
}
.custom-field-plotter{
font-size: .8em;
text-transform: uppercase;
position: absolute;
top:317px; left:25px;
z-index: 2;
}
.custom-field-tracker{
font-size: .8em;
text-transform: uppercase;
position: absolute;
top:337px; left:25px;
z-index: 2;
}
.custom-field-playedby{
font-size: .8em;
text-transform: uppercase;
position: absolute;
top:215px; left:25px;
margin-bottom:1px;
       z-index: 2;
}
</style>
Screenshots:
- The first image is a screen shot of what the mini-profile looks like when it has not yet been hovered over. The second is during a hover over and the third is after I have removed my cursor from the image.

I want the hover over to look like the third image (no extra color behind tables) and I also have noticed that it hovers when even hovering over the member group image (the black and white image below) and the music player. ALSO, the music player is no longer functional after the hover over has been activated on that specific mini-profile.

  

Take all the time you need Tumbleweed, I am slightly antsy about getting this completely working... but, I understand the tight schedule and I apologize for changing things on you...

[Alanna 🥀🖤]

Bump?

[Alanna 🥀🖤]

Bump!