FREEDOM DESIGN

Liberdade de edição


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

1Pré-visualizar no Tópico Empty Pré-visualizar no Tópico Sex Jan 25, 2013 8:31 pm

Membro

Seikon
Seikon
Olá, gostaria de saber se seria possivel inserir um botão que fique abaixo das respostas rapidas de meu fórum, no qual consiga fazer os usuarios prévisualizar o conteudo inserido dentro da caixa de resposta rapida.

Informações

Versão do Forum: PUNBB
Link do Fórum: http://narutosenso.forumeiros.com/forum

Atenciosamente, Seikon.

2Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 8:38 pm

Membro

Quakeline
Quakeline
Olá,

Veja este tutorial

http://ajuda.forumeiros.com/t71335-

Até

3Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 8:47 pm

Administrador

MateusV.
MateusV.
Olá,

Crie um novo código Javascript com o investimento marcado nos tópicos e com este código:
Código:
jQuery(document).ready(function(){jQuery('#quick_reply input[name="post"]').after(' <input type="submit" id="prev" value="Pré-visualizar no tópico">');jQuery('body').append('<div class="light" style="display:none"></div><div class="prev" style="display:none;"><h3 class="tituloprev">Pré-Visualizar</h3><div class="prevcontent"></div></div>');jQuery('#prev').click(function(mateusv){mateusv.preventDefault();jQuery.post('/post',{mode:'reply',t:jQuery('input[name="t"]:eq(0)').val(),message:jQuery('textarea[name="message"]:eq(0)').val(),preview:'CHUPARLIMAO'},function(q){

jQuery('.prev .prevcontent').html(jQuery('form[action="/post"] .main-content .post .postbody .post-entry .entry-content',q).html());
jQuery('.light,.prev').fadeIn();
});}); jQuery('.light').click(function(){jQuery(this).remove();jQuery('.prev').remove();});});

Feito isto adicione este código em seu CSS:
Código:
.prev {
    position: fixed;
    left: 40%;
    top: 20%;
    background: white;
    padding: 10px;
    border: 1px solid black;
    box-shadow: 2px 2px 7px black;
    z-index: 9999;
}
.tituloprev {
    padding: 3px;
    border-bottom: 1px solid black;
}
.prevcontent {
    padding: 20px;
    max-height: 450px;
    overflow: auto;
    overflow-x: hidden;
}
.light {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(97, 97, 97,.7);
    z-index: 9999;
    cursor: pointer;
}

https://frdesign.forumeiros.com

4Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 8:51 pm

Membro

Seikon
Seikon
Olá o botão realmente apareceu, mas ele só funcionou quando prévisualizei a primeira vez, depois que fechei a popup clicando fora dela e tentei prévisualizar novamente nada aconteceu.

5Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 8:54 pm

Administrador

MateusV.
MateusV.
Olá,

Substitua o Javascript por este:
Código:
jQuery(document).ready(function(){jQuery('#quick_reply input[name="post"]').after(' <input type="submit" id="prev" value="Pré-visualizar no tópico">');jQuery('#prev').click(function(mateusv){mateusv.preventDefault(); jQuery('body').append('<div class="light" style="display:none"></div><div class="prev" style="display:none;"><h3 class="tituloprev">Pré-Visualizar</h3><div class="prevcontent"></div></div>'); jQuery.post('/post',{mode:'reply',t:jQuery('input[name="t"]:eq(0)').val(),message:jQuery('textarea[name="message"]:eq(0)').val(),preview:'CHUPARLIMAO'},function(q){

jQuery('.prev .prevcontent').html(jQuery('form[action="/post"] .main-content .post .postbody .post-entry .entry-content',q).html());
jQuery('.light,.prev').fadeIn();
});}); jQuery('.light').click(function(){jQuery(this).remove();jQuery('.prev').remove();});});

https://frdesign.forumeiros.com

6Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 8:56 pm

Membro

Seikon
Seikon
Agora depois que eu clico em prévisualizar a caixa de previsualizar continua na pagina, não da para fechar a popup. Seria possivel fazer um botão para fechar a popup?

7Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 9:03 pm

Administrador

MateusV.
MateusV.
Substitua o CSS por este:
Código:
.prev {
    position: fixed;
    left: 40%;
    top: 20%;
    background: white;
    padding: 10px;
    border: 1px solid black;
    box-shadow: 2px 2px 7px black;
    z-index: 9999;
}
.tituloprev {
    padding: 3px;
    border-bottom: 1px solid black;
}
.prevcontent {
padding: 20px;
max-height: 450px;
overflow: auto;
max-width: 500px;
}
.light {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(97, 97, 97,.7);
    z-index: 9999;
    cursor: pointer;
}

#close {
    padding-left: 60px;
}

E o Javascript por este:
Código:
function fecharprev(){jQuery('.light').remove();jQuery('.prev').remove();}jQuery(document).ready(function(){jQuery('#quick_reply input[name="post"]').after(' <input type="submit" id="prev" value="Pré-visualizar no tópico">');jQuery('#prev').click(function(mateusv){mateusv.preventDefault(); jQuery('body').append('<div class="light" style="display:none" onclick="fecharprev();"></div><div class="prev" style="display:none;"><h3 class="tituloprev">Pré-Visualizar<img src="http://i.imgur.com/H1MJk.png" id="close" onclick="fecharprev();"></h3><div class="prevcontent"></div></div>'); jQuery.post('/post',{mode:'reply',t:jQuery('input[name="t"]:eq(0)').val(),message:jQuery('textarea[name="message"]:eq(0)').val(),preview:'CHUPARLIMAO'},function(q){

jQuery('.prev .prevcontent').html(jQuery('form[action="/post"] .main-content .post .postbody .post-entry .entry-content',q).html());
jQuery('.light,.prev').fadeIn();
});}); });

https://frdesign.forumeiros.com

8Pré-visualizar no Tópico Empty Re: Pré-visualizar no Tópico Sex Jan 25, 2013 9:09 pm

Membro

Seikon
Seikon
Olá sir, Os codigos finais que me passou resolveram o problema, agora vou personalizar o css.

Obrigado pela ajuda.


Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Tópicos semelhantes

-

» Pedido - Código de Novo Tópico

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