I recently was tasked with either removing or hiding a Flash SWF movie from a webpage only after it was finished playing. The reason for this was that the Flash SWF was playing in the header where a Google Custom Search bar was also supposed to be. SWF’s don’t like having things on top of them so I was presented with the aforementioned task.
Place the following code anywhere between the <head> </head> tags of your page.
document.getElementById(objectName).style.display = “none”;
Here’s the breakdown of the code above:
- .style.display = “none”; = using the stylesheet reference of “display” to remove it. See the “Options” section below for other options for this area.
For the stylesheet reference, here are other options you can use:
- display = “none” (removes the item from the HTML display)
- display = “inline” (includes the item in the HTML display without any paragraph break)
- display = “block” (includes the item in the HTML display with a paragraph break)
- visibility = “visible” (shows the item in the HTML display)
- visibility = “hidden” (hides the item in the HTML display, but it still will “take up space” on the page)
Note: whichever you use to hide something (display or visible) you must use the same one to show it, and vice versa. For example, if you use visibility = “hidden” to remove something, to include it again, you’ll need to use visibility = “visible” to show it – you wouldn’t be able to use “display…” to show it.
You can include whatever you’d like into the DIV objects you’re trying to manipulate. In my case, I had a Flash object. For simplicity, I’m just going to use some text.
Include the following code between the <body> </body> tags on your page.
This is the text that is going to be changed.
Here’s the breakdown of that code:
- This is the text… = put whatever you want to manipulate here. It can be any HTML/PHP code you want.
- </div> = this is the closing tag for the DIV.
That’s it! If we’ve done everything right, it should work perfectly!