Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Sistema shop com pontos insuficientes
Hoje à(s) 11:18 am por weverson lopes

» Quadro de troféus e medalhas
Hoje à(s) 11:10 am por LeoziN_WallkeR

» Edição produto Fórum
Hoje à(s) 10:34 am por EDU2010

» Como gerir o sistema de pontos?
Hoje à(s) 10:34 am por Kyo Panda

» Níveis de reputação
Hoje à(s) 10:22 am por Kyo Panda

» Informações dos ultimos assuntos
Hoje à(s) 10:19 am por Kyo Panda

» Instalação do Topic'It (RESOLVIDO)
Hoje à(s) 08:39 am por AlexFernandes

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Quem está conectado
242 usuários online :: 8 usuários cadastrados, 1 Invisível e 233 Visitantes :: 1 Motor de busca

AlexG, EDU2010, Heikki, Kyo Panda, LeoziN_WallkeR, odelgado, tatsuhito, weverson lopes

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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

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

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

Mensagem por Luiz em 14/12/16, 11:59 am

Detalhes da questão


Endereço do fórum: 1forum1.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Seguindo esse tutorial,
http://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.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4268
Pontos Ativos : 4893

Ver perfil do usuário https://github.com/lffg/

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

Mensagem por Kyo Panda em 14/12/16, 09:56 pm

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);
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4386
Pontos Ativos : 5672

Ver perfil do usuário http://ajuda.forumeiros.com

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

Mensagem por Luiz em 15/12/16, 10:05 am

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4268
Pontos Ativos : 4893

Ver perfil do usuário https://github.com/lffg/

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

Mensagem por Kyo Panda em 15/12/16, 08:08 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4386
Pontos Ativos : 5672

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum