Richard said:
O.K., here is the relevant portion of the script. What it is
supposed to do is 'flash' a warning message on the screen to
warn the user to 'wait for a few seconds', then the 'Search Loop'
is executed, *then* the warning message is erased.
Most of the following code was provided by Fank vanPufelen
from downtown Holland.
Can a country be spoken of as having a 'downtown'?
But I probably mucked it up as I edited.
With computer code, editing something that you don't understand is a
hit and miss affair, with the misses being the more likely outcome.
I'm *guessing* that the JS script runs my search loop below
and waits till it is completed to write messages to the window.
You are wrong in attributing this to javascript. It is the browser
that is waiting; it is waiting for an opportunity to update the
_display_ of the page. Most browsers will not interrupt executing
javascript code, so will not interrupt it in order to update the
display with any changes that the javascript may be making to the DOM.
Instead the display is updated shortly after the executing javascript
finished running, to reflect the final state of the DOM at that point.
What I *think* I want
is to write the messages immediately.
While what you actually want is to give the browser an opportunity to
update the display of the page including the message prior to starting
the searching process.
Thanks for looking.
-Mel Smith
************************************
function startTimer() {
if (TIMER) {
clearTimeout(TIMER);
}
TIMER = setTimeout(search, 750); // wait for 3/4 second to
see if user types any more characters
}
function search() {
/* The following warning call does not take effect
until the succeeding loop is completed !
*/
showarning(true)
At this point, having 'shown' the message, you need to break the
execution of the javascript to give the browser an opportunity to
updated the display of the DOM in a way that reflects the changes that
you just made. The usual way of doing that is with a - setTimeout -.
All of the following code in this function body needs to be moved into
a separate function of its own, then at this point you would use that
second function as an argument to - setTimeout -, specifying a short
interval before the second function is executed. That will give the
browser the opportunity to update its display before the searching
starts.
var term = SEARCH_INPUT.value.toLowerCase();
// skip first few rows
for (var i = SKIP_ROW_COUNT; i < nrows; i++) {
var tr = rows; // hide row if it doesn't contain the
search term
var tds = tr.getElementsByTagName("td");
if (!tds || tds.length < 2) continue;
var td = tds[SEARCH_COLUMN] ;
tr.style.display = (term == "" || doesNodeContain(td, term)) ?
"" : "none";
}
/* it appears that both calls happen (i.e., show the message, and
then wipe it out), at nearly the same time !
They don't, but the browser will not interrupt the executing code in
order to update its display of the page, so the message hiding code
will have executed prior to the next opportunity it gets to do so.
My 'noobie' guess is that the 'show' is held in abeyance until
the loop is completed, then it is executed,
There is no sense in which the 'show' is 'executed'. You are assigning
properties to objects in the DOM, and at some future point the display
of the DOM gets updated to reflect those changes.
but is immediately wiped out by the 'wipe out' call below.
No, you re-set the properties of the objects in the DOM prior to the
browser modifying its display to reflect the fist changes, so when it
does update the display it does no more than reflect the final state.
Please note that I use the colors of the screen to 'show/hide'
the message.
Using the - visibility - property would make more sense (as colors and
background colors are likely subjects for user style sheets designed
to, for example, increase text contrast for the user).
*/
showarning(false)
}
function doesNodeContain(node, term) {
if (node.nodeType == TEXT_NODE &&
node.nodeValue.toLowerCase().indexOf(term) >= 0) {
return true;
}
var child = node.firstChild;
while (child) {
if (doesNodeContain(child, term)) {
return true;
}
child = child.nextSibling;
}
return false;
}
function showarning(onoff) {
var el = document.getElementById("ishomsg") ;
/* in the 'warning' parapgraph <p>, there is a small warning
message */
if (onoff) {
el.style.color = "white" ;
el.style.background = "red" ;
el.style.font.weight = "bold" ;
<snip>
The line - el.style.font.weight = "bold" ; - is useless as it
represents assigning a - weight - property to a String object that is
internally created from the current (but likely empty) string
primitive value of the - el.style.font - property. A pointless action
as that temporary string object will immediately become available for
garbage collection, and assignments to its properties should have no
side effects.
Given the assignment of the value "bold" the odds are that you
intended to assign to the - style - object's - fontWeight - property,
but that would be a bad idea as if your attempt to hide the text is
successful its weight in its hidden state would not be significant,
but you still risk the change in size of the text that follows from
changing the weight of the font would cause a re-flow of the text, and
possibly other, related parts of the page.
Richard.