If the width is divisible by a certain value

I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next.

For example, when the window width is 1000px and the element is at full width (let's call it EW for element width), if EW can be divided by 90, then it is ok. So, 1000/90 = 11.1(1). As we make the window smaller, we reach 990/90 = 10, which is also okay.

Check out this CODEPEN for an example.

The code works when you resize slowly, but it gets lost when you do it quickly.


var windowWidth = $(window).width(),
    widthNumber = windowWidth / 90;

$("#EW").css({
    width: windowWidth
});
if(widthNumber % 1 != 0){
    console.log("don't change")
} else {
    console.log("change")
}

Does anyone have any ideas on how to solve this issue?

Answer №1

According to the jQuery resize documentation:

It is important to note that code within a resize handler should not depend on the number of times the handler is called. The frequency of resize events can vary depending on the browser implementation - some browsers like Internet Explorer and WebKit-based browsers send continuous resize events while resizing, while others like Opera only send one event at the end of the resize operation.

This explains why your method may not be triggered when rapidly resizing the window.

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

Increment by 1 until a specific number is reached instead of displaying all numbers within an array

I have an array of numbers and for each number in the array, a request is sent to an external website using the number as a URL variable. The webpage content is then displayed. Instead of manually listing the numbers (1, 2, 3, 4, 5, 6, 7, 8, 9) in the arr ...

Disabling the background shadow effect in Angular Material's Accordion

I successfully disabled the background shadow on the Angular Material Accordion in this demonstration by incorporating the following CSS rule: .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none !important; /* box-shadow: ...

What is the method for inserting a vertical line between two div elements?

Can you show me how to add a vertical line between two div elements? .flex-container { display: -webkit-flex; margin: 0 auto; text-align: center; } .flex-container .column { width: 320px; text-align: center; } .vr { border-left: 2px dott ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

What is the best method for extracting string values from a JavaScript object?

I am working with JavaScript objects that look like this: {["186,2017"]} My goal is to extract and display only the values: 186, 2017 Initially, I attempted to use JSON.stringify thinking it was a JSON: console.log(JSON.stringify(data)); However, thi ...

Tips for showcasing the latter portion of text within an HTML select dropdown menu

I have a select drop-down list with a fixed width of 80px, as shown in the image below: <select id="dd_country_code_2" name="dd_country_code_2" style="width: 120px; height: 23px;"> <option value="SEL">(Country code)</option> & ...

Creating a modal popup when a button is clicked

After searching online for a way to make my sign up modal pop up when the signup button in my navbar is pressed, I was unable to find any information on how to achieve this. I suspect it involves JavaScript, but my knowledge of JS is limited. I attempted ...

Customizing Material UI Themes

Is there a way to customize the MuiTheme overrides for a specific named element like this? .MuiStepLabel-label.MuiStepLabel-active { color: rgba(0, 0, 0, 0.87); font-weight: 500; I've attempted modifying various classes such as MuiStepLabelLa ...

Tips for refreshing the <img> tag using a user image

I am currently designing a bootstrap webpage and trying to implement a feature where the user can input an image, which will then be displayed in a preview modal along with some text provided by the user. The modal is functioning correctly. Here is the co ...

JavaScript enables Partial Views to load: Potential XSS vulnerability identified by HP Fortify

Fortify has identified a XSS vulnerability in my JavaScript function. I need help finding a solution since this method is heavily used in my app. I am attempting to use ajax to call a partial view and then append the resulting HTML to a specific DOM div e ...

Sketch a variety of numerical values in a circular formation

I was working on a number circle using the below fiddle, but I need it to always start from 0 at the top. How can I achieve this? Additionally, I would like to connect the numbers from the inner circle border to the number with a dotted line. How can I dr ...

Grid-based layout for Bootstrap modal windows

Looking for assistance with aligning the buttons in the modal window to match the alignment of the input boxes. Here is the HTML code: <div> <form name="_form" class="form-horizontal" ng-submit="submit(_form)"> <div class="modal ...

Seeking advice on a coding dilemma: What is the best way to enable users to click on each item in a list they submit

Hey there, I'm no expert in this field so I could really use some help with my PHP document. Here's the situation: I have a PHP document that includes a form. Every time a user submits text into the input field, the text is echoed as a list item ...

Tips for safely sanitizing an HTML file containing both HTML tags and JavaScript functions within an Angular application

I am trying to bind an HTML file that contains both HTML and JavaScript (jQuery) functions into my Angular application. Here is how I bind my HTML file into the component's HTML: <div [innerHTML]="currentDetailEntry?.content | sanitizeHtml">&l ...

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

What is the alternative method for determining the interval with mysql if the date and time do not follow the TIMESTAMPDIFF format?

Is it possible to calculate a date-time interval in MySQL when the format is "Sunday 31 January 2016 - 00:55" and not in TIMESTAMPDIFF format? Any suggestions on how to achieve this? I have been using a jQuery script to select dates and times from this pl ...

Out of nowhere, I started getting a 401 error from .net and jquery

My ajax call used to work perfectly: $J.ajax({ type: 'POST', url: "/ajax/getCharts", data: JSON.stringify(cids), dataType: 'json', asynch: false }) However, things changed yesterday. We implemented Microsoft.AspNet ...

Django - I need to update the dictionary content when a button is clicked

I am trying to create a functionality on my HTML page where a number displayed increases by 1 every time a button is pressed. However, the code I have written so far does not seem to be working properly. Below is the code snippet: mypage.html <form met ...

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

Update a JavaScript variable with fresh information and then execute JSON parsing

I have implemented this code to display a Verite Timeline on my webpage: <div id="timeline-embed"></div> <script type="text/javascript"> var timeline_config = { width: "100%", height: "100%", debu ...