none
Tabela flutuante RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    1
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    1
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    1
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    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
    |
  • Question
    Entrar para Votar
    1
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    1
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Valeu mesmo pela ajuda, funcionou aqui! :D
    quinta-feira, 28 de junho de 2012 13:10
    |