Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Javascript media query resize
Kenapa Pada saat di resize tombol button sidebar terkadang berfungsi terkadang tidak
const x = document.querySelectorAll("#toggle-sidebar");
const m = document.querySelector(".sidebar-app");
const title = document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")
const icon = document.querySelectorAll(".sidebar-app .menu-app .link-app .link")
const logo = document.querySelector(".sidebar-app .logo-name a b")
const logoText = document.querySelector(".sidebar-app .logo-name a")
$(function () {
function resize() {
if (window.matchMedia('only screen and (min-width: 769px)').matches) {
if(m.classList.contains('show-sidebar')){
}else {
x.forEach(function (e) {
e.addEventListener("click", function () {
m.classList.toggle('xs-sidebar')
logo.classList.remove('none')
for (var i = 0; i < title.length; i++) {
title[i].classList.remove('none')
}
if(m.classList.contains('xs-sidebar')){
logo.classList.add('none')
for (var i = 0; i < title.length; i++) {
title[i].classList.add('none')
}
}
})
})
}
} else if (window.matchMedia('only screen and (max-width: 768px)').matches) {
m.classList.remove('show-sidebar')
if(m.classList.contains('xs-sidebar')){
for (var i = 0; i < title.length; i++) {
title[i].classList.remove('none')
}
}else{
x.forEach(function (e) {
e.addEventListener("click", function () {
m.classList.toggle('show-sidebar')
})
})
}
}
}
window.addEventListener('resize', resize, false);
resize();
}());
1 Jawaban:
Jawaban Terpilih
Solved
Update
<pre> function vanilaReady(fn) { if (document.readyState === "complete" || document.readyState === "interactive") { setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } }
vanilaReady(function() { document.querySelector("#toggle-sidebar").addEventListener("click", function () { if($(window).width() < 769 ){ document.querySelector(".sidebar-app").classList.toggle("show-sidebar") document.querySelector(".sidebar-app .logo-name a b").classList.remove('none') document.querySelector(".sidebar-app").classList.remove("xs-sidebar") for (var i = 0; i < document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text").length; i++) { document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")[i].classList.remove('none') } if(document.querySelector(".sidebar-app").classList.contains("show-sidebar")){ document.body.addEventListener("mousedown", function () { document.querySelector(".sidebar-app").classList.remove("show-sidebar") }) } }else if($(window).width() > 768 ){ document.querySelector(".sidebar-app").classList.toggle("xs-sidebar") for (var i = 0; i < document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text").length; i++) { document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")[i].classList.remove('none') } document.querySelector(".sidebar-app .logo-name a b").classList.remove('none') if(document.querySelector(".sidebar-app").classList.contains("xs-sidebar")){ for (var i = 0; i < document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text").length; i++) { document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")[i].classList.add('none') } document.querySelector(".sidebar-app .logo-name a b").classList.add('none') } } }) }); </pre>