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

[MioTraGusa]

Originally Posted by ubblite

And here is the error you get in Firefox when viewing the CMPS home page.

in header template, change

 <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">
<script type="text/javascript"> 
document.body.onclick = ajax_hideTooltip; 
</script>

for this

 <script type="text/javascript" src="$vboptions[bburl]/js/ajax-dynamic-content.js"></script>
 <script type="text/javascript" src="$vboptions[bburl]/js/ajax.js"></script>
 <script type="text/javascript" src="$vboptions[bburl]/js/ajax-tooltip.js"></script>
 <link rel="stylesheet" href="$vboptions[bburl]/css/ajax-tooltip.css" media="screen" type="text/css">
<script type="text/javascript"> 
document.body.onclick = ajax_hideTooltip; 
</script>

bye

[ubblite]

Eric, is it possible to fix the errors we described in the above posts? If not, please let us know because I'll need to remove this hack from our site for now until the problem is fixed.

I just discovered this mod also has the same problem with Photopost Pro and have provided additional screenshots.

edit: I just noticed MiotraGusa posted a fix - I'll try it and get back to you. Thanks Miotra.

[ubblite]

Originally Posted by sduckie2k5

I'm able to see the whole feature work including avatar on the forum pages but on the index(cmps) I only see the info and not the avatar. Can you please tell me how to correct this? Thankyou ~D

Originally Posted by JonnyC

Excellent Mod - Thanks

But I have a slight problem

The Mod works great in my forum, but I also have the vBadvanced CMPS installed with a whos visited module

When I load this page, i get a line error in the bottom corner of the screen when i move my mouse over the name of a member who has visited and this script doesnt work

Does anyone know how to fix this

Thanks

my site is http://www.boogie2nite.co.uk

and a test user account

Username : test
Password : test

It works perfectly here

http://www.boogie2nite.co.uk/forum/index.php

but doesnt here

http://www.boogie2nite.co.uk/index.php

Both of these posts have been unanswered and I also have the same problem. Anyone with a CMPS fix?

[MioTraGusa]

FIX CMPS - Member ajax

Originally Posted by ubblite

Both of these posts have been unanswered and I also have the same problem. Anyone with a CMPS fix?

in header template, change :

<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">
<script type="text/javascript"> 
document.body.onclick = ajax_hideTooltip; 
</script>

for:

<script type="text/javascript" src="$vboptions[bburl]/js/ajax-dynamic-content.js"></script>
<script type="text/javascript" src="$vboptions[bburl]/js/ajax.js"></script>
<script type="text/javascript" src="$vboptions[bburl]/js/ajax-tooltip.js"></script>
<link rel="stylesheet" href="$vboptions[bburl]/css/ajax-tooltip.css" media="screen" type="text/css">
<script type="text/javascript"> 
document.body.onclick = ajax_hideTooltip; 
</script>

Replace the entire forumhome_loggedinuser template with this:

<if condition="$loggedin[userid]"><if condition="in_array($bbuserinfo['usergroupid'], array(1, 3))">
$stylevar[dirmark]<a href="$vboptions[bburl]/member.php?$session[sessionurl]u=$loggedin[userid]" rel="nofollow">$loggedin[musername]</a>$loggedin[invisiblemark]$loggedin[buddymark]
<else />
$stylevar[dirmark]<a href="$vboptions[bburl]/member.php?$session[sessionurl]u=$loggedin[userid]"onmouseover="ajax_showTooltip('http://www.yourdomain.org/forum/member_ajax.php?$session[sessionurl]u=$loggedin[userid]',this,true);return false" onmouseout="ajax_hideTooltip()">  $loggedin[musername]</a>$loggedin[invisiblemark]$loggedin[buddymark]
</if>
<else />$loggedin[musername]</if>

!!!! -> change www.yourdomain.org/forum/ --> for your forum url

in template member_ajax search:

   <if condition="$show['avatar']">
    <td><img src="$userinfo[avatarurl]" $userinfo[avatarsize] alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" border="0" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" /></td>
   <else />

change for:

   <if condition="$show['avatar']">
    <td><img src="$vboptions[bburl]/$userinfo[avatarurl]" $userinfo[avatarsize] alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" border="0" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" /></td>
   <else />

work ok.

bye

[MioTraGusa]

if your forums are located in one subdomain ex. forum.mydomain.com and don't show profile in forumhome, replace again the entire forumhome_loggedinuser template with this:

<if condition="$loggedin[userid]"><if condition="in_array($bbuserinfo['usergroupid'], array(1, 3))">
$stylevar[dirmark]<a href="$vboptions[bburl]/member.php?$session[sessionurl]u=$loggedin[userid]" rel="nofollow">$loggedin[musername]</a>$loggedin[invisiblemark]$loggedin[buddymark]
<else />
$stylevar[dirmark]<if condition="THIS_SCRIPT == 'adv_index'"><a href="$vboptions[bburl]/member.php?$session[sessionurl]u=$loggedin[userid]"onmouseover="ajax_showTooltip('http://www.domain.org/forum/member_ajax.php?$session[sessionurl]u=$loggedin[userid]',this,true);return false" onmouseout="ajax_hideTooltip()">  $loggedin[musername]</a><else /><a href="$vboptions[bburl]/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></if>$loggedin[invisiblemark]$loggedin[buddymark]
</if>
<else />$loggedin[musername]</if>

replace www.domain.org/forum/ with your forum url

[ericgtr]

Thanks for taking time to help out and post your fixes guys.

[ubblite]

Thanks for your fixes, MioTraGusa.

I have just one minor error I'm seeing in CMPS. In Internet Explorer, if you or some of your users are in invisible mode, you'll get this script error: 'Error:Permission denied' on the CMPS home page. Any fix for this?

[MioTraGusa]

Originally Posted by ubblite

Thanks for your fixes, MioTraGusa.

I have just one minor error I'm seeing in CMPS. In Internet Explorer, if you or some of your users are in invisible mode, you'll get this script error: 'Error:Permission denied' on the CMPS home page. Any fix for this?

 ajax_showTooltip('http://www.yourdomain.org/forum/member_ajax.php?$session[sessionurl]u=$loggedin[userid]'

change www.yourdomain.org/forum --> for your forum url , --> real url, not subdomain (sub.dom.com/...)

test it...

[sabillondesigns]

hey man, great hack i love it

sorry if you already answered this, i search and did not find it..

sometimes some users have big avatars like 130px wide, so the popup doesnt show everything is suppose to, it shows a scroll bar but u cant really scroll down

is there a way to make the pop up box bigger?

thanks in advance!

[MioTraGusa]

Originally Posted by sabillondesigns

sometimes some users have big avatars like 130px wide, so the popup doesnt show everything is suppose to, it shows a scroll bar but u cant really scroll down

is there a way to make the pop up box bigger?

In file ajax-tooltip.css your can change any values.

PHP Code:

#ajax_tooltipObj .ajax_tooltip_content{
    border:2px solid #317082;    /* Border width */
    left:18px;    /* Same as border thickness */
    top:0px;
    position:absolute;
    width:300px;    /* Width of tooltip content */
    height:200px;    /* 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;
} 


change value of width & height to make po pup more bigger

bye