Invalid Resize Argument Causes Background to Not Appear on IE Browser

I have encountered a problem where the background (BG) image is not appearing in Internet Explorer (IE). I am struggling to find a solution for this issue.

BG Problem

Below is the code snippet showing how I implemented the background image. I have used a texture specifically for screens with larger resolutions.

body
{
    margin: 0px;
    padding: 0px;
    background-image: url("./web_elements/bg.png"), url("./web_elements/tex2.jpg");
    background-repeat: no-repeat,repeat;
    background-position:top center,0 0;
}

Javascript Error

The error only appears in Internet Explorer and not in Firefox or Chrome.

Here is a screenshot of the IE error:

This is how it should look like:

Here is my javascript code:


// Your JavaScript code goes here.
// Make sure each function has proper documentation.
javascriptinternet-explorer

Answer №1

For compatibility with IE8, you may encounter an issue where window.innerWidth returns undefined. In such cases, consider using 

document.documentElement.clientWidth
and document.body.clientWidth as alternatives:

function resizePage() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var objMainBlock = document.getElementById('MainBlock');
    var objPad = width > 1024 ? (width - 1024) / 2 : 0;
    objMainBlock.style.width = "1024px";
    objMainBlock.style.marginLeft = objPad + "px";
}

view this solution

Alternatively, achieving the same result through CSS alone without the need for JavaScript is possible by using margin: 0 auto:

#MainBlock {
    width: 1024px;
    margin: 0 auto;
}

jsfiddle.net/x2JFp

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

Organize various base arrangements within Angular version 2

One thing I can accomplish in my angularjs application using ui.router is: $stateProvider .state('app', { url: '', abstract: true, template: '<div data-ui-view></div>' ...

javascriptangularjsangulartypescriptangular-ui-router

How can I modify the base color of a cone in Three.js?

My cone in the jsfiddle link is currently all blue, but I want to change the color of the square base to red. To do that, I need to alter the color of the two faces that make up the square base. How can this be achieved? View my cone on JsFiddle: http://j ...

javascriptwebglthree.js

Shine a spotlight on elements that match with jQuery using live() or on()

Check out my jsFiddle demonstration where I have created a button that adds elements and provides links to delete these elements. Instead of actually deleting the elements in this example, I want to make it so that hovering over the (remove) link, which is ...

javascriptjqueryhtmlcss

Tips for receiving user input with custom values and assigning them to variables through multiple selection criteria using Jquery

I am encountering an issue with a form that contains multiple selection blocks. I am attempting to extract the values of each block criteria on click in order to send it to a database. However, every time I click on a block, my script retrieves all the val ...

phpjavascriptjqueryhtmljquery-ui

Does each imported module in a Next.js app run multiple times?

There is a common understanding that when a module is imported multiple times within a JavaScript program, it only executes once during the first import. Informative article: The concept is straightforward: each module is evaluated just once, meaning th ...

javascriptnext.jsvercel

What are some solutions for troubleshooting setInterval issues?

I have a h1 element with a v-for loop that displays items from my array in the following format: <h1 v-for="(record, index) of filteredRecords" :key="index" :record="record" :class="get ...

javascriptvue.jssettimeoutsetinterval

What is the most effective method for managing the onSelect data within the select tag in Angular's reactive form functionality?

Can someone please advise on the best approach to handling this scenario? I have a form with multiple fields, including a select tag. <form [formGroup]="myForm"> <select formControlName="" > <option *ngFor="let c of countries" value ...

javascripthtmlangularangular8

Issue: Unable to open port (GetCommState) : Error code 1 not recognized - Utilizing Nodejs, express, SerialPort

I am currently attempting to establish a connection between a fiscal printer with serial input and nodejs. I am utilizing the SerialPort module, but encountering difficulty in establishing the connection. The console is displaying the following error messa ...

javascriptnode.jsexpressnode-serialport

The pie chart fails to fully display

Check out the repro example I made here. The legend is displaying properly, but the graph is not showing up. What could be causing this unexpected issue? ...

javascriptvue.jsvuexvuex-modulesvue-chartjs

Display the list items within a div only if the height is lower than a separate div

I have a scenario where I have two divs named left and right. The left div contains a list of bullets (li elements) and is floated to the left, while the right div has text and HTML content. At times, either the left or the right div may be taller than the ...

javascriptjqueryhtmlcss

An error occurred: [object Object] does not contain the function 'bootstrapDatepicker'

After spending countless hours searching for a solution, I continue to encounter the dreaded 'Uncaught TypeError' without any successful resolutions. The issue seems to stem from a clash between tribe-events-ajax-calendar.js and foundation.min.j ...

javascriptjqueryajaxwordpress

Surprising Outcomes of Negative Margin in jQuery Animation

Unique Project Summary I am currently working on a website that incorporates a sliding menu feature. I have successfully implemented this functionality, and the display remains consistent during the animation transitions for sliding the menu in and out. T ...

javascriptjqueryhtmlioscss

How to upload an Image to Cloudinary using Express.js, React, and Axios for a POST

I encountered an issue while attempting to upload images to Cloudinary using a React front-end and Express server. The problem lies in not being able to properly post request the image to my Express server. Here is how I prepare the image for sending it l ...

javascriptreactjsexpressaxioscloudinary

Plupload is not compatible with ng-dialog

I'm currently attempting to integrate plupload into a modal window that is generated by ng-dialog. Here is the code I am using: $scope.showManager = function(){ ngDialog.open({ template: '/template/fmanager.html', controller: &apo ...

javascriptangularjspluploadng-dialog

Generating personalized MongoDB collections for individual users - A step-by-step guide

My query is more about the procedure rather than a specific coding issue. I am working on a node application and using DHTMLX calendar. What I aim for is to have each user with their own set of events on their individual calendar. Currently, the implement ...

javascriptnode.jsmongodbexpress

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

Attempting to create a JavaScript class within an HTML document

Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...

javascriptjqueryhtmlnode.js

create a word with only **one** bold letter in the word ionic-angularjs

Can someone please guide me on how to style only a specific letter within a word using angularJS? Specifically, I want to make the first letter bold while keeping the rest of the word in normal font. For instance, if I have an array of words like: var Wor ...

javascriptcssangularjshtml

Ways to loop through HTML elements based on certain criteria?

Issue : The v-for loop is successfully iterating and binding data in the HTML template, but there is a challenge in partially iterating it based on certain conditions. Please refer to the JSFiddle link below for a demo. Objective : In the provided demo li ...

javascriptvue.jsfor-loopvuejs2

AngularJS, the element being referenced by the directive is empty

Currently, I am in the process of transferring a jQuery plugin to AngularJS simply for the enjoyment of it. Previously, when working with jQuery, my focus was on manipulating the DOM using jQuery functions within the plugin loading function. Now that I am ...

javascriptjqueryhtmlangularjsdom