Question 421920 in Html Question posted in
Some basic documentation can be found here.

Html – How to automatically remove an event from my web page the device viewpoint change in JavaScript

I am trying to expand the size of an element when an event is clicked at view width of 992px and below and want it to be automatically removed when the view width is above 993px. Please guide me on How to go about it?

if (sidebarbtn_div.style.display == 'flex') {
  const changesidebarbtn = () => {
    sidebarbtn.forEach(item => {
      item.classList.remove('active')
    })
  };
  sidebarbtn.forEach(disbtn => {
    disbtn.addEventListener('click', () => {
      changesidebarbtn();
      if (disbtn.classList.contains('close_left')) {
        document.querySelector('.dis_left').classList.add('active');
        document.querySelector('#class_middle').style.width = '96vw';
        sidebar.style.display = 'none'
      } else if (disbtn.classList.contains('dis_left')) {
        document.querySelector('.close_left').classList.add('active');
        document.querySelector('#class_middle').style.width = '100%';
        sidebar.style.display = 'block'
      };
    })
  })
} else if (sidebarbtn_div.style.display == 'none') {
  document.querySelector('#class_middle').style.width = '100%';
  sidebar.style.display = 'block'
}

This is the HTML it the event button

<div class="sidebar_button d-flex d-lg-none justify-content-center align-items-center z-3">
  <span class="close_left active p-2 py-3 rounded-circle" title="Close_left">&times;</span>
  <span class="dis_left p-2 py-3 rounded-circle" title="Dis_left">≻</span>
</div>
Tags:

2

Answers


  1. 0

    You can use window.screen for the screen. I do not think you will get a guide.
    window.screen

    or document.getElementsByTagName(‘body’)[0].clientWidth for the in browser width.

    Login or Signup to reply.
  2. 0

    Thanks everyone I have gotten the answer through the hint gotten from the answers posted.the breakdown of the answer I used was to convert my code above to a function and pass it in side a window event.

        window.addevenElistener('resize', () => {
  if(window.innerwidth =< 992){
     RunsSomeFunction()
   } else {
do something }
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search