v2.5.2
Giriş yap

getbutton ile oluşturduğum .js kodunu nasıl düzenleyeceğim

yazilimyolcusu
469 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhabalar. Arkadaşlar aşağıdaki .js kodunu, telefonda çıkamayacak şekilde responsive olarak ayarlamak istiyorum. Nasıl yapabilirim acaba?

'''js

(function () {
var options = {
call: "0 000 000 00 00", // Call phone number
whatsapp: "0 000 000 00 00", // WhatsApp number
call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
button_color: "#FF6550", // Color of button
position: "left", // Position may be 'right' or 'left'
order: "call,whatsapp", // Order of buttons
};
var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();

'''

Cevap yaz
Cevaplar (7)
yazilimyolcusu
805 gün önce

@ebykdrms Sizin dediğiniz gibi yaptım. Bu sefer bütün ekranlar için sildi. Yani 1200 ekranda da sildi, 768'de de.

ebykdrms
807 gün önce

O zaman ekran genişliğini kontrol edip öyle çalıştırın.

<script id="willRemove">
    (function () {
        var options = {
            call: "0 000 000 00 00", // Call phone number
            whatsapp: "0 000 000 00 00", // WhatsApp number
            call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
            button_color: "#FF6550", // Color of button
            position: "left", // Position may be 'right' or 'left'
            order: "call,whatsapp", // Order of buttons
        };
        var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
    
    // Ekran genişliği 600px veya altındaysa silinsin...
    if(window.innerWidth <= 600) {
        setTimeout(function(){
            // Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
            document.getElementById('willRemove').remove();
        },10);
    }
</script>
yazilimyolcusu
807 gün önce

Aşağıdaki kodu şekilde çalıştırdım. Ama 1200 çözünürlükte de sildi. Bana sadece "600" çözünürlükte lazım. Yani hemen aşağıdaki kodla beraber kullanımı lazım.

'''javascript

var x = window.matchMedia("(max-width: 600px)")
myFunction(x)
x.addListener(myFunction)
<script id="willRemove">
    (function () {
    var options = {
    call: "0 000 000 00 00", // Call phone number
    whatsapp: "0 000 000 00 00", // WhatsApp number
    call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
    button_color: "#FF6550", // Color of button
    position: "left", // Position may be 'right' or 'left'
    order: "call,whatsapp", // Order of buttons
    };
    var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
    var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
    s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
    var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    }
    
    setTimeout(function(x){
    // Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
    document.getElementById('willRemove').remove();
    },10))();
</script>

'''

abdullahx
807 gün önce

Yine ilginç bir soru, tam anlayamadım ama yapmak istediğiniz bu tarz bir şey mi?

(function (mobile) {
        var options = {
            call: "0 000 000 00 00", // Call phone number
            whatsapp: "0 000 000 00 00", // WhatsApp number
            call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
            button_color: "#FF6550", // Color of button
            position: "left", // Position may be 'right' or 'left'
            order: "call,whatsapp", // Order of buttons
        };
        var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
        var s = document.createElement('script'); s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        if (!mobile) // Eğer sadece masaüstünde çıkmasını istiyorsan
            var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })(window.navigator.userAgentData.mobile);

    let interval = setInterval(() => {
        let elem = document.querySelector("div[id^='gb-widget']")
        if (elem !== null) {
            clearInterval(interval)
            let button = document.createElement("button")
            button.id = 'toggleButton'
            button.style.position = 'fixed'
            button.style.right = '1px'
            button.style.bottom = '1px'
            button.style.cursor = 'pointer'
            button.innerText = 'Aç/Kapat'
            document.body.appendChild(button)

            const toggleDisplay = (trigger, target) => {
                let defaultDisplay = window.getComputedStyle(target).getPropertyValue('display')
                trigger.addEventListener('click', () => {
                    target.style.display =
                        (target.style.display === 'none') ?
                            defaultDisplay :
                            'none'
                })
            }
            toggleDisplay(button, elem)
        }
    }, 200)

Link

ebykdrms
807 gün önce

Kodun çalıştıktan sonra kendini remove etmesini sağlayabilirsiniz.
Bunun için bu kodları bir script tag'ına alın ve bu tag'a bir id verin.
Sonra setTimeout() fonksiyonuyla kodun çalışmasına yetecek kadar kısa bir an izin verin ve bu tag'ı komple silin.

<script id="willRemove">
    (function () {
        var options = {
            call: "0 000 000 00 00", // Call phone number
            whatsapp: "0 000 000 00 00", // WhatsApp number
            call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
            button_color: "#FF6550", // Color of button
            position: "left", // Position may be 'right' or 'left'
            order: "call,whatsapp", // Order of buttons
        };
        var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
    setTimeout(function(){
        // Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
        document.getElementById('willRemove').remove();
    },10);
</script>
admin
807 gün önce

ekranin genişligini al diyelim 720px den kucukse kod calismasin.

yazilimyolcusu
807 gün önce

Aslında soruyu yanlış sormuşum, yeni farkettim. Yukarıdaki kodu .js ile nasıl görünmez hale getirebilirim. Yani şöyle bir şey olabilir ama nasıl yapılacağını bilemedim.

'''js

document.getElementById("fonksiyonugizle").style.display = "none";

'''

gibi mesela.