Problema com código Js de substituição de ícones

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Membro Entusiasta

Tópico resolvido Problema com código Js de substituição de ícones

Mensagem por Luiz 14.12.16 13:59

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.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema com código Js de substituição de ícones

Mensagem por Kyo Panda 14.12.16 23:56

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:

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);
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Problema com código Js de substituição de ícones

Mensagem por Luiz 15.12.16 12:05

Valeu Kyo! e.e
Você é de+! Rindo
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema com código Js de substituição de ícones

Mensagem por Kyo Panda 15.12.16 22:08

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos