• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • 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
0
IDEASDesign
Asked:
IDEASDesign
  • 2
  • 2
1 Solution
 
raj3060Commented:
This should do it.

function disablePage()
{
      document.body.style.cursor="wait";
      document.body.disabled="true"
         //iterate over elements:
      var form = document.forms[0]
      for(var i=0;i<form.elements.length;i++){
            form.elements[i].style.cursor="wait"
            form.elements[i].disabled="true"
      }
}

For the animated image, add a hidden image and make it visible when submitted.
Let me know if more clarification is needed.
0
 
raj3060Commented:
Did it do what you want?
0
 
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
0
 
IDEASDesignAuthor Commented:
I figured it out on my own already, but thanks anyways.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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