What is the best way to use a CSS class in my script specifically for specific screen sizes?

Utilizing bootstrap 4, my code is executing a for loop to generate eight divs with the class "item".

To display five items per row, I am using the class "col-2". However, this results in six items being shown in a single row.

Since I cannot include the offset directly in the markup due to the loop, I am using JavaScript to add it.

In order to only apply this JavaScript at a minimum width of 1440px, I've added the following code snippet:

$('.item:nth-child(5n+1)').addClass('offset-1');

Is there a way to ensure this JavaScript only runs when the viewport is at a width of 1440px or larger?

javascriptjqueryhtmlcss

Answer №1

Who needs javascript when you have CSS to do the job for you? Just introduce a new class:

@media(min-width: 1440px){
  .col-5{
    width: 20%;
  }
}

Answer №2

give this a shot, pal

if (window.innerWidth >= 1440) {
    console.log(window.innerWidth)
    ...
    // insert your code here
}

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

I attempted to log the elements of my submit button form, but unfortunately nothing is appearing in the browser console

I am attempting to capture the data from my submit button form, but for some reason, nothing is showing up in the console of my browser. $("#signupform").submit(function(event){ // Stopped default PHP processing event.preve ...

javascriptjquery

Angular website showing only app.component.html on the frontend

I'm currently working on developing the frontend for my API and I've encountered an issue while trying to create a new component. Despite my best efforts, including setting up an app-routing.module.ts file, my application only displays the conten ...

javascriptangularspring-bootbootstrap-5

declaration of function interface and property that cannot be modified

After reviewing some new TypeScript code, I encountered a part that left me puzzled. interface test { (a: number): number; readonly b: number; } While I understand that (a:number): number signifies a function where the argument is a:number and the ret ...

javascripttypescript

Struggling to click on a dynamic link before it times out

Can someone help me with a puzzling issue I can't seem to solve? I am trying to achieve the following: Whenever a link is clicked (for example: mysite.com/blog/blog-article.html), I want to save the href of that link to a variable. Then, in JavaScri ...

javascriptajaxhistory.jshtml5-history

Listening for events on a canvas positioned beneath another element

I am currently dealing with an issue where I have a mouse move event listener set up on my canvas element. However, there is a div placed on top of the canvas with a higher z-index, which contains some menu buttons. The problem arises when I want the mous ...

javascripthtmlcanvas

Error occurred in next.js environment file when referencing process.env keys as strings in .env.local file

I have a .env.local file with various values stored in it. NEXT_PUBLIC_GA_ID = myvariablevalue I created a function to validate the presence of these values: export const getEnvValue = (name: string, required = true) => { const value = process.env[na ...

javascriptreactjsnext.js

After the table finishes loading, my goal is to display an export to Excel button

I am currently working on generating an HTML table using JSON data received from the backend Java application. My objective is to display an "Export to Excel" button after populating the table. The process involves users entering dates and selecting option ...

javascriptjquery

Incorporating a jQuery plugin within the NextJS framework

I am facing difficulties integrating a jQuery plug-in that is six years old. I have attempted to use the findDOMNode module from react-dom, as well as following the integration method outlined in the React Official Docs, but unfortunately, none of these m ...

jqueryreactjsnext.js

What is the reason that the selected/checked attributes of child select and input elements are not preserved when transferring HTML from one element to another?

In the world of jQuery, there lies a curious phenomenon. When you dare to set the HTML of one element as the HTML of another element, a strange omission occurs. The checked attribute of checkbox inputs and the selected attribute of select inputs are myster ...

javascriptjqueryhtmldom

Tips on blending a background with three.js sprite image?

Currently, I am facing issues with blending sprites in three.js to load textures for points (originally a pointcloud). Unfortunately, the blending does not seem to work correctly. Below is the code snippet that I am using: this._renderer = new THREE.WebGL ...

javascriptthree.js

Tips on organizing a JSON object for a JavaScript project

For my project, I am designing a data structure that utilizes JSON. My goal is to create an efficient method for searching and editing the JSON object. Which structure would be considered standard in this scenario? Is there a preferred way to implement eit ...

javascriptjson

Verify Radio Buttons in AngularJS

I thought validating a selection from a radio group would be simple, but I'm struggling to find the right solution. In my form, I need to ensure that at least one option is selected from the radio buttons. Using the 'required' attribute on e ...

javascripthtmlformsangularjs

Enhance the functionality of Javascript Promise.then by allowing the argument function to accept an extra parameter

In my code, I am currently utilizing ES6 Promise as shown below: const ctx = {} Promise.resolve() .then(() => doSomethingWith(ctx)) .then((retValue) => doSomethingElseWith(retValue, ctx)) I wish to achieve something like this: const ctx = {} u ...

javascriptnode.jspromisees6-promise

Angular Form Validation: Ensuring Data Accuracy

Utilizing angular reactive form to create distance input fields with two boxes labeled as From and To. HTML: <form [formGroup]="form"> <button (click)="addRow()">Add</button> <div formArrayName="distance"> <div *n ...

javascriptangulartypescriptvalidationangular-reactive-forms

Displaying JSON array data across three different pages using AngularJS and Ionic framework

I have an array of categories with multiple products. I want to display these categories on a category page. When a category is clicked, it should redirect to the product page and show the relevant products. Similarly, when a product is clicked, it shou ...

javascriptjqueryangularjsjsonionic-framework

Transforming a JavaScript array into a JSON format

Is there a way to convert a JavaScript array into JSON format? [{ "userName": "Rodrigo", "date": "April 25, 2017", "score": 5 }] [{ "userName": "Jon", "date": "April 24, 2016", "score": 4 }] Error: There is a parser error on line ...

javascriptjson

leveraging third party plugins to implement callbacks in TypeScript

When working with ajax calls in typical javascript, I have been using a specific pattern: myFunction() { var self = this; $.ajax({ // other options like url and stuff success: function () { self.someParsingFunction } } } In addition t ...

javascriptajaxtypescript

Parent's attention drifts away from Kendo UI Context Menu

One issue I'm facing is that when I open a Kendo UI context menu from a sidebar link, the hover effect on the sidebar is lost. Is there a way to maintain the focus on the sidebar even when the context menu is triggered? Any suggestions? Check out the ...

csskendo-uicontextmenusidebarjquery-hover

Harness the power of Bootstrap 5.3 color modes based on the user's browser

It has come to my attention that Bootstrap 5.3 introduces support for a customizable color scheme, allowing me to personalize various key features. Interestingly, the default dark theme now relies on the explicitly defined bs-theme data attribute rather t ...

javascriptbootstrap-5darkmode

Exploring AngularJS JSON Parsing Techniques (such as utilizing ng-repeat)

My approach to processing json data looks like this: $scope.activities = response.data; console.log($scope.activities.length); var list = []; for (var i = 0; i < $scope.activities.length; i++) { console.log($scope.activities[i].name); list.pus ...

javascriptangularjsjson