Optimizing slow input fields.
Moderator: General Moderators
-
tpotman777
- Forum Newbie
- Posts: 9
- Joined: Wed Nov 11, 2009 5:06 am
Optimizing slow input fields.
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
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.
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.
It's a working schedule. 31 days * 160 people. Any hints?
-T
-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.
- <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>.
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);
}
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.
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"]
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
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.
Edit: This post was recovered from search engine cache.
Code: Select all
/* JavaScript */
for (var i = 0; i < cells.length; i++) {
cells[ i ].contentEditable = true;
}
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.
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
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.
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
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.
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';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.
Re: Optimizing slow input fields.
A horizontal and vertical delta. It is a vector, a coordinate, just like x,ytpotman777 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...
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.
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 withIf you don't already have it, I suggest you get the Firebug extension for Firefox.Code: Select all
cells.item(39).innerHTML = 'XXXX';