The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Staff online widget

View previous topic View next topic Go down

Staff online widget

Post by Willsr71 on Mon 27 May 2013, 08:08

I have tried adding a Staff widget to my forums several times and it always says that both staff are offline, including me. Link to my forums: [socm.forum.net.bz/forum]
Here is the code I have now:

Code:
<style>.staffname{display:block}</style><div id="onlineStaff">
<span class="staffname" style="color:#FF0000"><strong>FiskFille</strong></span>
<span class="staffname" style="color:#FF0000"><strong>Willsr71</strong></span>
</div>

<script>
jQuery(function()
{
var x = jQuery('.module', document.getElementById('right'))[0].innerHTML;
var y = jQuery('.staffname', document.getElementById('onlineStaff'));
  for (var i=0, l = y.length; i<l; i++)
  {
    if (x.indexOf(y[i].innerHTML) > 0)
    {
      y[i].innerHTML+=" - Online";
    } else {
      y[i].innerHTML+=" - Online";
    }
  }
});
</script>

Also I am trying to hide the who is online widget with this code in the JavaScript codes admin panel, and it is not working ether.
Code:
jQuery(document).ready(function(){

jQuery('#right table:nth-of-type(8)').css('display','none');

});


Last edited by Willsr71 on Tue 28 May 2013, 23:27; edited 1 time in total

Willsr71
New Member

Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: Staff online widget

Post by JAN2XONLINE on Mon 27 May 2013, 08:47

The widget with this code below should be in the fourth block in your widget management.

Code:
<style>.staffname{display:block}</style><div id="onlineStaff">
<span class="staffname">FiskFille</span>
<span class="staffname">Willsr71</span>
</div>

<script type="text/javascript">
jQuery(function() {
  var x = document.getElementById('right').getElementsByTagName('table')[8];
  var y = document.getElementById('onlineStaff').getElementsByTagName('span');
  for (i=0; i<y.length; i++) {
    if (x.innerHTML.indexOf(y[i].innerHTML) > 0) y[i].innerHTML+=" - Online";
    else y[i].innerHTML+=" - Offline";
  }
});
</script>

Like this:


My "Staff Online" widget is the fourth block. Try that and see if it works.

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Re: Staff online widget

Post by Willsr71 on Mon 27 May 2013, 16:42

@JAN2XONLINE wrote:The widget with this code below should be in the fourth block in your widget management.

~Snip~

My "Staff Online" widget is the fourth block. Try that and see if it works.
No it doesn't even show the " - Online" piece after it. Just the usernames. And how did you hide the who is online widget on your forums?

Willsr71
New Member

Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: Staff online widget

Post by Sandara on Tue 28 May 2013, 12:11

For this part:

Code:

jQuery(function() {
  var x = document.getElementById('right').getElementsByTagName('table')[8];
  var y = document.getElementById('onlineStaff').getElementsByTagName('span');
  for (i=0; i<y.length; i++) {
    if (x.innerHTML.indexOf(y[i].innerHTML) > 0) y[i].innerHTML+=" - Online";
    else y[i].innerHTML+=" - Offline";
  }
});

Try this:

Code:

 jQuery(function() {
          var x = jQuery('.module', document.getElementById('right'))[0].innerHTML;
          var y = jQuery('.staffname', document.getElementById('onlineStaff'));
          for (var i=0, l = y.length; i<l; i++) {
            if (x.indexOf(y[i].innerHTML) > 0) {
             
      y[i].innerHTML+=" - Online";
    } else { y[i].innerHTML+=" - Offline"; }
          }
        });

THat's what I used for my widget. Hope that helps.

Sandara
Forumember

Female Posts : 106
Reputation : 5
Language : English, Filipino
Location : Somewhere over the rainbow

Back to top Go down

Re: Staff online widget

Post by Willsr71 on Tue 28 May 2013, 23:20

@Sandara wrote:For this part:

~Snip~

THat's what I used for my widget. Hope that helps.

I used that, but now instead of saying offline all the time it says everyone is online all the time now. I also switched out the " - Online" " - Offline" part for images and made the names red as you can see in the code, but that was after I tested the code you gave me.

Code:
<style>.staffname{display:block}</style><div id="onlineStaff">
<span class="staffname" style="color:#FF0000"><strong>FiskFille</strong></span>
<span class="staffname" style="color:#FF0000"><strong>Willsr71</strong></span>
</div>

<script>
jQuery(function()
{
var x = jQuery('.module', document.getElementById('right'))[0].innerHTML;
var y = jQuery('.staffname', document.getElementById('onlineStaff'));
  for (var i=0, l = y.length; i<l; i++)
  {
    if (x.indexOf(y[i].innerHTML) > 0)
    {
      y[i].innerHTML+='<img style="float: left;" src="New members not allowed to post external links for 7 days. -.-">';
    } else {
      y[i].innerHTML+='<img style="float: left;" src="New members not allowed to post external links for 7 days. -.-">';
    }
  }
});
</script>

Willsr71
New Member

Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: Staff online widget

Post by Willsr71 on Wed 29 May 2013, 22:08

bump

Willsr71
New Member

Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: Staff online widget

Post by Sandara on Thu 30 May 2013, 01:49


Sandara
Forumember

Female Posts : 106
Reputation : 5
Language : English, Filipino
Location : Somewhere over the rainbow

Back to top Go down

Re: Staff online widget

Post by P-Robs on Sat 01 Jun 2013, 03:15

I'm having trouble understanding the instructions provided via avacweb. I would also like to have this option where it is floating on all pages. Any help would be appreciated.

Forum URL :: http://hieraticskyacademy.forumotion.com/
Test account :: Name - HSA123 :: Password :: HSATest123

UPDATE: I was able to figure out what was going on wrong. I also was able to replace the wording with the images of choice. I will be updating again shortly with codes that I used and instructions on how to modify so that you can move the widgets to your choice of location.

2ND Update: The following code is what I used for my phpBB2 Forum. For those who have other version, you may feel free to try it out your own forums.

You can place your 'Staff Online' Widget (I will refer to this widget as 'Staff Widget') where ever you wish. However, the placement of the default 'Who is online' Widget (I will refer to this widget as the 'Default Widget') must be in a set place. For the provided code, it must be the first widget on the left column. If you wish to have other widgets first, or to have placement in the right column, the JavaScript portion of the code can be modified to accommodate to your Forum.

The following code will all be placed into the new widget that are making/have made. I have broken it down so that you can see which portions to modify. Yes, even the JS goes inside your widget. No need to place any codes anywhere else unless you wish to have it further coded.

The first portion of the code is the HTML. Modify this to choose which members to show within your widget. You can add more span tags to accommodate to more members or less, whichever you need for your Forum. REMEMBER, names must be EXACTLY as they are within your forum. The second portion is the JavaScript. This portion is modified ONLY for placement of the Default Widget and any images you wish to use. The current images are the defaults from Forumotion.


Code:

<style>.staffname{display:block}</style><div id="onlineStaff">
<span class="staffname">MEMBER NAME</span>
<span class="staffname">MEMBER NAME</span>
<span class="staffname">MEMBER NAME</span>
<span class="staffname">MEMBER NAME</span>
<span class="staffname">MEMBER NAME</span>
</div>

<script type="text/javascript">
 jQuery(function() {
 var x = document.getElementById('left').getElementsByTagName('table')[1];
 var y = document.getElementById('onlineStaff').getElementsByTagName('span');
 for (i=0; i<y.length; i++) {
 if (x.innerHTML.indexOf(y[i].innerHTML) > 0) y[i].innerHTML+=' <img src="'+'http://imageshack.us/a/img198/4198/onlinebg.png'+'">';
 else y[i].innerHTML+=' <img src="'+'http://imageshack.us/a/img812/4033/offlinezn.png'+'">'; } });
 </script>

In order to change the location of the Default Widget, and to still have the Staff Widget functioning correctly, this portion of the code is what will need to be modified.
Code:
var x = document.getElementById('left').getElementsByTagName('table')[1];

'left' refers to which column your Default widget is in. At the end of this, [1] refers to the order of the widgets in that column. So if your Default widget is the 3rd widget in the right column, then change 'left' >> 'right' and [1] >> [3]. With this in mind, you can place your widgets accordingly.

In order to change the images being used for online status, modify the img src URL. The first URL is the Online image, & the second is the Offline image
Code:
<img src="'+'http://imageshack.us/a/img198/4198/onlinebg.png'+'">

If one correctly follows these steps, you should have a new widget that shows the members you chose and their online status. One can take the HTML portion MUCH further (as I did for my Forum) so that styles, colors, postlinks, etc. will be accommodated within the widget.

Again, these steps were used via a phpBB2 forum. If your version is different, feel free to try it and it MAY work. But don't be upset if they don't.

I hope that this tutorial is helpful to all who have been trying to figure out this script. Took me 3 and a half hours Wink

P-Robs
Forumember

Male Posts : 40
Reputation : 3
Language : English
Location : United States

http://hieraticskyacademy.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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