Forum Home Enhancements - AJAX - Mouseover Profile Preview

What it does:
This script will display profile info when you mouseover their username on the forumhome page, the javascript (ajax) is from http://www.dhtmlgoodies.com/index.ht...t=ajax-tooltip See screenshot or test drive it here by waving your mouse over usernames in the What's Going On box http://www.guitarblast.com/ (currently off for guests, see screenshot below)

Notes&Updates:

• By default this uses it's own CSS located in the CSS folder. To change the background color, edit ajax-tooltip.css and find /* Background color */ and change to your background color.

• There is a space after each username, between the comma's. Currently working on fixing this.

• If the name wraps to the next line, it will not display on mouseover.

• The javascript box will run off the end if the forum width is at 100% for usernames on the edge. (currently working on this)

• [8/13] Added the option to turn off for guests. This is ideal both to save server load and if you have the member list turned off for guess through the admin CP.

• [10/28] Fixed broken page (css display) and included a Product installer.

• [10/28] Now also shows "mousing over members" in the Who's Online page.

• [11/1] Added a delay so it has to be moused over for a small amount of time before it will show. Removed caching and put a timer on it so there will no longer be a need to refresh the page to get the latest on where a user is, it will do it automatically.

• [11/8]
  Added option to make the window stay open so you can click within it or scroll (if scrollbars appear) clicking anywhere outside of it will close it. To do this:
  In the forumhome_loggedinuser find:
  

  $stylevar[dirmark]<a href="member.php?$session[sessionurl]u=$loggedin[userid]"onmouseover="ajax_showTooltip('member_ajax.php?$session[sessionurl]u=$loggedin[userid]',this,true);return false" onmouseout="ajax_hideTooltip()">  $loggedin[musername]</a>$loggedin[invisiblemark]$loggedin[buddymark]

  Replace with:
  

  $stylevar[dirmark]<a href="member.php?$session[sessionurl]u=$loggedin[userid]"onmouseover="ajax_showTooltip('member_ajax.php?$session[sessionurl]u=$loggedin[userid]',this,true);return false">  $loggedin[musername]</a>$loggedin[invisiblemark]$loggedin[buddymark]

  Open the header template and add this to the very bottom:
  

  <script type="text/javascript"> 
  document.body.onclick = ajax_hideTooltip; 
  </script>

Keep in mind that if you leave this on for guests, you must also allow guests to view member info. Admin CP > Usergroups > Usergroup Manager > Unregistered / Not Logged In [edit] > Can View Member Info (Yes).

Upgrade and fresh install instructions are included in the zip file.


That's it!
Pleas click Install if you use this

[Puck 24/7]

Nice hack, however, it does some strange things (tested with IE). I've noticed a scrollbar in the user's name if the contents are too long, but you can't scroll - if you try to move your mouse on the scroll box it goes away. Another thing I noticed is while certain pages load, the screen color flashes a different color other than your default style, in this case mine is light blue. Also, if you click on certain links such as "Register", the lower-half of the screen is that light-blue color again.

[MediaHound]

I get that light blue color as well.
Also have the scrollbar appear if the contents are too long.
Tested with SeaMonkey.

[Gnappy]

very nice, thanks

edit: i have the same light blue on header and background load page, any fix?

[Gnappy]

I readed the post of craiovaforum and with few little fixes here it's a little resume. I hope this post can be useful for someone:

• Light blu background fix
  in the header template don't add(or remove if you previous added it) the last line of code, in bold here:
  <link rel="stylesheet" href="css/ajax-tooltip-demo.css" media="screen" type="text/css">
  simply add this part of code(without that line):
  

  	<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
  	<script type="text/javascript" src="js/ajax.js"></script>
  	<script type="text/javascript" src="js/ajax-tooltip.js"></script>	
  	<link rel="stylesheet" href="css/ajax-tooltip.css" media="screen" type="text/css">

• Unknown location for my own username fix
  add this line of code at the top of member_ajax.php to solve the problem:
  
  PHP Code:

  define('LOCATION_BYPASS', 1); 

• Scrollbars window fix
  Overwrite ALL the ajax-tooltip.css with this code:
  
  PHP Code:

  /* CSS needed for the script */ 

#ajax_tooltipObj{ 
        z-index:1000000; 
        text-align:left; 
} 
#ajax_tooltipObj div{ 
        position:relative; 
} 

/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */ 

#ajax_tooltipObj .ajax_tooltip_arrow{   /* Left div for the small arrow */ 
        background-image:url('../images/arrow.gif'); 
        width:20px; 
        position:absolute; 
        left:0px; 
        top:0px; 
        background-repeat:no-repeat; 
        background-position:center left; 
        z-index:1000005; 
        height:60px; 
} 

#ajax_tooltipObj .ajax_tooltip_content{ 
        border:2px solid #317082;  /* Border width */ 
        left:18px;      /* Same as border thickness */ 
        top:0px; 
        position:absolute; 
        width:170px;    /* Width of tooltip content standard: 150*/ 
        height:250px;   /* Height of tooltip content */ 
        background-color:#FFF;       /* Background color */ 
        padding:5px;    /* Space between border and content */ 
        font-size:0.8em;        /* Font size of content */ 
        overflow:auto;  /* Hide overflow content */ 
        z-index:1000001; 
} 


Credits to ericgtr and craiovaforum

[EasyTarget]

I've done all of the above but when I mouse over I just see a 'loading content, please wait' then nothing happens.

www.troc.us/forum

[ericgtr]

Tried all of the above meaning just the code in the original mod, right? That being the case make sure you have uploaded the .php file and created the template.

[EasyTarget]

yeah, I did both.. the original and the stuff gnappy had in his post. With the original I got a white box with no content, with his I get the please wait message.

I've uploaded the folders to the forum directory and put the .php file in the forum directory, created the custom member_ajax template and edited the logged in and header templates.

*edit*
nm.. template was named ajax_member instead of member_ajax.

[ericgtr]

Ahh.. okay, glad you got it worked out Don't forget the .css stuff:

	<link rel="stylesheet" href="css/ajax-tooltip.css" media="screen" type="text/css">
	<link rel="stylesheet" href="css/ajax-tooltip-demo.css" media="screen" type="text/css">

[EasyTarget]

when I have both of those then I get just the white box? (avatar shows up if they have it though)

[ericgtr]

You will have to edit the css files, if your text is white that's probably why.