Problema com código Js de substituição de ícones
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Problema com código Js de substituição de ícones
Detalhes da questão
Endereço do fórum: 1forum1.forumeiros.com
Versão do fórum: PhpBB3
Descrição
Seguindo esse tutorial,
https://ajuda.forumeiros.com/t107301-como-mudar-os-icones-de-topicos-por-html
Eu havia realizado, através do código feito pelo Kyo, uma troca de imagens [e background-images (css)], por HTML,
código:
- Código:
; (function ($) {
'use strict';
var icons;
icons = [{
name: 'Aprovado',
url: 'http://i.imgur.com/lu0eZRo.png',
content: '<div class="icoon" style="background-color:#88bb55!important;"><i class="fa fa-check" aria-hidden="true"></i> Aprovado</div>'
}, {
name: 'Resolvido',
url: 'http://i.imgur.com/T2faMqF.png',
content: '<div class="icoon" style="background-color:#88bb55!important;"><i class="fa fa-check" aria-hidden="true"></i> Resolvido</div>'
}, {
name: 'Importante',
url: 'http://i.imgur.com/IT9cnBf.png',
content: '<div class="icoon" id="importante-icone" style="background-color:#e6594c!important;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Importante</div>'
}, {
name: 'Único',
url: 'http://i.imgur.com/0gRcffU.png',
content: '<div class="icoon" style="background-color:#965db5!important;"><i class="fa fa-map-marker" aria-hidden="true" style="font-size: 14px;"></i> Único</div>'
}, {
name: 'Enquete',
url: 'http://i.imgur.com/uRZEUrj.png',
content: '<div class="icoon" style="background-color:#3f51b5!important;"><i class="fa fa-pie-chart" aria-hidden="true"></i> Enquete</div>'
}, {
name: 'Notícia',
url: 'http://i.imgur.com/vmeJIwU.png',
content: '<div class="icoon" style="background-color:#369fcf!important;"><i class="fa fa-flag" aria-hidden="true"></i> Notícia</div>'
}, {
name: 'Em Curso',
url: 'http://i.imgur.com/bUf1WxK.png',
content: '<div class="icoon" style="background-color:#ecb942!important;"><i class="fa fa-cogs" aria-hidden="true"></i> Em Curso</div>'
}, {
name: 'Script',
url: 'http://i.imgur.com/22FQtkg.png',
content: '<div class="icoon" style="background-color:#a9a9a9!important;"><i class="fa fa-file-text" aria-hidden="true"></i> Script</div>'
}, {
name: 'Tutorial',
url: 'http://i.imgur.com/P5cQ81Q.png',
content: '<div class="icoon" style="background-color:#35bfa0!important;"><i class="fa fa-book" aria-hidden="true"></i> Tutorial</div>'
}, {
name: 'Anúncio',
url: 'http://i.imgur.com/l5omWa6.png',
content: '<div class="icoon" id="anuncio-icone" style="background-color:#2d3134!important;"><i class="fa fa-bullhorn" aria-hidden="true"></i> Anúncio</div>'
}, {
name: 'Sem Conteúdo',
url: 'http://i.imgur.com/OpVT95o.png',
content: '<div class="icoon" style="background-color:#e6594c!important;"><i class="fa fa-times" aria-hidden="true"></i> Sem Conteúdo</div>'
}, {
name: 'Negado',
url: 'http://i.imgur.com/nYS8O7K.png',
content: '<div class="icoon" style="background-color:#e6594c!important;"><i class="fa fa-times" aria-hidden="true"></i> Negado</div>'
}];
$(function () {
$.each(icons, function () {
// Ícones como imagem
$('img[alt="' + this.name + '"]').replaceWith(this.content);
// Ícones como background
$('.dterm[style="background-image: url(' + this.url + ');"]')
.attr('style', '')
.prepend(this.content);
});
});
}) (jQuery);
Mas não muda o background mais nos tópicos.
O background-image continua intacto.
Será que alguém poderia arrumar? ;-;
Obrigado.
Re: Problema com código Js de substituição de ícones
Opa, eaê, o/
Pelo que notei no HTML, parece que o background-image está usando https no link da imagem, e o do tópico http. Então:
Vira:
Em tese, seria apenas adicionar os ícones com HTTPS também ao código, mas vamos tentar evitar código sujão. Tente trocar por esse:
Pelo que notei no HTML, parece que o background-image está usando https no link da imagem, e o do tópico http. Então:
- Código:
https://i.imgur.com/IT9cnBf.png
Vira:
- Código:
https://i.imgur.com/IT9cnBf.png
Em tese, seria apenas adicionar os ícones com HTTPS também ao código, mas vamos tentar evitar código sujão. Tente trocar por esse:
- Código:
/* globals jQuery */
(function($) {
'use strict';
var icons;
icons = [{
name: 'Aprovado',
url: 'i.imgur.com/lu0eZRo.png',
content: [
'<div class="icoon" style="background-color: #88bb55 !important;">',
' <i class="fa fa-check" aria-hidden="true"></i> Aprovado',
'</div>',
].join('\n'),
}, {
name: 'Resolvido',
url: 'i.imgur.com/T2faMqF.png',
content: [
'<div class="icoon" style="background-color: #88bb55 !important;">',
' <i class="fa fa-check" aria-hidden="true"></i> Resolvido',
'</div>',
].join('\n'),
}, {
name: 'Importante',
url: 'i.imgur.com/IT9cnBf.png',
content: [
'<div class="icoon" id="importante-icone" style="background-color: #e6594c !important;">',
' <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Importante',
'</div>',
].join('\n'),
}, {
name: 'Único',
url: 'i.imgur.com/0gRcffU.png',
content: [
'<div class="icoon" style="background-color: #965db5 !important;">',
' <i class="fa fa-map-marker" aria-hidden="true" style="font-size: 14px;"></i> Único',
'</div>',
].join('\n'),
}, {
name: 'Enquete',
url: 'i.imgur.com/uRZEUrj.png',
content: [
'<div class="icoon" style="background-color: #3f51b5 !important;">',
' <i class="fa fa-pie-chart" aria-hidden="true"></i> Enquete',
'</div>',
].join('\n'),
}, {
name: 'Notícia',
url: 'i.imgur.com/vmeJIwU.png',
content: [
'<div class="icoon" style="background-color: #369fcf !important;">',
' <i class="fa fa-flag" aria-hidden="true"></i> Notícia',
'</div>',
].join('\n'),
}, {
name: 'Em Curso',
url: 'i.imgur.com/bUf1WxK.png',
content: [
'<div class="icoon" style="background-color: #ecb942 !important;">',
' <i class="fa fa-cogs" aria-hidden="true"></i> Em Curso',
'</div>',
].join('\n'),
}, {
name: 'Script',
url: 'i.imgur.com/22FQtkg.png',
content: [
'<div class="icoon" style="background-color: #a9a9a9 !important;">',
' <i class="fa fa-file-text" aria-hidden="true"></i> Script',
'</div>',
].join('\n'),
}, {
name: 'Tutorial',
url: 'i.imgur.com/P5cQ81Q.png',
content: [
'<div class="icoon" style="background-color: #35bfa0 !important;">',
' <i class="fa fa-book" aria-hidden="true"></i> Tutorial',
'</div>',
].join('\n'),
}, {
name: 'Anúncio',
url: 'i.imgur.com/l5omWa6.png',
content: [
'<div class="icoon" id="anuncio-icone" style="background-color: #2d3134 !important;">',
' <i class="fa fa-bullhorn" aria-hidden="true"></i> Anúncio',
'</div>',
].join('\n'),
}, {
name: 'Sem Conteúdo',
url: 'i.imgur.com/OpVT95o.png',
content: [
'<div class="icoon" style="background-color: #e6594c !important;">',
' <i class="fa fa-times" aria-hidden="true"></i> Sem Conteúdo',
'</div>',
].join('\n'),
}, {
name: 'Negado',
url: 'i.imgur.com/nYS8O7K.png',
content: [
'<div class="icoon" style="background-color: #e6594c !important;">',
' <i class="fa fa-times" aria-hidden="true"></i> Negado',
'</div>',
].join('\n'),
}];
$(function() {
$.each(icons, function(key, icon) {
// Ícones como imagem
$('img[alt="' + icon.name + '"]').replaceWith(icon.content);
// Ícones como background
$([
'.dterm[style="background-image: url(http://' + icon.url + ');"]',
'.dterm[style="background-image: url(https://' + icon.url + ');"]',
].join(', '))
.attr('style', '')
.prepend(icon.content);
});
});
})(jQuery);
Re: Problema com código Js de substituição de ícones
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Tópicos semelhantes
» Problema com os ícones do fórum
» Problema no código
» Problema com código
» Problema com codigo
» Problema com código
» Problema no código
» Problema com código
» Problema com codigo
» Problema com código
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos