Question 108344 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Resize with JavaScript (JQuery)

I want to resize multiple boxes together using javascript or jquery.

For this purpose, I wrote a code that changes the size of the desired box by adding or removing the class.

The code I wrote works correctly but the only problem is that it only affects the first box and the other boxes don’t react at all.

The codes I wrote are as follows:

let Box = document.querySelector(".box");
let btn_one = document.querySelector(".btn_one");

btn_one.addEventListener("click", function () {
        $(Box).removeClass("box_two");
        $(Box).removeClass("box_three");
})

let btn_two = document.querySelector(".btn_two");

btn_two.addEventListener("click", function () {
        $(Box).addClass("box_two");
        $(Box).removeClass("box_three");
})

let btn_three = document.querySelector(".btn_three");

btn_three.addEventListener("click", function () {
        $(Box).addClass("box_three");
        $(Box).removeClass("box_two");
})
.main-BOX {
    box-shadow: 0 0 4px #000;
    width: 500px;
    height: auto;
    margin: 3rem auto 5rem;
    padding: 10px;
}

.btn_one,
.btn_two,
.btn_three {
    font-size: 35px;
    background: #93ff8a;
    color: #f87070;
    border: none;
    padding: 10px;
    margin: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.box {
    width: 90%;
    height: 190px;
    box-shadow: 0 0 5px #000;
    background: #61cc8b;
    margin: 25px;
    border-radius: 5px;
}


.box_two {
    width: 30%;
    height: 240px;
    box-shadow: 0 0 5px #3add89;
    background: #2572e9;
}


.box_three {
    width: 90%;
    height: 70px;
    box-shadow: 0 0 5px #a2dd3a;
    background: #e925dd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main-BOX">

        <button class="btn_one">1</button>
        <button class="btn_two">2</button>
        <button class="btn_three">3</button>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </section>
Tags:

2

Answers


  1. 0

    You might want to stick to JQuery for this. In vanilla JS, let Box = document.querySelector(".box") only selects the first element with the class .box it finds. You’re better off doing let Box = $('.box'); JQuery will select all of them.

    The let btn_xxx = document.querySelector(".btn_xxx"); are fine, because there are only one of each class in your code.

    let Box = $('.box');
let btn_one = document.querySelector(".btn_one");
let btn_two = document.querySelector(".btn_two");
let btn_three = document.querySelector(".btn_three");

btn_one.addEventListener("click", function () {
        Box.removeClass("box_two");
        Box.removeClass("box_three");
})


btn_two.addEventListener("click", function () {
        Box.addClass("box_two");
        Box.removeClass("box_three");
})


btn_three.addEventListener("click", function () {
        Box.addClass("box_three");
        Box.removeClass("box_two");
})
    .main-BOX {
    box-shadow: 0 0 4px #000;
    width: 500px;
    height: auto;
    margin: 3rem auto 5rem;
    padding: 10px;
}

.btn_one,
.btn_two,
.btn_three {
    font-size: 35px;
    background: #93ff8a;
    color: #f87070;
    border: none;
    padding: 10px;
    margin: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.box {
    width: 90%;
    height: 190px;
    box-shadow: 0 0 5px #000;
    background: #61cc8b;
    margin: 25px;
    border-radius: 5px;
}


.box_two {
    width: 30%;
    height: 240px;
    box-shadow: 0 0 5px #3add89;
    background: #2572e9;
}


.box_three {
    width: 90%;
    height: 70px;
    box-shadow: 0 0 5px #a2dd3a;
    background: #e925dd;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main-BOX">

        <button class="btn_one">1</button>
        <button class="btn_two">2</button>
        <button class="btn_three">3</button>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </section>

    EDIT

    Here’s a version that simplifies the click event listener, uses no JQuery, and uses data attributes instead of classes to assign the styles.

    let Box = document.querySelectorAll('.box'),
  button = document.querySelectorAll('.btn');

// For each button
button.forEach(btn => { // arrow function btn is the button that was clicked
  btn.addEventListener('click', (e) => { // e is the event of the listener.
    // For each box
    Box.forEach(box => { // the box element
      // Set the data-size attribute of the box to the content of the data-num attribute of the button that was clicked.
      box.setAttribute('data-size', e.target.dataset.num);
    });
  });
});
    .main-BOX {
  box-shadow: 0 0 4px #000;
  width: 500px;
  height: auto;
  margin: 3rem auto 5rem;
  padding: 10px;
}

.btn {
  font-size: 35px;
  background: #93ff8a;
  color: #f87070;
  border: none;
  padding: 10px;
  margin: 15px;
  border-radius: 50%;
  cursor: pointer;
}

.box,
[data-size="one"] {
  width: 90%;
  height: 190px;
  box-shadow: 0 0 5px #000;
  background: #61cc8b;
  margin: 25px;
  border-radius: 5px;
  transition: all .3s ease;
}

.box[data-size="two"] {
  width: 30%;
  height: 240px;
  box-shadow: 0 0 5px #3add89;
  background: #2572e9;
}

.box[data-size="three"] {
  width: 90%;
  height: 70px;
  box-shadow: 0 0 5px #a2dd3a;
  background: #e925dd;
}
    <section class="main-BOX">

  <button class="btn" data-num="one">1</button>
  <button class="btn" data-num="two">2</button>
  <button class="btn" data-num="three">3</button>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</section>
    Login or Signup to reply.
  2. 0

    I’m hoping this will help give you a starting point.

    Here’s a React Hook I use that reacts to the Window Size:

    import * as React from 'react';

import { Rectangle } from 'utils/globalTypes';

/**
 * This is a React Hook implementation of the window.onresize function.
 * 
 * @param {number} horizontalMargin
 * @param {number} verticalMargin
 * @returns windowSize: Rectangle
 */
export const useWindowSize = (horizontalMargin: number = 0,  verticalMargin: number = 0) => {
  const getWindowSize = React.useCallback(() => {
    const {innerWidth, innerHeight} = window;
    return {width: innerWidth - horizontalMargin, height: innerHeight - verticalMargin};
  }, [horizontalMargin, verticalMargin]);

  const [windowSize, setWindowSize] = React.useState<Rectangle>(getWindowSize());

  React.useEffect(() => {
    const handleWindowResize = () => {
      setWindowSize(getWindowSize());
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize); // Cleanup function
    };
  }, [getWindowSize]);

  return [ windowSize ] as const;
};

    P.S. The imported type is simply this:

    export type Rectangle = {
  width: number,
  height: number
};

    I know that you didn’t mention React but hopefully the code will still be helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search