Modify Staff Online Widget

After figuring out how to make this widget possible, I'd like to know if it can be modified to not show members who are currently offline. I intend to use profile images to go along with the names of the staff members, but in doing this, too much space will be taken up. So I have resorted to the idea of this new parameter.

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>

Thanks in advance.

Designer's habits:

Use such a code:

Code:

<style>.staffname{display:none}</style><div id="onlineStaff">
Staff online:
<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].style.display ='block';
} });
 </script>

But this uses statistics widget which is needed to be placed at the top.
The code is too primitive...

Tell us if all this works.

Nostra wrote:

Designer's habits:

CODE REMOVED FROM QUOTE

But this uses statistics widget which is needed to be placed at the top.
The code is too primitive...

Tell us if all this works.

Firstly, I welcome the criticism on the imagery and will consider having my graphics designer redesign. Secondly, The code you provided did not perform the way I am wanting. I still want the images that I provided in the code to be in the widget. Your code does not remove the usernames that are currently offline. All I am wanting is for it to not display the names unless they are online.

I am thinking that if this portion of the jquery is modified, else y[i].innerHTML+=' <img src="'+'https://2img.net/r/ihimg/a/img812/4033/offlinezn.png'+'">';, then it should work properly. But I am unable to figure it out. If anyone is able to help, I'd sure appreciate it.

Lalala...:

Whoops, it needs "Who is online" widget, not "Statistics" XD

I gonna make some tests and write my own code...
...and I wrote it.

I have such a code (grab it):

Code:

<style>
#onlinestaff a {
  display: none;
}
</style><div id="onlinestaff">
<b>Staff online:</b>
<a href="http://your.forum.com/u1">Admin</a>
<a href="http://your.forum.com/u2">A guy</a>
<a href="http://your.forum.com/u3">Another guy</a>
<a href="http://your.forum.com/u4">And one more</a>
</div>

<script type="text/javascript">
jQuery(document).ready (function () {
  jQuery('table.forumline').not('#left .forumline').not('#right .forumline').last().find('tr:eq(2) span.gensmall a').each(function () {
    jQuery('#onlinestaff a[href="' + this.href + '"]').css('display','block');
  });
});
</script>

And, having only Admin user online, I get a such picture:


This needs to be placed in adminpanel - display - homepage - generalities - Homepage message.
Give links to needed users:

Code:

<a href="http://your.forum.com/u1">Admin</a>

This code searches for links but not for usernames. It uses your statistics table at the bottom of your home page.

If you need I can adapt it so it will work on other pages too.

Avatar images can be added too.

Continued Design Convo:

I am trying out your newest code at this time. I would also like to inform you that there is more coding involved with this widget/application. So I am hoping that nothing conflicts.

You stated that avatars can be used. In order to accommodate for this, would i replace the name used with the avatar image, or would I have to keep the name and insert the URL?

Update: The script is working correctly. However, when the panel is opened to show users status, a line goes all the way across beneath the name. Can this be removed? Also, if I deviate away from the homepage, it no longer shows any of the online users. This proves to be a big problem, for if it does this to me while I am browsing the forums, then it is doing the same for the regular members. Therefore, if they are browsing a topic, and they notice that something is wrong, they wont be able to see who is online unless they return to the homepage.

a line goes all the way across beneath the name. Can this be removed?

These stylesheets create the border:

You should delete 4 lines starting with 'border-bottom'.

In order to accommodate for this, would i replace the name used with the avatar image, or would I have to keep the name and insert the URL?

Just add an image tag, like this:

Code:

<a href="http://hieraticskyacademy.forumotion.com/u3" style="display: block; ">
<img src="http://r21.imgfast.net/users/2117/33/06/02/avatars/3-73.jpg"><br>
t3st3rd3ck
</a>

if I deviate away from the homepage, it no longer shows any of the online users.

Try replacing the script tag with this one:

Code:


<script type="text/javascript">
jQuery(document).ready (function () {
  jQuery('#left .forumline:eq(0) .row1 a').each(function () {
    jQuery('#onlinestaff a[href="' + this.href + '"]').css('display','block');
  });
});
</script>

Thank you so much!!! I know now to contact you when I need help!