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


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
» Assinatura em baixo do perfil
Hoje à(s) 15:56 por DD15Ӽ

» Desativar sistema de enquete (pergunta / votação)
Hoje à(s) 14:36 por Kyo Panda

» Quem você mais admira no Fórum dos Fóruns?
Hoje à(s) 14:27 por David Sousa

» Personalizar SCeditor
Hoje à(s) 13:35 por Vinicius Reis

» Personalizar Menu
Hoje à(s) 13:33 por YouTube3

» Perfil nos Topico
Hoje à(s) 10:36 por Kyo Panda

» Redimensionamento de imagem
Hoje à(s) 10:18 por Kyo Panda

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Magazine 2016
Participe da pesquisa de satisfação 2016 e dê sua opinião sobre os diversos serviços de Forumeiros.
Parceiros Forumeiros
Quem está conectado
183 usuários online :: 6 usuários cadastrados, 1 Invisível e 176 Visitantes :: 1 Motor de busca

DD15Ӽ, giancamposm, Luiz~, Maori, Troubleshoot, xBreninho_.

[ 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~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 695
Pontos Ativos : 1376

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 : 1915
Pontos Ativos : 4595

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
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 695
Pontos Ativos : 1376

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.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1915
Pontos Ativos : 4595

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