Prev: Screen elements not showing in IE
Next: FAQ Topic - Why doesn't the global variable "divId" always refer to the element with id="divId"? (2010-08-10)
From: Mel Smith on 9 Aug 2010 17:20
Hi:

One of my Functions (showarning(true/[false]) -- which 'displays' a
message or wipes it out), is apparently not being executed until the calling
function (search() ) completes its work, and everything is at rest.

Is there any method whereby I can progammatically insist that the
warning message be shown *before* any other program activity takes place
(i.e., prioritize the completion of a display change *before* continuing
execution). (btw, I'm already using the setTimeout(search,750) function to
begin a search thru a massive table -- which works nicely)

If you folks insist, I'll post the actual code.

Thank you.

-- Mel Smith


From: Richard Cornford on 9 Aug 2010 19:10
Mel Smith wrote:
> One of my Functions (showarning(true/[false]) -- which
> 'displays' a message or wipes it out), is apparently not
> being executed until the calling function (search() ) completes
> its work, and everything is at rest.
>
> Is there any method whereby I can progammatically insist that
> the warning message be shown *before* any other program activity
> takes place (i.e., prioritize the completion of a display change
> *before* continuing execution). (btw, I'm already using the
> setTimeout(search,750) function to begin a search thru a massive
> table -- which works nicely)
>
> If you folks insist, I'll post the actual code.

If you really don't want to post the actual code why don't you just
provide us with a precise statement by statement description of it, an
explanation of what it is supposed/designed to do, and if at any point
it interacts with a DOM, a description of that DOM's structure,
composition, attributes and styling?

But if you are just looking for a 'try this' answer, why not try -
setTimeout -?(It is what everyone else is guessing at this stage, that
or asynchronous XML HTTP requests).

Richard.

From: Mel Smith on 9 Aug 2010 21:22
Richard said:

> If you really don't want to post the actual code why don't you just
> provide us with a precise statement by statement description of it, an
> explanation of what it is supposed/designed to do, and if at any point it
> interacts with a DOM, a description of that DOM's structure, composition,
> attributes and styling?
>
> But if you are just looking for a 'try this' answer, why not try -
> setTimeout -?(It is what everyone else is guessing at this stage, that or
> asynchronous XML HTTP requests).


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. But I probably mucked it up as I edited.

I'm *guessing* that the JS script runs my search loop below and waits
till it is completed to write messages to the window. What I *think* I want
is to write the messages immediately.

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)
var term = SEARCH_INPUT.value.toLowerCase();
// skip first few rows
for (var i = SKIP_ROW_COUNT; i < nrows; i++) {
var tr = rows[i]; // 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 !
My 'noobie' guess is that the 'show' is held in abeyance until the loop is
completed, then it is executed, but is
immediately wiped out by the 'wipe out' call below.
Please note that I use the colors of the screen to 'show/hide' the
message.
*/
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" ;
}
else {
el.style.color = "#80ff80";
el.style.background = "#80ff80";
el.style.font.weight = "normal";
}
}


From: Richard Cornford on 10 Aug 2010 10:09
On Aug 10, 2:22 am, Mel Smith wrote:
> Richard said:
>
>> If you really don't want to post the actual code why don't you
>> just provide us with a precise statement by statement
>> description of it, an explanation of what it is supposed/designed
>> to do, and if at any point it interacts with a DOM, a description
>> of that DOM's structure, composition, attributes and styling?
>
>> But if you are just looking for a 'try this' answer, why not try -
>> setTimeout -?(It is what everyone else is guessing at this stage,
>> that or asynchronous XML HTTP requests).
>
> 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[i]; // 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.
From: Mel Smith on 10 Aug 2010 10:54
Richard said Lots !!! :
<snip>
--------
</snip>

Richard:

I'm going to print your detailed comments and study them over the next
few days.

Thank you for the insights provided !

-Mel


 | 
Pages: 1
Prev: Screen elements not showing in IE
Next: FAQ Topic - Why doesn't the global variable "divId" always refer to the element with id="divId"? (2010-08-10)