I'm having some trouble with a javascript file, it just works on google chrome. That's my JS file, it changes the color of some DOM elements in another file called index.js. It works perfectly in Google Chrome, but in Firefox, OperaBrowser, or even in mobile browsers, it just doesn't work. Is there any changes I have to do to make it work on different browsers?
$( document ).ready(function(){
alert('file loaded');
// $("#bOutline1").hide();
// $(".colorpicker").asColorPicker();
// $(".complex-colorpicker").asColorPicker({
// mode: 'complex'
// });
var inputBarraTitulos;
var inputMenuLateral;
var inputCoresTextosBarraTitulos;
var inputCoresTextosMenuLateral;
var inputCorMenuSuperior;
var defaultColor = "#7460ee";
window.addEventListener("load", startCoresBarraTitulos, false);
window.addEventListener("load", startCoresMenuLateral, false);
// window.addEventListener("load", startCoresTextosBarraTitulos, false);
window.addEventListener("load", startCoresTextosMenuLateral, false);
window.addEventListener("load", startInputCorTopBar, false);
function startCoresBarraTitulos() {
alert('startbarratitulo');
//cor das barras de titulo
inputBarraTitulos = document.querySelector("#inputBarraTitulos");
inputBarraTitulos.value = defaultColor;
inputBarraTitulos.addEventListener("input", trocaCorBarraTitulos, false);
inputBarraTitulos.select();
}
function startCoresMenuLateral() {
//cor do menu lateral
inputMenuLateral = document.querySelector("#inputMenuLateral");
inputMenuLateral.value = defaultColor;
inputMenuLateral.addEventListener("input", trocaCorMenuLateral, false);
inputMenuLateral.select();
}
// function startCoresTextosBarraTitulos() {
// //cor do menu lateral
// inputCoresTextosBarraTitulos = document.querySelector("#inputCoresTextosBarraTitulos")
// inputCoresTextosBarraTitulos.value = defaultColor
// inputCoresTextosBarraTitulos.addEventListener("input", trocaCorTextosBarraTitulo, false)
// inputCoresTextosBarraTitulos.select()
// }
function startCoresTextosMenuLateral() {
//cor do menu lateral
inputCoresTextosMenuLateral = document.querySelector("#inputCoresTextosMenuLateral");
inputCoresTextosMenuLateral.value = defaultColor;
inputCoresTextosMenuLateral.addEventListener("input", trocaCorTextosMenuLateral, false);
inputCoresTextosMenuLateral.select();
}
function startInputCorTopBar() {
inputCorMenuSuperior = document.getElementById("inputCorMenuSuperior");
inputCorMenuSuperior.value = defaultColor;
inputCorMenuSuperior.addEventListener("input", trocaCorTopBar, false);
inputCorMenuSuperior.select();
}
// converter RGB em HEX
function rgbToHex(total) {
var total = total.toString().split(',');
var r = total[0].substring(4);
var g = total[1].substring(1);
var b = total[2].substring(1,total[2].length-1);
return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
}
function checkNumber(i){
i = i.toString();
if (i.length == 1) return '0'+i;
else return i;
}
function trocaCorBarraTitulos(event) {
const barraTitulos = document.getElementById("cTitulo");
const tituloSelecaoCores = document.getElementById("tituloSelecaoCores");
const FotoPerfil = document.getElementById("FotoPerfil");
const flexNoBlock = document.getElementById("FlexNoBlock");
tituloSelecaoCores.style.backgroundColor = event.target.value;
FotoPerfil.style.backgroundColor = event.target.value;
barraTitulos.style.backgroundColor = event.target.value;
flexNoBlock.style.backgroundColor = event.target.value;
const corBarraTitulos = tituloSelecaoCores.style.backgroundColor; //recebe a cor geral das barras de titulo
document.getElementById("RecebeCorBarraTitulos").value = rgbToHex(corBarraTitulos);
const RecebeCorBarraTitulos = document.getElementById("RecebeCorBarraTitulos").value;
console.log(RecebeCorBarraTitulos);
$.ajax({
url:'cor_enviar.php',
type:'POST',
data: {RecebeCorBarraTitulos: RecebeCorBarraTitulos},
success:function(data){
$("#bOutline1").show();
alert(data);
},
error: function(data){
alert("erro");
}
});
}
function trocaCorMenuLateral(event){
const leftSidebar = document.getElementById("leftSidebar");
const corMenuLateral = leftSidebar.style.backgroundColor;
leftSidebar.style.backgroundColor = event.target.value;
document.getElementById("RecebeCorMenuLateralFundo").value = rgbToHex(corMenuLateral);
const RecebeCorMenuLateralFundo = document.getElementById("RecebeCorMenuLateralFundo").value;
console.log(leftSidebar.style.backgroundColor);
$.ajax({
url:'cor_enviar.php',
type:'POST',
data: {RecebeCorMenuLateralFundo: RecebeCorMenuLateralFundo},
success:function(data){
$("#bOutline1").show();
alert(data);
},
error: function(data){
alert("erro");
}
});
}
function trocaCorTopBar(event){
const topBar = document.getElementById("topbar");
topBar.style.backgroundColor = event.target.value;
const corTopBar = topBar.style.backgroundColor;
document.getElementById("RecebeCorTopBar").value = rgbToHex(corTopBar);
const RecebeCorTopBar = document.getElementById("RecebeCorTopBar").value;
console.log(RecebeCorTopBar);
$.ajax({
url:'cor_enviar.php',
type:'POST',
data: {RecebeCorTopBar: RecebeCorTopBar},
success:function(data){
$("#bOutline1").show();
alert(data);
},
error: function(data){
alert("erro");
}
});
}
function trocaCorTextosMenuLateral(event){
const textoLeftSidebar = document.getElementById("textColor");
const corTextoMenuLateral = textoLeftSidebar.style.color;
textoLeftSidebar.style.color = event.target.value;
document.getElementById("RecebeCorTextoMenuLateral").value = rgbToHex(corTextoMenuLateral);
const RecebeCorTextoMenuLateral = document.getElementById("RecebeCorTextoMenuLateral").value;
console.log(RecebeCorTextoMenuLateral);
$.ajax({
url: 'cor_enviar.php',
type: 'POST',
data: {RecebeCorTextoMenuLateral: RecebeCorTextoMenuLateral},
success: function(data){
$("#Outline1").show();
alert(data);
},
error: function(data){
alert("erro");
}
})
}
});
