0
Kayıt Ol

Javascript Responsive

5

●

36

  • 10-09-2021, 21:06:14
    #1
    buddy
    buddy
    Merhaba arkadaşlar, bir div katmanını class name'ni belirli bir çözünürlükten farklıysa anlık olarak değiştirmek istiyorum.
    İşlemi tarayıcı penceresini anlık olarak büyütüp küçültürken butona basmadan yaptırmam gerekiyor. Böyle birşey yapılabiliyor mu?
  • 10-09-2021, 21:08:12
    #2
    Misafir
    Misafir
    window.addEventListener('resize', debounce(() => console.log('hello'), 200, false), false);
    Resize eventini kullanabilirsiniz. Genişlik yükseklik değişikliğini algılar.
    https://developer.mozilla.org/en-US/...w/resize_event
    https://developer.mozilla.org/en-US/...w/resize_event
  • 10-09-2021, 21:24:08
    #3
    buddy
    buddy
    Misafir adlı üyeden alıntı: mesajı görüntüle
    window.addEventListener('resize', debounce(() => console.log('hello'), 200, false), false);
    Resize eventini kullanabilirsiniz. Genişlik yükseklik değişikliğini algılar.
    https://developer.mozilla.org/en-US/...w/resize_event
    https://developer.mozilla.org/en-US/...w/resize_event
    Hocam baktım dediğin yere fakat dediğim şekilde örnek bulamıyorum.
    Bana lazım olan,

    <div id="deneme"></div>
    Tarayıcı penceresi 600pxden büyükse atıyorum
    <div id="deneme" class="buyuk">
    600pxden küçük ise
    <div id="deneme" class="kucuk"> böyle birşey.

    ve dediğim gibi hocam bunu sayfa yüklendiğinde değil sadece her an hesaplatırmam gerekiyor. Tarayıcı penceresi büyütüp küçültüğünde de umarım anlatabildim.
  • 10-09-2021, 21:26:27
    #4
    buddy
    buddy
    Misafir adlı üyeden alıntı: mesajı görüntüle
    window.addEventListener('resize', debounce(() => console.log('hello'), 200, false), false);
    Resize eventini kullanabilirsiniz. Genişlik yükseklik değişikliğini algılar.
    https://developer.mozilla.org/en-US/...w/resize_event
    https://developer.mozilla.org/en-US/...w/resize_event
    Sanırım buldum hocam yapamamazsam haber veririm yine teşekkür ederim.
  • 10-09-2021, 21:31:14
    #5
    Misafir
    Misafir
    buddy adlı üyeden alıntı: mesajı görüntüle
    Sanırım buldum hocam yapamamazsam haber veririm yine teşekkür ederim.
    https://s5.dosya.tc/server5/strx4t/index.rar.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .buyuk{
            color: red;
        }
        .kucuk{
            color: blue;
        }
    </style>
</head>

<body>


    <div id="deneme">red: büyük , blue: küçük</div>

    <script>
        var wd = window.innerWidth;
        const guncel = () => {
            if (wd>600) {
                document.getElementById('deneme').classList='buyuk'
                console.log('buyuk')
            }else{
                document.getElementById('deneme').classList='kucuk'
                console.log('kucuk')

            }
        }





        window.addEventListener('resize', () => {
            wd = window.innerWidth;
            guncel()
        })


        guncel()


    </script>
</body>

</html>
  • 10-09-2021, 22:47:56
    #6
    buddy
    buddy
    Hocam ben matchMedia kullandım. Fakat sanırım ölçü olarak belirttiğim pixel oranından 15 20 pixel yukarda algılıyor.

    Misafir adlı üyeden alıntı: mesajı görüntüle
    https://s5.dosya.tc/server5/strx4t/index.rar.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .buyuk{
            color: red;
        }
        .kucuk{
            color: blue;
        }
    </style>
</head>

<body>


    <div id="deneme">red: büyük , blue: küçük</div>

    <script>
        var wd = window.innerWidth;
        const guncel = () => {
            if (wd>600) {
                document.getElementById('deneme').classList='buyuk'
                console.log('buyuk')
            }else{
                document.getElementById('deneme').classList='kucuk'
                console.log('kucuk')

            }
        }





        window.addEventListener('resize', () => {
            wd = window.innerWidth;
            guncel()
        })


        guncel()


    </script>
</body>

</html>