Thread: Help with some website design...

  1. #121
    Unregistered User Yarin's Avatar
    Join Date
    Jul 2007
    Posts
    2,158
    Quote Originally Posted by Mario F. View Post
    A programming language that has both weak and strong typing is a godsend programming language.
    I think you mean to say dynamic and static.

  2. #122
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    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.

  3. #123
    Registered User Alpo's Avatar
    Join Date
    Apr 2014
    Posts
    877
    Quote Originally Posted by MutantJohn View Post
    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:
    Code:
    tr:nth-child(even) {
        // colors for even rows
    }
    tr:nth-child(odd) {
        // colors for odd
    }
    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).
    WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;

  4. #124
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    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.

  5. #125
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    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>

  6. #126
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    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.

  7. #127
    Unregistered User Yarin's Avatar
    Join Date
    Jul 2007
    Posts
    2,158
    Quote Originally Posted by MutantJohn View Post
    names.js:
    Why is my name not in the list? I'm hurt, man, really hurt.

    I thought we were friends.

  8. #128
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    Quote Originally Posted by Yarin View Post
    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?!?!

  9. #129
    Registered User
    Join Date
    Jun 2011
    Posts
    4,509
    Sadly, Grumpy quit cboard back in January.

  10. #130
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    That's sad to hear. Do you know why grumpy quit?

  11. #131
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    Do you know why grumpy quit?
    O_o

    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

  12. #132
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    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.

  13. #133
    Registered User Alpo's Avatar
    Join Date
    Apr 2014
    Posts
    877
    Quote Originally Posted by Yarin;
    I'm hurt, man, really hurt.
    Quote Originally Posted by MutantJohn;
    I'm always sad to see a member with so much experience and expertise leave.
    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).
    WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;

  14. #134
    Unregistered User Yarin's Avatar
    Join Date
    Jul 2007
    Posts
    2,158
    Quote Originally Posted by MutantJohn View Post
    btw, I'm happy that you're back
    Quote Originally Posted by Alpo View Post
    That is my way of saying I'm glad to see Yarin as well lol
    Hooray

  15. #135
    Unregistered User Yarin's Avatar
    Join Date
    Jul 2007
    Posts
    2,158
    Quote Originally Posted by phantomotap View Post
    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

Popular pages Recent additions subscribe to a feed

Similar Threads

  1. Replies: 2
    Last Post: 12-11-2012, 12:25 AM
  2. Website Design....again
    By Sentral in forum A Brief History of Cprogramming.com
    Replies: 14
    Last Post: 10-29-2006, 05:47 AM
  3. Website design!
    By Sentral in forum A Brief History of Cprogramming.com
    Replies: 28
    Last Post: 10-07-2006, 12:38 AM
  4. website
    By the Wookie in forum Windows Programming
    Replies: 1
    Last Post: 11-07-2002, 02:25 PM