I am struggling to find a solution for displaying an image indicating the online status of users in a list using regular HTML select tags. I have no problem adding options for each user, but changing the image/status indicator dynamically without refreshing the page is where I am facing issues.
To make it easier to understand my requirement, I have created an image that illustrates what I am aiming for. My main concern is setting a picture for each user without hardcoding the user list in the HTML as the users will be populated from database queries.
Just for context, I am utilizing Node.js and socket.io for managing the online aspect of this project.
Reference image:
Edit: Here is a JSFiddle showcasing a similar design of the user list from my website (unable to provide a direct link due to server restrictions): http://jsfiddle.net/Blubberguy22/LN45a/28/
HTML:
<body>
<div id="usersOptions" style="background-color: #ddeeff; left: 0; top: 0; position:absolute;
height:260px; width:230px; border-style:inset;
border-width: 0px; margin: 0; z-index: 300; "> <strong>Users Online:</strong>
<select id='userList' style="width: 100%; height: 100%;" multiple></select>
<button id='makeFakeUser' onclick="addUser();">AddUser</button>
</body>
Javascript:
function addUser() {
//In actual code gets users from connections within socket.io
var option = document.createElement("option");
option.text = "A person";
userList.add(option);
}
Just to clarify, I don't need help with getting the online status of the users, but with putting the status indicators next to them in the list.