• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

Sitepal Javascript API issues: Want to dim the page and show a "loading" animation when the preview button is clicked

I've been working on integrating a Sitepal talking animated character into a client's website, and would like some technical assistance so that I can achieve a certain effect when my "Preview" button is clicked.  

Here's the URL:  http://www.simplfly.com/funke.cfm

You'll notice that when you type some text into the "Message" text box and then click on the "Preview" button, that after a few seconds, the character says what you typed in using Text-To-Speech.  

What bothers me is the "after a few seconds" part.  What I'd like to do is add some javascript and/or CSS that would do the following whenever the preview button is clicked:

1) Dim / lower the opacity of the entire page
2) Change the cursor to an hourglass
3) Display a "loading" animated GIF (transparent) in the middle of the screen (in a layer, etc)
4) Temporarily hide the flash animation (to get around issues pertaining to z-index heirarchy)

(The reason for this is so that folks are aware that their message is being processed, and so that they don't impatiently keep clicking the preview button.)

I tried to apply this effect this last night and had some success, .. but every time I click on the Preview button - in addition to the page being dimmed, - the Sitepal animation RELOADS ITSELF - almost as though the page is being refreshed (?!?!?) Can anyone here think of a reason why that might be happening?  Better yet -- does anyone have any code they could share with me that would achieve an effect similar to what I've described?  

Perhaps the trick is to show/hide a layer when the preview button is clicked to create the appearance of dimming the page (but in actuality, it'd just be a white layer with the opacity turned down). Any thoughts?

My final challenge will be to figure out how to tell the page when the message has been processed (and is about to start playing) so that I can restore the page's opacity to 100%, .. hide the loading animation, // change the cursor back to a pointer, .. and reveal the flash animation again.  If anyone has any tips they could share with me on how I might achieve that, it'd be most grateful.

Full source code is available via View Source

Thanks in advance,
- Yvan
  • 2
  • 2
1 Solution
This should do it.

function disablePage()
         //iterate over elements:
      var form = document.forms[0]
      for(var i=0;i<form.elements.length;i++){

For the animated image, add a hidden image and make it visible when submitted.
Let me know if more clarification is needed.
Did it do what you want?
IDEASDesignAuthor Commented:
The code only works in IE -- I need for it to also work in Firefox (the cursor stuff works in Firefox - just not the disabling)  

Note, .. also, ..  I do NOT wish to DISABLE the page.  I instead want to DIM (lower the opacity) of the page.

- Yvan
IDEASDesignAuthor Commented:
I figured it out on my own already, but thanks anyways.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now