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
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Shek Crowley
 
fiapinho
 
while
 
Kyou
 
Smoke.xX
 
w204
 
Holkis
 
Jhool
 
TZero
 

Quem está conectado
299 usuários online :: 5 usuários cadastrados, 1 Invisível e 293 Visitantes :: 1 Motor de busca

Holkis, Jhool, Kyo Panda, Pedro_xD, Shek Crowley

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

Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 810
Pontos Ativos : 1561

http://ajuda.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);

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2261
Pontos Ativos : 5165

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~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 810
Pontos Ativos : 1561

http://ajuda.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:
seta1   Condições gerais de uso & equipe voluntária de suporte.
seta1 Lista de perguntas e respostas e Tutoriais e astúcias.
seta1 Sistema de busca do fórum.
Fóruns interessantes:
seta1 Ajuda e Suporte.
seta1 Serviços Extras.
seta1 Publicidade & SEO.
seta1 Sugestões e Melhoras.
Desenvolvedores:
seta1 Addons ou Plugins.
seta1 Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2261
Pontos Ativos : 5165

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