The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Staff Online Widget Picture

4 posters

Go down

Staff Online Widget Picture Empty Staff Online Widget Picture

Post by Echo_Yokai May 3rd 2013, 9:12 am

I have a working staff online widget, everything is set up in the right place, all that stuff. It works fine. (Followed this thread: http://www.avacweb.com/t114-online-list-widget) However, I'd like to know if it is possible to use an image to represent a member, rather than just the text.

For example, rather than it saying in regular text 'Echo - Online'

I'd like to replace all of that with an image, like an avatar for example. In that image it will say Online/Offline, just as part of each image.

This is what I'm using:

Code:

<div id="onlineStaff">
<span class="staffname">Echo</span>
</div>
<script>
jQuery(function() {
  var x = jQuery('.module', document.getElementById('right'))[1].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"; }
  }
});
</script>

If having an image represent whether or not a staff member is online or offline isn't possible, I'd at least like to trade out the regular text name 'Echo', and use an image there instead. So it would be [Image] - Online.

Everything I tried didn't seem to work. If there is a thread that already explains how to do this, then sorry, I may have overlooked it while searching.
Echo_Yokai
Echo_Yokai
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : PA

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Ultron's Vision May 3rd 2013, 9:49 am

Replace

Code:

// lots of code omitted, just paste it here
.innerHTML += "- Online"
// more code omitted

with

Code:

// as above
.innerHTML += "- <img src='enter your valid image URL here' />"
// as above

and the else part like above, just an image that display Offline instead.

Remember that you need to use very small images.
Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Echo_Yokai May 3rd 2013, 11:23 am

Well, that works, however that only replaces the '- Online' or '- Offline' part.

What I'd like to do is change the staff name, being 'Echo' into an image, but still have the code recognize it as the name Echo, that way it still picks up whether that name is online or offline.

If anything, maybe hide the name Echo completely, that way it only shows the image I put there, but still recognizes the name Echo as being online or offline.
Echo_Yokai
Echo_Yokai
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : PA

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Ultron's Vision May 3rd 2013, 11:52 am

You could do so, yes.

Simply put in your image and give it a class attribute of "Echo".

You would need to modify the code for that, though, I could do that for you when I get back home in about 2 hours.
Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Echo_Yokai May 3rd 2013, 12:40 pm

Ah alright. I'll wait for your help.
Echo_Yokai
Echo_Yokai
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : PA

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Ultron's Vision May 3rd 2013, 3:47 pm

I been stumbling over reading the image id attribute a bit, but I managed to get it right.

Code:
<div id="onlineStaff">
<span class="staffname"><img id="echo" src="http://r29.imgfast.net/users/3412/19/22/63/avatars/89636-69.png" /></span>
</div>
<script>
jQuery(function() {
  var x = jQuery('.module', document.getElementById('right'))[1].innerHTML;
  var y = jQuery('.staffname', document.getElementById('onlineStaff'));
  for (var i=0, l = y.length; i<l; i++) {
    if (x.indexOf(y[i].getAttribute('id').toString()) > 0) {
      y[i].innerHTML+=" <br> Online";
    }
    else { y[i].innerHTML+=" <br> Offline"; }
  }
});
</script>

I had to modify a bit, but it should work now.

Also, silly me, trying to write into an innerHTML property of null...
Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Echo_Yokai May 3rd 2013, 11:24 pm

I'm not entirely sure if it works or not. The Offline/Online part is hidden, and it only shows an image now. Just the image for the name. Would it be possible at all to completely hide the name 'Echo', but use 2 different images to represent whether Echo is online or offline?

For example there wouldn't be any text, not even the name Echo, but change out 'Online' for example, with http://media.moddb.com/images/members/1/328/327378/Female_Anime_Avatar_50x50_3_by.png

And 'Offline' with http://fc04.deviantart.net/fs8/i/2005/297/d/f/Female_Anime_Avatar_50x50___4_by_Taisu.png

That way there is no visible text on the widget, but it still picks up the name Echo on the user list. The images themselves would represent whether that user is online or offline.

I guess in a way, making this part invisible
Code:

<span class="staffname"><img id="echo" src="http://r29.imgfast.net/users/3412/19/22/63/avatars/89636-69.png" /></span>

So only what's in between the script tags is visible to the public.
Echo_Yokai
Echo_Yokai
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : PA

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by tommycoo May 4th 2013, 12:55 am

Hi echo, try to change this part
Code:
      y[i].innerHTML+=" - Online";
    } else { y[i].innerHTML+=" - Offline"; }

to this
Code:
      y[i].innerHTML+=' <img src="'+'http://media.moddb.com/images/members/1/328/327378/Female_Anime_Avatar_50x50_3_by.png'+'">';
    } else { y[i].innerHTML+='<img src="'+'http://fc04.deviantart.net/fs8/i/2005/297/d/f/Female_Anime_Avatar_50x50___4_by_Taisu.png'+'">'; }

Very Happy
tommycoo
tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Echo_Yokai May 4th 2013, 2:13 am

Well, that works with changing the Online/Offline part, but the name is still there.

Staff Online Widget Picture Untitled_zpsc49ff85b

I'd like to hide the name Echo, and only have the Online/Offline picture there.
Echo_Yokai
Echo_Yokai
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : PA

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by tommycoo May 4th 2013, 3:43 am

i think you can't hide the name but you can make mix with your background Smile

try this
Code:
.staffname{color:black;}
tommycoo
tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Ultron's Vision May 4th 2013, 11:51 am

-_- I'm so silly.

Code:
<span class="staffname" style="display:none;">Echo <img src="http://r29.imgfast.net/users/3412/19/22/63/avatars/89636-69.png" style="display:block !important;" /></span>

Then continue with the code given you had at first.
Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by sasukekun May 4th 2013, 12:15 pm

This is can be used in phpBB2 or no??

Smile
sasukekun
sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Ultron's Vision May 4th 2013, 12:38 pm

LGforum provided a way how to do this with phpBB2, yes.
Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by sasukekun May 4th 2013, 12:40 pm

where LG gives a tutorial about this, for phpBB2.?? Smile

I will try it ._.
thanks
sasukekun
sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

Staff Online Widget Picture Empty Re: Staff Online Widget Picture

Post by Ultron's Vision May 4th 2013, 1:09 pm

Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Back to top

- Similar topics

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