Thread: Help with some website design...

Originally Posted by Mario F.

A programming language that has both weak and strong typing is a godsend programming language.

I think you mean to say dynamic and static.

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.

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.

Originally Posted by MutantJohn

names.js:

Why is my name not in the list? I'm hurt, man, really hurt.

I thought we were friends.

Originally Posted by Yarin

Why is my name not in the list? I'm hurt, man, really hurt.

I thought we were friends.

You know what's funny, I totally thought of you but I was trying to keep it restricted to active members and I hadn't seen you in awhile (btw, I'm happy that you're back ). But then I realized, grumpy hasn't posted in forever either!

grumpy, where are you?!?!

Sadly, Grumpy quit cboard back in January.

That's sad to hear. Do you know why grumpy quit?

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 MutantJohn

btw, I'm happy that you're back

Originally Posted by Alpo

That is my way of saying I'm glad to see Yarin as well lol

Hooray

Originally Posted by phantomotap

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".

What