Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Isabel Leite

[Resolvido] balao de atendimento online fixo

Por , em Desenvolvimento frontend

Recommended Posts

Isabel Leite    0

Isabel Leite
Postado

olá, sou nova no forum e gostaria muito que me ajudassem, estou desenvolvendo um site e nesse site preciso de um batãozinho de atendimento online tipo um balao de converssa q a pessoa clique e abra uma janelinha popup do livezilla mais preciso q esse balao fiquei fixo na tela mesmo se a pessoa descer a pagina ele continue la, na verdade nao tenho nem ideia de onde começar ja procurei no google mais nao consigo nenhum codigo do tipo vejam um exemplo aqui esse balao q fica atendimento online, nao sei se expliquei bem mais qualquer coisa pergunte, Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wanderson Valerio    102

Wanderson Valerio
Postado

Eita menina, seja bem-vinda ao fórum Imasters! No seu caso, é bem simples obter o que quer.

 

seletor {
   width: 300px;
   height: 70px;
   float: left;
   position: fixed;
   right: 0;
   bottom: 150px;
}

 

A mágica acontece na declaração "position: fixed;", que faz com elementos selecionados, ficam fixos, ou seja, para onde o usuário rolar, o elemento está junto. Vale ressaltar, que o "right: 0;", também é preciso para que o elemento fica à direita da tela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel Leite    0

Isabel Leite
Postado

Olá Wanderson Valerio Muito Obrigada mesmo pela ajuda, devia ter vindo antes aqui, fiquei dias procurando isso rsrs.. mas enfin tenho outra perguntinha, quero q quando a pessoa clickar na imagem abra uma janela em popup com o chat online, como implementar isso no meu codigo? vou postar o codigo aqui se puder me ajudar mais uma vez agradesço *-* 

}
#apDiv3 {
width: 170px;
   height: 200px;
   float: left;
   position: fixed;
   right: 0;
   bottom: 150px;
}
</style>
</head>
<body>
<div class="body_wrap">

<div class="header header_top">
 <div id="apDiv3"><img src="images/chat-online.png" width="166" height="160" /></div>
 <div class="container_12">

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado 

<a href="pagina" target="_blank"><img src="seucaminho/suaimagem.png"  /></a>

 

Nesse exemplo abrir-se-á em outra janela.

Recomendo a leitura nesse link,para você não ficar totalmente dependente do fórum.

No link terá outros exemplos que serão úteis.

 

 

Esqueci de postar.

Se você quiser personalizar o tamanho,posição etc. você poderá usar javascript e na própira página que você deu como exemplo olhe o código fonte.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel Leite    0

Isabel Leite
Postado

me Desculpe mais e que nao sou mto boa com codigos ainda, vi o site e nao entendi bem pq ta tudo em ingles rs. se nao for pedir de mais podera me dar um exemplo no meu codigo de como ficaria? desculpe por ficar importunando mais e que sou nova e to apanhando muito ^^ Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel Leite    0

Isabel Leite
Postado

Resolvido, consegui um codigo simples q me ajudou bastante vou postar aqui para duvidas futuras

 

}
#apDiv3 {
       width: 170px;
   height: 200px;
   float: left;
   position: fixed;
   right: 0;
   bottom: 150px;

<div class="header header_top">
 <div id="apDiv3"><a href="" onClick="window.open('http://www.seusite.com.br/suporte/chat.php','Janela','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=600,height=600,left=25,top=25'); return false;"><img src="images/caminho-da-imagem.png" width="166" height="160" /></a></div>
 <div class="container_12">

 

dessa forma a imagem ficou fixa na tela mesmo quando rola pra baixo e quando clica na imagem abre-se outra janela em Popup com o chat online do livezilla!

deu trabalho mais em meio as milhoes de pesquisas consegui! obrigado aos q ajudaram aqui do forum, Bjinho!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito