Example 7: Online Stats Pop-Up
Posted January 30th 2011, 5:37pm
Please note: due to its superior design, this and the next example/tutorial are only for IPB2/Invision boards. For those members using phpBB3, in the near future I will show you how to obtain these features as well.

I have heard all sorts of things about how great a feature called "Organic Tabs" is on phpBB2 and PunBB boards, and how it's impossible to add it to phpBB3 and IPB2/Invision boards. By now I'm sure you realize how crazy this is! The past two examples/tutorials have created a widget bar that looks and works an awful lot like Organic Tabs. Actually the widget bar works better, because widgets are easier to add than all the code you must write to support Organic Tabs. Since the widget bar is better than Organic Tabs, maybe I should call it Biodynamic Tabs. :D

However, the one missing tab was for the online stats. Not any more! Once you add the following script and CSS to your IPB2/Invision board, you will have a new tab on your widget bar that will toggle the display of the online stats info -- just like an Organic Tab!

To add the tab to the widget bar, create a widget as explained in previous examples, using this script:

<script type="text/javascript">
var CopyrightNotice = 'Pop-up online stats widget for forumotion Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

jQuery(function() {
var y=document.getElementById('fo_stat');
if (y) {
y.style.display='none';
y.className='module borderwrap';
x=document.getElementById('widgetbar');
x.appendChild(y);
jQuery(y).before('<div class="wmenu wrt" onclick="togglemenu(this.nextSibling)">Online Stats</div>');
}
});
</script>

If you have added the chatbox widget, insert this widget immediately above the chatbox widget. Otherwise, this should be the last widget. This script is very simplar to the chatbox widget script. The only difference is that the chatbox widget script created its own block immediately after the chatbox tab, where this script finds the online stats block and moves it to immediately after the online stats tab.

The online stats area was designed to be displayed as a page-level element, not as a pop-up, so it will need some CSS to make it look good:

#widgetbar #fo_stat {right: 0px; width: 500px;}
#fo_stat thead th, #fo_stat td.row1, #fo_stat div.expand, #fo_stat div.contract {display: none;}

This CSS removes the "statlinks", the expand/contract tabs, and the description images. The expand/contract tabs should not be displayed and remain in the above CSS, but if you want the statlinks or description images, remove them from the above CSS. If you prefer a wider/narrower stats pop-up, adjust the width accordingly.

Also note that if you move this tab to another location, you should change the right: value accordingly.

That's it! Enjoy your Biodynamic Tabs! :D

Next up: a drop-down navbar!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 7: Online Stats Pop-Up
Posted December 17th 2011, 3:17am
can i see example pict ?
φ
Posts:
Avatar
Guest
Example 7: Online Stats Pop-Up
Posted December 17th 2011, 1:00pm
Here is an example from a phpBB3 board:

Image
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 7: Online Stats Pop-Up
Posted December 17th 2011, 4:11pm
u mean the stat of who is online is pop up right ?
φ
Posts:
Avatar
Guest
1
#5
Example 7: Online Stats Pop-Up
Posted December 17th 2011, 6:07pm
After seeing that picture, can I recommend to users to try this addition to the CSS.

#widgetbar #fo_stat .corners-bottom,#widgetbar #fo_stat .corners-top{
display:none;
}

Which would just get rid of that untidy white corner near the bottom of the pop up.

Additionally you can add border-radius to the pop up to bring back those rounded corners for CSS3 supporting browsers.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 7: Online Stats Pop-Up
Posted January 13th 2012, 2:26am
so when is this going to come out for phpbb3
φ
Posts: 42
Joined: October 11th 2011, 11:00pm
Likes Given: 13
Likes Received: 1
Example 7: Online Stats Pop-Up
Posted January 13th 2012, 2:50am
Here's the script for phpBB3 boards:

<script type="text/javascript">
var CopyrightNotice = 'Pop-up online stats widget for forumotion phpBB3 boards. Copyright © 2012 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

jQuery(function() {
var x=document.getElementById('i_whosonline');
if (x) {
x=x.previousSibling;
var y=document.createElement('DIV');
y.id='fo_stat';
y.className='module';
y.style.display='none';
while (x!=document.getElementById('picture_legend')) {
x=x.nextSibling;
y.appendChild(x.previousSibling);
}
x=document.getElementById('widgetbar');
x.appendChild(y);
jQuery(y).append('<span class="corners-bottom"><span></span></span>');
jQuery(y).prepend('<span class="corners-top"><span></span></span>');
jQuery(y).before('<div style="position:absolute;right:115px;top:15px;" class="wmenu" onclick="togglemenu(this.nextSibling)">Online Stats</div>');
}
});
</script>

And here's the one line of CSS you'll need:

#widgetbar #fo_stat {right: 0px; width: 500px;}

Was that fast enough for you? :P
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 7: Online Stats Pop-Up
Posted January 14th 2012, 6:44am
yes that's was pretty fast but isn't working .. this is the forum i don't now why , i activated the chatbox http://sasutest.forumgratuit.ro/
φ
Posts: 42
Joined: October 11th 2011, 11:00pm
Likes Given: 13
Likes Received: 1
Example 7: Online Stats Pop-Up
Posted January 14th 2012, 12:32pm
You must install the Widget Bar from Example 5 in order for this example to work.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Regarding pop up stats
Posted January 21st 2012, 11:00pm
I can't seem to post in that section, sorry for creating a new thread here, in regards to the above thread...

Where do I post the code for phpBB3??? Do I need to create another widget (I have example 5 done) or is it a new javascript???

Please help as this would eliminate a few of the buttons I have been using in the pop up and make my forum look much better!
φ
Posts:
Avatar
Guest
Example 7: Online Stats Pop-Up
Posted January 21st 2012, 11:32pm
The code goes into the Homepage Message.

You can now post in the Javascript 101 forum, so this topic will be merged into the Example 7 topic. I have no idea why new members lost the ability to post in that topic. There have been a lot of these random ACP-related changes happening recently. Makes me wonder if we're about to see a major server crash.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 7: Online Stats Pop-Up
Posted January 21st 2012, 11:57pm
Forgive me Dion, I've been working a very long set of nights this week and am really tired LOL! But where is the Homepage message?


Probably a really stupid question I know.... Image
φ
Posts:
Avatar
Guest
Example 7: Online Stats Pop-Up
Posted January 22nd 2012, 12:17am
ACP > Display > Generalities
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 7: Online Stats Pop-Up
Posted January 22nd 2012, 12:18am
See, told ya!

Thanks a mill man ;)
φ
Posts:
Avatar
Guest
Example 7: Online Stats Pop-Up
Posted January 22nd 2012, 12:31am
Hi Dion,

Success!!! I take it that there is no way to force this widget to appear all of the time no? or is it ONLY on the homepage?
φ
Posts:
Avatar
Guest
Topic locked
15 posts

Who is online

Users browsing this forum: No registered users and 0 guests