Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

janela flutuante!

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

Ir para baixo

Tópico resolvido janela flutuante!

Mensagem por Uatyla 26.06.14 16:15

  • Descrição:
Olá senhores!

Eu gostaria de saber si é possível criar uma janela flutuante, posi gostaria de adicionar um tipo de anuncio, funcionaria tipo uma pop-up. é possível?
  • Informações:
Fórum:http://vidadeaquarista.forumeiros.comVersão:PHPBB3
Tipo:Pedido de códigoTags:janela,flutuante!


Última edição por uatyla em 27.06.14 10:58, editado 1 vez(es)
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Hancki 26.06.14 16:23

Olá!

Claro que é possível. Só preciso de sabe mais ou menos como deseja que seja feita.

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Uatyla 26.06.14 16:42

Então! Eu gostaria de colocar um anuncio da UOL, passarei o código logo abaixo do anúncio.
Gostaria que essa pop-up, aparecesse no canto inferior esquerdo com as dimensões de 310x310 e ter um botão de fechar.
outra coisa, gostaria de saber si pode estimular um tempo para o anuncio, exemplo com 10s ele fecha automaticamente.

O anuncio que pretendo usar seria esse.
Código:
<script type="text/javascript">
<!--
descrColor="000000";titleColor="000000";urlColor="A6A6A6";borderColor="FFFFFF";bgColor="FFFFFF";altColor="FFFFFF";coddisplaysupplier="f54d55089fa946b8825d9c0fa5accc94";formatId="9";numads="4";deslabel="uatyla";type="1";
-->
</script><script type="text/javascript" src="http://adrequisitor-af.lp.uol.com.br/uolaf.js"></script>
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Hancki 26.06.14 16:45

Testei esse código e ele não funcionou, não apareceu qualquer publicidade. Tem a certeza que está certo?
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Uatyla 26.06.14 18:47

Sim mais creio que funciona só no meu site, ou só em widget
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Hancki 26.06.14 21:00

Não sei se vai resultar, mas tente:
Código:
<div id="anuncioFlutuante">
    <span id="anuncioClose">X</span><script type="text/javascript">
<!--
descrColor="000000";titleColor="000000";urlColor="A6A6A6";borderColor="FFFFFF";bgColor="FFFFFF";altColor="FFFFFF";coddisplaysupplier="f54d55089fa946b8825d9c0fa5accc94";formatId="9";numads="4";deslabel="uatyla";type="1";
-->
</script><script src="http://adrequisitor-af.lp.uol.com.br/uolaf.js" type="text/javascript"></script>
</div><style>
#anuncioFlutuante {
background: white;
width: 310px !important;
height: 310px !important;
position: fixed;
left: 0px;
bottom: 0px;
}
#anuncioClose {
float: right !important;
margin-top: -24px;
background-color: white;
padding: 5px;
cursor:pointer;
}
</style><script>
jQuery(function () {
    setTimeout(function () {
        jQuery('#anuncioFlutuante, #anuncioClose').fadeOut('fast');
    }, 10000);
    jQuery('#anuncioClose').click(function () {
        jQuery('#anuncioFlutuante, #anuncioClose').fadeOut('fast');
    });
});
</script>
Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Uatyla 26.06.14 23:28

Onde adiciono? JS, CSS ou Widget?

@edite!

Olha ele funcionou no widget mais ele ficou grudado na barra lateral e inferior, queria ele flutuante com +/- 15px de distancia das abas Lateral e inferior.
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Hancki 27.06.14 10:28

Sim, use num widget sem table type!
Código:
<div id="anuncioFlutuante">
    <span id="anuncioClose">X</span><script type="text/javascript">
<!--
descrColor="000000";titleColor="000000";urlColor="A6A6A6";borderColor="FFFFFF";bgColor="FFFFFF";altColor="FFFFFF";coddisplaysupplier="f54d55089fa946b8825d9c0fa5accc94";formatId="9";numads="4";deslabel="uatyla";type="1";
-->
</script><script type="text/javascript" src="http://adrequisitor-af.lp.uol.com.br/uolaf.js"></script>
</div><style>
#anuncioFlutuante {
background: white;
width: 310px !important;
height: 310px !important;
position: fixed;
left: 15px;
bottom: 15px;
}
#anuncioClose {
float: right !important;
margin-top: -24px;
background-color: white;
padding: 5px;
cursor:pointer;
}
</style><script>
jQuery(function () {
    setTimeout(function () {
        jQuery('#anuncioFlutuante, #anuncioClose').fadeOut('fast');
    }, 10000);
    jQuery('#anuncioClose').click(function () {
        jQuery('#anuncioFlutuante, #anuncioClose').fadeOut('fast');
    });
});
</script>
Pronto, este código já tem 15px de distância.

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Uatyla 27.06.14 10:37

Funciona muito bem! Mais para que eu possa edita futuramente, caso precise troca o anuncio ou a posição da janela flutuante o que devo fazer?
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Hancki 27.06.14 10:46

Para trocar o anúncio, só procurar o código dele e substituir: http://prntscr.com/3wz3pe (sublinhado)

Para a posição: http://prntscr.com/3wz3v7
Está a 15px left (esquerda) e 15px bottom (fundo).
Se quer mudar para o topo e lado direito, use algo assim:
Código:
right: 15px;
top: 15px;
Simples, não? Muito feliz

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: janela flutuante!

Mensagem por Uatyla 27.06.14 10:58

Certinho... Obrigado!
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

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