Verify the height first before applying or removing a class

I am currently working on implementing a responsive navigation. The goal is to add a class when the width of the element exceeds a certain value, and remove that class when it falls below that value:

var navWidth = $("#primary-header-nav").width();
if (navWidth < 770) {
  $('#primary-header-nav li a').addClass('box-1-9');    
} else {
  $('#primary-header-nav li a').removeClass('box-1-9'); 
}

Unfortunately, despite the conditional logic in place, the class is never actually applied - regardless of the width.

If you'd like to take a look at the actual website where this issue is occurring, here is the link:

javascriptjquerycss

Answer №1

Give this a shot.

$(document).ready(function(){
  $(function(){
    $(window).on("resize", function(){

      var screenWidth = $(this).width();
      var listOfLinks = $('#primary-header-nav li a');

      if(screenWidth < 770){
        listOfLinks.addClass('box-1-9');
      }else{
        listOfLinks.removeClass('box-1-9');
      }
    });
  });
});

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

Nav bar displaying CSS and HTML <a> tags

I am encountering a new issue that I have not faced before and I am seeking some guidance on it. The problem is with a navigation bar displayed at the top of a webpage. When the code is executed, the browser automatically adds 'a' tags which disr ...

htmlcss

Axios encounters difficulty retrieving the response data following a POST request

When using axios to post data and fetch a response, I am encountering an issue where the data is successfully posted but the response data cannot be printed. This works correctly in Postman, so I'm not sure if the problem lies with the backend or fron ...

javascriptreactjsexpressaxios

JavaScript function produces erratic outcomes due to variances in input data

Experimenting with JavaScript today led me to discover something strange when using the spread syntax and fill() function. Here is the code I used: let v = [...Array(9).fill([])]; function myFunc(){ arr = [1,5,2,3,4,6,8,9,7]; ...

javascriptarraysmultidimensional-array

Utilizing a custom hook or helper function to manage the selection of state data from

Currently, I am utilizing multiple useSelector calls to fetch arrays that are used to fill up the HIERARCHY object. const MyComponent = () => { const one = useSelector(getArrayByName("Name1")); const two = useSelector(getArrayByName(" ...

javascriptreactjsreact-reduxreact-hooks

Rails encounters problems when assets are modified

I recently inherited a small Rails website. When I attempted to make a change to a css file, I encountered an error page (code 500) in Rails with the following message: No such file or directory - /.../cache/assets/sprockets%2F1450c8f5d2b6e201d72fa175586b ...

cssruby-on-railsasset-pipeline

Prevent the default action in VueJS when triggering a custom event

One of the challenges I'm facing is with a custom <btn> component that has a specific template structure: <button @click="$emit('trigger')"> </button> This component is typically used in forms like so: <btn>Submit& ...

javascriptvue.jsvuejs2

How can you verify the onClose callback functionality of a dialog in Material UI using the React Testing Library?

I am facing a challenge in achieving complete test coverage for my react app. Specifically, I am encountering difficulties with Jest when attempting to test the callback event parameters from material UI components. My attempt to cover the onClose paramet ...

javascriptreactjsjestjsmaterial-uireact-testing-library

Adaptive Bootstrap 4 design concept

I am learning bootstrap and working on my website which requires a section similar to the one shown in this image. Can anyone guide me on how to achieve this? Below is the code I have written so far: <div class="row mfoo"> <div class="col-5 il ...

csslayoutbootstrap-4responsive

What is the best way to execute a function on certain text once the view has been refreshed?

Recently, I took over an AngularJS application that has presented a unique challenge for me. Within my page is a table of elements with values connected to the model using data-ng-bind. One specific element is data.name: <div class="component-name__pl ...

jqueryangularjs

What is the best way to modify the spacing between elements in an inline-block layout?

Currently, I'm working on designing a layout without relying on grid or flexbox. Instead, I am utilizing display: inline-block to accomplish this task, but I am facing challenges with adjusting spaces. * { padding: 0; margin: 0; b ...

htmlcss

The splice method in JavaScript is not behaving as anticipated

, While experimenting with JavaScript splice methods, I encountered an issue where it was not removing elements from an array as expected. Currently, it only deletes the last element from the array even when providing a specific index to delete. The conso ...

javascriptreactjsarraystypescriptreact-functional-component

Tips for handling attributes of an HTML element when the HTML content is stored within a variable

Here is a sample HTML code stored in a variable: var sHtml='' sHtml='<div class="diagnostic_picture"><img src="test1.gif" /></div>'; sHtml=sHtml + '<div class="diagnostic_picture"><img src="test2.gif" /& ...

jquery

Enlarge Django thumbnail when hovering over it in Django admin console

Looking to incorporate a CSS hover effect into this Django admin function that shows a thumbnail in the admin area. The goal is to enlarge the image when hovered over. def image_tag(self): if self.image: return mark_safe('<img ...

cssdjangoimageadminthumbnails

jQuery Ajax Pagination - The first page and the selected one function correctly, but the rest do not

Allow me to provide a more detailed description of my issue than what is indicated in the title... I am utilizing CodeIgniter pagination (adjusted to accommodate Bootstrap's requirements), and have set it up to display my links as follows: <div cl ...

javascriptphpjqueryajaxcodeigniter

Tips for incorporating a dynamic basePath into your NextJS project

For my new app, I am trying to include the groupID in the URL before the actual path, such as 'https://web-site.com/1/tasks'. The NextJs docs mention a basePath that is set at build time and cannot be modified. With numerous routes in my current ...

javascriptreactjsnext.js

Retrieve a JSP list item using JavaScript

In my setup, I have a Servlet, JSP page, and JavaScript. I pass a list from the servlet to the JSP, where it displays the results. Each result is shown in a table and includes a delete button. My goal is to retrieve the ID of the result I want to delete an ...

javascriptjspservletsjstl

Switch out all content located after the final character in the URL

In my code, I am using JavaScript to replace the current URL. Here is the snippet: window.location.replace(window.location.href.replace(/\/?$/, '#/view-0')); However, if the URL looks like this: domain.com/#/test or domain.com/#/, it will ...

javascriptregex

Getting the percentage of code coverage in Selenium tests in relation to the web application code

I need to track the code coverage of my selenium tests in relation to the source code of the server (web application source code) that they cover. For instance, I want the tests for the login feature to measure how much of the web application's code ...

javajavascriptseleniumcode-coveragejacoco

Determining the Existence of a Model in Backbone/Marionette

I've built a simple backbone application, but I'm struggling with a more complex check that needs to be performed. Below is my code. I'm creating a list of chat participants. Eventually, I'll pass this list into a JavaScript function. ...

javascriptarraysbackbone.jsmarionettebackbone-views

Exploring the intricacies of AJAX CORS and its impact on web

I am seeking to deepen my comprehension of how CORS functions and why it operates in its particular manner. According to the insights I gained from this article, when a page from www.a.com initiates an AJAX request to www.b.com, it is entirely up to www.b ...

javascriptajaxcross-domaincors