Usuário com melhor resposta
Tabela flutuante

Pergunta
-
Eae galera, estou começando a aprender asp.net e preciso fazer uma tabela que vá descendo na página tipo aqueles sites que tem alguns anuncios que vao descendo junto com a pagina.
Entao criei esta função javascript
<script language="javascript" type="text/javascript"> function moveTabela() { var tabela = document.getElementById('tabelaMovel'); var moves = tabela.style.marginTop + 30; for(i = 0; i < 200; i++) { moves++; } } </script>
e tentei chamar essa função no lado do servidor atraves do evento Page_Load assim:
protected void Page_Load(object sender, EventArgs e) { ScriptManager.RegisterClientScriptBlock(Page,Page.GetType(), "table", "moveTabela()", true); }
Mas não acontece nada, na parte do html tentei colocar o nome da função javascript no evento onload da table e deu um erro.
Se puderem me ajudar, desde ja agradeço.
Respostas
-
Amigo,
Segue o código funcionando:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> var move = 0; function moveTabela() { var obj = document.getElementById('tabelaMovel'); move += 1; obj.style.marginTop = (move*80) + 'px'; } function myFunction() { setInterval(function () { moveTabela(); }, 2000); } </script> </head> <body> <div id="tabelaMovel" style="float: left;width:100px;height:100px;border: 1px solid #000;">teste</div> <script> myFunction(); </script> </body> </html>
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio"- Marcado como Resposta Guilherme Miyamura quinta-feira, 28 de junho de 2012 13:10
Todas as Respostas
-
Guilherme, você está fazendo o acrescimo da margin em uma variavel e não na margin do elemento.
Tenta isso:
<script language="javascript" type="text/javascript"> function moveTabela() { var tabela = document.getElementById('tabelaMovel'); var moves = tabela.style.marginTop + 30; for(i = 0; i < 200; i++) { moves++; }
tabela.style.marginTop = moves; } </script>
http://www.linkedin.com/pub/murilo-kunze/44/191/455
-
-
Amigo,
Aproveita que você está aprendendo e comece a aprender CSS e JQuery, segue um código simples feito só com CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script> </script> <style> .page { width: 500px; height: 1000px; background: #CCC; margin: auto; } .f-box{ width: 200px; height: 150px; background: #000; color: #fff; margin: auto; position: fixed; } </style> </head> <body> <div class="page"> <div class="f-box">O flutuante!</div> conteúdo da sua página</div> </body> </html>
O que faz toda a diferença é a propriedade "position: fixed;", só pesquisar por "position" que você vai entrar bastante coisa.
Boa sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio" -
Fiz algumas mudanças no meu código e consegui fazer a tabela descer 1 vez.
Porém acredito que o setinterval deveria fazer isso mais do que 1 vez (o que nao acontece).
Ja tentei colocar um for e tb nao desceu mais do que 1 vez.
Alguma dica?
Segue como esta meu código agora:
<script language="javascript" type="text/javascript"> function moveTabela() { document.getElementById('tabelaMovel').style.marginTop = '80px'; var tabela = document.getElementById('tabelaMovel').style.marginTop; var move = 0; for (i = 0; i < 10; i++) { move = move + tabela; } } function myFunction() { setInterval(function () { moveTabela() }, 2000); } </script>
-
-
-
Amigo,
Segue o código funcionando:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> var move = 0; function moveTabela() { var obj = document.getElementById('tabelaMovel'); move += 1; obj.style.marginTop = (move*80) + 'px'; } function myFunction() { setInterval(function () { moveTabela(); }, 2000); } </script> </head> <body> <div id="tabelaMovel" style="float: left;width:100px;height:100px;border: 1px solid #000;">teste</div> <script> myFunction(); </script> </body> </html>
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio"- Marcado como Resposta Guilherme Miyamura quinta-feira, 28 de junho de 2012 13:10
-
Guilherme, como o Lucas falou, o ideal é fazer com css isso.. mas se você quer realmente fazer com javascript para estudo, você pode é claro..
No útlmio exemplo que você postou, seu for não está mudando a margin do elemento novamente... você deve setar o valor em style.marginTop diretamente.. você não pode criar uma variavel que recebe este valor e ir aumento..
Exemplo:
function moveTabela() {
var elemento = document.getElementById('tabelaMovel');
for (i = 0; i < 10; i++) { elemento.style.marginTop = Number(elemento.style.marginTop.replace("px","")) + Number(i); } }
http://www.linkedin.com/pub/murilo-kunze/44/191/455
- Editado Murilo Kunze quarta-feira, 27 de junho de 2012 21:00
-