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

Posted on 2007-07-25
Last Modified: 2013-11-19
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:

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
Question by:IDEASDesign
    LVL 11

    Expert Comment

    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.
    LVL 11

    Expert Comment

    Did it do what you want?

    Author Comment

    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
    LVL 30

    Accepted Solution


    Author Comment

    I figured it out on my own already, but thanks anyways.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now