getbutton ile oluşturduğum .js kodunu nasıl düzenleyeceğim
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);
})();
'''
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (7)
@ebykdrms Sizin dediğiniz gibi yaptım. Bu sefer bütün ekranlar için sildi. Yani 1200 ekranda da sildi, 768'de de.
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>
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>
'''
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)
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>
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.