[TUTORIAL] Visualizar tópico em modo hover

Ir para baixo

[TUTORIAL] Visualizar tópico em modo hover Empty [TUTORIAL] Visualizar tópico em modo hover

Mensagem por Alex Habilidade 21.03.14 14:09


[TUTORIAL] Visualizar tópico em modo hover Galeri10

Visualizar tópico em modo hover

Nesse tutorial iremos aplicar um ícone ao lado de cada tópico, onde podemos visualizar a postagem proporcionando a visualização mais rápida dos tópicos, facilitando o nosso tempo e navegação por todo o fórum.


--> Tutoriais, dicas e astúcias <--
Visualizar tópico em modo hover




- Código a ser utilizado:
Escolha o código da versão de seu fórum. Assim que escolher, veja o segundo passar para aprender a instalar o código e suas funções.

[TUTORIAL] Visualizar tópico em modo hover Php31210 PHPBB3, PHPBB2 e INVISION
Código:
if (/\/?f\d+.*/.test(window.location.pathname)) {
    $(function () {
        $('a.topictitle').after('<a href="#" style="margin-left: 5px;" class="preview_topic"><img src="http://i.imgur.com/gdvRoFW.png"/></a>');
        $('.preview_topic').click(function () {
            var url = this.previousSibling.href;
            $('body').prepend('<style>.popupWrapper {background-color: rgba(70, 70, 70, 0.6);border-radius: 4px 4px 4px 4px;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);left: 300px;margin: 0 auto !important;max-height: 400px;max-width: 700px;overflow: auto;padding: 4px;position: fixed !important;top: 200px;}</style><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;" class="modal" id="document_modal"></div><div id="topic_popup" class="popupWrapper" style="z-index: 10001;"></div>');
            $('#topic_popup').load(url + ' .post:first', function () {
                $('#document_modal').click(function () {
                    $('#document_modal, #topic_popup').remove();
                });
            });
            return false;
        });
    });
}
[TUTORIAL] Visualizar tópico em modo hover Pun1210PUNBB
Código:
if (/\/?f\d+.*/.test(window.location.pathname)) {
    $(function () {
        $('a.topictitle').after('<a href="#" style="margin-left: 5px;" class="preview_topic"><img src="http://i.imgur.com/gdvRoFW.png"/></a>');
        $('.preview_topic').click(function () {
            var url = this.previousSibling.href;
            $('body').prepend('<style>.popupWrapper {background-color: rgba(70, 70, 70, 0.6);border-radius: 4px 4px 4px 4px;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);left: 300px;margin: 0 auto !important;max-height: 400px;max-width: 700px;overflow: auto;padding: 4px;position: fixed !important;top: 200px;}</style><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;" class="modal" id="document_modal"></div>');
            $('.pun').prepend('<div id="topic_popup" class="popupWrapper" style="z-index: 10001;"></div>');
            $('#topic_popup').load(url + ' .post:first', function () {
                $('#document_modal').click(function () {
                    $('#document_modal, #topic_popup').remove();
                });
            });
            return false;
        });
    });
}


- Aplicando o código JS:
Painel de Controle ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos códigos JavaScript
[TUTORIAL] Visualizar tópico em modo hover Painel13

[TUTORIAL] Visualizar tópico em modo hover 110111[TUTORIAL] Visualizar tópico em modo hover 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Visualizar tópico em modo hover 110210[TUTORIAL] Visualizar tópico em modo hover 398853  Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Visualizar tópico em modo hover 110310[TUTORIAL] Visualizar tópico em modo hover 398853  Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Visualizar tópico em modo hover 110410[TUTORIAL] Visualizar tópico em modo hover 398853  Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:
    [TUTORIAL] Visualizar tópico em modo hover UnKas1b





© Fórum dos Fóruns


[TUTORIAL] Visualizar tópico em modo hover Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Visualizar tópico em modo hover
Alex Habilidade
Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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