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

The jQuery ajax post with dataType set to 'JSON' functions properly on Android devices but encounters errors on iPhone 4

Tips for configuring the delay of AJAX loading

Having trouble with CSS :before pseudo-element and sibling selector?

My React project is unable to import the foundation SCSS file into the App.scss file

jQuery validation for various forms with individual submission buttons

Having trouble accessing the JSON result with Jquery

When the div tag exceeds its boundaries, apply a new class

Struggling with establishing a connection between Jquery and a .php file

JQuery Form Wizard - Adding a Finish Button Linked to a Page

Steps for creating an expandable menu in the Magento category list

Tips for maintaining DataTables filters after navigating Back/Forward or refreshing the page

Tips for presenting random images from an assortment of pictures on a webpage

Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

Aligning text in the center of a header, positioned beside an image

Utilizing AJAX response to update the current URL in a Spring MVC application - A step-by-step guide

What is the best way to transfer data from a div tag to an li tag using JavaScript?

Ensure that the input box expands to occupy the entire HTML page

Layer divs on top of each other without explicitly defining their stacking order

CSS - Combining underline, striikethrough, and overline effects with customized styles and colors within a single element

Supply a variety of values to jQuery