Autore Sottoscrivi questo autore
Avatar utente
Lucky
Amministratore
Amministratore
 
Articoli: 75
Iscritto il: 11 gen 2009, 21:14
Località: Bari
Sito Web: http://www.portalxl.eu
Cerca articoli

Opzioni segnalibri
Segnalibri social networks disponibili:
Blogger Delicious Digg Facebook Feed amici Google Link in Live Mixx MySpace Netvibes Reddit Stumbleupon Technorati Twitter Wordpress
Vota questo articolo

Questo articolo è valutato 3
con 0 voti espressi.
Esporta articolo
 

[FAQ] Ajax user-info hover extension Premod

ID Articolo: 71
Scritto da: Lucky
Scritto il: 31 dic 2010, 13:11
Descrizione articolo: Come avere le bandiere, sesso, livello e avatar in Ajax user-info quando si visualizza il nome utente.
Link esterno a questo articolo:
http://portalxl.eu/kb.php?a=71

Istruzioni
Aprite \portal\includes\ajax_userinfo.php e sostituite tutto il contenuto con il seguente codice:
Spoiler: show
Codice: Seleziona tutto
<?php
/**
*
* @name ajax_userinfo.php
* @package phpBB3 Portal XL 5.0
* @version $Id: ajax_userinfo.php,v 0.1.1 2010/12/30 14:14:05
*
* @copyright (c) 2007, 2010 Portal XL Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

// AJAX Userinfo by Tobi (http://www.seo-phpbb.org)


// Check that the $_GET['mode'] variable has been set and is a number
$ajax_userid = $_GET['userid'];

if (!is_numeric($ajax_userid))
{
   die('');
}

/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : '../../';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_user.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);

// Start session management
$user->session_begin();
$user->setup();

// Select some Userdata from DB
$sql = 'SELECT *
   FROM ' . USERS_TABLE . '
   WHERE user_id = '. (int) $ajax_userid;
$result = $db->sql_query($sql);
$row = $db->sql_fetchrow($result);

if (!$row['user_from'])
{
   $row['user_from'] = 'N/A';
}

if (!$row['user_website'])
{
   $row['user_website'] = 'N/A';
}

// Get the Avatar for display
$avatar = '';
$avatar_img = '';
switch ($row['user_avatar_type'])
{
   case AVATAR_UPLOAD:
      $avatar = "download/file.$phpEx?avatar=";
       $avatar .= $row['user_avatar'];
       $avatar_img = $avatar;
    break;

    case AVATAR_GALLERY:
      $avatar = $config['avatar_gallery_path'] . '/';
        $avatar .= $row['user_avatar'];
        $avatar_img = $avatar;
    break;
}

$avatar = str_replace('<img', '', $avatar_img);
$avatar = str_replace(' width="80" height="80" alt="" />', '', $avatar_img);

if ( !$avatar )
{
   $avatar = 'images/avatars/no_avatar.png';
}
// Get the Avatar for display

// Get rank for display
if ( $row['user_rank'] != '0' ) {
   $rank_title = $rank_img = $rank_img_src = '';
   get_user_rank($row['user_rank'], (($row['user_id'] == ANONYMOUS) ? false : $row['user_posts']), $rank_title, $rank_img, $rank_img_src);
} else {
   $rank_title = $row['user_rank'] = 'N/A';
}
// Get rank for display

// Get country flag for display
if ( $row['user_country_flag'] != '0' ) {
   $flag_title = $row['user_country_flag'];
} else {
   $flag_title = $row['user_country_flag'] = 'N/A';
}
// Get country flag for display

// Get gender for display
if ( $row['user_gender'] != '0' ) {
   
  if ( $row['user_gender'] != '2' ) {
     $gender_title = sprintf($user->lang['GENDER_M']);
  } else {
     $gender_title = sprintf($user->lang['GENDER_F']);
  }
 
} else {
   $gender_title = $row['user_gender'] = 'N/A';
}
// Get gender for display

// Send to XML File
echo header('Content-Type: text/xml; charset=utf-8');
echo '<' . '?xml version="1.0" encoding="UTF-8"?' . '>';
echo '<userdata>';
echo '<username>' . $row['username'] . '</username>';
echo '<colour>' . trim((empty($row['user_colour'])) ? '000000' : $row['user_colour']  ) . '</colour>';
echo '<regdate>' . $user->format_date($row['user_regdate']) . '</regdate>';
echo '<posts>' . $row['user_posts'] . '</posts>';
echo '<from>' . $row['user_from'] . '</from>';
echo '<lastvisit>' . $user->format_date($row['user_lastvisit']) . '</lastvisit>';
echo '<website>' .$row['user_website']. '</website>';
// Get the Avatar for display
echo '<avatar>' . $avatar . '</avatar>';
// Get the Avatar for display
// Get rank for display
echo '<rank>' . $rank_title . '</rank>';
// Get rank for display
// Get country flag for display
echo '<flag>' . $flag_title . '</flag>';
// Get country flag for display
// Get gender for display
echo '<gender>' . $gender_title . '</gender>';
// Get gender for display
echo'</userdata>';

$db->sql_freeresult($result);

?>


Per le modifiche allo stile prosilver aprite \template\portal\portal_ajax_userinfo.html e sostituite tutto il contenuto con il seguente codice:
Spoiler: show
Codice: Seleziona tutto
<script type="text/javascript">
// Ajax Userinfo 0.1.0 by tas2580 (http://www.seo-phpbb.org)
//
// Thanks to Jhong (http://www.wp-united.com) for some ideas in the JavaScript

var lockAnim;
lockAnim = false;

function show_popup(uID) {
   chOpac(0, 'popup');
   if (!lockAnim) {
      lockAnim = true;
      opacAnim('popup', 0, 100, 500);
   }
   document.onmousemove = snapdiv;
   sendRequest(uID);
   document.getElementById('popup').style.display='block';
}

function close_popup() {
   if (!lockAnim) {
      lockAnim = true;
      opacAnim('popup', 100, 0, 500);
   } else {
      document.getElementById('popup').style.display='none';
      setDefaults();
   }
}

function setDefaults() {
   document.getElementById('ajaxusername').innerHTML = '';
   document.getElementById('ajaxusername').style.color = '#000000';
   document.getElementById('ajax_registert').innerHTML = '';
   document.getElementById('ajax_posts').innerHTML = '';
   document.getElementById('ajax_website').innerHTML = '';
   document.getElementById('ajax_from').innerHTML = '';
   document.getElementById('ajax_last_visit').innerHTML = '';
   document.getElementById('ajaxavatar').src = "{PHPBB_ROOT_PATH}portal/images/loading.gif";
   document.getElementById('ajax_rank').innerHTML = '';
   document.getElementById('ajax_flag').innerHTML = '';
   document.getElementById('ajax_gender').innerHTML = '';
   document.onmousemove = '';
}

// Make the request   
function createRequestObject() {
   var ro;
   var browser = navigator.appName;
   if(browser == "Microsoft Internet Explorer"){
      ro = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      ro = new XMLHttpRequest();
   }
   return ro;
}

var http_getuser = createRequestObject();

function sendRequest(UserID) {
   http_getuser.open('get', '{PHPBB_ROOT_PATH}portal/includes/ajax_userinfo.php?userid='+UserID);
   http_getuser.onreadystatechange = handleResponse;
   http_getuser.send(null);
}

// fill in the response
function handleResponse() {
   if(http_getuser.readyState == 4){
      var xmlDoc   = http_getuser.responseXML;
      document.getElementById('ajaxusername').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
      document.getElementById('ajaxusername').style.color = '#' + xmlDoc.getElementsByTagName('colour')[0].firstChild.nodeValue;
      document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
      document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
      document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
      document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
      document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
      document.getElementById('ajaxavatar').src = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue;
      document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
      document.getElementById('ajax_flag').innerHTML = xmlDoc.getElementsByTagName('flag')[0].firstChild.nodeValue;
      document.getElementById('ajax_gender').innerHTML = xmlDoc.getElementsByTagName('gender')[0].firstChild.nodeValue;
   }
}

function snapdiv(e) {     
   var docX, docY;
   if(e)
   {
      if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
      else {docX = e.clientX; docY = e.clientY;}
   }
   else
   {
      e = window.event;
      docX = e.clientX; docY = e.clientY;
      if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
      {
         docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
      }
      else if(document.body && (document.body.scrollTop || document.body.scrollLeft))
      {
         docX += document.body.scrollLeft; docY += document.body.scrollTop;
      }
   }
   if (docX > document.body.offsetWidth - 400)
   {
      document.getElementById('popup').style.left = (docX - 390) + "px";
   }
   else
   {
      document.getElementById('popup').style.left = (docX - 10) + "px";
   }
   document.getElementById('popup').style.top    = (docY + 20) + "px";
}

function opacAnim(id, opacStart, opacEnd, millisec) {
   lockAnim = true;
   var speed = Math.round(millisec / 100);
   var timer = 0; var i = 0;
   if (opacEnd>opacStart)
   {
      for (i = opacStart+1; i <= opacEnd; i=i+2)
      {
         i= (i==99)?100:i;
         setTimeout("chOpac(" + i + ",'" + id + "')",(timer * speed));
         timer++;
      }     
   }
   else
   {
      for (i = opacStart-1; i >= opacEnd; i--)
      {
         setTimeout("chOpac(" + i + ",'" + id + "')",(timer * speed));
         timer++;
      }
   }
}

function chOpac(opacity, id)
{
   var object = document.getElementById(id).style;
   object.filter = "alpha(opacity:" + opacity + ")";
   object.opacity = object.MozOpacity = object.KhtmlOpacity = (opacity / 100);
   if ((opacity <= 0) || (opacity >= 100))
   {
      lockAnim = false;
      if (opacity <= 0) {
         document.getElementById(id).style.display='none';setDefaults();
      }
   }
}
</script>

<style type="text/css">
/* Ajax User-Info Popups */
#popup { display: none; font-size: 10px; position: absolute; width: 400px; z-index: 600; }
#avimg { width:100px; float: left; overflow: hidden; height: 100px; text-align: center; padding: 5px; }
#ajaxusername { font-weight: bold; }
#ajax_flag { text-transform: uppercase;}
</style>

<div class="forabg" id="popup">

   <div class="inner">
      <span class="corners-top"><span></span></span>
     
      <ul class="topiclist fullwidth">
         <li class="header"><dl><dt>{L_USERS_INFORMATION}</dt></dl></li>
      </ul>
      <ul class="topiclist forums">
         <li><dl>
            <dd style="width:95%;">
              <div id="avimg"><img id="ajaxavatar" src="{T_THEME_PATH}/images/loading.gif" alt="avatar"></div>
              <strong>{L_USERNAME}:</strong> <span id="ajaxusername"></span><br />
              <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br />
              <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br />
              <strong>{L_SORT_FLAG}:</strong> <span id="ajax_flag"></span><br />
              <strong>{L_GENDER}:</strong> <span id="ajax_gender"></span><br />
              <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br />
              <strong>{L_LAST_ON}:</strong> <span id="ajax_last_visit"></span><br />
              <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br />
              <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br style="clear: both;">
            </dd>
         </dl></li>
      </ul>
     
      <span class="corners-bottom"><span></span></span>
   </div>
   
</div>


Per le modifiche allo stile subsilver2 aprite \template\portal\portal_ajax_userinfo.html e sostituite tutto il contenuto con il seguente codice:
Spoiler: show
Codice: Seleziona tutto
<script type="text/javascript">
// Ajax Userinfo 0.1.0 by tas2580 (http://www.seo-phpbb.org)
//
// Thanks to Jhong (http://www.wp-united.com) for some ideas in the JavaScript

var lockAnim;
lockAnim = false;

function show_popup(uID) {
   chOpac(0, 'popup');
   if (!lockAnim) {
      lockAnim = true;
      opacAnim('popup', 0, 100, 500);
   }
   document.onmousemove = snapdiv;
   sendRequest(uID);
   document.getElementById('popup').style.display='block';
}

function close_popup() {
   if (!lockAnim) {
      lockAnim = true;
      opacAnim('popup', 100, 0, 500);
   } else {
      document.getElementById('popup').style.display='none';
      setDefaults();
   }
}

function setDefaults() {
   document.getElementById('ajaxusername').innerHTML = '';
   document.getElementById('ajaxusername').style.color = '#000000';
   document.getElementById('ajax_registert').innerHTML = '';
   document.getElementById('ajax_posts').innerHTML = '';
   document.getElementById('ajax_website').innerHTML = '';
   document.getElementById('ajax_from').innerHTML = '';
   document.getElementById('ajax_last_visit').innerHTML = '';
   document.getElementById('ajaxavatar').src = "{PHPBB_ROOT_PATH}portal/images/loading.gif";
   document.getElementById('ajax_rank').innerHTML = '';
   document.getElementById('ajax_flag').innerHTML = '';
   document.getElementById('ajax_gender').innerHTML = '';
   document.onmousemove = '';
}

// Make the request   
function createRequestObject() {
   var ro;
   var browser = navigator.appName;
   if(browser == "Microsoft Internet Explorer"){
      ro = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      ro = new XMLHttpRequest();
   }
   return ro;
}

var http_getuser = createRequestObject();

function sendRequest(UserID) {
   http_getuser.open('get', '{PHPBB_ROOT_PATH}portal/includes/ajax_userinfo.php?userid='+UserID);
   http_getuser.onreadystatechange = handleResponse;
   http_getuser.send(null);
}

// fill in the response
function handleResponse() {
   if(http_getuser.readyState == 4){
      var xmlDoc   = http_getuser.responseXML;
      document.getElementById('ajaxusername').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
      document.getElementById('ajaxusername').style.color = '#' + xmlDoc.getElementsByTagName('colour')[0].firstChild.nodeValue;
      document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
      document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
      document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
      document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
      document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
      document.getElementById('ajaxavatar').src = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue;
      document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
      document.getElementById('ajax_flag').innerHTML = xmlDoc.getElementsByTagName('flag')[0].firstChild.nodeValue;
      document.getElementById('ajax_gender').innerHTML = xmlDoc.getElementsByTagName('gender')[0].firstChild.nodeValue;
   }
}

function snapdiv(e) {     
   var docX, docY;
   if(e)
   {
      if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
      else {docX = e.clientX; docY = e.clientY;}
   }
   else
   {
      e = window.event;
      docX = e.clientX; docY = e.clientY;
      if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
      {
         docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
      }
      else if(document.body && (document.body.scrollTop || document.body.scrollLeft))
      {
         docX += document.body.scrollLeft; docY += document.body.scrollTop;
      }
   }
   if (docX > document.body.offsetWidth - 400)
   {
      document.getElementById('popup').style.left = (docX - 390) + "px";
   }
   else
   {
      document.getElementById('popup').style.left = (docX - 10) + "px";
   }
   document.getElementById('popup').style.top    = (docY + 20) + "px";
}

function opacAnim(id, opacStart, opacEnd, millisec) {
   lockAnim = true;
   var speed = Math.round(millisec / 100);
   var timer = 0; var i = 0;
   if (opacEnd>opacStart)
   {
      for (i = opacStart+1; i <= opacEnd; i=i+2)
      {
         i= (i==99)?100:i;
         setTimeout("chOpac(" + i + ",'" + id + "')",(timer * speed));
         timer++;
      }     
   }
   else
   {
      for (i = opacStart-1; i >= opacEnd; i--)
      {
         setTimeout("chOpac(" + i + ",'" + id + "')",(timer * speed));
         timer++;
      }
   }
}

function chOpac(opacity, id)
{
   var object = document.getElementById(id).style;
   object.filter = "alpha(opacity:" + opacity + ")";
   object.opacity = object.MozOpacity = object.KhtmlOpacity = (opacity / 100);
   if ((opacity <= 0) || (opacity >= 100))
   {
      lockAnim = false;
      if (opacity <= 0) {
         document.getElementById(id).style.display='none';setDefaults();
      }
   }
}
</script>

<style type="text/css">
/* Ajax User-Info Popups */
#popup { display: none; font-size: 10px; position: absolute; width: 400px; z-index: 600; }
#avimg { width:100px; float: left; overflow: hidden; height: 100px; text-align: center; padding: 5px; }
#ajaxusername { font-weight: bold; }
#ajax_flag { text-transform: uppercase;}
</style>

<table id="popup" class="tablebg" cellspacing="1" width="100%">
  <tr>
    <th><h4>{L_USERS_INFORMATION}</h4></th>
  </tr>
  <td class="row1">
      <div id="avimg"><img id="ajaxavatar" src="{T_THEME_PATH}/images/loading.gif" alt="avatar"></div>
      <strong>{L_USERNAME}:</strong> <span id="ajaxusername"></span><br />
      <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br />
      <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br />
      <strong>{L_SORT_FLAG}:</strong> <span id="ajax_flag"></span><br />
      <strong>{L_GENDER}:</strong> <span id="ajax_gender"></span><br />
      <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br />
      <strong>{L_LAST_ON}:</strong> <span id="ajax_last_visit"></span><br />
      <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br />
      <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br style="clear: both;">
    </td>
  </tr>
</table>


Salvate, sovrascrivete e aggiornate la cache.

Nota: gli stili speciali potrebbero aver bisogno di trattamenti speciali per la parte html in portal_ajax_userinfo.html.


La creazione, il mantenimento e gli aggiornamenti per il progetto Portal XL Italia richiedono molto tempo e fatica, aiutaci con una donazione, tutte le info qui.

Immagine
© Portal XL Italia Group - www.portalxl.eu
Questo articolo è stato modificato da Lucky il 1 gen 2011, 10:38

Chi c’è in linea

Iscritti connessi: Nessuno

cron