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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Alinhamento e virgulas dos sub fóruns.
Ontem à(s) 23:55 por Claudio Arthur

» Degradê no fórum
Ontem à(s) 22:45 por Heikki

» Editar tópicos
Ontem à(s) 22:25 por Matheus Herzog

» Mostrar online nas mensagens
Ontem à(s) 22:24 por Luiz~

» Userbar / Fanbar
Ontem à(s) 21:20 por Tiger

» Ranks PMS + Banner
Ontem à(s) 20:27 por Tiger

» Auto-execução da rádio
Ontem à(s) 19:59 por Cannabis._.

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
256 usuários online :: 9 usuários cadastrados, 1 Invisível e 246 Visitantes :: 2 Motores de busca

'Dante, Ace, Br_SP_Rodrigo, Claudio Arthur, HASSIN-ADMIN, Heikki, iPlayer, Matheus Herzog, Walcott

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

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 Qua 14 Dez 2016 - 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,
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 : 23/04/2016
Mensagens : 2436
Pontos Ativos : 3278

http://1forum1.forumeiros.com/

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

Mensagem por Kyo Panda em Qua 14 Dez 2016 - 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);
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3297
Pontos Ativos : 4594

http://ajuda.forumeiros.com

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

Mensagem por Luiz~ em Qui 15 Dez 2016 - 12:05

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


Luiz~Ajudeiro - Fórum dos Fóruns


Regulamento do FdF | Staff | Diretrizes
Perguntas Frequentes | Dicas e Astúcias
Ferramentas do Administrador
avatar

Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 2436
Pontos Ativos : 3278

http://1forum1.forumeiros.com/

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

Mensagem por Kyo Panda em Qui 15 Dez 2016 - 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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3297
Pontos Ativos : 4594

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