CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Satyajit Roy
Satyajit Roy

Reputation: 547

JavaScript program is only working after reloading the page

I am a beginner and I am learning JavaScript.

I am using JavaScript to add some Bootstrap classes when the screen size is less than or equal to 576px.

I have written JavaScript code and it is adding the required classes only after reloading the webpage.

My Code:

var sliderOne = document.getElementById('slider-1');
var sliderTwo = document.getElementById('slider-2');
var sliderThree = document.getElementById('slider-3');

// Adding ".d-flex .flex-column-reverse .text-center" classes to the Carousel

var x = document.documentElement.clientWidth
if (x <= 576) {
    sliderOne.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.add('d-flex', 'flex-column-reverse', 'text-center')
} else {
    sliderOne.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
}
.carousel-bg {
    background-color: #fceae8;
}

.price {
    color: #ff136f;
}

.buy-now {
    background: linear-gradient(to bottom, #ff589b 0%, #ff136f 100%);
    color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 09 - Panda Ecommerce usign Bootstrap</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- My Custom CSS Link -->
    <link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="container mb-5 p-0">
        <div id="carouselExampleIndicators" class="carousel slide carousel-bg" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner p-5">
                <div class="carousel-item active">
                    <div class="row align-items-center" id="slider-1">
                        <div class="col-md-7">
                            <h1>Heavy Bass Bluetooth Headphone</h1>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci
                                minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
                            <h1 class="price">$259.99</h1>
                            <button class="btn buy-now">Buy Now</button>
                        </div>
                        <div class="col-md-5">
                            <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756485/StackOverflow/headphone_bfi8ip.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row align-items-center" id="slider-2">
                        <div class="col-md-7">
                            <h1>4k Ultra HD Wide Angle Smart TV</h1>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci
                                minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
                            <h1 class="price">$1299.99</h1>
                            <button class="btn buy-now">Buy Now</button>
                        </div>
                        <div class="col-md-5">
                            <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/tv_dx8zzr.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row align-items-center" id="slider-3">
                        <div class="col-md-7">
                            <h1>Xbox - Supreme Gaming Experience</h1>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci
                                minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
                            <h1 class="price">$849.99</h1>
                            <button class="btn buy-now">Buy Now</button>
                        </div>
                        <div class="col-md-5">
                            <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/xbox_iat1yy.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    
    <!-- JavaScript -->

    <script src="./main.js"></script>

</body>

</html>

I am using #slider-1, #slider-2, #slider-3 these id to add the bootstrap classes.

Please have a look over them and help me to solve the problem.

Thank you.

Upvotes: 0

Views: 47

Answers (3)

user3893106
user3893106

Reputation:

window.addEventListener("resize", () => {})

To learn more about events:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Upvotes: 1

Spectric
Spectric

Reputation: 32002

Add a resize event listener to the window:

var sliderOne = document.getElementById('slider-1');
var sliderTwo = document.getElementById('slider-2');
var sliderThree = document.getElementById('slider-3');

// Adding ".d-flex .flex-column-reverse .text-center" classes to the Carousel
function updateAccordingToScreenWidth() {
  var x = document.documentElement.clientWidth
  if (x <= 576) {
    sliderOne.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.add('d-flex', 'flex-column-reverse', 'text-center')
  } else {
    sliderOne.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
  }
}
updateAccordingToScreenWidth();
window.addEventListener('resize', updateAccordingToScreenWidth);
.carousel-bg {
  background-color: #fceae8;
}

.price {
  color: #ff136f;
}

.buy-now {
  background: linear-gradient(to bottom, #ff589b 0%, #ff136f 100%);
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module 09 - Panda Ecommerce usign Bootstrap</title>
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- My Custom CSS Link -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <div class="container mb-5 p-0">
    <div id="carouselExampleIndicators" class="carousel slide carousel-bg" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner p-5">
        <div class="carousel-item active">
          <div class="row align-items-center" id="slider-1">
            <div class="col-md-7">
              <h1>Heavy Bass Bluetooth Headphone</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$259.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756485/StackOverflow/headphone_bfi8ip.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-2">
            <div class="col-md-7">
              <h1>4k Ultra HD Wide Angle Smart TV</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$1299.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/tv_dx8zzr.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-3">
            <div class="col-md-7">
              <h1>Xbox - Supreme Gaming Experience</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$849.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/xbox_iat1yy.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <!-- JavaScript -->

  <script src="./main.js"></script>

</body>

</html>

Upvotes: 1

lejlun
lejlun

Reputation: 4419

You can add a resize event listener to re-evaluate the code when the page is resized.

This is how you attach the event listener:

window.addEventListener("resize", () => {})

And this is what it looks like in your code:

var sliderOne = document.getElementById('slider-1');
var sliderTwo = document.getElementById('slider-2');
var sliderThree = document.getElementById('slider-3');

// Adding ".d-flex .flex-column-reverse .text-center" classes to the Carousel

window.addEventListener("resize", () => {
  var x = document.documentElement.clientWidth
  if (x <= 576) {
    sliderOne.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.add('d-flex', 'flex-column-reverse', 'text-center')
  } else {
    sliderOne.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
  }
})
.carousel-bg {
  background-color: #fceae8;
}

.price {
  color: #ff136f;
}

.buy-now {
  background: linear-gradient(to bottom, #ff589b 0%, #ff136f 100%);
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module 09 - Panda Ecommerce usign Bootstrap</title>
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- My Custom CSS Link -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <div class="container mb-5 p-0">
    <div id="carouselExampleIndicators" class="carousel slide carousel-bg" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner p-5">
        <div class="carousel-item active">
          <div class="row align-items-center" id="slider-1">
            <div class="col-md-7">
              <h1>Heavy Bass Bluetooth Headphone</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$259.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756485/StackOverflow/headphone_bfi8ip.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-2">
            <div class="col-md-7">
              <h1>4k Ultra HD Wide Angle Smart TV</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$1299.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/tv_dx8zzr.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-3">
            <div class="col-md-7">
              <h1>Xbox - Supreme Gaming Experience</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$849.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/xbox_iat1yy.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <!-- JavaScript -->

  <script src="./main.js"></script>

</body>

</html>

Upvotes: 1

Related Questions