Postagens com a tag ‘HTML’

   terça-feira, 10 de julho de 2012

Color Picker



PéssimoRuimMédioBomExcelente (5 votos, média: 5,00 de 5)

Trago a vocês um pequeno mas interessante código que desenvolvi para fazer um seletor de cores, que fiz para usar em um editor (estilo blog) que estou fazendo para uso próprio.

Porque estou trazendo isso pra cá? :-P

Porque não consegui achar nada parecido, feito puramente em HTML, CSS e Java Script. Se é que existe, esta muito bem escondido ou eu não soube perguntar corretamente para o google. :aiaiai:

Dividi o código em 3 partes, vamos a elas, uma de cada vez, e com uma pequena explanação sobre elas.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Color Picker</title>
    <script type="text/javascript" src="color-picker.js"></script>
    <link rel="stylesheet" href="color-picker.css" type="text/css">
  </head>
  <body>
    <table border="0" width="180">
      <tr>
        <td>
          <p class="title" align="center">
            <b>Color Picker</b>
          </p>
        </td>
      </tr>
      <tr>
        <td align="center">
          <table cellspacing="5" class="colorpick">
            <tr>
              <td id="C01" onclick="cl('C01');"></td>
              <td id="C02" onclick="cl('C02');"></td>
              <td id="C03" onclick="cl('C03');"></td>
              <td id="C04" onclick="cl('C04');"></td>
              <td id="C05" onclick="cl('C05');"></td>
              <td id="C06" onclick="cl('C06');"></td>
              <td id="C07" onclick="cl('C07');"></td>
              <td id="C08" onclick="cl('C08');"></td>
            </tr>
            <tr>
              <td id="C09" onclick="cl('C09');"></td>
              <td id="C10" onclick="cl('C10');"></td>
              <td id="C11" onclick="cl('C11');"></td>
              <td id="C12" onclick="cl('C12');"></td>
              <td id="C13" onclick="cl('C13');"></td>
              <td id="C14" onclick="cl('C14');"></td>
              <td id="C15" onclick="cl('C15');"></td>
              <td id="C16" onclick="cl('C16');"></td>
            </tr>
            <tr>
              <td id="C17" onclick="cl('C17');"></td>
              <td id="C18" onclick="cl('C18');"></td>
              <td id="C19" onclick="cl('C19');"></td>
              <td id="C20" onclick="cl('C20');"></td>
              <td id="C21" onclick="cl('C21');"></td>
              <td id="C22" onclick="cl('C22');"></td>
              <td id="C23" onclick="cl('C23');"></td>
              <td id="C24" onclick="cl('C24');"></td>
            </tr>
            <tr>
              <td id="C25" onclick="cl('C25');"></td>
              <td id="C26" onclick="cl('C26');"></td>
              <td id="C27" onclick="cl('C27');"></td>
              <td id="C28" onclick="cl('C28');"></td>
              <td id="C29" onclick="cl('C29');"></td>
              <td id="C30" onclick="cl('C30');"></td>
              <td id="C31" onclick="cl('C31');"></td>
              <td id="C32" onclick="cl('C32');"></td>
            </tr>
            <tr>
              <td id="C33" onclick="cl('C33');"></td>
              <td id="C34" onclick="cl('C34');"></td>
              <td id="C35" onclick="cl('C35');"></td>
              <td id="C36" onclick="cl('C36');"></td>
              <td id="C37" onclick="cl('C37');"></td>
              <td id="C38" onclick="cl('C38');"></td>
              <td id="C39" onclick="cl('C39');"></td>
              <td id="C40" onclick="cl('C40');"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td align="center">
          <p align="left">
            <span class="exsmall">&nbsp;&nbsp;&nbsp;ou digite o valor (hex)</span>
          </p>
        </td>
      </tr>
      <tr>
        <td align="center">
          <input type="text" name="PutColor" id="PutColor" size="6" maxlength="6">&nbsp;&nbsp;&nbsp;<input class="admbox" type="button" tabindex="4" value="OK" onclick="putColor();">
        </td>
      </tr>
    </table>
  </body>
</html>

No código HTML, existe uma tabela que é quem “desenha” a caixa com os botões coloridos. Antes que alguém venha no blá blá blá div isso, div aquilo, trabalhar com tabelas neste caso foi muito mais fácil e proporcionou um código menor e exigiu uma ginástica beeeem menor no arquivo CSS como pode ser visto abaixo. :mrgreen:

CSS:

/*********************************************************
Color Picker
©2012 by Luciano Sturaro
Permitido o uso desde que citada a fonte.
*********************************************************/
p.title, span.title {
  font-family: Arial, Helvetica, Verdana, Sans-Serif;
  font-weight: bold;
}

p.exsmall, span.exsmall {
  font-family: Arial, Helvetica, Verdana, Sans-Serif;
  font-size: 0.6em;
}

table.colorpick {
  border: 0px;
  border-collapse: separate;
  border-spacing: 5px;
  empty-cells: show;
}
table.colorpick td {
  border: 1px solid #999999;
  width: 11px;
  height: 12px;
  font-size: 0.1em;
  cursor: pointer;
}

#C01 { background-color: #000000; }
#C02 { background-color: #993300; }
#C03 { background-color: #333300; }
#C04 { background-color: #003300; }
#C05 { background-color: #003366; }
#C06 { background-color: #000080; }
#C07 { background-color: #333399; }
#C08 { background-color: #333333; }
#C09 { background-color: #800000; }
#C10 { background-color: #FF6600; }
#C11 { background-color: #808000; }
#C12 { background-color: #008000; }
#C13 { background-color: #008080; }
#C14 { background-color: #0000ff; }
#C15 { background-color: #666699; }
#C16 { background-color: #808080; }
#C17 { background-color: #FF0000; }
#C18 { background-color: #FF9900; }
#C19 { background-color: #99CC00; }
#C20 { background-color: #339966; }
#C21 { background-color: #33CCCC; }
#C22 { background-color: #3366FF; }
#C23 { background-color: #800080; }
#C24 { background-color: #999999; }
#C25 { background-color: #FF00FF; }
#C26 { background-color: #FFCC00; }
#C27 { background-color: #FFFF00; }
#C28 { background-color: #00FF00; }
#C29 { background-color: #00FFFF; }
#C30 { background-color: #00CCFF; }
#C31 { background-color: #993366; }
#C32 { background-color: #C0C0C0; }
#C33 { background-color: #FF99CC; }
#C34 { background-color: #FFCC99; }
#C35 { background-color: #FFFF99; }
#C36 { background-color: #CCFFCC; }
#C37 { background-color: #CCFFFF; }
#C38 { background-color: #99CCFF; }
#C39 { background-color: #CC99FF; }
#C40 { background-color: #FFFFFF; }

Todas as cores são definidas apenas no arquivo CSS, sendo muito simples de alterar as cores padronizadas para qualquer valor de sua preferencia. Basta alterar o valor nos ID #Cxx e pronto, já será alterada na tabela que gera os botões e será a nova cor passada ao clicar nos botões.

Não foi por acaso, essa paleta de cores foi copiada do editor do WordPres eheh. :-o*

Java Script:

// Color Picker
// ©2012 by Luciano Sturaro
// Permitido o uso desde que citada a fonte.

function getstyle(obj, cAttribute) {if (obj.currentStyle) {
  this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
} else {
  this.getstyle = function (obj, cAttribute) {return window.getComputedStyle(obj, null)[cAttribute];};}
 return getstyle(obj, cAttribute);
}

function cl(value) {
  var tryId = document.getElementById(value);
  var color = getstyle(tryId, 'backgroundColor');
  var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(color);
  var color = m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : color;
  var color = color.toUpperCase();

  alert('<font color="' + color + '">Teste</font>');

}

function putColor() {
  var color = document.getElementById("PutColor").value;
  var color = '#' + color.toUpperCase();
  var regColorcode = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/; //Valida codigo de cor

  if (color!='#') {
    if(regColorcode.test(color) == false) {
      alert('Codigo de cor inválido!');
      return false;
    }

  alert('<font color="' + color + '">Teste</font>');

  }
}

O javascript captura a cor de fundo dos elementos da tabela, que passam a comportar-se como se fossem botões.

Existe uma certa ginástica nesse codigo, porque os navegadores usam métodos diferentes de captura, retornando valores em formatos diferentes. O IE retorna o valor diretamente em hexadecimal (#rrggbb, já o firefox, chrome e opera, retornam o valor no formato rgb(rrr, ggg, bbb), sendo necessário uma pequena função com expressão regular para converter o valor de rgb decimal para hexadecimal.

Para usar, basta modificar as linhas onde tem os ALERT (linhas 19 e 34 do java script) para jogar a string para a sua função/código/whatever.

Testei esse código no firefox, opera e chrome, e até mesmo no tranqueira do IE6 e funcionou muito bem! E o código pode não ser a coisa mais linda do mundo, mas funciona redondinho, e o W3C não reclama do HTML e muito menos do CSS, esta tudo feito conforme manda os padrões. :good:

Se quiser usar alguma cor esdruxúla, basta digitar na caixinha e clicar no OK. Existem apenas duas condições de tratamento de erro nessa caixinha, que cercam todas as possibilidades.

A) se digitar um código errado (valores válidos: 0-9, A-F), ou incompleto, dá um alerta de cor inválida.
B) clicar no ok sem entrar valor, mantendo a caixa em branco, nada acontece.

Ah! Na caixa deve ser digitado somente o valor em hexadecimal, não precisa inserir o simbolo #. Ele é inserido automaticamente pelo script. :good:

Tanto faz digitar em maiúsculas o minusculas, o script já passa os valores para maiúsculas.

Você pode fazer um test-drive do código clicando aqui.

Gostou? Usou? Clica nas @#$@#%$ das estrelinhas ali em cima e comente! (wub)

[ Ouvindo: Nick Heyward – Tell Me Why (Rare Original Version) (1988) ]


   quinta-feira, 2 de outubro de 2008

Thunderbird, bobeiras básicas



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Estava até agora revirando o google atras de uma funcionalidade besta para o thunderbird e não achei nada.

Eu normalmente envio mensagens de e-mail em texto plano, mas em algumas vezes eu preciso enviar em formato html por causa de algumas facilidades (principalmente porque quem vai ler do outro lado é newbie)

Revirei, revirei e não achei uma maneira de por um simples botãozinho na janela do composer para trocar entre o modo texto simples e html. Sim, eu também testei algumas extensões que colocam uma porrada de botões novos a disposição, mas nenhuma, nenhuminha faz isso, ninguém pensou nisso.

Eu sei que alguns vão dizer: Ah… mas é só apertar shift e clicar no compose new mail que o composer troca de modo.

Sim, mas não seria tão mais simples e prático um simples botãozinho na barra de ferramentas?

Alem do mais isso representa um problema. Se na hora você não se lembrar de apertar o maldito shift, terá que fechar a janela do composer e começar tudo de novo.

Tem horas que eu penso que o povo que faz software livre quase que olha só pro próprio umbigo e não pensa nas necessidades dos “bananas”.

E ainda tem uma estupidez maior. Se você deixa configurado para compor mensagens por padrão em html, é possível mudar para o modo texto simples pelo menu options, format mas o contrário não é possível!

Antes de mais nada, eu adoro o Thunderbird, não troco por outro cliente de e-mail, mas que tem algumas coisinhas bobas que faltam, isso tem, e o pior é que não tem extensão pra adicionar estas funcionalidades faltantes.



   domingo, 5 de março de 2006

Bugs…



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Só pra avisar que creiei vergonha na cara e consertei o codigo do hit counter que estava bugado.

Coisa incrivel como esses contadores “bonitinho” e “de gratis” trocam o codigo mais do que se troca de cuecas….

Fora isso aqui tempo carrancudo e chovendo, e mesmo assim um calor infernal de 35º.



   sábado, 10 de setembro de 2005

"Webmestres"!



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Sinceramente, esta foi a maneira mais “criativa” que eu já vi de resolver os problemas de compatibilidade entre os brosers não M$, estes que seguem os padrões W3C mais fielmente que a peneira que M$ chama de browser.

Francamente, será que é TÃO dificil seguir os padrões?



   segunda-feira, 11 de julho de 2005

O caso do menu.



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Bem o AcidX levantou esta hipotese:

Na verdade, por increça que parível, não é bug do IE! É que só pode ter um elemento com o mesmo ID. Nesse caso, você pode usar o “class” (div class=”menu”), e usar o “.” ao invés do “#” para definir a classe.
acidx | 11.07.05 – 1:02 am | #

Tá… mas acontece que se eu trocar o <div id=”menu”> por <div class=”menu”> e trocar o “#” por “.” dá caca… no IE fica a mesma porcaria, já no firefox, o <div> não troca de cor ao ser focado pelo mouse. E ai?

O suporte a CSS no IE é uma bomba mesmo… talvez seja caca do browser
Cesar Cardoso | Homepage | 10.07.05 – 2:41 pm | #

Bem… mas mesmo no IE6 a Dna M$ ainda não criou vergonha na cara e deu um suporte decente a CSS? ECCCAAA!!!

Sorte minha que eu apesar de usar windows, nunca usei o browser na M$, eu venho desde lá do win3.11 usando netscape (na epoca era o 4.0), depois 4.5en, dai parti pro Mozilla e agora pro Firefox.

Tem mais uma parte que eu não disse, mas quem usa o IE deve ter percebido. No caso nosso que usamos Firefox, se você já focar só o <div> (bloco cinza) o browser já reconheçe como link. Logo não precisa focar no texto especificamente.

Já com o IE, a unica coisa que ele reconhece como link ai no menu são os textos, pro <div> ele nem olha.

To apostando mais mesmo é no caso do suporte a CSS do IE ser ruim.

E olha que esses dias eu tava pensando em ‘n’-maneiras de fazer uma página que só funcionasse no Firefox/Mozilla eheheh… já é um passo nesse sentido. Ia ser muito interessante uma pagina “Firefox only” só pra ver a cara do povo que só usa IE.



   domingo, 10 de julho de 2005

Terei descoberto um bug?



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Como você devem ter percebido estou dando uma mexidinhas no template do blog, mas nada muito radical, apenas umas “florzinhas” daqui e umas “frescurinhas dali”.

Até ai tudo normal, até que eu resolvi fazer uma pequena mudança no menu ai do lado. Resolvi fazer uma aplicaçãozinha localizada de CSS e fazer com que o “botão” troque de cor ao passar o cursor do mouse sobre ele. Se você estiver usando o FireFox, beleza, vai ver a modificação, agora se for o IE6, não vai ver.

O interessante de tudo é que no FireFox funcionou maravilhosamente bem, mas no IE não!!! Sera que é algum bug no IE ou bug no meu código? Vamos lá.

O porque de “botão” é que na verdade eles são <div> pintados. E para que eles se comportem como hyperlink foram inseridos dentro de uma tag <a>. Até ai tudo bonitinho, funfa no FireFox e no IE.

O código pra gerar esses “botões” é esse:

<div id=”menu”>
<a target=”_blank” href=”http://kibeloco.blogspot.com/” title=”Kibe Loco”>
<div><font color=”#FFFFFF” size=”3″>»</font><font color=”#00FFFF”> Kibe Loco</font></div>
</a>
</div>

Beleza, e o código CSS que eu formato o “botão” e pinto o fundo deles é:

#menu
{
background:#666666;
margin:0px 0px 0px 0px;
width:130px;
height:18px;
padding:0px 0px 0px 3px;
font-family: Verdana, Arial, Helvetica;
font-weight: normal;
font-size: 12px;
font-style: normal;
text-align:left;
border-top:3px solid #000000
}

#menu:hover
{
background:#777777
}

Até ai pra mim nada demais. Mas agora a pergunta que não quer calar. É alguma gambiarra ou caca que eu fiz que não funciona no IE, ou é mesmo um bug? Alguém ai se habilita a dizer alguma coisa?

[ Ouvindo: Benny Mardonez – Into the Night ]


   terça-feira, 6 de janeiro de 2004

Trabalho em dobro.



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Pois é… nesse embalo de fazer a página nova da msxpro, acabou dando na telha de faze-la seguindo as recomendações do w3c.org.

O trabalho em dobro esta sendo fazer as páginas passarem no validator, é um tal de eu esquecer alguma coisa toda hora =]

Mas o pior ainda esta por vir, a sessão de fotos, essa eu ainda não achei um jeito de encarar e fazer eficientemente. Me sugeriram usar um recurso do photoshop, preciso ver se tenho essa “coisa” por aqui e ver se me atende.



   domingo, 4 de janeiro de 2004

A nova MSXpró.



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

A nova cara da MSXPró esta me consumindo um tempo lascado, mas esta ficando muito legal. Vocês podem conferir uma palhinha ai embaixo:

A única coisa um pouco chata é que devido alguns recursos novos que estou usando, a página somente será compatível com navegadores versão 5 em diante. :-|
Uma pena, e eu que sempre optei pela compatibilidade… mas fazer o que né?



   sábado, 27 de dezembro de 2003

Preguiça



PéssimoRuimMédioBomExcelente Nenhuma avaliação... seja o primeiro!

Eu quero, eu preciso, eu tenho que fazer um layout novo para a MSXPró, mas cadê inspiração e principalmente CORAGEM de refazer cerca de 140 páginas html? Antes que alguém berre pra usar php, digo que não tenho pratica nenhuma com isso (ainda sou daqueles que pergunta se é de comer ou passar no cabelo) e tampouco estou com tempo pra aprender. Acho que vou acabar fazendo algumas partes com uns scripts bobinhos em java, e dar uma reciclada nos htmls antigos. ha… dessa vez CSS tem que entrar nem que for a base de porrada. o:-) Ha! Ia me esquecendo, Frames? Fora!!!

Related Posts Plugin for WordPress, Blogger...


  Melhor visualizado a
1024 x 768 True color
Proudly powered by WordPress. Theme developed with WordPress Theme Generator.
E altamente gambiarrado por mim mesmo :)
Copyright © 2010 by Crash Computer. All rights reserved.