Oh yeah, I'm surprised no one had mentioned it yet but I think I figured out the source of my "bug". Turns out, certain changes to the DOM cause a "reflow" of the page. Changing an element's class attribute is one of the things that triggers a reflow.
While the class name is fast to change, the reflow is slow in Firefox (which helps explain why the code works "perfectly" in Chrome/Chromium).
It's very interesting. I think whatever I was doing was either pointing out a weakness in Firefox's rendering engine (take that, Mozilla!) or something is horribly wrong with my code. But I'm pretty it's Mozilla that screwed up and not me. Feels right.
I tried it on Firefox on a Windows machine and didn't really notice any lag. I did find a periodic bug that while tabbing to new select elements the old, focus out, element sometimes retains the color it had when selected. I couldn't reliably reproduce it though, and debugging "focus in-out" events is so annoying (you lose focus to the debugger) that I eventually gave up.
Also I don't know if anyone has mentioned it yet or not, but CSS3 has an "nth-child" pseudo-selector
that can be used to automatically style even and odd rows differently:
This should be easier as you don't need to keep track of it yourself. Although as currently written, I seem to remember tag selectors are slower than class ones (I'm no CSS expert though, I've only really learned it by accident :P).Code:tr:nth-child(even) { // colors for even rows } tr:nth-child(odd) { // colors for odd }
WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;
Nominal, that is a very interesting approach. I never looked at it that way. I suppose it works though. I tried it in Firefox and there was no weird after-lag. Your take on the hover event was actually really neat too. I like it. You're pretty good at styling these sorts of things.
Okay, this time the page is entirely re-done. Let me know what you guys think. I really, really stitched it together in a very horrendous way and I really don't know any CSS. Also, I'm having some trouble with the window.scrollTo() part...
names.js:
Code:var names = [ /*"MutantJohn", "Nominal Animal", "phantomotap", "Alpo", "Mario F.", "Salem", "grumpy"*/ "ADOLPH", "BAKER", "BARRAR", "BENNINGHOFF", "BLOOM", "BOBACK", "BROWN, R.", "CAUSER", "CHRISTIANA", "CORBIN", "COX", "CULVER", "CUTLER", "DAY", "DELOZIER", "DIAMOND", "DIGIROLAMO", "DUNBAR", "DUSH", "ELLIS", "EMRICK", "ENGLISH", "EVANKOVICH", "EVERETT", "FARRY", "FEE", "GABLER", "GILLEN", "GILLESPIE", "GINGRICH", "GODSHALL", "GREINER", "GROVE", "HAHN", "HARHART", "HARPER", "HARRIS, A.", "HEFFLEY", "HELM", "HENNESSEY", "HICKERNELL", "HILL", "IRVIN", "JAMES", "JOZWIAK", "KAMPF", "KAUFER", "KAUFFMAN", "KELLER, F.", "KELLER, M.K.", "KILLION", "KLUNK", "KNOWLES", "KRIEGER", "LAWRENCE", "LEWIS", "MACKENZIE", "MAHER", "MAJOR", "MALONEY", "MARSHALL", "MARSICO", "MASSER", "MCGINNIS", "MENTZER", "METCALFE", "METZGAR", "MICCARELLI", "MILLARD", "MILLER, B.", "MILNE", "MOUL", "MURT", "MUSTIO", "NESBIT", "O'NEILL", "OBERLANDER", "ORTITAY", "PARKER, D.", "PAYNE", "PEIFER", "PETRI", "PICKETT", "PYLE", "QUIGLEY", "QUINN", "RADER", "RAPP", "REED", "REESE", "REGAN", "ROAE", "ROSS", "SACCONE", "SANKEY", "SANTORA", "SAYLOR", "SCHEMEL", "SIMMONS", "SONNEY", "STAATS", "STEPHENS", "TALLMAN", "TAYLOR", "TOBASH", "TOEPEL", "TOOHIL", "TOPPER", "TRUITT", "VEREB", "WARD", "WARNER", "WATSON", "WENTLING", "WHEELAND", "WHITE", "ZIMMERMAN", "ACOSTA", "BARBIN", "BISHOP", "BIZZARRO", "BOYLE", "BRADFORD", "BRIGGS", "BROWN, V.", "BROWNLEE", "BURNS", "CALTAGIRONE", "CARROLL", "COHEN", "CONKLIN", "COSTA, D.", "COSTA, P.", "CRUZ", "DALEY, M.", "DALEY, P.", "DAVIDSON", "DAVIS", "DAWKINS", "DEAN", "DEASY", "DELISSIO", "DELUCA", "DERMODY", "DONATUCCI", "DRISCOLL", "EVANS", "FABRIZIO", "FARINA", "FLYNN", "FRANKEL", "FREEMAN", "GAINEY", "GALLOWAY", "GERGELY", "GIBBONS", "GOODMAN", "HANNA", "HARHAI", "HARKINS", "HARRIS, J.", "KAVULICH", "KELLER, W.", "KIM", "KINSEY", "KIRKLAND", "KORTZ", "KOTIK", "LONGIETTI", "MAHONEY", "MARKOSEK", "MATZIE", "MCCARTER", "MCNEILL", "MILLER, D.", "MULLERY", "NEUMAN", "O'BRIEN", "PARKER, C.", "PASHINSKI", "PETRARCA", "RAVENSTAHL", "READSHAW", "ROEBUCK", "ROZZI", "SABATINA", "SAINATO", "SAMUELSON", "SANTARSIERO", "SCHLOSSBERG", "SCHREIBER", "SCHWEYER", "SIMS", "SNYDER", "STURLA", "THOMAS", "VITALI", "WATERS", "WHEATLEY", "YOUNGBLOOD", "TURZAI" ];Code:<!DOCTYPE html> <html> <head> <style> #search-input:focus { background-color : #CCCCFF } #search-div { position: fixed; left: 0; bottom: 0; } #vote-table { width:70%; margin-left:15%; margin-right:0%; } .evenRow { background-color : #C7C7C8 } .oddRow { background-color : #E9E9E9 } .match { background-color : #548B54 } select:focus { background-color : #548B54 } </style> <script src="names.js"></script> <script> // copy-paste code from the net (seems to work) function isElementInViewport (el) { //special bonus for those using jQuery if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); } (function(window) { var input = null; var voteData = null; var matchIdx = null; var generateVoteData = function() { voteData = []; var table = document.getElementById("vote-table"); var tbody = table.firstChild; var rows = tbody.childNodes; for (var i = 0; i < rows.length; ++i) { var cols = rows[i].childNodes; voteData[i] = { name : String(cols[0].textContent).toLowerCase(), nameCol : cols[0], select : cols[1].firstChild }; } console.log(voteData); }; var generateTable = function() { var table = document.createElement("table"); var tbody = document.createElement("tbody"); table.id = "vote-table"; var createSelectElem = function() { var select = document.createElement("select"); var votes = [ "Yea", "Nea", "Excused", "Absent", "Not Voting" ]; for (var i = 0; i < votes.length; ++i) { var option = document.createElement("option"); option.textContent = votes[i]; select.appendChild(option); } return select; }; for (var i = 0; i < names.length; ++i) { var row = document.createElement("tr"); var col0 = document.createElement("td"); var col1 = document.createElement("td"); row.className = (i % 2 === 0 ? "evenRow" : "oddRow"); col0.textContent = names[i]; col1.appendChild(createSelectElem()); row.appendChild(col0); row.appendChild(col1); tbody.appendChild(row); } table.appendChild(tbody); document.body.insertBefore(table, document.getElementById("search-div")); generateVoteData(); }; var newInputKeyUpEvent = function(event) { var evt = event || window.event; evt.stopPropagation(); var needle = String(input.value).toLowerCase(); if (needle.length === 0) { for (var i = 0; i < voteData.length; ++i) { var textContent = String(voteData[i].nameCol.textContent); voteData[i].nameCol.innerHTML = textContent; } return; } var first = null; for (var i = 0; i < voteData.length; ++i) { var haystack = voteData[i].name; var textContent = String(voteData[i].nameCol.textContent); var splitId = haystack.indexOf(needle); if (splitId >= 0) { var subString = []; subString[0] = textContent.substring(0, splitId); subString[1] = textContent.substring(splitId, splitId + needle.length); subString[2] = textContent.substring(splitId + needle.length); voteData[i].nameCol.innerHTML = subString[0] + "<mark>" + subString[1] + "</mark>" + subString[2]; if (first === null) first = i; if (first !== null && isElementInViewport(voteData[first].nameCol) === false) { var bodyRect = document.body.getBoundingClientRect(), elemRect = voteData[i].nameCol.getBoundingClientRect(); window.scrollTo(bodyRect.left + elemRect.left, bodyRect.top + elemRect.top); } } else { voteData[i].nameCol.innerHTML = textContent; } } }; var bodyKeyDownEvent = function(event) { var evt = event || window.event; //console.log(evt.keyCode); if (evt.ctrlKey && evt.keyCode === 70) { evt.preventDefault(); input.focus(); } }; var searchFormSubmit = function(event) { var evt = event || window.event; evt.preventDefault(); var tab = 1; var first = null; for (var i = 0; i < voteData.length; ++i) { if (voteData[i].nameCol.querySelector("mark") !== null) { voteData[i].select.tabIndex = tab++; if (first === null) first = i; } else { voteData[i].select.tabIndex = 0; } } if (first !== null) voteData[first].select.focus(); input.tabIndex = tab++; }; var inputFocus = function(event) { var evt = event || window.event; evt.currentTarget.select(); }; var main = function() { input = document.getElementById("search-input"); generateTable(); document.getElementById("search-form").addEventListener("submit", searchFormSubmit); document.body.addEventListener("keydown", bodyKeyDownEvent); input.addEventListener("keyup", newInputKeyUpEvent); input.addEventListener("focus", inputFocus); }; if (window) { window.loadPage = main; } }(window)); document.addEventListener("DOMContentLoaded", loadPage); </script> </head> <body> <div id="search-div"> <form id="search-form" action="#" method="POST"> <input id="search-input" type="text" value=""></input> </form> </div> </body> </html>
Using the page is just like using ctrl-f or at least I did my best to emulate its behavior only this time when you push enter, it focuses on the first element and then you can tab through all the matching select elements. You then tab immediately back to the search box before tabbing through everything else in its native behavior.
So yeah, hit ctrl-f or manually focus to the search bar in the bottom left, type a name and it should try to scroll to the right element if it's not visible. Hitting enter while in the search box will focus you the first element and then you can tab from there. So far the page seems pretty performant even with 200 names.
Sadly, Grumpy quit cboard back in January.
O_oDo you know why grumpy quit?
According to him, grumpy had been growing tired of the site when I called him on some nonsense he posted which "broke the camels back".
Soma
“Salem Was Wrong!” -- Pedant Necromancer
“Four isn't random!” -- Gibbering Mouther
That's very disappointing. I'm always sad to see a member with so much experience and expertise leave. Then again, he's only as useful as his emotions will allow him to be.
I've also noticed that std kid doesn't post anymore either. cyberfish also seems like he's just too busy to really have time to post either. Plus, he was all about quora last time so he's probably spending his free time there.
Originally Posted by Yarin;In that case I suggest we band together to send Yarin some sort of doctor. (That is my way of saying I'm glad to see Yarin as well lol).Originally Posted by MutantJohn;
WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;