janela flutuante!

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido janela flutuante!

Mensagem por Uatyla em 26/06/14, 12:15 pm

  • 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, 06:58 am, editado 1 vez(es)
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: janela flutuante!

Mensagem por Hancki em 26/06/14, 12:23 pm

Olá!

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

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: janela flutuante!

Mensagem por Uatyla em 26/06/14, 12:42 pm

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>
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: janela flutuante!

Mensagem por Hancki em 26/06/14, 12:45 pm

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

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: janela flutuante!

Mensagem por Uatyla em 26/06/14, 02:47 pm

Sim mais creio que funciona só no meu site, ou só em widget
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: janela flutuante!

Mensagem por Hancki em 26/06/14, 05:00 pm

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
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: janela flutuante!

Mensagem por Uatyla em 26/06/14, 07:28 pm

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

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: janela flutuante!

Mensagem por Hancki em 27/06/14, 06:28 am

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
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: janela flutuante!

Mensagem por Uatyla em 27/06/14, 06:37 am

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?
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: janela flutuante!

Mensagem por Hancki em 27/06/14, 06:46 am

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
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: janela flutuante!

Mensagem por Uatyla em 27/06/14, 06:58 am

Certinho... Obrigado!
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

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