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")truebut 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...