Include a class on the final row when looping through the stripes in a responsive manner

In each row, I have a column with a blue strip that is generated using jQuery based on the number of rows.

My question is how to add a class to the last strip if the row only has 1 or 2 boxes:

  • If the last row has 1 box, add class='last' to the strip
  • If the last row has 2 boxes, add class='half' to the strip
  • If the last row has 3 boxes, do not add any class

The strips are created with class=dna.

This is my code snippet:

 (function () { 
   // JavaScript code goes here 
 })();

Here is what it should look like if the last row only has 2 boxes:


I have solved this issue. If anyone else faces the same problem, you can check out the updated code here - http://jsfiddle.net/v3v7C/10/

Thank you!

Answer №1

Here is some updated code:

 var num = $('.container').length / 3;

Also, I made some changes to the CSS:

 @media(max-width:979px){.wrapper{width:600px;} .container{ width:30%;}}
.section:last-of-type{width: 66%;}

Check it out on JSFiddle

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

Arrange the date correctly based on the information retrieved from a JSON file

After retrieving a JSON file using an API, it looks something like this: timeline: { cases: { '5/13/21': 5902343, '...' : ... }, } This data is then used to create a chart using ChartJs. The problem is that the dates in the ...

Incorrect conditions when attempting to compare text strings

My current code retrieves the user's locale and saves it in a variable. I have implemented a conditional statement that checks if the locale matches a specific value - as shown in the image below: https://i.sstatic.net/ASVZ8.png In the screenshot, y ...

Issues with implementing Bootstrap datetimepicker in ClojureScript

Recently, I encountered an issue while attempting to integrate Bootstrap datetimepicker into my clojurescript project. Here's the snippet of code I used: (.datetimepicker (js/$ "#dateid") Unfortunately, I kept running into a frustrating Unc ...

Unidentified googletagmanager detected in vendors segment

Recently, my ad blocker detected an unfamiliar Google Tag Manager request originating from a chunk provided by one of my vendors. Is it typical for tracking to be embedded in dependencies like this? And what type of information can be collected from my we ...

Switch between dark and light themes on the Tradingview widget

I have integrated a TradingView widget into my website and I am working on adding a dark/light mode switch to the site. I would like the widget color to change along with the background in the switch. See Widget Screenshot TradingView Widget - Widget sour ...

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

When trying to move MediaPipe Selfie Segmentation results to different Chrome tabs, they fail to activate

const videoEl = document.getElementsByClassName('input_video')[0]; selfSegObj = new SelfieSegmentation({locateFile: (file) => { return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`; }}); selfSegObj.setOptions({ ...

css/Boostrap 4 - Aligning to the center based on viewport

I am relatively new to working with html/css/bootstrap 4 and currently in the process of designing a navbar. Essentially, I aim to have a YouTube logo on the left that links to a YouTube channel, a Spotify logo on the right that directs to a Spotify creato ...

steps for setting up babel-cli and babel-preset-react

I attempted various methods of installing babel-cli babel-preset-react Here's what I tried: npm install --save-dev babel-cli babel-preset-react However, when I run babel -h An error message appears saying The program 'babel' can be found ...

What is the best method to eliminate elements from a queue using JavaScript?

I recently attempted to incorporate a queue feature into my JavaScript code. I found some helpful information on this website. While I successfully managed to add items to the queue, I faced difficulties when attempting to remove items from it. var queue ...

What could be the reason that the auto complete feature in a jQuery Textbox is failing to work properly when utilized within

When implementing an auto complete jQuery in a Textbox on my web form, I encountered an issue. The jQuery works perfectly fine when used in a normal HTML page below the title tag and within the head tags, but it does not work when I try to use it within a ...

What is the best way to align bootstrap col-md-4 and col-md-5 in the center of a webpage?

I am facing an issue with my two bootstrap items, one col-md-5 and the other col-md-4. Despite trying to center them in the middle of the page, they are currently positioned with col-md-4 on the left side and col-md-5 in the middle. Does anyone have a solu ...

JavaScript code for Tree not functioning correctly on Internet Explorer

Seeking assistance to fix a bug in my JavaScript program. The code works perfectly on Google Chrome and Firefox, however it encounters an error in Internet Explorer 8 as indicated below. Any suggestions on how to resolve this issue would be greatly appreci ...

Receiving a JavaScript function's output with Python Selenium

Currently, I am in the process of scraping data from a specific webpage. The focus is on extracting the return string value from a Javascript function snippet. The target value to be extracted is indicated as "2227885" https://i.sstatic.net/5dLJ ...

What could be causing my onscroll function to cut off before reaching the end of the element?

Struggling with a function I created to slide a div horizontally into view in the center of a vertically scrolling page. It seems to work well under normal conditions, but when the page is scrolled quickly, it sometimes fails to complete the horizontal mov ...

Apply CSS to every other div using a CSS selector

Struggling with selecting specific divs in CSS. Snippet of my code: <div class="card"> <div class="test">Asdasdasd</div> </div> <div class="card"> <div class="test">Asdasdasd</div> </div> <div class= ...

The term 'EmployeeContext' is being utilized as a namespace in this scenario, although it actually pertains to a type.ts(2702)

<EmployeeContext.Provider> value={addEmployee, DefaultData, sortedEmployees, deleteEmployee, updateEmployee} {props.children}; </EmployeeContext.Provider> I am currently facing an issue mentioned in the title. Could anyone lend a hand? ...

"Mastering the art of patience: Delaying execution until an animation completes using

When attempting to create an infinite loop for a carousel with a click event on a specific div to center it at a desired position, I encountered an issue. If the clicked item is more than one position away from the center, an unexpected effect occurs that ...

The optimal CSS selector for targeting a specific class

Within my CSS stylesheet, I have defined a class called myclass .myclass { background-color: 'green'; } This class is dynamically added to elements on my webpage. However, if there are more specific selectors like input[type='text'] ...

Ensuring the screen reader shifts focus to the previous element

Utilizing the screen reader to redirect focus back to the previous element has proven to be a challenge for me. After clicking the Return button, it will vanish and the Submit button will take its place. If the Submit button is then clicked, it disappears ...