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.

Modify Staff Online Widget

View previous topic View next topic Go down

Solved Modify Staff Online Widget

Post by P-Robs on June 5th 2013, 3:59 am

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.


Last edited by P-Robs on June 7th 2013, 3:42 am; edited 1 time in total

P-Robs
Forumember

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

http://hieraticskyacademy.forumotion.com/

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by Nostra on June 5th 2013, 9:01 am

Designer's habits:
Ew. You really have to do smth with your text effects on logo and this kind of images. I advise you to disable filter 'bevel and emboss' and choose a more readable font.

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
Forumember

Female Posts : 30
Reputation : 3
Language : .it
Location : Neverland

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by P-Robs on June 5th 2013, 2:14 pm

@Nostra wrote:
Designer's habits:
Ew. You really have to do smth with your text effects on logo and this kind of images. I advise you to disable filter 'bevel and emboss' and choose a more readable font.

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="'+'http://imageshack.us/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.

P-Robs
Forumember

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

http://hieraticskyacademy.forumotion.com/

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by Nostra on June 6th 2013, 5:18 am

Lalala...:
omg, in this case u should do smth with ur designer.

If I were you I would choose an existing skin on hitskin and just place your logo... But I'm a designer and do all styles by myself Razz

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.

Nostra
Forumember

Female Posts : 30
Reputation : 3
Language : .it
Location : Neverland

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by P-Robs on June 6th 2013, 4:16 pm

Continued Design Convo:
Thank you for the criticism. I don't necessarily want to use something that someone else is using (Hitskin). The intent is for this forum to be a one of a kind since there are multitudes of forums that are created for the same purpose as my own. For this reason, I want a custom theme for my forum. It is also the same reason why my forum is currently 'locked' and not allowing new members. I will probably be looking into the hitskins further to see if there is anything that I like. If you wish, feel free to come up with some things for me via PM.

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.

P-Robs
Forumember

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

http://hieraticskyacademy.forumotion.com/

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by Nostra on June 7th 2013, 2:04 am

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>

Nostra
Forumember

Female Posts : 30
Reputation : 3
Language : .it
Location : Neverland

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by P-Robs on June 7th 2013, 3:43 am

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

P-Robs
Forumember

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

http://hieraticskyacademy.forumotion.com/

Back to top Go down

Solved Re: Modify Staff Online Widget

Post by SLGray on June 7th 2013, 4:41 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36751
Reputation : 2449
Language : English
Location : United States

http://ztwds.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