Modify the div's width from 100% to 1000 pixels when it is less than 1000 pixels, using Javascript

Question

Modify the div's width from 100% to 1000 pixels when it is less than 1000 pixels, using Javascript

I need help with writing Javascript code that will change the width of a div element called "red" from 100% to 1000px when the browser width is less than 1000px. The code should revert the width back to 100% when the browser width is greater than 1000px. I am focused on learning pure Javascript without relying on JQuery. I have found many JQuery solutions, but I want to master Javascript first. The reason I want to change the "red" div element is because min-width: 1000px; is not supported in Internet Explorer. Any assistance or guidance on this matter is greatly appreciated. Please check out this JSFiddle link for reference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Positioning</title>

<style type="text/css"> 
#red {position: absolute; margin-top: 100px; width: 100%; min-width: 1000px; height: 400px; background-color: red;} 
#contents {position: relative; top: 10px; width: 1000px; height: 600px; margin: 0px auto; border: 1px solid white;} 
html, body, div {margin: 0; padding: 0; border: 0;}
</style>

</head>

<body style="background-color: black;">

<div id="red"></div>
<div id="contents"></div>
</body>

</html>

javascript css resize getelementbyid

Answer 1

Answer №1

Here is a JavaScript code snippet that adjusts the width of an element based on the viewport size:

window.onresize = function() {
    var widthViewport = window.innerWidth || document.body.clientWidth;
    var el = document.getElementById('red');

    if( widthViewport < 1000 ) {
        // Append the classname which specifies the fixed width
        el.className += ' fixed_width';
    } else {
        // Remove the classname that fixes the width at 1000px
        el.className = el.className.replace( /(\b\s*fixed_width\b)+/, '' );
    }
};

And here is the corresponding CSS code:

.fixed_width{
    width: 1000px;
}

Answer 2

Here is a JavaScript code snippet that adjusts the width of an element based on the viewport size:

window.onresize = function() {
    var widthViewport = window.innerWidth || document.body.clientWidth;
    var el = document.getElementById('red');

    if( widthViewport < 1000 ) {
        // Append the classname which specifies the fixed width
        el.className += ' fixed_width';
    } else {
        // Remove the classname that fixes the width at 1000px
        el.className = el.className.replace( /(\b\s*fixed_width\b)+/, '' );
    }
};

And here is the corresponding CSS code:

.fixed_width{
    width: 1000px;
}

Answer 3

Answer №2

Give this a shot


document.addEventListener('DOMContentLoaded', function() {
    var screenWidth = document.body.clientWidth;
    if(screenWidth < 1200) {
        document.getElementById('blue').style.width = '1200px';
    }
});

Answer 4

Give this a shot


document.addEventListener('DOMContentLoaded', function() {
    var screenWidth = document.body.clientWidth;
    if(screenWidth < 1200) {
        document.getElementById('blue').style.width = '1200px';
    }
});

Answer 5

Answer №3

let redElement=document.getElementById('red');  

/** Detecting the browser width **/
let windowWidth=window.innerWidth || document.body.clientWidth; 

if(windowWidth<1000) 
{
    redElement.style.width='1000px';
}
else
{
    redElement.style.width='100%';
}

Answer 6

let redElement=document.getElementById('red');  

/** Detecting the browser width **/
let windowWidth=window.innerWidth || document.body.clientWidth; 

if(windowWidth<1000) 
{
    redElement.style.width='1000px';
}
else
{
    redElement.style.width='100%';
}

Answer 7

Answer №4

To support older versions of Internet Explorer, you have a few options for incorporating JavaScript. You can include it in the header, an external file, or use the expression property in CSS.

The expression property allows you to add JavaScript code inside a CSS file that will only be recognized by IE.

Here is a basic example:

 = document.body.clientWidth < 1001 ? "100px" : "auto"

In your CSS file, you can use the following code:

width: expression( document.body.clientWidth < 1001 ? "100px" : "auto" ); /* set min-width for IE */

Answer 8

To support older versions of Internet Explorer, you have a few options for incorporating JavaScript. You can include it in the header, an external file, or use the expression property in CSS.

The expression property allows you to add JavaScript code inside a CSS file that will only be recognized by IE.

Here is a basic example:

 = document.body.clientWidth < 1001 ? "100px" : "auto"

In your CSS file, you can use the following code:

width: expression( document.body.clientWidth < 1001 ? "100px" : "auto" ); /* set min-width for IE */

Answer 9

Answer №5

Is this what you're looking for? http://jsfiddle.net/ghPqM/2/ ?

checkWindowSize();
window.onresize = checkWindowSize;

function checkWindowSize(){
    var blueElement = document.getElementById("blue");
    var windowWidth = window.innerWidth;

    if (windowWidth < 1200){
        blueElement.innerHTML = "Under 1200 pixels";
    } else {
        blueElement.innerHTML = "Over 1200 pixels";
    }
}

Answer 10

Is this what you're looking for? http://jsfiddle.net/ghPqM/2/ ?

checkWindowSize();
window.onresize = checkWindowSize;

function checkWindowSize(){
    var blueElement = document.getElementById("blue");
    var windowWidth = window.innerWidth;

    if (windowWidth < 1200){
        blueElement.innerHTML = "Under 1200 pixels";
    } else {
        blueElement.innerHTML = "Over 1200 pixels";
    }
}

Modify the div's width from 100% to 1000 pixels when it is less than 1000 pixels, using Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Encountering an ENOENT error while attempting to incorporate a style guide into next.js (react)

Sluggish Bootstrap Carousel Requires Mouseover or Click to Start Sliding

Prevent the reloading of the page by utilizing Ajax technology when submitting a form in Laravel

What is the method for displaying script commands within package.json files?

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

Having trouble retrieving data from the PokeAPI

Using the Set function to compare distinct elements within different arrays

The vertical drop-down menu is displaying and functioning incorrectly

extracting an empty value from this variable

Attempting to remove certain selected elements by using jQuery

Ways to display multiple PHP pages in a single division

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

$rootScope undefined in an easy AngularJs Routing Demo

What is the method for customizing the background color in a .vue file using Bootstrap?

Removing an item from a React (Hooks) array state: A step-by-step guide

What is the best method for displaying an HTML string within an HTML file in Angular 5?

Steps to create a toggle feature for the FAQ accordion

Only submit the form if all files are selected to prevent any missing files from being uploaded

Next JS restricts XLSX to return only 100 objects as an array of arrays

Tips for toggling the visibility of a revolution slider based on current time using JavaScript