createAlphaShadow

[John Robin Dove]

I have a problem with this. I display instructions in a field whose height is set to auto using pgStyleObject. It is in a group with another empty field underneath it. The size of the field underneath is adapted to the size of the top field each time the instructions change and I use createAlphaShadow remove = true and then createAlphaShadow to display a shadow in the field underneath. This works well but sometimes I see this:

PowerPac error in createAlphaShadow; the miniumum object size is 25 x 25 pixels! "instructionsShadow" size is 185 x 8 pixels.

This seems to occur only if I reload the page in the browser. It suggests that the upper field "instructions" must be empty but nowhere in my code is there anything that removes the text. I can also provoke this error if I try to create the alphaShadow on load page. I do this for other fields without a problem.

I have dumped the actions into a text file and searched through them but I can't find any explanation. Here are the relevant action sequences:

Code: Select all

--------------------------------------------------------------------------------
Actions for Button "start1" of Page id 0
--------------------------------------------------------------------------------

-- On load page... -------------------------------------------------------------
Set text of Field "instructions" to "Click here to start the exercise in preview mode. You can click here xxxx before doing the exercise." (disabled)
Set width of Field "instructionsShadow" to width of field "instructions" (disabled)
Set height of Field "instructionsShadow" to height of field "instructions" (disabled)
Execute Script createAlphaShadow (HTML) (disabled) THESE DISABLED ACTIONS ALWAYS PROVOKE THE ERROR IF ENABLED


-- On mouse over... ------------------------------------------------------------
Define local variable "number" (Initial value: "")

Set left of Group "instructions" to left of self
If previews = 1
  Set number to "once"
Else if previews = 2
  Set number to "twice"
Else
  Set number to previews && "times"
End if
Set text of Field "instructions" to "Click here to start the exercise in preview mode. You can click here" && number && "before doing the exercise."
Set width of Field "instructionsShadow" to width of field "instructions"
Set height of Field "instructionsShadow" to height of field "instructions"
Execute Script createAlphaShadow (HTML)
Set visible of Group "instructions" to true


-- On mouse off... -------------------------------------------------------------
Execute Script createAlphaShadow (HTML) (PARAMETER REMOVE = TRUE)
Set visible of Group "instructions" to false


-- On click... -----------------------------------------------------------------
Execute Script createAlphaShadow (HTML) (PARAMETER REMOVE = TRUE)
Set visible of Group "instructions" to false
etc ...


At the moment there is only one other button using this system and its code is identical to that above.
Actually if the error message is closed thereafter everything functions normally. Is there an equivalent of sysSuspend = false or Try I could use. Maybe I could use Try in exeJavascriptDirect?

[Clifton]

The reason for the error is that at the time the page loads and createAlphaShadow() runs, the size is too small to create the effect.

One thing to understand about ToolBook actions and JavaScript is that each sequence of code is executed in a batch. So when you change the text in the "instructions" field, the JavaScript may not actually report the change immediately upon adding the text. In this case you need to insert a little delay between changing the text and sizing the field used for the alpha shadow. I would use a media timed delay of about 50-100ms. That will force the alpha shadow effect to be created only after the new size of the "instructions" field and shadow field has been reported to the DOM.

Another option is to use pgStyleObject() and set "width" or "height" to "auto" as this will cause the object to resize itself and report the new size instantly.

As another possibility, consider using HTML 5 css styling to create the alpha shadow effect. Of course, if you are planning on supporting IE8, then you will have to keep createAlphaShadow() for backwards compatibility.

[John Robin Dove]

Thanks Clifton,

Annoyingly I can't produce the error any more. Anyway with pgStyleObject I have set the height of the field in which the shadow is created to auto. If the error appears again I'll try your other suggestions. What exactly do you mean by 'media timed delay'. Should I use pgTimer for this?

[Clifton]

The media timed delay has very few uses, but it is an action available in the Actions Editor.

Image 1.png (6.89 KiB) Viewed 1912 times

Please be aware if you ever use it, that you cannot use it inside a control structure (if/then statement or any other statement type)

[John Robin Dove]

Thanks. I'll try this because pgStyle height => auto did not solve the problem. The error has just shown up again.

[Clifton]

Something is causing your target field to become too small to produce the effect. Perhaps you should put in a debug prompt to check the field size before and after some of your actions to see what is happening.

[John Robin Dove]

Hi,

The prompt confirms that the field height is too small: 120 = 8 pixels but I can't figure out why. The problem always occurs after the page has loaded or reloaded. Does Javascript somehow apply the sizing or resizing of the field too late? I think passing the mouse cursor over the buttons during loading triggers the error but I'm not sure and it seems surprising because I have deliberately left the buttons disabled during loading. They are enabled with onFirstIdle.

So far the timed delay system (75 ms) seems to work. I had to add a global boolean overButton which is set to true on mouseOver and false on mouseOff and the condition If overButton = true .... Otherwise if you move the mouse fast enough the message does not disappear!

Correction (5 minutes later) Sadly the timed delay system also fails. Could I not do something like this with exeJavascriptDirect? The error does not seem to affect the subsequent performance of the program at all.

try {
tb_function_createAlphaShadow("start1");
}
catch(err) {

}

[Clifton]

the try/catch statement probably won't help because if I remember correctly the function is using a throw error structure to alert the developer that something is wrong. Thus the error message will still show, even if embedded in a try/catch. Try putting the actions to create the effect on the object itself and not at the page level. There must be something in the code that is making the alpha shadow field really small initially.

[John Robin Dove]

I cannot find anything that would reduce the size of the field. I think the error is probably produced by the actions used to remove the shadow rather than those to create it. These are activated by mouse off. The only thing I can think of is that the app is very busy when it first loads and has all kinds of things to do. Could this have an effect on the order in which things are done. Does the createAlphaShadow arrive before the text has been put into the "instructions" field? This would explain why the "instructionsShadow" field has a height of 8 pixels. I'll send you the actions txt file but don't worry if you haven't enough time to look at it.

In the meantime, I think I have found a solution. I have put the condition if height of field "instructionsShadow" >= 375 (25 x 15) around the 6 createAlphaShadow actions. This should fix it ...


Update: I think I may have found the cause of the problem. You were right. Something was making the field smaller than planned. I had inadvertently set the height of field "instructionsShadow" to auto using pgStyleObject (probably because it was a copy of field "instructions").