RHOdesign Blog | Webdesign

Archive for the ‘Javascript’ Category

Um dos truques mais úteis e legais que um desenvolvedor web pode aprender é usar DIVs expansíveis, também conhecidas como collapsible DIVs.

Esse efeito dá ao usuário a possibilidade de expor na página somente o conteúdo que ele quer ver naquele momento. Se eles estiverem interessados em ver os detalhes desse conteúdo, podem clicar em um link ou imagem e a página cresce dinamicamente para mostrar o conteúdo que ali estava “escondido”.

Vamos a prática!

1. Abra seu editor de html e cole o seguinte código em sua nova página, dentro da body:

<a href="javascript:;" onmousedown="toggleDiv('minha-div-1');">
Toggle Div 1 Visibility</a>
<div id="minha-div-1" style="display:none">
<h3>This is a test!<br>Can you see me?</h3>
</div>
<br />
<a href="javascript:;" onmousedown="toggleDiv('minha-div-2');">
Toggle Div 2 Visibility</a>
<div id="minha-div-2" style="display:none">
<h3>This is a test!<br>Can you see me?</h3>
</div>

2. Agora insira dentro da tag HEAD o seguinte javascript:

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

3. Publique a página e veja que está tudo funcionando.

Agora basta mudar o conteúdo para o que você deseja mostrar e inserir um pouco de CSS para deixar a formatação mais bonita.

Abaixo, falarei de um código simples em javascript muito utilizado para chamar páginas “index” diferentes, quando identificada a resolução do monitor.

Como exemplo, crie 3 páginas homes nos diferentes tamanhos, uma ajustada para 1024×768, outra para 800×600 e uma para servir de página mestra.

Salve-as como:

index.html (mestra)
index_1024x768.html (layout ajustado para 1024×768)
index_800x600.html (layout ajustado para 800×600)

Abra o código HTML da página mestra e insira este código logo abaixo do head:

<script language="JavaScript">
function resolucao_img_sk(){
if (screen.width == "800" && screen.height == "600"){
window.location.href="index_800x600.html";
}
if (screen.width == "1024" && screen.height == "768"){
window.location.href="index_1024x768.html";
}
}
resolucao_img_sk();
</script>

A partir desse código, você poderá modificar o script para abir páginas de outras resoluções. Basta adicionar mais “IFs” e criar novas páginas na resolução desejada.

Pessoal,

para vocês que estão antenados no processo de desenvolvimento web atual, utilizando AJAX, JQuery, MooTools, entre outras bibliotecas de javascript, segue um link com uma ótima seleção feita pelo site WebDesignerWall.

O link da matéria com mais de 20 efeitos, entre eles: galerias, zoom, image popup, scroll to anchor, slideShow, Carousel, Navegação com Guias[tabs], toolTips, accordion… … … é:
http://www.webdesignerwall.com/general/javascript-in-modern-web-design/


Ganhe dinheiro agora! Resultados em 1 mês!