Latest topics
» Widget : Recent Members
by WinaTickets Today at 03:11

» How To Install the Code Snippet Button
by SLGray Yesterday at 20:56

» Select Button
by SLGray Yesterday at 20:25

» FM Themes
by SLGray Yesterday at 16:48

» User - Made Creations
by SLGray Yesterday at 16:48

» The Football Forums
by Mati Yesterday at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Yesterday at 12:33

» Search Bar Options
by Samantha NL Yesterday at 11:38

» Chit Chat Thread
by Jazeon Yesterday at 05:42

» Christmas logo
by Teo! Yesterday at 03:56

» SyncEditor
by keko_ferkeko Yesterday at 00:31

» Private message bg color
by Mr.Alam Thu 08 Dec 2016, 22:54

» Multi-step Login Form
by Samantha NL Thu 08 Dec 2016, 12:54

» Member of the Month
by Samantha NL Thu 08 Dec 2016, 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Thu 08 Dec 2016, 10:49

Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Widget : Custom who is online module

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 01 Feb 2015, 04:37

First topic message reminder :

Hello !

This module is similar to the existing who is online module, but makes use of AJAX which allows you to refresh the list without reloading the whole page. The data retrieved is cached for 5 minutes, but there are no limits on how often you can refresh the module manually. As you can see in the example below, it has a much different layout than the standard module.


Click to view demo

It was developed on phpbb3, but I made some efforts to optimize it for all forum versions. Wink


Installation

To add this module to your list, go to Administration Panel > Modules > Forum widget management, and create a new widget.

Widget name : Who is online module
Use a table type : Yes
Title : Who is online ? ( you can change it if you want )
Paste the following code into the textarea and submit :
Code:
<style type="text/css">
#whois_module { color:#666; font-size:11px; }
#whois_online { border:1px solid #DDD; border-radius:3px; margin:3px 0; }
.whois_userow { color:#666; font-weight:normal; text-shadow:none; padding:2px; }
.whois_userow:nth-child(even) { background:#F5F5F5 }
.whois_userow:nth-child(odd) { background:#E5E5E5 }
.whois_label { font-size:10px; padding-left:10px; position:relative; }
.whois_label:before { content:"."; font-size:0px; background:#6A6; border-radius:3px; box-shadow:0 0 3px #6C6; display:inline-block; height:5px; width:5px; position:absolute; top:3px; left:0; }
.whois_row:nth-child(1) .whois_label:before { background:#C9C; box-shadow:0 0 1px #C9C; }
.whois_row:nth-child(2) .whois_label:before { background:#999; box-shadow:0 0 1px #999; }
.whois_row:nth-child(3) .whois_label:before { background:#69C; box-shadow:0 0 1px #69C; }
#whois_online { height:100px; overflow:auto; }
.whois_row, a.whois_link, .whois_error { color:#999 !important; font-weight:bold; text-shadow:1px 1px 0 #FFF; background:#EEE; border:1px solid #CCC; border-radius:3px; margin:3px 0; padding:4px 6px; }
a.whois_link { font-size:11px; text-align:center; text-decoration:none; display:block; }
a.whois_link:hover { color:#666 !important; border-color:#666; }
.whois_error { color:#C66 !important; text-shadow:1px 1px 0 #FDD; background:#FCC; border-color:#F99; }
</style>

<div id="whois_module">
  <div class="whois_row"><span class="whois_label">Guests :</span> <span id="whois_guests">0</span></div>
  <div class="whois_row"><span class="whois_label">Hidden :</span> <span id="whois_hidden">0</span></div>
  <div class="whois_row"><span class="whois_label">Registered :</span> <span id="whois_registered">0</span></div>
  <div class="whois_row">
    <span class="whois_label">Users Online :</span>
    <div id="whois_online"><noscript><div class="whois_error">Error : JavaScript must be enabled to use this module.</div></noscript></div>
  </div>
</div>
<a href="#update" class="whois_link" id="whois_refresh">Refresh</a>
<a href="/viewonline" class="whois_link">View the whole list</a>
 
<script type="text/javascript">//<![CDATA[
(function() {
  var cache = 4*59*1000, storage = window.localStorage, s = ['','',''], fresh;
  if (getId('wrap')) s = ['h1.page-title + p','h1.page-title','.forumbg tbody tr'];
  else if (getId('ipbwrapper')) s = ['.maintitle .title-options','.maintitle h3','.ipbtable.view-online tbody tr'];
  else if (jQuery('.pun').length) s = ['.main-head p.options','.main-head p.h2','.main-content .table tbody tr'];
  else if (jQuery('.bodylinewidth').length) s = ['table:has(.nav) + .forumline tr:has(.catSides):eq(1)','table:has(.nav) + .forumline tr:has(.catSides):eq(0)','table:has(.nav) + .forumline tr:has(.gen)'];
  else return getId('whois_module').innerHTML = '<div class="whois_error">Your template is not supported for this module. For assistance or information, please <a href="http://fmdesign.forumotion.com/t291-widget-custom-who-is-online-module" target="_blank" style="color:#069;">click here</a>.</div>';
 
  getId('whois_refresh').onclick = function() { if (fresh) return; getOnline(); return false; }
  if (storage.whoisHTML && storage.whoisCache > +new Date - cache) getId('whois_module').innerHTML = storage.whoisHTML;
  else getOnline();
 
  function getOnline() {
    fresh = true;
    getId('whois_refresh').style.opacity = '0.3';
    getId('whois_online').innerHTML = '<div class="whois_userow">Loading...</div>';
    jQuery.get('/viewonline',function(data){
      getId('whois_online').innerHTML = '';
      getId('whois_guests').innerHTML = jQuery(s[0],data).text().match(/(\d+)/)[1];
      getId('whois_hidden').innerHTML = jQuery(s[1],data).text().match(/^.*? \d+ .*? (\d+) .*/)[1]
      getId('whois_registered').innerHTML = jQuery(s[1],data).text().match(/^.*? (\d+) .*? \d+ .*/)[1];
      for (var i=0,a=jQuery(s[2],data); i<a.length; i++) getId('whois_online').innerHTML += '<div class="whois_userow">' + a[i].firstChild.innerHTML + '</div>';
      storage && (storage.whoisCache = +new Date, storage.whoisHTML = getId('whois_module').innerHTML);
      getId('whois_refresh').style.opacity = '1';
      fresh = false;
    });
  };
  function getId(id) { return document.getElementById(id) };
})();
//]]></script>

Modifications

If you want to change the style of the widget, you can modify the colors and whatnot at the very top of the widget where the CSS is located. If you want to change the cache time find 4*59*1000 and increase or decrease the time. For reference it's MM*SS*MS

After that, all you need to do is drag and drop the widget to anywhere you want ! If you have any problems or questions, feel free to leave them below. Enjoy ! Mr. Green


Notice
Tutorial written by Ange Tuteur.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Wed 20 Apr 2016, 12:38; edited 3 times in total

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 25 Jan 2016, 12:33

It looks like your version has the #ipbwrapper id, so the script thinks the version is invision. Just replace this :
Code:
  if (getId('wrap')) s = ['h1.page-title + p','h1.page-title','.forumbg tbody tr'];
  else if (getId('ipbwrapper')) s = ['.maintitle .title-options','.maintitle h3','.ipbtable.view-online tbody tr'];
  else if (jQuery('.pun').length) s = ['.main-head p.options','.main-head p.h2','.main-content .table tbody tr'];
  else if (jQuery('.bodylinewidth').length) s = ['table:has(.nav) + .forumline tr:has(.catSides):eq(1)','table:has(.nav) + .forumline tr:has(.catSides):eq(0)','table:has(.nav) + .forumline tr:has(.gen)'];
  else return getId('whois_module').innerHTML = '<div class="whois_error">Your template is not supported for this module. For assistance or information, please <a href="http://fmdesign.forumotion.com/t291-widget-custom-who-is-online-module" target="_blank" style="color:#069;">click here</a>.</div>';

with this :
Code:
s = ['.main-head p.options','.main-head p.h2','.main-content .table tbody tr'];
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 42
Posts : 765
Points : 2029
Reputation : 69
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostVan-Helsing on Mon 25 Jan 2016, 16:11

Hello @Ange Tuteur,
Thank you very much its solved. Very Happy

--------

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 26 Jan 2016, 11:33

No problem. Wink
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Tue 12 Apr 2016, 14:21

Is there anyway to make this detached from the page body?

I hate how the widgets mess up the size of the main body. Ive always wanted the widgets to be moveable,like you can do with the smiley box or the nav bar.

Any code that can do that?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 12 Apr 2016, 15:30

@TreeTopMonkey wrote:Is there anyway to make this detached from the page body?

I hate how the widgets mess up the size of the main body. Ive always wanted the widgets to be moveable,like you can do with the smiley box or the nav bar.

Any code that can do that?
Well, you could change the position of the widget column so that it's fixed to the screen, but toggleable. Sorta like this :


You could do the same purely with CSS as well. Some example codes of fixing the column :

Use this for the left column :
Code:
#left {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  padding-top:33px;
  overflow:auto;
  width:180px;
}

Use this for the right column :
Code:
#right {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  padding-top:33px;
  overflow:auto;
  width:180px;
}
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Tue 12 Apr 2016, 17:16


Thanks for the reply.

I like the code for moving it over.

Before adding the code i need to resolve an issue. Just recently i changed my forum and now the widget will not display on the right hand side. If i put it on the left it compresses all the columns to the left,leaving a blank space down the right.

Ive taken my css over to my test forum to see if it's something ive been messing with, and it's all fine. But on my test forum as well,the widget won't display on the right. But it fits properly on the left,unlike my main forum.

I changed templates when changing my forum so im wondering if that's what's doing it.?

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 12 Apr 2016, 17:25

Most likely. Think You can check if the problem is the templates by forcing the default templates.
Display > Templates > General > Force default templates
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Tue 12 Apr 2016, 17:28

Forcing default templates messes everything up.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 12 Apr 2016, 17:31

It's expected since you'll be reverting to the forum's default template ; any CSS styles which customize the custom templates wont take. It's only temporary to see if the column works with the default templates, does it ? If not, the problem could be in widgets management or a CSS code. reflect
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Tue 12 Apr 2016, 17:36

Tried the widget on the right side with default templates on and it still doesn't display.

But at the same time it's messed up if i put it on the left side, But using the same css and templates code on my test forum. It displays properly on the left. Still nothing on the right though.

That's odd.
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Tue 12 Apr 2016, 17:46

Maybe it would be easier to just do this here.



Could i have the code for that? Or a link to a tutorial.

I don't want to waste your time with this. Doesn't seem like an easy fix.


SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Tue 12 Apr 2016, 17:54

It could be that there is a CSS code that is blocking the right side.

Do you have a number in the right column in the administration panel?
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Tue 12 Apr 2016, 18:23

Thanks for the reply @SLGray

Im a muppet, completely forgot i did that. I set the right side to 0 because when i set it to default 180 it shifts the forum over to the left.And messes stuff up

This is what it looks like with the widget active.


This is how its supposed to look but with the widget detached to the right with the code Ange gave.





Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 12 Apr 2016, 19:04

@TreeTopMonkey wrote:Maybe it would be easier to just do this here.



Could i have the code for that? Or a link to a tutorial.

I don't want to waste your time with this. Doesn't seem like an easy fix.


It's a prototype for the new theme I'm working on, but I can send you a setup via PM if you like. Wink
TreeTopMonkey
Member
Title :
Gender : Male
Age : 32
Posts : 24
Points : 464
Reputation : 6
Location : UK
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://asianfandom.forummotion.com/ https://twitter.com/TheAFandom

PostTreeTopMonkey on Wed 13 Apr 2016, 06:52

@Ange Tuteur wrote:
@TreeTopMonkey wrote:Maybe it would be easier to just do this here.



Could i have the code for that? Or a link to a tutorial.

I don't want to waste your time with this. Doesn't seem like an easy fix.


It's a prototype for the new theme I'm working on, but I can send you a setup via PM if you like. Wink

wow thanks dude! yeah that would be great.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 13 Apr 2016, 09:37

PM sent. Wink
Guest
Guest
View all awards

PostGuest on Wed 27 Apr 2016, 22:32

Can I ask for the parts in the script that are editable? I wish to edit the colors to make it feel like it is integrated in my forum.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 28 Apr 2016, 12:17

Poser wrote:Can I ask for the parts in the script that are editable? I wish to edit the colors to make it feel like it is integrated in my forum.
Of course, feel free to edit the stylesheet at the top of the widget. Wink
Code:
<style type="text/css">
#whois_module { color:#666; font-size:11px; }
#whois_online { border:1px solid #DDD; border-radius:3px; margin:3px 0; }
.whois_userow { color:#666; font-weight:normal; text-shadow:none; padding:2px; }
.whois_userow:nth-child(even) { background:#F5F5F5 }
.whois_userow:nth-child(odd) { background:#E5E5E5 }
.whois_label { font-size:10px; padding-left:10px; position:relative; }
.whois_label:before { content:"."; font-size:0px; background:#6A6; border-radius:3px; box-shadow:0 0 3px #6C6; display:inline-block; height:5px; width:5px; position:absolute; top:3px; left:0; }
.whois_row:nth-child(1) .whois_label:before { background:#C9C; box-shadow:0 0 1px #C9C; }
.whois_row:nth-child(2) .whois_label:before { background:#999; box-shadow:0 0 1px #999; }
.whois_row:nth-child(3) .whois_label:before { background:#69C; box-shadow:0 0 1px #69C; }
#whois_online { height:100px; overflow:auto; }
.whois_row, a.whois_link, .whois_error { color:#999 !important; font-weight:bold; text-shadow:1px 1px 0 #FFF; background:#EEE; border:1px solid #CCC; border-radius:3px; margin:3px 0; padding:4px 6px; }
a.whois_link { font-size:11px; text-align:center; text-decoration:none; display:block; }
a.whois_link:hover { color:#666 !important; border-color:#666; }
.whois_error { color:#C66 !important; text-shadow:1px 1px 0 #FDD; background:#FCC; border-color:#F99; }
</style>

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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