Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

HTML5 - Scroll Into View e Hidden

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>

Tags:

Follow the Discussion

  • hummmmmm

  • AlexandreAlexandre

    Ficou show

  • Qual é a vantagem de se utilizar o atributo "hidden" do elemento no lugar de css (display: none ou visibility: hidden)?

  • Carlos HenriqueCarlos Henrique

    Massa!!

  • JonatasJonatas

    O scroll into é bastante interessante, mas o hidden de fato não vi utilidade...

  • RonaldoRonaldo

    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.

  • Thadeu EstevesThadeu Esteves

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

  • alexsandroalexsandro

    meu novo site vai ter em base o sistema de rolagem (document.getElementById) para cada pagina principal, show :)

  • Manoel MotaManoel Mota

    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

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.