Javascript Sidebar Ekran Çözünürlüğü Belirleme / Yada PHP ile Ekran Çözünürlüğüne Göre JS Çağırma

03-06-2021, 21:35:30

Merhabalar; Web sayfasında bir tane yan sidebar menü var bu side bar masaüstü görünümde açık kalmasını istiyorum.

Aşağıdaki kod media screen 1600px ekran çözünürlüğünde çalışsın istiyorum.

$('[data-toggle="sidebar"]').click(function(event) {
event.preventDefault();
$('.app').toggleClass('sidenav-toggled');
    });

1600px küçük ise aşağıdaki kod devreye girsin istiyorum.

if($(window).innerWidth() <= 750) {

} else {
$(document).ready(function(){
$('[data-toggle="sidebar"]')[0].click(function(){
});
});
}

Eğer js de böyle bir kod çalıştırmak mümkündeğil ise PHP ile ekran çözünürlüğüne göre dosya çağırma var ise yazabilir misiniz.

YANİ ÖRENEK VEREYİM :
php de
media screen ekran büyüklüğü 750px den büyük ise dosyasını kucuk.js çalıştırsın.

media screen ekran büyüklüğü 1600px den büyük ise dosyasını buyuk.js çalıştırsın.

gibi birşey de olabilir.

Yardımcı olabilir misiniz.

03-06-2021, 21:46:40

#2

absie

bunun için js yazmanıza gerek yok css ile halledebilirsiniz. ama illa js ile yapacağım derseniz.

resizeWindow(){
if (window.innerWidth <= 1600) {
burada 1600den dar ise çalışacak kod.
} else {
buraya 1600den geniş ise çalışacak kod.
}
}

resizeWindow();

window.addEventListener('resize', resizeWindow);

bu şekilde sayfa ilk açıldığında ve her yeniden boyutlandırmada tekrar kontrol edecektir.

03-06-2021, 22:35:30

#3

Ertenya

@absie;

Öncelikle teşekkürler merhabalar verdiğiniz kod hiç bir şekilde çalışmadı.

Bu şekilde denedim çalıtı hocam bir de aşağıdaki koda bir tane daha else konur mu konur ise <= 750 altı olursa çalışsın diye yapmalıyım.

if($(window).innerWidth() <= 1310) {
$(document).ready(function(){
$('[data-toggle="sidebar"]')[0].click(function(){
});
});

} else {
$('[data-toggle="sidebar"]').click(function(event) {
event.preventDefault();
$('.app').toggleClass('sidenav-toggled');
});

}

03-06-2021, 23:30:35

#4

Developer

PHP'de yapamazsın. JS sorununu çözer. Aşağıdaki link'i hazırladım. Çalışma mantığını inceleyebilirsin.

https://jsfiddle.net/wnq3u4oe/

04-06-2021, 00:02:50

#5

absie

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

@absie;

Öncelikle teşekkürler merhabalar verdiğiniz kod hiç bir şekilde çalışmadı.

Bu şekilde denedim çalıtı hocam bir de aşağıdaki koda bir tane daha else konur mu konur ise <= 750 altı olursa çalışsın diye yapmalıyım.

if($(window).innerWidth() <= 1310) {
$(document).ready(function(){
$('[data-toggle="sidebar"]')[0].click(function(){
});
});

} else {
$('[data-toggle="sidebar"]').click(function(event) {
event.preventDefault();
$('.app').toggleClass('sidenav-toggled');
});

}

siz jquery yazıyorsunuz verdiğim kodun neden çalışmadığını anlamadım. 3. bir koşulu ekliyorum o şekilde söylediğinizi yapabilirsiniz.

if ($(window).innerWidth() <= 1310) {
    $(document).ready(function () {
      $('[data-toggle="sidebar"]')[0].click(function () {});
    });
  } else if ($(window).innerWidth() <= 750) {
    // 750 için çalışacak kodu buraya yazabilirsiniz.
  } else {
    $('[data-toggle="sidebar"]').click(function (event) {
      event.preventDefault();
  
      $(".app").toggleClass("sidenav-toggled");
    });
  }

04-06-2021, 00:21:08

#6

Ertenya

@absie;
@burak2yilmaz;

Teşekkürler şuan çalışıyor.

04-06-2021, 00:23:00

#7

Developer

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

siz jquery yazıyorsunuz verdiğim kodun neden çalışmadığını anlamadım. 3. bir koşulu ekliyorum o şekilde söylediğinizi yapabilirsiniz.

if ($(window).innerWidth() <= 1310) {
    $(document).ready(function () {
      $('[data-toggle="sidebar"]')[0].click(function () {});
    });
  } else if ($(window).innerWidth() <= 750) {
    // 750 için çalışacak kodu buraya yazabilirsiniz.
  } else {
    $('[data-toggle="sidebar"]').click(function (event) {
      event.preventDefault();
  
      $(".app").toggleClass("sidenav-toggled");
    });
  }

Dipnot: Arkadaşın verdiği sistem tek seferlik çalışır ve işlemi gerçekleştirir. Benim size verdiğim kod blogu ekran değişikliği oldukça çalışır bilginiz olsun.