Page 1 of 1
Optimizing slow input fields.
Posted: Thu Nov 12, 2009 3:24 am
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
Re: Optimizing slow input fields.
Posted: Thu Nov 12, 2009 4:10 am
by Apollo
Please enlighten me... Exactly why the heck would you want 9600 input fields, all pre-filled with one char per field, apparently?

Re: Optimizing slow input fields.
Posted: Sun Nov 15, 2009 2:51 am
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?

Re: Optimizing slow input fields.
Posted: Sun Nov 15, 2009 3:07 pm
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.
Re: Optimizing slow input fields.
Posted: Mon Nov 16, 2009 3:38 am
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>.
Re: Optimizing slow input fields
Posted: Mon Nov 16, 2009 1:05 pm
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.
Re: Optimizing slow input fields.
Posted: Tue Nov 17, 2009 1:11 pm
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;
}
Re: Optimizing slow input fields.
Posted: Tue Nov 17, 2009 3:18 pm
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.
Re: Optimizing slow input fields.
Posted: Tue Nov 17, 2009 9:55 pm
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)
Re: Optimizing slow input fields.
Posted: Wed Nov 18, 2009 2:39 am
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.