Resetting or removing the style attribute using JavaScript in Internet Explorer 9

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
    parent.window.frames.cont.spinner.removeAttribute('style')
    or
    parent.window.frames.cont.document.getElementById("spinner").removeAttribute("style")
    in the Console tab returns true but hides the element after the next one! However, this change is not reflected in the HTML tab visibly - The hidden element still displays style="display: block;".

I attempted to use Prototype's show() method, which worked in Firefox but not in IE 9...

Answer №1

To avoid removing the style attribute, simply change the "display" property to "block".

document.getElementById("spinner").style.display = "block"

Answer №2

Is there a specific reason for eliminating the style attribute instead of simply adding or removing classes? Additionally, if the goal is simply to toggle the visibility of a div element, wouldn't it be more practical to manipulate the "display" style property exclusively?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Highcharts' labels on the x-axis do not automatically rotate

One issue I am facing is that my custom x-axis labels on the chart do not rotate upon window resize. I would like to have them rotated when the screen size is less than 399px. Check out the code here $(function () { $('#container').highchart ...

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

Unable to transmit the error information to a response

Currently, I am in the process of making a POST request with a form-data type body. Within the body, there is specific data that can be found here: https://i.sstatic.net/XvRgJ.png In order to parse the data field (which is stringified JSON) in the body ...

Using Angular: Dynamically load an external JavaScript file after the Component View has finished loading

In my Angular 5 application, I am faced with the challenge of loading a JavaScript script file dynamically after my component view has been fully loaded. This script is closely related to my component template, requiring the view to be loaded before it ca ...

MERN Stack deployment to Heroku: Remote rejected - unable to push changes to master branch (pre-receive hook declined)

Just a heads up: I've successfully deployed using this method around 3 times in the past, but now it seems to be failing. Could there have been an update with Heroku that's causing this issue? Not entirely sure... I'm attempting to push my ...

What impact does adding 'ng' in unit tests have on how promises are handled?

Here is an example of a service that utilizes $q.when to wrap a promise from a third-party library: // myService.js angular.module('myApp', []) .service('myService', function($q, $window) { var api = new $window.MyAPI(); this ...

Guide to activating form elements using a JQuery function

I need help setting up a form with 11 rows and 11 columns. By default, the form fields should be disabled, but when I click on an "EDIT" button, they should become enabled. Any assistance would be greatly appreciated. Thank you in advance. Here is my edit ...

Tips for efficiently transferring a retrieved object from App.js to a child component in ReactJS version 16 and above using asynchronous methods

TL;DR How can I pass a fetched object from App.js to a child component asynchronously? Do I need to wait for the data to be completely fetched before returning App.js? If so, how can I achieve this? In an attempt to create a dashboard using react-chartj ...

Error: Surprising token found in ReactJS application on CodeSandbox

Encountering an unexpected token on line 5 error in my ReactJS project when testing it on CodeSandbox. Interestingly, the app runs smoothly without errors on my local machine. import React, { Component } from 'react'; import Header from ' ...

Utilize ZLIB and Node.js to create a compressed zip archive of a folder's contents

I need to compress all the files in a directory into a single ZIP file. Currently, I am using this code snippet: var fs = require('fs'); var tar = require('tar'); var zlib = require('zlib'); var path = require('path&apo ...

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

Make sure to wait until the fetch function is finished before triggering another action

When I run console.log(this.detaliiMP), it currently returns an empty array. My goal is to wait for the getData() function to retrieve the data and populate the detaliiMP array before logging it to the console. Check out the demo here const app = Vue.c ...

Upon executing `$('div')`, an empty array is returned

My goal is to retrieve all the div classes on a page using jQuery $('div');. However, the page does not natively support jQuery, so I am loading it through external links until $ === jQuery evaluates to true. Even on Stack Overflow where jQuery ...

Choose to conceal beneath the table within Bootstrap 4

As a budding web developer, I am currently using Bootstrap 4 in my project. If you take a look at my preview by clicking here and then selecting "Liczba sztuk," you'll notice that I am facing an issue. The items within the select dropdown are gettin ...

Unable to perform the 'setSelectionRange' function on the 'HTMLInputElement' due to the input element's type being 'number', which does not allow selection

My attempt to enable text selection in an input box upon user click by using the code snippet below was unsuccessful: <input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" /> Instead of achieving the desired ef ...

Encountering the error "Unable to access property message of null" while trying to retrieve the error status code from an HTTP response in Angular

I'm currently working on a project using Angular 8 where I am making an HTTP post request to a .NET Core Web API. If the username or password is incorrect, the API returns a status code of 400. Despite the Chrome console indicating that a 400 status h ...

Menu secured in place within the wrapper

My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button. The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the ...

Is there a way to generate a modal list of values by utilizing bootstrap and angular, while incorporating spring boot as the backend technology?

I'm working on developing a generic "List of Values" feature, which will be a searchable modal containing a natural identifier and description. I have successfully built an AngularJS application in Spring Boot to accomplish this task, but unfortunatel ...

JavaScript loop through an array of objects

Is there a way to loop through and retrieve all of the addresses? const name = { john: [ { age: 21, address: 'LA', } ], sam: [ { age: 26, address: 'California' } ] } I have tried using th ...

Delete the final comma in a JSON file using JavaScript so that it can be utilized by a Vue application

Using Axios in my Vue app, I am consuming a JSON file. The field "country" contains trailing commas which are creating issues. Here is the structure of the JSON: "country": "spain,france," .... "country": " ...