How to show/hide who is online?
iamthestreets at 21h12
17
Jan
2012
How can I add a show/hide button for "who is online?" section?
1 Rideem3, on 17/01/2012 at 21h38
Do you want to automatically hide it, and then have a button to show it?
Or do you want to show it a add a button that will hide it?
Or do you want to show it a add a button that will hide it?
2 iamthestreets, on 17/01/2012 at 21h51
Rideem3 wrote:Do you want to automatically hide it, and then have a button to show it?
Or do you want to show it a add a button that will hide it?
Automatically hide it, and then have a button to show it.
3 Rideem3, on 17/01/2012 at 22h14
First go to Admin Panel -> Display -> Templates -> General -> index_body
Find:
Replace it with:
Save & Publish
Find:
- Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catHead" colspan="2" height="28">
<!-- BEGIN switch_viewonline_link -->
<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<span class="cattitle">{L_WHO_IS_ONLINE}</span>
<!-- END switch_viewonline_nolink -->
</td>
</tr>
<tr>
<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr>
<td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
Replace it with:
- Code:
<!-- BEGIN disable_viewonline -->
<script type="text/javascript">
function showstats() {
$(document).ready(function() {
$('.hiddenstat').show('slow');
});
document.getElementById('showS').style.display = "none";
document.getElementById('hideS').style.display = "inline-block";
}
function hidestats() {
$(document).ready(function() {
$('.hiddenstat').hide('slow');
});
document.getElementById('showS').style.display = "inline-block";
document.getElementById('hideS').style.display = "none";
}
</script>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catHead" colspan="2" height="28">
<!-- BEGIN switch_viewonline_link -->
<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a> | <input type="button" value="Show Statistics" onclick="showstats()" id="showS"/><input style="display: none;" type="button" value="Hide Statistics" onclick="hidestats()" id="hideS" /></span>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<span class="cattitle">{L_WHO_IS_ONLINE}</span>
<!-- END switch_viewonline_nolink -->
</td>
</tr>
<tr style="display: none;" class="hiddenstat">
<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr style="display: none;" class="hiddenstat">
<td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
<tr style="display: none;" class="hiddenstat">
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr style="display: none;" class="hiddenstat">
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
Save & Publish
4 LGforum, on 17/01/2012 at 22h21
This:
Can be shortened to this:
Which would mean changing this:
to this:
less code = better
A toggling function is better than having two seperate function. Also, you don't need to start a jQuery function within a Javascript function as this function does not require the DOM to be loaded. (well it does, but it will only execute on click ... so it doesn't)
- Code:
<script type="text/javascript">
function showstats() {
$(document).ready(function() {
$('.hiddenstat').show('slow');
});
document.getElementById('showS').style.display = "none";
document.getElementById('hideS').style.display = "inline-block";
}
function hidestats() {
$(document).ready(function() {
$('.hiddenstat').hide('slow');
});
document.getElementById('showS').style.display = "inline-block";
document.getElementById('hideS').style.display = "none";
}
</script>
Can be shortened to this:
- Code:
<script type="text/javascript">
function togglestats() {
var x=document.getElementById('showS').style.display = "none";
if (x.style.display!='none') {
$('.hiddenstat').show('slow');
x.style.display = "none";
document.getElementById('hideS').style.display = "inline-block";
} else {
$('.hiddenstat').hide('slow');
x.style.display = "inline-block";
document.getElementById('hideS').style.display = "none";
}
</script>
Which would mean changing this:
- Code:
<input type="button" value="Show Statistics" onclick="showstats()" id="showS"/><input style="display: none;" type="button" value="Hide Statistics" onclick="hidestats()" id="hideS" /></span>
<!-- END switch_viewonline_link -->
to this:
- Code:
<input type="button" value="Show Statistics" onclick="togglestats()" id="showS"/><input style="display: none;" type="button" value="Hide Statistics" onclick="togglestats()" id="hideS" /></span>
<!-- END switch_viewonline_link -->
less code = better
A toggling function is better than having two seperate function. Also, you don't need to start a jQuery function within a Javascript function as this function does not require the DOM to be loaded. (well it does, but it will only execute on click ... so it doesn't)
5 Rideem3, on 17/01/2012 at 22h23
Never thought of using an if statement. Thanks Lgforum
6 iamthestreets, on 17/01/2012 at 22h27
This is what it shows:
This is what it shows when I click the button:
All it does is change the text of the button.
The second code LGForum gave me doesn't do anything and it takes away the who is online? text.
I like the first code better but its not working 100%, but i will use either one if it show the who is online? text
This is what it shows when I click the button:
All it does is change the text of the button.
The second code LGForum gave me doesn't do anything and it takes away the who is online? text.
I like the first code better but its not working 100%, but i will use either one if it show the who is online? text
7 Rideem3, on 17/01/2012 at 22h28
Actually, the reason why it's displaying the birthday is because it's displayed as a PHP variable. For some reason I can't give it the class I gave the others.
Edit: Also make sure that the "$" didn't change to the html value. It would look like:
Edit: Also make sure that the "$" didn't change to the html value. It would look like:
- Code:
$ ;
8 LGforum, on 17/01/2012 at 22h30
iamthestreets wrote:This is what it shows:
The second code LGForum gave me doesn't do anything and it takes away the who is online?
Lol woops. Thats because there was a slight silly error in it. It should have been this:
- Code:
<script type="text/javascript">
function togglestats() {
var x=document.getElementById('showS');
if (x.style.display!='none') {
$('.hiddenstat').show('slow');
x.style.display = "none";
document.getElementById('hideS').style.display = "inline-block";
} else {
$('.hiddenstat').hide('slow');
x.style.display = "inline-block";
document.getElementById('hideS').style.display = "none";
}}
</script>
EDIT: this code above now works perfectly.
9 iamthestreets, on 17/01/2012 at 22h32
Rideem3 wrote:Actually, the reason why it's displaying the birthday is because it's displayed as a PHP variable. For some reason I can't give it the class I gave the others.
That I don't mind showing, but when i click the button to show statistics it does nothing.
(if you could hide the birthday info that would be cool too)
10 Rideem3, on 17/01/2012 at 22h33
iamthestreets wrote:Rideem3 wrote:Actually, the reason why it's displaying the birthday is because it's displayed as a PHP variable. For some reason I can't give it the class I gave the others.
That I don't mind showing, but when i click the button to show statistics it does nothing.
(if you could hide the birthday info that would be cool too)
I edited my last post, make sure that the "$" in the JavaScript doesn't change to something like:
- Code:
$ ;
11 iamthestreets, on 17/01/2012 at 22h34
LGforum wrote:iamthestreets wrote:This is what it shows:
The second code LGForum gave me doesn't do anything and it takes away the who is online?
Lol woops. Thats because there was a slight silly error in it. It should have been this:
- Code:
<script type="text/javascript">
function togglestats() {
var x=document.getElementById('showS');
if (x.style.display!='none') {
$('.hiddenstat').show('slow');
x.style.display = "none";
document.getElementById('hideS').style.display = "inline-block";
} else {
$('.hiddenstat').hide('slow');
x.style.display = "inline-block";
document.getElementById('hideS').style.display = "none";
}}
</script>
EDIT: this code above now works perfectly.
Thanks it worked, but is there any way to put the "Who is Online?" text back?
This it what it shows as now:
Can it show like this:
And is there any way possible to remove the birthday info?
12 LGforum, on 17/01/2012 at 22h39
You can remove the birthday info by adding this in the CSS:
To toggle it with the rest of the stuff add this to the script:
underneath where it says:
function togglestat() {
- Code:
.hiddenstat+tr{display:none;}
To toggle it with the rest of the stuff add this to the script:
- Code:
$( $('.hiddenstat')[1].nextSibling ).toggle();
underneath where it says:
function togglestat() {
13 iamthestreets, on 17/01/2012 at 22h41
iamthestreets wrote:LGforum wrote:iamthestreets wrote:This is what it shows:
The second code LGForum gave me doesn't do anything and it takes away the who is online?
Lol woops. Thats because there was a slight silly error in it. It should have been this:
- Code:
<script type="text/javascript">
function togglestats() {
var x=document.getElementById('showS');
if (x.style.display!='none') {
$('.hiddenstat').show('slow');
x.style.display = "none";
document.getElementById('hideS').style.display = "inline-block";
} else {
$('.hiddenstat').hide('slow');
x.style.display = "inline-block";
document.getElementById('hideS').style.display = "none";
}}
</script>
EDIT: this code above now works perfectly.
Thanks it worked, but is there any way to put the "Who is Online?" text back?
This it what it shows as now:
Can it show like this:
And is there any way possible to remove the birthday info?
I figured this out.
14 iamthestreets, on 17/01/2012 at 22h43
LGforum wrote:You can remove the birthday info by adding this in the CSS:
- Code:
.hiddenstat+tr{display:none;}
Perfect! Thanks! You guys are awesome and thanks for the quick responses.
15 Nera., on 17/01/2012 at 22h48
| Topic Solved & Locked |
Similar topics
Widgets are sometimes annoying, aren't they? But we all want to keep them, so we can see top posters, list of online users, affiliates and much more!
You can now do both!
Just click the blue arrow with grey background where widgets should be placed
How can I show / hide content and have it shown / hidden when the page is refreshed or revisited?
I have a toolbar in my forum. If someone presses a button, the toolbar will disappear. If they go to, per say a topic, the toolbar will still be hidden.
on the bottom of Log me on automatically each visit you can cheak Hide my online status this session you will not be shown on who is online, but you can still post
Replies 1 to 15 on 15 for "How to show/hide who is online?"
Search
See also
Informations
15 Replies For the topic :
"How to show/hide who is online?"
This topic has been viewed 621 times.
Last message :
17/01/2012 at 21h12 by "iamthestreets"
