none
Tabela flutuante RRS feed

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


    quarta-feira, 27 de junho de 2012 15:23

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"

    quarta-feira, 27 de junho de 2012 20:56

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

    quarta-feira, 27 de junho de 2012 15:52
  • Ainda nao deu, aquela parte de chamar a função javascript esta correto?

    Na parte do html da table tenho que chamar a função no evento load?

    Valeu pelas dicas ate agora.

    quarta-feira, 27 de junho de 2012 17:19
  • 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"

    quarta-feira, 27 de junho de 2012 17:21
  • 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>

    quarta-feira, 27 de junho de 2012 19:17
  • Amigo,

    Me desculpe mas não entendi o pq você está usando o setinterval?!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    quarta-feira, 27 de junho de 2012 19:52
  • Para que a cada 2 segundos ele chame a função moveTabela() que desce a table em 80px na página.
    quarta-feira, 27 de junho de 2012 20:03
  • 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"

    quarta-feira, 27 de junho de 2012 20:56
  • 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
    quarta-feira, 27 de junho de 2012 21:00
  • Valeu mesmo pela ajuda, funcionou aqui! :D
    quinta-feira, 28 de junho de 2012 13:10