Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] User Avatar in Online List



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  weasel

avatar
Punbb Rookie
Punbb Rookie


Tutorial: Avatar member who is online

This tutorial may help you how to put member's avatar who is online in statistics.

Credits: StaarK*


--> Tutorials, tips and tricks <--
Avatar member who is online


- CSS
Code:
.etMiniAv {
width: 35px;
height: 35px;
background: #FFF;
padding: 1px;
border: 1px solid rgba(204, 204, 204, 0.89)!important;
}
For punBB:
Code:
#etAvOnline {
font-size: 0px;
}
- Javascript
PhpBB3
Code:
$(function() {
 var version = 'phpBB3|punBB|Invision|phpbb2';
 // phpBB3 Version, code created by Extrem-Tutorials
 $('#i_whosonline + p a[href*="/u"]').each(function() { // Code is for phpBB3 version of the forumotion;
 var url = this.href; // Get url from load avatars of users;
 $(this).html('<img src="http://i32.servimg.com/u/f32/15/42/26/78/th/oaspet11.png" class="etMiniAv" />'); // Default avatars of before load function;
 $(this).load(url +'#profile-advanced-right .module:eq(0) img:eq(0)',function(et) {
 $(this).children('img').attr('class','etMiniAv');
 });
 });
});
phpBB2
Read:
Go to template and search index_body, find the "{LOGGED_IN_USER_LIST}" and replace with "<div class="etMiniAv">    {LOGGED_IN_USER_LIST} </div>"
Code:
$(function() {
 var version = 'phpBB3|punBB|Invision|phpbb2';
 // phpBB2 Version, code created by Extrem-Tutorials
 $('#etAvOnline a[href*="/u"]').each(function() { // Code is for phpBB2 version of the forumotion;
 var url = this.href; // Get url from load avatars of users;
 $(this).html('<img src="http://i32.servimg.com/u/f32/15/42/26/78/th/oaspet11.png" class="etMiniAv" />'); // Default avatars of before load function;
 $(this).load(url +'#page-body .forumline .gensmall > img:first',function(et) {
 $(this).children('img').attr('class','etMiniAv');
 });
 });
});
PunBB
Read:
Go to template and search index_body, find the "{LOGGED_IN_USER_LIST}" and replace with "<div class="etMiniAv">    {LOGGED_IN_USER_LIST} </div>"
Code:
$(function() {
 var version = 'phpBB3|punBB|Invision|phpbb2';
 // punBB Version, code created by Extrem-Tutorials
 $('#etAvOnline a[href*="/u"]').each(function() { // Code is for punBB version of the forumotion;
 var url = this.href; // Get url from load avatars of users;
 $(this).html('<img src="http://i32.servimg.com/u/f32/15/42/26/78/th/oaspet11.png" class="etMiniAv" />'); // Default avatars of before load function;
 $(this).load(url +'#profile-advanced-right .main-content.clearfix.center img:first',function(et) {
 $(this).children('img').attr('class','etMiniAv');
 });
 });
});
Invision
Code:
$(function() {
 var version = 'phpBB3|punBB|Invision|phpbb2';
 // Invision Version, code created by Extrem-Tutorials
 $('.ipbtable tr:has("a[href="/viewonline"]") + tr .thin a[href*="/u"]').each(function() { // Code is for Invision version of the forumotion;
 var url = this.href; // Get url from load avatars of users;
 $(this).html('<img src="http://i32.servimg.com/u/f32/15/42/26/78/th/oaspet11.png" class="etMiniAv" />'); // Default avatars of before load function;
 $(this).load(url +'#profile-advanced-right .box-content.profile.center img:eq(0)',function(et) {
 $(this).children('img').attr('class','etMiniAv');
 });
 });
});
Add Tipsy Plugin
A small "plugin" for those who want and tipsy to avatars.

after the line:
Code:
var url = this.href; // Get url from load avatars of users;
add:
Code:
var tipsy2 = $(this).text(); // Get name from tipsy avatars of the users;
Replace the line:
Code:
$(this).children('img').attr('class','etMiniAv');
with:
Code:
$(this).children('img').attr({title: ''+tipsy2+'', class: 'etMiniAv'});
after the line:
Code:
$(this).children('img').attr({title: ''+tipsy2+'', class: 'etMiniAv'});
add:
Code:
$(this).children('.etMiniAv').tipsy({gravity:'se'});
- Preview
// phpBB2: http://fcd.site40.net/images/91076112618335539525.png
// phpbb3: http://fcd.site40.net/images/85285424562205199591.png
// punBB: http://fcd.site40.net/images/90455773566726703359.png
// Invision: http://i57.servimg.com/u/f57/18/54/08/34/invisi10.png





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Avatar member who is online

Powered by PunBB
Currently 0 users have thanked weasel for this post:

2
Offline

  Zyon

avatar
Punbb Guru
Punbb Guru
Yes, but it is translated.

Topic starter MUST put credits, and you have 1 week, or I will lock topic.

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

3
Offline

  weasel

avatar
Punbb Rookie
Punbb Rookie
Credits have been added.

Powered by PunBB
Currently 0 users have thanked weasel for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
This tutorial can be very helpful gotta aprove it. Due to copyritghts issues you'll get 60 points.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  Guest

avatar
Guest
Thanks this is awesome!

Powered by PunBB
Currently 0 users have thanked Guest for this post:

6
Offline

  Salya

avatar
Newbie
Newbie
I can't get this to work on my forum. owo

Powered by PunBB
Currently 0 users have thanked Salya for this post:

7
Offline

  roseila

avatar
Punbb Rookie
Punbb Rookie
tks :*

Powered by PunBB
Currently 0 users have thanked roseila for this post:

8
Offline

  Andrei34

avatar
Punbb Rookie
Punbb Rookie
very good tuto thx

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

9
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum