Looks good I'll give it a whirl.
Maybe I can mix and match with mousetrap.
mousetrap allows you to use a shortcut to activate a button or whatever you want it to, I like it just couldn't figure out how to get one row and cells into it.
Here is the full code I used from clouds for the other ones.
The html part
Code: Select all
<div id="table-wrapper">
<div id="table-scroll">
<table class="table-condensed" id="users">
</table>
</div>
</div>
The mousetrap part
Code: Select all
<script>
init();
Mousetrap.bind('up', function() {
select_user(selected_row - 1);
});
Mousetrap.bind('down', function() {
select_user(selected_row + 1);
});</script>
so it scrolls through the users using the up and down arrows, nice and easy.
In the add mdm users function
Code: Select all
function mdm_add_user(username, gecos, status) {
var link1 = document.createElement('a');
link1.setAttribute('href', "javascript:alert('USER###"+username+"')");
link1.setAttribute('class', "highlight-border tilt user-info");
var link2 = document.createElement('a');
link2.setAttribute('href', "javascript:alert('USER###"+username+"')");
var picture = document.createElement('img');
picture.setAttribute('class', "user-picture");
picture.setAttribute('src', "file:///home/"+username+"/.face");
picture.setAttribute('onerror', "this.src='file:///usr/share/pixmaps/nobody.png';");
var realname_div = document.createElement('div');
realname_div.setAttribute('class', "usergecos");
realname_div.innerHTML = gecos;
var username_div = document.createElement('div');
username_div.setAttribute('class', "username");
username_div.innerHTML = username;
if (status != "") {
var userstatus_div = document.createElement('div');
userstatus_div.setAttribute('class', "userstatus");
userstatus_div.innerHTML = status;
}
link1.appendChild(picture);
if (gecos != "") {
link2.appendChild(realname_div);
}
else {
link2.appendChild(username_div);
}
if (status != "") {
link2.appendChild(userstatus_div);
}
var table = document.getElementById("users");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.username = username;
var cell1 = row.insertCell(0);
cell1.width = "64px";
cell1.appendChild(link1);
var cell2 = row.insertCell(1);
cell2.appendChild(link2);
}
works great but puts a new cell into a separate row, this is where I get the issue, it needs to have all cells go into one row instead.
and the scroll through code for the users to select them
Code: Select all
function select_user(index) {
var table = document.getElementById("users");
var rowCount = table.rows.length;
var row_to_select = index % rowCount;
if (row_to_select < 0) {
row_to_select = rowCount - 1;
}
for (var i = 0, row; row = table.rows[i]; i++) {
row.style.backgroundColor = 'rgba(80,80,80,0.0)';
}
var row = table.rows[row_to_select];
row.style.backgroundColor = 'rgba(80,80,80,0.5)';
selected_row = row_to_select;
alert('USER###'+row.username);
}
it works great for vertical, as it creates a new row for every users, now I just got to find a way to create a table, put one row only in it and add cells into it for each users instead of rows so it lays out horizontal instead.
I really like this code and would like to keep it, just change it for cells .
I'm going to fool around with yours and this one and see if I can figure it out by mixing and matching things up.
Thanks for this I appreciate it a lot
Sam
onto other things for me, this one good, no need to make another one, which I'm glad because mine never worked out anyhow.
