Staff Online Widget Picture
4 posters
Page 1 of 1
Staff Online Widget Picture
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:
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.
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- New Member
- Posts : 5
Reputation : 1
Language : English
Location : PA
Re: Staff Online Widget Picture
Replace
with
and the else part like above, just an image that display Offline instead.
Remember that you need to use very small images.
- 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.
Re: Staff Online Widget Picture
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.
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- New Member
- Posts : 5
Reputation : 1
Language : English
Location : PA
Re: Staff Online Widget Picture
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.
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.
Re: Staff Online Widget Picture
Ah alright. I'll wait for your help.
Echo_Yokai- New Member
- Posts : 5
Reputation : 1
Language : English
Location : PA
Re: Staff Online Widget Picture
I been stumbling over reading the image id attribute a bit, but I managed to get it right.
I had to modify a bit, but it should work now.
Also, silly me, trying to write into an innerHTML property of null...
- 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...
Re: Staff Online Widget Picture
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
So only what's in between the script tags is visible to the public.
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- New Member
- Posts : 5
Reputation : 1
Language : English
Location : PA
Re: Staff Online Widget Picture
Hi echo, try to change this part
to this
- 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'+'">'; }
Re: Staff Online Widget Picture
Well, that works with changing the Online/Offline part, but the name is still there.
I'd like to hide the name Echo, and only have the Online/Offline picture there.
I'd like to hide the name Echo, and only have the Online/Offline picture there.
Echo_Yokai- New Member
- Posts : 5
Reputation : 1
Language : English
Location : PA
Re: Staff Online Widget Picture
i think you can't hide the name but you can make mix with your background
try this
try this
- Code:
.staffname{color:black;}
Re: Staff Online Widget Picture
-_- I'm so silly.
Then continue with the code given you had at first.
- 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.
Re: Staff Online Widget Picture
This is can be used in phpBB2 or no??
sasukekun- Forumember
- Posts : 253
Reputation : 6
Language : English
Re: Staff Online Widget Picture
where LG gives a tutorial about this, for phpBB2.??
I will try it ._.
thanks
I will try it ._.
thanks
sasukekun- Forumember
- Posts : 253
Reputation : 6
Language : English
Similar topics
» Staff Online Widget
» Staff online Widget
» online widget staff
» Staff online widget
» Staff online widget
» Staff online Widget
» online widget staff
» Staff online widget
» Staff online widget
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum