I have a simple webpage spinner created using the Prototype JS framework:
Within the nav
frame:
Event.observe(
'doit',
'click',
function(){
parent.window.frames.cont.spinner.removeAttribute('style');
},
false);
Within the cont
frame (the first element within the <body>
):
<div id="spinner" style="display: none;"></div>
The CSS for the spinner:
#spinner {
width: 50px;
height: 50px;
position: fixed;
top: 50%;
left: 50%;
background: url(spinner.gif) transparent no-repeat center;
margin-left: -25px;
margin-top: -25px;
z-index: 2;
}
Essentially, it's a fixed-position <div>
that is centered on the cont
frame and hidden when the page loads to avoid issues in non-JavaScript enabled browsers. When a button in the nav
frame is clicked, the style
attribute is removed and the spinner is displayed until the next page loads. While this works well in Firefox, it fails to function in IE 9. Here is what I observed using their standard F12 interface:
- There is only one element with the ID
spinner
. - Executing
orparent.window.frames.cont.spinner.removeAttribute('style')
in the Console tab returnsparent.window.frames.cont.document.getElementById("spinner").removeAttribute("style")
true
but hides the element after the next one! However, this change is not reflected in the HTML tab visibly - The hidden element still displaysstyle="display: block;"
.
I attempted to use Prototype's show() method, which worked in Firefox but not in IE 9...