html – Limit JavaScript function to specified screen width


Help guys…everything works until website goes to tablet/mobile widht…than JS start to act crazy. I understand that its because there is two actions under one funciton, but is there any way to separate this and/or to limit add/remove class .currentline to specified screen width.

When its in tablet/mobile size i have dropdown menu so i dont need animated lines from .lineparent

Thanks

HTML:

<div class="albmenu"id="albmenu">
            <ul id="gallery-links">
              
      <li><div class="lineparent"><div class="line currentline"></div></div>
          <a href="#gallery" data-gallery="grid" data-line="line">All</a></li>

              
       <li><div class="lineparent"><div class="line2"></div></div>
           <a href="#gallery" data-gallery="grid2" data-line="line2">Weddings</a></li>
              
       <li><div class="lineparent"><div class="line3"></div></div>
            <a href="#gallery" data-gallery="grid3" data-line="line3">Business</a></li>
              
       <li><div class="lineparent"><div class="line4"></div></div>
            <a href="#gallery" data-gallery="grid4" data-line="line4">Sports</a></li>
              
          </ul>

<div class="dropdown" id="dropdown">
              <button onclick="myFunction()" class="dropbtn">Category</button>
              <div id="myDropdown" class="dropdown-content">
                <a value="Family" href="#gallery" data-gallery="grid">All</a>
                <a value= "" href="#gallery" data-gallery="grid2">Weddings</a>
                <a value= "" href="#gallery" data-gallery="grid3">Business</a>
                <a value= "" href="#gallery" data-gallery="grid4">Sports</a>
              </div>
            </div>
          </div>

JS :

window.addEventListener('DOMContentLoaded', () => {

   
    document.querySelector('#albmenu').addEventListener('click', (event) => {
  
      
      if (event.target.tagName === 'A') {
  
        document.querySelector('.current').classList.remove('current');
        document.querySelector('.currentline').classList.remove('currentline');
        
        let galleryName = event.target.getAttribute('data-gallery');
        let lineName = event.target.getAttribute('data-line');
        
        document.querySelector(`.${galleryName}`).classList.add('current');
        document.querySelector(`.${lineName}`).classList.add('currentline');

     }
    });
  });

CSS:

.lineparent {
    width: 35%;
    height: 2px;
  }
  .line,
  .line2,
  .line3,
  .line4,
  .line5,
  .line6 {
    width: 100%;
    height: 2px;
    background-color: var(--textcol);
    opacity: 0;
  }

  .currentline {
    opacity: 1;
    animation: linewidth 0.5s;
  }

  @keyframes linewidth {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  } 



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here