Posts sobre | Dicas blog, imagem Pc e Web

Javascript faz Div suspensa parece se mover com descer e subir da página

Mostrei um código css para a uma div ficar fixa no canto do blog ou página, agora um Script que faz algo semelhante, porém, a div fica suspensa e 'solta', parece que fica balançando quando desce ou sobe a página. A div é um elemento Html que dentro dela pode colocar coisas, sendo assim pode ser para uma imagem, anúncio ou texto tenha esse efeito.


Abaixo estão dois códigos, um do Javascript e outro o código da DIV em Html com um pouco de estilo css(style).

No JavaScript, o que está em vermelho são anotações da 'configuração' do Elemento DIV e você pode remover elas para seu código ficar menor, mas com cuidado, faça isso só após testar o script e ver que funciona. Com uma exceção que é essa primeira parte que mostra que o código veio do site Dynamic drive, não se deverá remover, é bom visitar o site para ler sobre.


<script type="text/javascript">
/**********
Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
This notice must stay intact for legal use.
Visit http://www.dynamicdrive.com/ for full source code
***********/
var persistclose=0 // 0 zero faz com que a div apareça ao atualizar e 1 faz com que a div fechada não apareça novamente pro mesmo visitante na mesma página ou session, nem sempre funciona em alguns navegadores
var startX = 0 //set x offset of bar in pixels
var startY = 22 // regule distancia vertical em pixels e escolha a base logo abaixo, Se você usar na base 'frombottom', recomendo usar mínimo de 22 porque se o visitante estiver com a janela reduzida a barra de rolagem de baixo ficará sobre a base
var verticalpos="frombottom" // use "fromtop" para alinhar ao topo ou "frombottom" para alinhar na base
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("fixamove").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("fixamove").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
/*_posição a direita em offsetadditionx _*/
var offsetadditionx=700
var offsetadditiony=0
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){
this.style.left=x+offsetadditionx+"px";
this.style.top=y+offsetadditiony+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
/*_Velocidade com que mexe. numero alto é mais lento_*/
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("fixamove");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>



<div id="fixamove" style="position:absolute;z-index:100;visibility:hidden;background:#fff;border:1px solid #ccc;padding:3px;height:255px;width:255px;">
<input type='submit' onClick="closebar(); return false" value=' X ' style="float:right;font-weight:bold;">

Minha frase, anúncio ou imagem aqui ficará sobre outras coisas, se movendo e enchendo a sacola do visitante

<a href="" onClick="closebar(); return false" style="font-weight:bold;color:red;">FECHAR</a>
</div>


Acima, está nas cores laranja o estylo Css que você pode alterar, são cores e bordas, pode até adicionar algo, é com você e com cuidado.

Em verde está o código do botão para fechar a DIV e depois o código do link também para fechar ela, você pode deletar se não quiser que o visitante feche ela.

O código pode ser colocado em body do Html, ou local adequado, como quem usa o blogger é a opção Adicionar gadget...


8 comentários:

  1. Muito obrigado, ajudou muito a minha empresa de host.

    ResponderExcluir
  2. I thought it was going to be some ok old blog post, but frankly it compensated for my time. I will post a link to this page on my web site. I am sure my site visitors will find that very handy.

    ResponderExcluir
    Respostas
    1. É eu também gostei, principalmente que dá para regular a velocidade que ela desce ou sobe e o botão de ocultar ela também.

      Excluir
  3. Boa tarde, 1º parabéns pela dica, muito legal mesmo, 2º, gostaria de saber se tem como mudar o local onde aparece, ex. alinhar ao meio.
    Desde já agradeço.
    Jonas

    ResponderExcluir
    Respostas
    1. Essa div é controlada pelo javascript e não tem um alinhamento central, mas ele pode ser conseguido mais-ou-menos se você substituir frombottom por fromtop e aumentar o número de var startY = 22 para algo maior como var startY = 199 ou número maior um pouco, depende do tamanho da div.

      Excluir
  4. Bom dia tudo bem? Já faz tempo que realizou a postagem, por tanto não posso te culpar caso não lembre-se do código. Mas gostaria de saber se é possível delimitar uma altura máxima para a div descer? E como posso fazer isso?

    ResponderExcluir
    Respostas
    1. Se eu entendi você pode regular a altura onde o elemento vai parar modificando o número 22 que eu deixei nesse trecho de código:
      startY = 22

      Já a altura do elemento(quadro, div) que deverá aparecer está na segunda parte do código, e é:
      height:255px;

      Você pode aumentar o número acima ou diminuir, e, assim acontecerá com o elemento, outra coisa que você pode fazer que provavelmente seja o mais correto, mas que nesse caso eu não testei, invés de alterar o número é pegar e remover esse trecho:
      height:255px;

      Aí, pelos padrões de Html, a altura do elemento vai ser regulado pelo texto que estiver dentro dele, ou seja, o que for que você colocar dentro do elemento é que irá fazer ele ficar maior ou menor.

      Excluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Pesquisar

Google

Newsletter

Digite seu Email:

Postagens populares

Arquivo do blog

Recentes postagens populares