Arquivos de sites

Como centralizar DIV na VERTICAL e na HORIZONTAL

A arte de centralizar div tanto na horizontal quanto na vertical é discutida a anos pelos desenvolvedores Web, hoje apresentaremos uma das maneiras de centralizar uma div tanto na horizontal quanto na vertical.

Resolvi escrever este artigo depois que voltei a trabalhar com implementação e percebi que existem várias técnicas para centralizar o conteúdo e a maioria é ineficiente, porém neste artigo explicarei que como centralizar seu site com uma técnica simples e direta.

 

O HTML

Felizmente com o advento do Webstandards o HTML se mantém sempre é simples, independete do problema ou solução.

E através do CSS ou JavaScript conseguimos resolver a maioria dos problemas, o que na verdade é um grande alívio, pois dar manutenção no conteúdo no passado era um verdadeiro tormento, tendo que navegar em grandes emaranhados de código.

Agora veremos como ficará o HTML quando queremos centralizar uma div, lembrando que com esta técnica é possível centralizar sites complexos ou simples, de forma organizada e com simplicidade.

    <div id="divCentralizada">
       <p>
          conteúdo centralizada
       </p>
    </div>

O HTML acima nos da 3 elementos, a o <div> que será centralizada, o <p> que representa o conteúdo da página e o texto, apenas para ilustrar como seu conteúdo ficaria centralizado neste exemplo.

O CSS

No CSS iremos posicionar esta DIV (#divCentralizada) através do position: absolute;, ele fará com que a DIV deixe de respeitar o resto do conteúdo e passe a ter uma posição absoluta na página.

Agora que a div(#divCentralizada) esta alinhada independente do “resto”, com isso poderemos definir o top e o left que fará com que nossa DIV se afaste da margem interna do navegador.

Para ambos informaremos 50%, com isso as margens da DIV serão literalmente posicionadas ao centro da tela, veja o código:

<html>
  <header>
    <title>Exemplo 2 - OGENIAL!</title>
    <style>
      #divCentralizada {
        position: absolute;
        width: 600px;
        height: 300px;
        left: 50%;
        top:50%;
        background-color: gray;
      }
    </style>
  </header>
  <body>
    <div id="divCentralizada">
      <p>
        conte&uacute;do centralizada
      </p>
    </div>
  </body>
</html>

Como centralizar uma div

Como podemos ver, ele posicionou a “ponta” da div a 50% de distância da borda esquerda e o mesmo fez com o a borda superior da div que foi posicionada exatamente no meio da tela, porém esperamos que o alinhamento seja feito não através da extremidade da nossa DIV mãe e sim através do seu meio, o que devemos fazer agora é setar uma margem negativa com metade das dimensões da div, como no exemplo acima informamos o tamanho (width com 600px deveremos informar uma margem a esquerda com -300px; (300 negativo) desta forma ela ira recuar até que o centro da DIV fique no centro da tela.

Desta forma a DIV será posicionada primeiro a 50% da disância da margem e logo depois recuará 50% do seu tamanho, acertando exatamento o centro, o mesmo deverá ser feito com a margem superior como vemos no exemplo abaixo.

<html>
   <header>
      <title>Exemplo 2 - OGENIAL!</title>
      <style>
         #divCentralizada {
            position: absolute;
            width: 600px;
            height: 300px;
            left: 50%;
            top:50%;
            margin-left: -300px;
            margin-top: -150px;
            background-color: gray;
         }
      </style>
   </header>
   <body>
      <div id="divCentralizada">
         <p>
            conte&uacute;do centralizada
         </p>
      </div>
    </body>
</html>

Então com esta simples técnica conseguimos centralizar uma dív na tela obtendo o resultado abaixo.

DIV centralizada apartir do seu centro

Acredito que seja válido observar também que a DIV foi centralizada, porém o conteúdo permaneceu alinhado conforme o padrão da página, não atrapalhando assim o “resto” do layout.

Centralizar div em vários navegadores

Este processo é utilizado em diversos sites pelo mundo todo pois funciona no IE 6, IE 7, IE 8 e IE 9, FireFox (2,3) e Google Chrome.

Pois é, centralizar div`s no Internet Explorer foi sempre um problema, mas agora, com esta técnica esta muito mais fácil.

Porque não utilizar a tag <center> para centralizar o conteúdo

A algum tempo a tag <center> era muito utilizada em algumas técnicas para centralizar o conteúdo, porém com o advento do CSS e as novas preocupações dos webmaster`s a tag <center> deixou de ser utilizada e finalmente foi depreciada pela W3C, sendo agora descartada como técnica viável para centralização.

Fonte: ogenial.com.br

jQuery – Introdução a manipulação do DOM – Pegando e atribuindo conteúdo [text(), html() and val()]

Introdução a manipulação do DOM

Um dos mais importantes aspectos do JavaScript e desse modo jQuery, é a manipulação do DOM. O DOM significa Document Object Model (Modelo de Objeto de Documento) e é um mecanismo para representação e interação com nossos documentos HTML, XHTML ou XML. Ele lhe permite navegar e manipular seus documentos através de uma linguagem de programação, que no navegador será quase sempre JavaScript. A navegação e manipulação do DOM usando o JavaScript padrão pode muito complicado, mas felizmente para nós, o jQuery vem com um monte de métodos relacionado ao DOM, fazendo isso tudo muito mais fácil.

No primeiro exemplo “Hello, world!” desse tutorial, nós comparamos o trabalho de encontrar um elemento e atribuir um texto a ele usando primeiro jQuery e então JavaScript. Esta é apenas a ponta do iceberg, porém, e nos capítulos seguintes você verá como é fácil manipular o conteúdo dos seus documentos com jQuery.

Pegando e atribuindo conteúdo [text(), html() and val()]

O aspecto mais simples da manipulação do DOM é recuperar e atribuir text (texto), valores (valores) e HTML. Essas três coisas podem parecer a mesma coisa, mas elas não são. Text é uma representação literal (sem HTML) do conteúdo interno para todos os elementos normais, values são para elementos de formulário e HTML é o mesmo que text, mas incluindo qualquer marcação (markup).

Felizmente para nós, o jQuery vem com um método para cara um dos três, nos permitindo recuperar e atribuir essas propriedades: Os métodos text(), html() e val(). Aqui está um pequeno exemplo que mostrará a você a diferença entre eles e como eles são simples de usar:

<div id="divTest">
        <b>Test</b>
        <input type="text" id="txtTest" name="txtTest" value="Input field" />
</div>
<script type="text/javascript">
$(function()
{
        alert("Text: " + $("#divTest").text());
        alert("HTML: " + $("#divTest").html());
        alert("Value: " + $("#divTest").val());
        
        alert("Text: " + $("#txtTest").text());
        alert("HTML: " + $("#txtTest").html());
        alert("Value: " + $("#txtTest").val());
});
</script>

Então uma chamada  para um desses métodos sem parâmetros irá simplesmente retornar a propriedade desejada, Se nós queremos atribuir a propriedade em vez disso, nós simplesmente especificamos um parâmetro extra. Aqui está um exemplo completo:

<div id="divText"></div>
<div id="divHtml"></div>
<input type="text" id="txtTest" name="txtTest" value="Input field" />

<script type="text/javascript">
$(function()
{
        $("#divText").text("A dynamically set text");
        $("#divHtml").html("<b><i>A dynamically set HTML string</i></b>");
        $("#txtTest").val("A dynamically set value");
});
</script>

E isso é o quão fácil é para atribuir texto, HTML e valores.

Essas três funções vêm com uma sobrecarga a mais, onde você especifica uma função de callback como primeiro e único parâmetro. Essa função de callback será chamada com dois parâmetros pela jQuery, o índice do elemento corrente na lista de elementos selecionados, assim como o valor existente, antes dele ser substituído com um novo valor. Você então retorna a string que você deseja usar como o novo valor para função. Essa sobrecarga funciona para ambos html(), text() e val(), mas por motivo de simplicidade, nós apenas usamos a versão do text() neste exemplo:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script type="text/javascript">
$(function()
{
        $("p").text(function(index, oldText) {
                return "Existing text: " + oldText + ". New text: A dynamically set text (#" + index + ")";
        });
});
</script>

Nós começamos com três elementos de parágrafos semelhantes, que o texto é a única diferença deles. No código jQuery, nós selecionamos todos eles e então usamos a versão especial do método text() para substituir o texto atual com um novo texto construído, baseado nos dois parâmetros que jQuery fornece a nós: O índice do elemento atual e também o seu texto atual. Esse novo texto é então retornado ao jQuery, que irá substituir texto atual pelo novo.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

Fonte: jquery-tutorial.net / jquery-tutorial.net