Jquery fails to adjust div width on smaller screens despite successful resizing on larger screens

I have a script that automatically adjusts the width of child divs based on the number of children. On smaller screens, I want them to be 100% wide. I've attempted inserting the script within the existing code for regular screens as well as at the end of the page, but neither method worked.

Check out the code snippet below:

$(".basecollections").each(function(){
    var child_width = 100 / $(this).children().length;
    child_width = Math.floor(child_width);
    $(this).children().css("width", child_width + "%");
    if (screen.width < 1000) {
        $(this).children().css('width', '100%');
    } 
})

View the example on JSFiddle

javascriptjquerycss

Answer №1

Instead of using screen.width, it is recommended to use $(window).width(): Check out the DEMO here

$(".basecollections").each(function(){
    var child_width = 100 / $(this).children().length;
    child_width = Math.floor(child_width);
    $(this).children().css("width", child_width + "%");
    if ( $(window).width() < 1000 ) {
        $(this).children().css('width','100%');
    } 
});

If you want the changes to be dynamic, make sure to place this code inside the window element's resize event:

$(window).resize(function(){
    $(".basecollections").each(function(){
        var child_width = 100 / $(this).children().length;
        child_width = Math.floor(child_width);
        $(this).children().css("width", child_width + "%");
        if ( $(window).width() < 1000 ) {
            $(this).children().css('width','100%');
        } 
    });
});

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

Parse a string containing a selection of markdown by using regular expressions for tokenization

I need to tokenize a string using a regular expression that consists of markdown formatting. Specifically, bold text is denoted by **text** and italic text is denoted by _text_. To tokenize the string "a _b_ c **d** _e", it should be split into ['a & ...

javascriptregexmarkdown

Enhance the clarity of content within an IFrame by sharpening the focus on

I recently developed an iframe to open a chat site I built using React.js and Tailwind. The iframe is loaded dynamically on the website through javascript. However, I noticed that when I click on the input field inside the iframe, the content appears blurr ...

javascripthtmlreactjsiframewidget

Different ways to manipulate the CSS display property with JavaScript

Having trouble changing the CSS display property to "none" using JavaScript. Check out my code: <div class="mydiv" onClick="clickDiv1()">hello</div> <div class="mydiv" onClick="clickDiv2()">hi</div> <div class="mydiv" onClick=" ...

javascripthtmlcss

JavaScript post method is failing to work, while it successfully runs in POSTMAN

Attempting to send a message to Android devices through a POST request to Firebase Cloud Messaging. When using POSTMAN, the server responds with a success response 200. However, when attempting the same operation with JavaScript using an AJAX request, I r ...

javascriptajaxfirebasepostpostman

What is the best way to integrate a CSS file into Vue.js 2?

At the moment, I'm diving into Vue.js 2 but I've hit a roadblock. Can anyone advise me on how to incorporate external CSS in Vue.js 2? I would greatly appreciate any solutions you can offer. Thank you! ...

javascriptcssvue.jsvuejs2

An error occurred when using webpack, babel, and react, showing an unexpected token 'import'

I am working on getting index.js to function with es2015. Before suggesting using .babelrc, please note that I have included BOTH es2015 and react presets (even though there is no react in this project). This code snippet includes: import { default as L ...

javascriptwebpackbabeljs

"Is there a way to reverse the action of $( "button" ).remove()

Currently, I have implemented JQuery's $( ".button" ).remove(); function to get rid of all the buttons on my webpage immediately after a user clicks the print PDF button that changes the HTML page into a PDF. Nevertheless, once this process is done ...

javascriptjquerycsshtml

Creating an array of objects is causing problems related to encapsulation

Could someone please clarify for me the reasoning behind... $(document).ready(function() { var codes = ['0291285', '0409338', '0521704', '0521990', '0523652', '0523657', '0523660', ...

javascriptjqueryarraysobject

Can someone assist me in figuring out why the ShowDetail.html page is not opening after I submit my form?

I'm having trouble getting the shoDetail.html page to open when I submit the code. I even tried entering the complete URL, but it still won't work. Here is the code I am using: <div class="form-group row"> <div class="col-lg-12 col-md-1 ...

javascriptjqueryhtmlcssbootstrap-4

What could be causing the lack of response from PHP Ajax?

In the midst of tackling my college project, I find myself working on a webpage that is designed to showcase City and temperature information. To accomplish this task, I am delving into the realm of AJAX in order to dynamically update the temperature at sp ...

javascriptphpajax

Calculator for Angular User Input

Looking to create a simple application, I encountered an issue with my if statement. I would greatly appreciate any help in identifying the problem. The goal of the application is to provide users with a text box where they can input comma-separated items ...

javascriptangularjs

relocating the input field underneath the button

I need help figuring out how to arrange this. Here's an example link: http://jsfiddle.net/VBS4E/25/ Is there a way to position the input field directly below the button? Like this: ________ __________ __________ | Btn#1 | | Btn#2 | | Btn# ...

htmlcss

Copying content from one website to another using JavaScript

Currently, I am working on a website which stores data and I require assistance in transferring this data to another site. If you have any suggestions using Javascript or other methods, please let me know. ...

javascripthtmlajaxweb

Erase every class within one second using only Pure Javascript

After trying to remove all classes after a second with no success, I attempted the code below: function copyLink() { var text = document.getElementsByClassName("text"), len = text.length; for(i = 0; i < len; i++) { text[i].classList.ad ...

javascript

Combining multiple directories into a single output using the rollup command

Alright, let's talk about my directory setup: mods/ -core/ --index.js --scripts/ ---lots of stuff imported by core/index Currently, the typical rollup process works smoothly if you want to create something like mods/core/index.min.js. However, I ha ...

javascriptnode.jsrollupjstranspiler

Using Wordpress's built-in feature for displaying images in the admin panel can enhance the user experience and make

I'm currently in the process of developing a unique Wordpress plugin for one of my customers and I really want to incorporate a modal popup feature on the admin page. After experimenting with ThickBox, LightBox, and Fancybox, none of them seem to do t ...

jqueryjquery-pluginswordpress

How to efficiently calculate totals in an HTML table using JavaScript/jQuery

I have a gridview that displays product details and includes a quantity textbox that is not linked to any database. For each row, I want it to show the cost (price * quantity) and the total cost for all rows in a label below. However, I am encountering a f ...

c#javascriptjqueryasp.netgridview

Using jQuery, identify when any of the elements within every function are missing

In my JavaScript file, I have the following code snippet: var aryYears= []; $(".year").each(function(){ aryYears.push($(this).val()); }) This allows me to pass an array of years as a parameter in the saveChanges function. I want to make ...

javascriptjqueryfunctionalerteach

Parent table surpassing limits

Can someone help me with an issue I'm having regarding a table that is exceeding the width of its container? I've been struggling to find out what's causing this problem, especially because it seems to only happen in Firefox. Here's the ...

htmlcss

What is the method for achieving a table with 100% height in HTML?

I have a row of 5 tables, each with 100% height that displays correctly in the browser - the elements fill all available space. However, in print view, they do not stretch as desired. https://i.sstatic.net/9d1cg.png I am looking to have the table extend ...

htmlcss