Siteye Kütüphane Çekmeden Aç Kapa İşlemini Nasıl Yaptırabilirim?

13.03.2020 01:17

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Butona aç kapa özelliği getirmek istiyorum ancak bunun için de siteye yüklü bir .js dosyası ekleyip siteyi yavaşlatmak istemiyorum. Mevcut JS dosyasına ne eklemem ve nasıl kullanmam gerekir acaba?

Uygulayacağım alan şurası: https://prnt.sc/rfj1er

Kodların ekli olduğu canlı site: https://miyavliyo.com/american-shorthair/

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

13.03.2020 15:21

#2

Abdullahx MW Aracı Kullanıcı

Üyelik 03.04.2019
Yaş/Cinsiyet 29 / E
Meslek .
Konum Trabzon

Ad Soyad A** K**
Mesajlar 905
Beğeniler 393 / 395
Ticaret 3, (%100)

İhtiyacınız olan tek kod bu


$(".fa-bars").click(() => {
        $(".dm-toc-list").slideToggle(600);
    });

1 kişi bu mesajı beğendi.

13.03.2020 21:07

#3

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Abdullahx adlı üyeden alıntı

İhtiyacınız olan tek kod bu



$(".fa-bars").click(() => {

        $(".dm-toc-list").slideToggle(600);

    });

Teşekkürler hocam, tam da ihtiyacım olan buydu. Peki varsayılan olarak kapalı nasıl yapabilirim? Ben basıldığında açılsın, tekrarında kapansın şeklinde kullanmak istiyorum.

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

13.03.2020 21:09

#4

Abdullahx MW Aracı Kullanıcı

Üyelik 03.04.2019
Yaş/Cinsiyet 29 / E
Meslek .
Konum Trabzon

Ad Soyad A** K**
Mesajlar 905
Beğeniler 393 / 395
Ticaret 3, (%100)

.dm-toc-list class ına css ten display:none verirseniz başlangıçta kapalı olarak gelir.

1 kişi bu mesajı beğendi.

13.03.2020 21:16

#5

Abdullahx MW Aracı Kullanıcı

Üyelik 03.04.2019
Yaş/Cinsiyet 29 / E
Meslek .
Konum Trabzon

Ad Soyad A** K**
Mesajlar 905
Beğeniler 393 / 395
Ticaret 3, (%100)

Tavsiyem bir de


.fa-bars {
cursor: pointer
}

vermeniz.

1 kişi bu mesajı beğendi.

13.03.2020 21:55

#6

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Abdullahx adlı üyeden alıntı

Tavsiyem bir de



.fa-bars {

cursor: pointer

}

vermeniz.

Teşekkürler, bunu bilmiyordum artık benzer çalışmalarda da kullanırım. Sadece butona değil, tamamına tıklama özelliği ekledim.

Bu arada hocam jquery kullanmak istemediğim için "kütüphane çekmeden" yapmak istemiştim ama jquery'yi kaldırınca çalışmaz oldu, yani jquery kullanıyor. jquery olmadan yapamaz mıyız?

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

13.03.2020 22:01

#7

Abdullahx MW Aracı Kullanıcı

Üyelik 03.04.2019
Yaş/Cinsiyet 29 / E
Meslek .
Konum Trabzon

Ad Soyad A** K**
Mesajlar 905
Beğeniler 393 / 395
Ticaret 3, (%100)

Aslında başlangıçta ben de jquery kullanmak istemediğinizi farz edip aynı özellikte çalışan ama daha uzun bir kod bloğu bulmuştum ama sitenize bakınca jquery olduğunu fark ettim. Jquery ile daha kısa olur diye öyle yolladım.
Şu sayfadaki kaynak kodları alıp kendinize göre düzenleme imkanınız var mıdır?
En basit kullanım şekli şöyle; Önce slideUp ve SlideDown özellikleri tanımlanıyor sonra her ikisini de kullanan slideToggle çalışıyor;


let slideUp = (target, duration=500) => {
    target.style.transitionProperty = 'height, margin, padding';
    target.style.transitionDuration = duration + 'ms';
    target.style.boxSizing = 'border-box';
    target.style.height = target.offsetHeight + 'px';
    target.offsetHeight;
    target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    window.setTimeout( () => {
      target.style.display = 'none';
      target.style.removeProperty('height');
      target.style.removeProperty('padding-top');
      target.style.removeProperty('padding-bottom');
      target.style.removeProperty('margin-top');
      target.style.removeProperty('margin-bottom');
      target.style.removeProperty('overflow');
      target.style.removeProperty('transition-duration');
      target.style.removeProperty('transition-property');
      //alert("!");
    }, duration);
  }

  let slideDown = (target, duration=500) => {
    target.style.removeProperty('display');
    let display = window.getComputedStyle(target).display;

    if (display === 'none')
      display = 'block';

    target.style.display = display;
    let height = target.offsetHeight;
    target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    target.offsetHeight;
    target.style.boxSizing = 'border-box';
    target.style.transitionProperty = "height, margin, padding";
    target.style.transitionDuration = duration + 'ms';
    target.style.height = height + 'px';
    target.style.removeProperty('padding-top');
    target.style.removeProperty('padding-bottom');
    target.style.removeProperty('margin-top');
    target.style.removeProperty('margin-bottom');
    window.setTimeout( () => {
      target.style.removeProperty('height');
      target.style.removeProperty('overflow');
      target.style.removeProperty('transition-duration');
      target.style.removeProperty('transition-property');
    }, duration);
  }
  var slideToggle = (target, duration = 500) => {
    if (window.getComputedStyle(target).display === 'none') {
      return slideDown(target, duration);
    } else {
      return slideUp(target, duration);
    }
  }

Kullanılışı


document.getElementById("triggerUp").addEventListener('click', function() {
  slideUp(document.getElementById("target"), 200);
});

document.getElementById("triggerDown").addEventListener('click', function() {
  slideDown(document.getElementById("target"), 200);
});

document.getElementById("triggerToggle").addEventListener('click', function() {
  slideToggle(document.getElementById("target"), 200);
});

Tabii burada id değil queryselector ile class adının seçmeniz gerekir.

1 kişi bu mesajı beğendi.

17.03.2020 21:45

#8

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Abdullahx adlı üyeden alıntı

Aslında başlangıçta ben de jquery kullanmak istemediğinizi farz edip aynı özellikte çalışan ama daha uzun bir kod bloğu bulmuştum ama sitenize bakınca jquery olduğunu fark ettim. Jquery ile daha kısa olur diye öyle yolladım.
Şu sayfadaki kaynak kodları alıp kendinize göre düzenleme imkanınız var mıdır?
En basit kullanım şekli şöyle; Önce slideUp ve SlideDown özellikleri tanımlanıyor sonra her ikisini de kullanan slideToggle çalışıyor;



let slideUp = (target, duration=500) => {

    target.style.transitionProperty = 'height, margin, padding';

    target.style.transitionDuration = duration + 'ms';

    target.style.boxSizing = 'border-box';

    target.style.height = target.offsetHeight + 'px';

    target.offsetHeight;

    target.style.overflow = 'hidden';

    target.style.height = 0;

    target.style.paddingTop = 0;

    target.style.paddingBottom = 0;

    target.style.marginTop = 0;

    target.style.marginBottom = 0;

    window.setTimeout( () => {

      target.style.display = 'none';

      target.style.removeProperty('height');

      target.style.removeProperty('padding-top');

      target.style.removeProperty('padding-bottom');

      target.style.removeProperty('margin-top');

      target.style.removeProperty('margin-bottom');

      target.style.removeProperty('overflow');

      target.style.removeProperty('transition-duration');

      target.style.removeProperty('transition-property');

      //alert("!");

    }, duration);

  }



  let slideDown = (target, duration=500) => {

    target.style.removeProperty('display');

    let display = window.getComputedStyle(target).display;



    if (display === 'none')

      display = 'block';



    target.style.display = display;

    let height = target.offsetHeight;

    target.style.overflow = 'hidden';

    target.style.height = 0;

    target.style.paddingTop = 0;

    target.style.paddingBottom = 0;

    target.style.marginTop = 0;

    target.style.marginBottom = 0;

    target.offsetHeight;

    target.style.boxSizing = 'border-box';

    target.style.transitionProperty = "height, margin, padding";

    target.style.transitionDuration = duration + 'ms';

    target.style.height = height + 'px';

    target.style.removeProperty('padding-top');

    target.style.removeProperty('padding-bottom');

    target.style.removeProperty('margin-top');

    target.style.removeProperty('margin-bottom');

    window.setTimeout( () => {

      target.style.removeProperty('height');

      target.style.removeProperty('overflow');

      target.style.removeProperty('transition-duration');

      target.style.removeProperty('transition-property');

    }, duration);

  }

  var slideToggle = (target, duration = 500) => {

    if (window.getComputedStyle(target).display === 'none') {

      return slideDown(target, duration);

    } else {

      return slideUp(target, duration);

    }

  }

Kullanılışı



document.getElementById("triggerUp").addEventListener('click', function() {

  slideUp(document.getElementById("target"), 200);

});



document.getElementById("triggerDown").addEventListener('click', function() {

  slideDown(document.getElementById("target"), 200);

});



document.getElementById("triggerToggle").addEventListener('click', function() {

  slideToggle(document.getElementById("target"), 200);

});

Tabii burada id değil queryselector ile class adının seçmeniz gerekir.

Ne yazık ki çalıştıramadım, ilk kodları aynen ekledikten sonra 2. kodları şu şekilde düzenleyip ekledim ancak olmadı. Nerede hata yaptım acaba?



document.getElementById("toc-title-container").addEventListener('click', function() {

  slideUp(document.getElementById("toc-list"), 200);

});



document.getElementById("toc-title-container").addEventListener('click', function() {

  slideDown(document.getElementById("toc-list"), 200);

});



document.getElementById("toc-title-container").addEventListener('click', function() {

  slideToggle(document.getElementById("toc-list"), 200);

});

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

17.03.2020 22:38

#9

Abdullahx MW Aracı Kullanıcı

Üyelik 03.04.2019
Yaş/Cinsiyet 29 / E
Meslek .
Konum Trabzon

Ad Soyad A** K**
Mesajlar 905
Beğeniler 393 / 395
Ticaret 3, (%100)

Çünkü sizin açıp kapamak istediğiniz element id değil class idi yanlış hatırlamıyorsam.
Sadece şu kodu ekleseniz yeterlidir



document.getElementById("toc-title-container").addEventListener('click', function() {
  slideToggle(document.getElementsByClassName("toc-list")[0], 200);
});

1 kişi bu mesajı beğendi.

18.03.2020 00:15

#10

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Abdullahx adlı üyeden alıntı

Çünkü sizin açıp kapamak istediğiniz element id değil class idi yanlış hatırlamıyorsam.
Sadece şu kodu ekleseniz yeterlidir





document.getElementById("toc-title-container").addEventListener('click', function() {

  slideToggle(document.getElementsByClassName("toc-list")[0], 200);

});

Çok teşekkürler, bayağı uğraştırdım. "toc-title-container" olan class'ın yanına birde id ekledim verdiğiniz kod ile zorun çözüldü. "toc-title-container" class olarak seçtiremedim bir türlü öyle çalışmıyor, illa id olması gerekiyor. Nedenini anlamadım ama bir sebebi var belli ki.

Bu arada sitedeki jquery'yi yazının sonundaki şu alan için https://prnt.sc/rfyux1 kullanmışım daha önce. Oradaki iki butonun alttaki işlemi yapmasını sağlıyor. O konuda da yarımcı olabilirseniz jquery'yi kaldırarak bir yükten daha kurtulmuş olacağım.



$(document).ready(function(){

    $(".btn1").click(function(){

        $(".bgndm-sr-b").text("Paylaşmaya ne dersin?");

        $(".btn-gizle").css("display", "none");

        $(".icrk-gizli-e").css("display", "block");

        

    });

    $(".btn2").click(function(){

        $(".bgndm-sr-b").html("Nedenini belirtmek ister misin?");

        $(".btn-gizle").css("display", "none");

        $(".icrk-gizli-h").css("display", "block");

    });

});

Evet derse yazıyı değiştirip paylaşım butonlarını getiriyor, hayır derse yine yazıyı değiştirip iletişime formu için buton geliyor. Butonlar display:none; mantığı ile "icrk-gizli-e" ve "icrk-gizli-h" şeklinde gizli.

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

Siteye Kütüphane Çekmeden Aç Kapa İşlemini Nasıl Yaptırabilirim?

Üye Girişi Yap