Optimizing slow input fields.

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
tpotman777
Forum Newbie
Posts: 9
Joined: Wed Nov 11, 2009 5:06 am

Optimizing slow input fields.

Post by tpotman777 »

Hi.

My code generates 60x160 (9600) input fields, and each field gets it's value from the database. Each input fields is of the type:
<input WIDTH=10 STYLE=width:10px type=text size=1 maxlength=1>

My problem is that the rendering (and scrolling) of the page get's pretty slow. Anyone know of any tweaks I could do with php/css/apache to optimize the speed of these fields?

Thanks,
Tom
User avatar
Apollo
Forum Regular
Posts: 794
Joined: Wed Apr 30, 2008 2:34 am

Re: Optimizing slow input fields.

Post by Apollo »

Please enlighten me... Exactly why the heck would you want 9600 input fields, all pre-filled with one char per field, apparently? :)
tpotman777
Forum Newbie
Posts: 9
Joined: Wed Nov 11, 2009 5:06 am

Re: Optimizing slow input fields.

Post by tpotman777 »

It's a working schedule. 31 days * 160 people. Any hints?

-T
Apollo wrote:Please enlighten me... Exactly why the heck would you want 9600 input fields, all pre-filled with one char per field, apparently? :)
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Optimizing slow input fields.

Post by McInfo »

  • <div>s render much faster than <input>s.
  • You can reduce download size by using CSS and JavaScript to apply redundant attributes.
  • The changes could be submitted using a single hidden <input>.
Example:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>9600 Inputs</title>
        <style type="text/css">/* Paste CSS here. */</style>
        <script type="text/javascript">/* Paste JavaScript here. */</script>
    </head>
    <body onload="main()">
        <div id="container"><?php /* Paste PHP here. */ ?></div>
    </body>
</html>

Code: Select all

/* CSS */
#container div {
    float: left;
    margin: 0 1px 1px 0;
    border: solid 1px #CCC;
    padding: 0 2px 0 2px;
    text-align: center;
    font-family: monospace;
    font-size: xx-small;
    cursor: pointer;
}

Code: Select all

/* JavaScript */
function main () {
    var cells = document.getElementById('container').getElementsByTagName('div');
    for (var i = 0; i < cells.length; i++) {
        cells[ i ].onclick = function () {
            var input;
            do {
                input = prompt('Enter new cell value:', this.innerHTML);
                if (input == null) { // Cancel
                    break;
                }
                if (input.length == 4) {
                    this.innerHTML = input;
                    break;
                }
                alert('Length of input must be 4 characters.');
            } while (true);
        }
    }
}

Code: Select all

/* PHP */
for ($i = 0; $i < 9600; $i++) {
    printf('<div>%04u</div>', $i);
}
Edit: This post was recovered from search engine cache.
Last edited by McInfo on Thu Jun 17, 2010 2:22 pm, edited 1 time in total.
tpotman777
Forum Newbie
Posts: 9
Joined: Wed Nov 11, 2009 5:06 am

Re: Optimizing slow input fields.

Post by tpotman777 »

Wau, that's pretty amazing, thanks! I would still need some help with this though. Is there some way these DIVs would behave more like <input>s, for instance when clicked at I could directly change the value, without any alert boxes? Tabbing through these would also be very nice. In short, the behaviour would be somewhat like an excel sheet.

Thanks,
Tom


[quote="McInfo"]
  • <div>s render much faster than <input>s.
  • You can reduce download size by using CSS and JavaScript to apply redundant attributes.
  • The changes could be submitted using a single hidden <input>.
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Optimizing slow input fields

Post by McInfo »

HTML elements have a contentEditable attribute. If you replace the loop in the code I posted before with the loop I posted here, you can see how this affects the behavior of the <div>s. Tab and Shift+Tab work as they do with form inputs to move focus to the next or previous element.

Code: Select all

/* JavaScript */
for (var i = 0; i < cells.length; i++) {
    cells[ i ].contentEditable = true;
}
Edit: This post was recovered from search engine cache.
Last edited by McInfo on Thu Jun 17, 2010 2:24 pm, edited 1 time in total.
tpotman777
Forum Newbie
Posts: 9
Joined: Wed Nov 11, 2009 5:06 am

Re: Optimizing slow input fields.

Post by tpotman777 »

Ok. One last thing: how can I access the values within each div separately, for instance to store them in a database? I guess I have to name each <div> uniquely, but am not sure about the rest...

Thanks again,
Tom
McInfo wrote:HTML elements have a contentEditable attribute. If you replace the loop in the code I posted before with the loop I posted here, you can see how this affects the behavior of the <div>s. Tab and Shift+Tab work as they do with form inputs to move focus to the next or previous element.

Code: Select all

/* JavaScript */
for (var i = 0; i < cells.length; i++) {
    cells[i].contentEditable = true;
}
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Optimizing slow input fields.

Post by McInfo »

You can compile the values of all <div>s into a single string by looping through the <div>s as demonstrated and accessing each <div>'s textContent property. Some browsers do not support the textContent property, so you might have to use innerHTML. The values could be separated by a comma or some other character. The string could be stored in a hidden <input> in a <form> and the compilation could be done just before the <form> is submitted. In PHP, the string can be split into an array using explode().

You can access each element of a collection individually by using the item() method. For example, if cells is the node list from my original example, the innerHTML of the 40th <div> in the container can be changed with

Code: Select all

cells.item(39).innerHTML = 'XXXX';
If you don't already have it, I suggest you get the Firebug extension for Firefox.

Edit: This post was recovered from search engine cache.
Last edited by McInfo on Thu Jun 17, 2010 2:26 pm, edited 1 time in total.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Optimizing slow input fields.

Post by josh »

tpotman777 wrote:Ok. One last thing: how can I access the values within each div separately, for instance to store them in a database? I guess I have to name each <div> uniquely, but am not sure about the rest...
A horizontal and vertical delta. It is a vector, a coordinate, just like x,y

worker 150 day 6 will be in $_POST[ '150-6']

Think "battleship" (http://www.coolest-toys.com/wp-content/ ... p-game.png)
tpotman777
Forum Newbie
Posts: 9
Joined: Wed Nov 11, 2009 5:06 am

Re: Optimizing slow input fields.

Post by tpotman777 »

Ok, got it. What is actually quite interesting is that even though the rendering of <div>s is a lot faster than <input>s, tabbing to the next <div> is actually a lot slower in Firefox, haven't tried it with Chrome though, which I guess is faster with javascript. Maybe it's not possible to have best of both worlds ;)
McInfo wrote:You can compile the values of all <div>s into a single string by looping through the <div>s as demonstrated and accessing each <div>'s textContent property. Some browsers do not support the textContent property, so you might have to use innerHTML. The values could be separated by a comma or some other character. The string could be stored in a hidden <input> in a <form> and the compilation could be done just before the <form> is submitted. In PHP, the string can be split into an array using explode().

You can access each element of a collection individually by using the item() method. For example, if cells is the node list from my original example, the innerHTML of the 40th <div> in the container can be changed with

Code: Select all

cells.item(39).innerHTML = 'XXXX';
If you don't already have it, I suggest you get the Firebug extension for Firefox.
Post Reply