Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Tenho várias DIVs e queria fazer tipo um linha de tempo.. Onde para indicar o momento atual eu teria uma DIV x que seria sobreposta às outras DIVs (que ficariam de fundo), e a cada minuto a posição horizontal da DIV x seria atualizada.
Seria possível fazer algo nesse sentido?
Olá,
Não entendi como aplicar isso... Por exemplo onde que vou colocar a chamada da função e que atributos da div devo modificar para que ela mude sua posição horizontal e fique sobreposta à outra div.
Teria como você esboçar como ficaria isso no seguinte código, onde pretendo que area1 seja a div sobreposta e area seja a div de fundo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">#area {
width:4040px;
}
#area1{
width: 10px;
heigth: 80px;
background: red;
atributo_para_deixar_sobreposta: yes;
}</style>
<script>
int = window.setInterval(moveDiv, 60000);
function moveDiv(){
document.getElementById("area1").atributo = document.getElementById("area1").atributo + 1;
}
</script>
</head>
<body>
<div id="area">
<div id="area1">
teste
</div>
</div>
</body>
</html>não sei se foi mais ou menos o que eu esbocei, se puder me ajudar.. :)
Então t4v4res da uma olhada aqui:
note que eu adiconei a sua div area1 a propriedade position:relative para que ela aceite a propriedade left.
na funçao pos += 20; significa que a cada execução da função a div se move em 20px.
e em setInterval("mover('area1')", 500); o segundo parametro "500" é o tempo para repetição da função definida no primeiro parametro, no caso esses "500" são milisegundos para um minuto você pode colocar 60000.
É isso, espero que ajude!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
var pos = 0;
function mover(el)pos += 20;
div_red = document.getElementById(el);
div_red.style.left = pos + "px";
}
window.onload = function()int = window.setInterval("mover('area1')", 500);
}
</script>
<style type="text/css">
#area {
width:4040px;
}
#area1{
position:relative;
width:10px;
height:80px;
background:red;
}
</style>
</head>
<body>
<div id="area">
<div id="area1">
</div>
</div>
</body>
</html>Valeu Carlos, agora mais um dúvida..
Como faço para esta Div area1 ficar sobreposta à Div area quando eu inserir algum texto dentro da Div area.
exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
var pos = 0;
function mover(el)pos += 20;
div_red = document.getElementById(el);
div_red.style.left = pos + "px";
}
window.onload = function()int = window.setInterval("mover('area1')", 500);
}
</script>
<style type="text/css">
#area {
width:4040px;
}
#area1{
position:relative;
width:10px;
height:80px;
background:red;
}
</style>
</head>
<body>
<div id="area"><div id="area1">
</div>
</div>
</body>
</html>z-index ?
Tentei usar o z-index mas não deu certo, o que estou fazendo de errado?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
var pos = 0;
function mover(el)pos += 20;
div_red = document.getElementById(el);
div_red.style.left = pos + "px";
}
window.onload = function()int = window.setInterval("mover('area1')", 500);
}
</script>
<style type="text/css">
#area {
width:4040px;
z-index: 1;
}
#area1{
position:relative;
width:10px;
height:80px;
background:red;
z-index: 2;
}
</style>
</head>
<body>
<div id="area"><div id="area1">
</div>
</div>
</body>
</html>O z-index só funciona com um position aliado ao mesmo elemento.
tente substituir o position:relative da area1 por position:absolute e coloque um top:0, assim fica sobreposta!
valeu Carlos,
deu certo!
você pode usar o método setInterval do objeto window no javascript para manipular isso
crie uma funçao que manipule a posição da div movendo-a em "x" pixel a cada execução e aplique-a na setInterval.
Algo assim:
int = window.setInterval(funcao, 60000);
e caso queira parar a execução em algum ponto use:
window.clearInterval(int);