Changing the screen size will add or remove a class

Question

Changing the screen size will add or remove a class

My current project utilizes the Bulma CSS framework along with raw Javascript. I am facing an issue where I need to remove the "is-pulled-right" class on mobile screen sizes. However, I've noticed that only the first element seems to respond to the script, while the others are being overlooked. Can someone please point out what mistake I might be making?

window.addEventListener("resize", function () {

    const classList = document.getElementById("isRight").classList
    
    if(window.innerWidth < 820) {   
        classList.remove("is-pulled-right")
    } 

    else{
        classList.add("is-pulled-right");
    }

});

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10535049484e1c51555a4843495f4d54511208151e1203">[email protected]</a>/css/bulma.min.css" rel="stylesheet"/>
<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">First Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque...
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">Second Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque... 
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

javascript css bulma screen-size removechild

Answer 1

Answer №1

When creating elements in HTML, it is important to ensure that the ID attribute is unique. Instead of using the same ID for multiple elements, consider using classes to differentiate between them.

If you need to select all elements with a specific class, you can use the document.querySelectorAll method. This allows you to target elements by their class name rather than relying on IDs.

    const classList = document.querySelectorAll(".is-pulled-right")
    
window.addEventListener("resize", function () {

    if(window.innerWidth < 700) {   
        classList.forEach( item => {
        item.classList.remove("is-pulled-right")})
    } 
 
    else{
      console.log('more')
        classList.forEach( item => {
        item.classList.add("is-pulled-right")})
    }
});

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b190e17161a3b4b55425548">[email protected]</a>/css/bulma.min.css" rel="stylesheet"/>
<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">First Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, ..."</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">Second Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem..."</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

Answer 2

When creating elements in HTML, it is important to ensure that the ID attribute is unique. Instead of using the same ID for multiple elements, consider using classes to differentiate between them.

If you need to select all elements with a specific class, you can use the document.querySelectorAll method. This allows you to target elements by their class name rather than relying on IDs.

    const classList = document.querySelectorAll(".is-pulled-right")
    
window.addEventListener("resize", function () {

    if(window.innerWidth < 700) {   
        classList.forEach( item => {
        item.classList.remove("is-pulled-right")})
    } 
 
    else{
      console.log('more')
        classList.forEach( item => {
        item.classList.add("is-pulled-right")})
    }
});

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b190e17161a3b4b55425548">[email protected]</a>/css/bulma.min.css" rel="stylesheet"/>
<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">First Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, ..."</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">Second Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem..."</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

Answer 3

Answer №2

Utilize JavaScript to implement an event listener for adding multiple events on the window.

const container = document.getElementById("isRight")

window.onresize = function(){
    if(window.innerWidth < 820) {   
        container.classList.remove("is-pulled-right")
    } else {
        container.classList.add("is-pulled-right");
    }
}

Answer 4

Utilize JavaScript to implement an event listener for adding multiple events on the window.

const container = document.getElementById("isRight")

window.onresize = function(){
    if(window.innerWidth < 820) {   
        container.classList.remove("is-pulled-right")
    } else {
        container.classList.add("is-pulled-right");
    }
}

Answer 5

Answer №3

It is not recommended to have multiple duplicate IDs as they should be unique. This is why document.getElementById(id); only retrieves one element.

Check out this link for more information.

Instead of using IDs, consider using classes. You can then use something like this method.

If it's not possible to remove the IDs, you can try the following approach:

Array.from(document.querySelectorAll('#isRight')).map(e => e.classList).forEach(classlist => {
    // your logic for classList
})

Answer 6

It is not recommended to have multiple duplicate IDs as they should be unique. This is why document.getElementById(id); only retrieves one element.

Check out this link for more information.

Instead of using IDs, consider using classes. You can then use something like this method.

If it's not possible to remove the IDs, you can try the following approach:

Array.from(document.querySelectorAll('#isRight')).map(e => e.classList).forEach(classlist => {
    // your logic for classList
})

Changing the screen size will add or remove a class

Answer №1

Answer №2

Answer №3

Similar questions

Node.js server only supports cross-origin requests for protocol schemes when working with an Angular front end

"Enhance Your Text Fields with Angular2 Text Masks for Added Text Formatting

Strategies for developing versatile controls that can adapt to the environment in which they are used?

Authenticating with passportjs using a Google Apps email address for verification

Redis appears to be missing the expected results

Combining DataTables with multiple tables sourced from various JSON arrays

PHP question about maintaining data continuously

Tips for handling the accent mark (diacritic mark)

What is the best location for storing css files in Laravel?

What is the best way to retrieve a specific children element from a JSON object in JavaScript based on a keyname and value match

Utilize multiple buttons to toggle with v-if condition

Issue: Having trouble making the frontend work properly due to difficulty in accessing the 'state' property which is undefined

Guide to establishing a primary filter for my Json information with Angular.js?

Material UI Card shadow effect getting cropped

Unable to display a recursive component with Vue3 CDN

What is the best way to ensure that every item on a list can be

Prevent the button from being enabled until the file input is updated

How about this: "Is it possible for the accordion to open when clicked and show

Conceal Content from Onsite Search

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes