#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    58
    Rep Power
    10

    Deactivating Flash elements using JavaScript/ CSS


    Hi everyone

    I am busy building a site that uses Flash, jQuery and standard JavaScript.

    My Problem: It seems that the communication between these platforms often takes some time to complete. I can see that some users will think that nothing is happening and click the Flash buttons over and over. This will cause even more of a wait since more Flash to JavaScript communication is triggered.

    My solution: What I would like to do is make my Flash content un-clickable until my JavaScript and jQuery are done running. I don't want to do this by sending JS commands to the Flash since I do not want to increase the communication between the two. What I have done is use JS to set the CSS "curser" property to the "wait" when you move it anywhere on the page, and to "not-allowed" when you move your mouse over the Flash content, at least until one jQuery animation is done running.

    The problem with my solution: It seems that when I move my mouse over the Flash element focus shifts off of the html and on to the embedded Flash object. This means that the "not -allowed" curser pops up for just a second and then disappears.

    What I ned to figure out: I was wondering if anyone has an idea of how to prevent the embedded swf object from accepting focus? In other words I would like the Flash buttons to be deactivated when you click one of them or one of several html elements that trigger jQuery animations. I don't want to use a JS command to call a Flash function that does this, since I don't want to add to the communication time, which is in reality my original concern.

    Any suggestions on how to make this work or for a better solution would be much appreciated.
    Last edited by phunder; July 4th, 2011 at 11:02 AM.
  2. #2
  3. No Profile Picture
    Gotta get to the next screen..
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2003
    Location
    Legion of Dynamic Discord
    Posts
    6,678
    Rep Power
    3165
    Hi, you could place a div with a transparent gif over the top of the Flash content. That way, the Flash content will be visible but not clickable. When the rest of the system is ready then use JS to hide the transparent gif div.
    Quis custodiet ipsos custodes?
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    58
    Rep Power
    10
    Originally Posted by Tann San
    Hi, you could place a div with a transparent gif over the top of the Flash content. That way, the Flash content will be visible but not clickable. When the rest of the system is ready then use JS to hide the transparent gif div.
    Thanks for the reply. I was actually thinking of trying something like that. I'll give it a go and let you know what I can figure out
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    58
    Rep Power
    10
    Thanks Tann San, that works perfectly
  8. #5
  9. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    954
    Rep Power
    97
    This is actually a case of good usability. Of the rules for usability is feedback. When a user clicks something, tell the user it was clicked.

    In your case, if a button is clicked and there is some communication with a server and you want to prevent the user from doing anything while the communication is active, gray out the screen and put a message up that says "working" or "busy" or, if you can, give progress like "50% complete...". Just never leave a user guessing about what's happening.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    58
    Rep Power
    10
    Thanks Frank, that is good advice.

    In this case I used the wait curser to relay this message, though a message does not sound like a bad idea as well. The links are also deactivated until the command is processed. The wait is rarely very long though, so in this case I will content myself with what I have.

    Thanks for the advice once again

IMN logo majestic logo threadwatch logo seochat tools logo