If it is styling then you can use CSS media queries to handle that, and if it is some JavaScript then you can use the DOM APIs to detect the width of your viewport and have code executes or not based on the width.
Solution 1 :
Solution 2 :
I solved it myself with an innerWidth. I changed the code to this:
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
if ((window.innerWidth > 1024)) {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');
if ((window.innerWidth > 1024)) { document.querySelector(`.${lineName}`).classList.add('currentline');}
}
});
});
Problem :
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
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');
}
});
}); .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%;
}
} <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>
Comments
Comment posted by media queries
Learn about
Comment posted by t3rror
I have set display:none for those elements in lower width media queries, but Console is returning
Comment posted by Taro_Naza
@t3rror it would be better id you provide the full code with the media queries, but why are you calling myFunction on the click event for the button when you set a up a listener for it in your script?
Comment posted by t3rror
myFunction is for the DropDown menu button. Event listener is for data-gallery and data-line toggle. I am very new at this my friend 😀
Comment posted by Taro_Naza
@t3rror what’s the code for myFunction? maybe setup a codepen with all the code and share the link, it would be better, so people can help you easily 🙂
Comment posted by codepen.io/vitezs/pen/XWgNzQx
I have solved the problem with window.innerWidth , but if you can help to simplfy the code, it would be greate. 🙂 Here you go friend :