Adjust and modify class when resizing the window

Question

Adjust and modify class when resizing the window

I've encountered a challenge with my Bootstrap Modal when trying to set the width to 750px on large desktops. When resizing the window to a smaller size, the modal loses its responsiveness. To tackle this, I added a class to the modal to give it a fixed width of 750px and removed it when the window is less than 800px. The issue arises when the class remains deleted even when the window size goes back above 800px. How can I reapply the class when the window is larger than 800px? Here's what I have so far:

function checkWidth() {
  if ($(window).width() < 800) {
    $('div').removeClass('modal-width');
  }
}

$(window).resize(checkWidth);

jquery css bootstrap-modal

Answer 1

Answer №1

To achieve the same effect without using JavaScript, you have the option to utilize CSS media queries:

@media screen and (min-device-width: 800px){
  .modal{
      width: 750px;
   }
}

This particular rule will only take effect when the browser's width is equal to or greater than 800px.

Answer 2

To achieve the same effect without using JavaScript, you have the option to utilize CSS media queries:

@media screen and (min-device-width: 800px){
  .modal{
      width: 750px;
   }
}

This particular rule will only take effect when the browser's width is equal to or greater than 800px.

Answer 3

Answer №2

One way to achieve responsiveness is by using @media queries in CSS or through JavaScript.

Here is an example code snippet:

<body onresize="adjustClass();">
    <div id="box" class="responsive-box">
    </div>
</body>

.responsive-box {
 background-color: blue;
    width: 400px;
    height: 400px;
    display: block;
}

function adjustClass() {
    var element = document.getElementById('box');
    if (window.innerWidth < 300) {
        element.removeAttribute('class');
    } else {
        element.setAttribute('class', 'responsive-box');
    }
}

Check out this JSFiddle example.

Answer 4

One way to achieve responsiveness is by using @media queries in CSS or through JavaScript.

Here is an example code snippet:

<body onresize="adjustClass();">
    <div id="box" class="responsive-box">
    </div>
</body>

.responsive-box {
 background-color: blue;
    width: 400px;
    height: 400px;
    display: block;
}

function adjustClass() {
    var element = document.getElementById('box');
    if (window.innerWidth < 300) {
        element.removeAttribute('class');
    } else {
        element.setAttribute('class', 'responsive-box');
    }
}

Check out this JSFiddle example.

Answer 5

Answer №3

Check out the DEMO here

If you prefer not to utilize media queries, this alternative method will still get the job done.

function adjustModalWidth() {
    if ($(window).width() < 800)
        $('div').removeClass('modal-width');
    else
        $('div').addClass('modal-width');
}

$(window).resize(adjustModalWidth);

Answer 6

Check out the DEMO here

If you prefer not to utilize media queries, this alternative method will still get the job done.

function adjustModalWidth() {
    if ($(window).width() < 800)
        $('div').removeClass('modal-width');
    else
        $('div').addClass('modal-width');
}

$(window).resize(adjustModalWidth);

Answer 7

Answer №4

try out this code snippet

$(document).ready(function() {
    $(window).on("load resize", function() {
        if ($(this).width() < 1200) {
            $('body').addClass('small-screen')
        } else {
            $('body').removeClass('small-screen')
        }
    })
})

Answer 8

try out this code snippet

$(document).ready(function() {
    $(window).on("load resize", function() {
        if ($(this).width() < 1200) {
            $('body').addClass('small-screen')
        } else {
            $('body').removeClass('small-screen')
        }
    })
})

Answer 9

Answer №5

If you're looking to make your modals responsive, simply add the "modal-wide" class to the main modal div and adjust the width in the CSS. For example, setting it to 90% should do the trick. Using jQuery, you can dynamically set the max-height of the content area based on the browser dimensions. This ensures that the modal is only as tall as necessary and will provide a scrollbar if needed.

To resize the modal, just tweak the CSS parameters accordingly.

<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a>

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>

<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>

<div id="normalModal" class="modal fade"></div>
<div id="tallModal" class="modal modal-wide fade"></div>
<div id="shortModal" class="modal modal-wide fade"></div>

For an EXAMPLE, check out this jsFiddle demo.

I believe these steps will help you achieve the desired result.

Answer 10

If you're looking to make your modals responsive, simply add the "modal-wide" class to the main modal div and adjust the width in the CSS. For example, setting it to 90% should do the trick. Using jQuery, you can dynamically set the max-height of the content area based on the browser dimensions. This ensures that the modal is only as tall as necessary and will provide a scrollbar if needed.

To resize the modal, just tweak the CSS parameters accordingly.

<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a>

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>

<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>

<div id="normalModal" class="modal fade"></div>
<div id="tallModal" class="modal modal-wide fade"></div>
<div id="shortModal" class="modal modal-wide fade"></div>

For an EXAMPLE, check out this jsFiddle demo.

I believe these steps will help you achieve the desired result.

Adjust and modify class when resizing the window

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to toggle the visibility of the answers to a question when the corresponding hyperlink is clicked, and how can the text on this hyperlink be updated dynamically using jQuery?

If a DOM element contains any text node, completely remove the element

Creating an illustration with HTML5 from an image

Is there a way to prevent continuous repetition of JavaScript animated text?

Locate the next element with the same class using jQuery across the entire document

Clicking on a table will toggle the checkboxes

Adaptive component transformation

Unable to modify SVG color to a white hue

JQuery loader & amazing animations

What is the best way to ensure my php variable is easily accessed?

What could be causing the issue of not being able to load CSS files or images?

Unable to separate the site logo (brand) and navigation links in Bootstrap 5 navbar

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Problem with selecting elements using Jquery syntax

Refresh a function following modifications to an array (such as exchanging values)

Filtering and selecting tables in HTML

Whiskey Angostura and Straight Row Set to 8, not 12

In which part of the DOM tree are Event/Callbacks typically located?

Issue with Bootstrap modal not displaying in the center as expected