javascript istenmeyen bi durum

27-02-2021, 17:20:18

<script>
    var element = document.getElementById('sitemenu');
    element.classList.add('desktop');

    window.addEventListener('resize', function(event) {
      var currentWidth = Math.min(window.innerWidth || Infinity, screen.width),
        currentClass = currentWidth > 870 ? 'desktop' : 'desktop';
      element.classList.remove('mobilemenu');
      element.classList.add('desktop');
    });
  </script>

yukardaki gibi birşey buldum araştırdığımda. amacım ekran genişliği değiştirildiğinde mobilemenu class ismini silmek yukardaki sanırım çok doğru ve temiz kod olmasa da, genel olarak istediğimi yapıyor. Fakat telefonda sayfayı aşağı kaydırmak bile sınıfı silmesine neden oluyor. Bunu istemiyorum sadece ekran genişliği değiştirilirse silsin istiyorum ama nasıl anlayamadım.

27-02-2021, 17:26:58

#2

Misafir

Merhabalar,

currentClass = currentWidth > 870 ? 'desktop':'desktop'; // Kodunuzu
currentDevice = currentWidth > 870 ? 'desktop':'mobile'; // Şeklinde değiştirerek
if(currentDevice === 'mobile' && element.classList.contains('desktop') ) {
// Class silip ekleme işlemlerinizi bu if bloğu içine alıp desktop'u kaldırıp mobilemenu ekleme
} else if(currentDevice === 'desktop' && element.classList.contains('mobilemenu') ) {
// Burada da class silip ekleme işlemlerinizin tam tersi mobilemenu'yu kaldırıp desktop ekleme
}

Bu şekilde yaparsanız sorununuz çözülecek muhtemelen

27-02-2021, 17:35:04

#3

buddy

Misafir adlı üyeden alıntı: mesajı görüntüle

Merhabalar,

currentClass = currentWidth > 870 ? 'desktop':'desktop'; // Kodunuzu
currentDevice = currentWidth > 870 ? 'desktop':'mobile'; // Şeklinde değiştirerek
if(currentDevice === 'mobile' &&[COLOR=#D9DAE9][FONT=Open Sans][SIZE=2] element.classList.contains('desktop') ) {[/SIZE][/FONT][/COLOR]
[COLOR=#D9DAE9][FONT="Open Sans"]// Class silip ekleme i[/FONT][/COLOR]şlemlerinizi bu if bloğu içine alıp desktop'u kaldırıp mobilemenu ekleme
} else if(currentDevice === 'desktop' &&[COLOR=#D9DAE9][FONT="Open Sans"] element.classList.contains('mobilemenu') ) {[/FONT][/COLOR]
// Burada da class silip ekleme işlemlerinizin tam tersi mobilemenu'yu kaldırıp desktop ekleme
[COLOR=#D9DAE9][FONT="Open Sans"]}[/FONT][/COLOR]

Bu şekilde yaparsanız sorununuz çözülecek muhtemelen

hocam yazdıklarınızın içinde html etiketleri karışmış. Okuyamıyorum.

27-02-2021, 17:36:58

#4

Misafir

Kusura bakmayın düzeşttim şimdi

27-02-2021, 17:51:32

#5

buddy

Misafir adlı üyeden alıntı: mesajı görüntüle

Kusura bakmayın düzeşttim şimdi

Uncaught ReferenceError: currentWidth is not defined hatası veriyor hocam.

27-02-2021, 17:54:17

#6

Misafir

width'i aldığınız kodu mu sildiniz acaba kodun tamamını yazmadım çünkü

27-02-2021, 18:04:55

#7

darness

Bence ihityacınız olan css media fonksiyonu
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Sırf bu işlemleri basitleştirmek için farklı çözünürlüklerde classın içeriğini değiştirebiliyorsunuz

27-02-2021, 18:08:16

#8

rws

varcurrentWidth = Math.min(window.innerWidth || Infinity, screen.width)

yerine

varcurrentWidth = window.innerWidth kullanın

sonrasıda buyuk ihtimal

currentClass = currentWidth > 870 ? 'desktop': 'mobilemenu'; olacaktır

27-02-2021, 18:21:07

#9

Misafir

darness adlı üyeden alıntı: mesajı görüntüle

Bence ihityacınız olan css media fonksiyonu
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Sırf bu işlemleri basitleştirmek için farklı çözünürlüklerde classın içeriğini değiştirebiliyorsunuz

Evet bu şekildede CSS üzerinde yapabilirsiniz.

CSS kodlarınızı yazdıktan sonra
<head></head> tagları arasına

<meta name="viewport" content="width=device-width, initial-scale=1.0">
bu meta tagını yerleştirmeniz gerekir çalışması için