Postado por Micox - Náiron J. C. G..

31 Julho, 2006

Post rápido e engraçado hoje pessoal. heheh

Só pra deixar avisado a meus visitantes que não frequentam regularmente o fórum ievolution (devem ser poucos). Descoberta postada pelo HorphuS neste tópico do fórum.

Microsoft dorme no ponto e perde o domínio ie7.com para fã do Firefox. Muito engraçado. hhehehhehe

Té a próxima!

Marcadores: bate-papo

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (1 comentários)

Script - Destaques com timeout

Postado por Micox - Náiron J. C. G..

26 Julho, 2006

Opa, post rápido pessoal. Um script pronto.

Descrição: Sistema simples para exibição de destaques como os desse site. Onde aparece determinado destaque quando se clica nele, ou mudando sozinhos através de timeout.
Versão: 1.0
Testado em: Firefox 1.5 ; Internet Explorer 6.0 ; Opera 8.5
Postado originalmente em: fórum iEvolution

O código está com estilização visual básica. Melhore-o conforme sua necessidade.

<!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=iso-8859-1" />
<title>Destaques by Micox</title>

<style>
* { margin:0; padding:0;}
#destaques { width:300px; height:200px; border:1px solid black;    overflow: hidden;}
#destaques ul { height:30px; list-style:none; text-align:center; float:right;}
#destaques ul li{ float:left; width:20px; height:20px; border:1px solid blue; margin:2px; cursor:pointer;}
#destaques div { clear:both; height:170px; display:none; /* todas escondidas por default. O JS que irá exibi-las. */}
#destaques div img { float:left; width: 140px; height:140px; border:1px solid black; margin:5px; }
#destaques .exibe { display:block;}
</style>
<script>
var atual=1; //esta var guarda o valor que tá sendo exibido agora.
var timeloop; //guardará o setInterval

function muda(qual){
    /*** função que altera a div que é exibida ***/
    //divs que estão dentro do destaques colocadas num array
    var divs = document.getElementById("destaques").getElementsByTagName("div");
    //formatando o qual
    var qual_num = Number(qual);
    if (qual_num<1){ qual_num = divs.length;}
    else if (qual_num>divs.length) { qual_num = 1;}
    //colocando o zero antes se for necessário
    if (qual_num<10) {qual = "0" + qual_num} else { qual = qual_num };
    //voltando a classe de todas para o padrão que é vazio (resetando)
    for (var i=0;i<divs.length;i++){ divs[i].className = "";}
    //aplicando a classe exibe na que for pra exibir
    document.getElementById("dest_"+qual).className = "exibe";
    atual = qual_num; //setando o atual
}

function iniciaAutomatico(){
    timeloop = setInterval("muda(Number(atual)+1)",3000);
}

</script>
</head>
<body onload="iniciaAutomatico()">
<div id="destaques">
  <ul>
    <li onclick="muda(this.innerHTML); clearInterval(timeloop)">01</li>
    <li onclick="muda(this.innerHTML); clearInterval(timeloop)">02</li>
    <li onclick="muda(this.innerHTML); clearInterval(timeloop)">03</li>
    <li onclick="muda(Number(atual)-1); clearInterval(timeloop)"><</li>
    <li onclick="muda(Number(atual)+1); clearInterval(timeloop)">></li>
  </ul>
  <div id="dest_01" class="exibe">
      <img src="http://www.alteregos.blogger.com.br/seu%20madruga%20sorrindo.JPG" />
    <h3>Destaque 1</h3>
    <p> Visite o <a href="http://elmicox.blogspot.com">blog do micox</a>: Javascript, AJAX, Webstandards, CSS, DOM, XML , PHP, ASP, HTTP, exemplos práticos e outras coisas mais...</p>
  </div>
  <div id="dest_02">
      <img src="http://chbr.manchete.net/madruga.jpg" />
    <h3>Destaque 2</h3>
    <p>Visite o <a href="http://forum.ievolution.com.br">fórum iEvolution</a>: Suas dúvidas respondidas com qualidade e democracia.</p>
  </div>
  <div id="dest_03">
      <img src="http://i.esmas.com/image/0/000/003/850/quico20.jpg" />
    <h3>Destaque 3</h3>
    <p>E é pra visitar esses dois links que eu passei mermo!</p>
  </div>
</div>
</body>
</html>

Té a próxima.

Marcadores: javascript, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (9 comentários)

Tableless - Menu com curvas e semi-transparente - parte 1

Postado por Micox - Náiron J. C. G..

20 Julho, 2006

Olá pessoal,

Estive meio sumido sem postar devido ao novo fórum que estamos criando. Acho que todos que visitam por aqui já sabem.
Estamos em desenvolvimento e ficará muito bom.

Hoje resolvi postar algo muito simples e que pode ser útil a todos: Construção de um menu com bordas arredondadas e semi-transparente.
Para não perder o costume, este tutorial foi baseado em um post da marcinha lá no novo fórum. Agradecimentos a ela e ao pessoal que ajudou por lá.
Será um tutorial bem rápido e pequeno.

Bom, vamos começar mostrando uma prévia de como deve ficar nosso menu:

Percebam que temos 2 questões a resolver:

Bordas arredondadas
Transparência

1. Bordas arredondadas

Enquanto a especificação CSS 3 não chega, nós temos que fazer algumas "gambiarras" se quisermos que um elemento tenha bordas arredondadas.
Nosso amigo Bruno Dulcetti fez o favor de listar algumas destas "gambiarras", pra quem tiver interesse.

A forma que irei utilizar neste tutorial é a seguinte:

usar 2 imagens, uma para fazer a curva do topo e outra pra fazer a curva da base;
colocar uma das imagens como background no topo do elemento alvo;
criar um elemento abaixo do elemento alvo pra receber a curva da base;
usar um elemento dentro do elemento alvo pra fazer a borda.

As imagens:

As imagens criadas deverão ser gifs e ter a cor do background pretendido para o menu (no caso deste tutorial branco) tendo sua curva transparente.
As imagens (foram colocadas dentro de um div com fundo preto para melhor visualização):

Curva do topo: imagem que faz a curva do topo

Curva da base: imagem que faz a curva da base

O XHTML do menu:

Uma marcação padrão tableless para menus normalmente é assim:

Agora que já temos as imagens, vamos alterar o XHTML para receber as curvas.
Como a curva do topo será colocada diretamente no UL através de background, eu precisarei apenas criar 1 (um) novo elemento para receber a curva de baixo.

Agora o CSS pra fazer a coisa funcionar:

Primeiramente agente colocará a curva-base. Setamos a altura para ter a mesma altura que a imagem e a colocamos como background. Temos também que colocar um overflow:hidden pra evitar problemas com o IE.

.curva-base {
  height:10px;
  overflow:hidden;
  background-image:url(curva-base.gif);
}

Agora faremos a curva do topo colocando a imagem curva-topo como background "no-repeat top". Temos também que dar um espaçamento na altura da imagem para que o texto não fique sobre a curva (padding-top):

#nav {
  width:190px;
  background: url(curva-topo.gif) top no-repeat;
  padding-top:10px;
}

Agora só falta colocar o background pra terminar o corpo do menu. Não podemos colocá-lo direto no UL pois a transparência da imagem irá revelá-lo e não ficará curvo. Temos que colocar o background em algum filho do UL. Pra isso vamos usar o LI:

#nav li {
background-color:#FFFFFF;
border-bottom:1px solid #000000;
}

Pronto, agora já temos um menu feio com curvas. No final iremos estilizá-lo por completo.

Imagem de previsualiação pós-curvas

Percebam que eu coloquei uma classe "curva-base" para receber a imagem da curva do bottom ao invés de utilizar ID. Assim eu poderei reutilizar esta mesma classe em outros menus, economizando código.

Obs.: Existe também a propriedade -moz-border-radius implementada nos browsers Mozilla para fazer as curvas de uma forma mais fácil, porém nos queremos algo para todos os navegadores neste momento.

Ihhh este post está ficando muito grande. Já sei:

No próximo episódio teremos "A TRANSPARÊNCIA" !!!! Não percam...

Update: Próximo episódio pronto. A continuação do tutorial está aqui.

Marcadores: menus, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (5 comentários)