HTML5 - Scroll Into View e Hidden
- Posted: May 21, 2012 at 9:30 AM
- 4,051 Views
- 9 Comments
SCROLL IN TO VIEW E HIDDEN
Scrolling into view
Um truque simples, mas muito útil. Você pode fazer:
document.getElementById('aviso').scrollIntoView()
Isso vai rolar a página até que o elemento com o id "aviso" esteja visível no topo do viewport. Você pode passar um parâmetro opcional top:
document.getElementById('aviso').scrollIntoView(false)
O valor default é true. Se você passar false, a rolagem vai deixar o objeto visível na base do viewport.
hidden
Ocultar e exibir elementos é uma das tarefas mais comuns em Javascript. Em HTML5 existe um atributo específico para isso, o atributo hidden. Ao inserí-lo em um elemento assim:
<div hidden>Xi, se esconde!</div>
Ou assim:
<div hidden="true">Xi, se esconde!</div>
Comments Closed
Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation,
please create a new thread in our Forums,
or
Contact Us and let us know.
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
hummmmmm
Ficou show
Qual é a vantagem de se utilizar o atributo "hidden" do elemento no lugar de css (display: none ou visibility: hidden)?
Massa!!
O scroll into é bastante interessante, mas o hidden de fato não vi utilidade...
Erikcordeiro e jonatas...:
Ve você usar o atributo Display:none; ele não irá aparecer e não terá interação com o usuário.
Se usar o visibility:hidden, o objeto ficará com o seu lugar guardado, mas não aparecendo, como por exemplo botar uma palavra dentro de um span em uma frase com o visibility:hidden a frase irá aparecer assim:
"Lorem dolor sit amet", onde o espaço seria a palavra que esta com a classe.
Já usando o atributo hidden o objeto será escondido, e não terá o lugar dele no meio da página e terá interação com o usuário...
No caso, o método mais usual é no input no html4, com o type="hidden" no input, onde pode-se atribuir um valor para ser enviado junto as informações preenchidas pelo usuário.
Acho que fui claro.
tambem não vi utilidade o atributo hidden , hoje nós ja tem temos que usar data-sets , microdatas nas tags, agora mais um atributo pra aumentar mais ainda nosso codigo html..
scrollintoview() show de bola..
meu novo site vai ter em base o sistema de rolagem (document.getElementById) para cada pagina principal, show :)
Ambas as funcionalidades são interessante. Só a prática com esses atributos irão realmente confirmar sua real funcionalidade e o quanto é melhor que os métodos já existentes.
Remove this comment
Remove this thread
close