Tornar o texto de um checkbox clicavel

A tag <label> serve para criar um relacionamento entre o texto (rótulo descritivo) e o campo. Essa tag é muito usada para tornar o site acessivel a leitores de tela(para deficientes visuais).

Mas ela também faz com que ao ser clicado no texto o campo receba o foco(o cursor), com isso podemos tornar o texto de um checkbox clicavel.

Para usa-lo é só adicionar um for=”nomedocampo” dentro do label o nomedocampo deve ser definido no id do input(essa é a primeira funcionalidade que eu vejo para esse id =D), lembrando que o id deve ser unico em todo o formulario.

Aqui um codigo de exemplo:

  <form method="post" action="?">
<label for="username">Nome:</label> <input type='text' id='username' />

<label for="password">Senha: </label> <input type='password' id='password' />

<label for="chekbox">Chekbox: </label><input type="checkbox" value="login" id='chekbox' />
<input type="submit" value="login" />
</form>

Exemplo, clique nos textos:

Username:

Password:

Chekbox:

Legal né ?, e pode ser usado em qualquer formulário, e com certeza os usuarios iram agradecer já que fica bem mais facil de se clicar, só é preciso que os usuarios saibam dessa funcionalidade

Compartilhe nos Sites Sociais:

Coletanea de melhores sites feitos com CSS

O site webdesignerwall fez uma lista dos sites mais bonitos, baseados em XHTML e CSS, vale a pena dar uma olhada, nessa lista pra tirar algumas ideias, e como não são feitos em flash dá pra copiar algum efeito, ou aprender como é efeito. Eu pelo menos sempre usei essa ideia, qualquer efeito ou função, que eu ache legal eu olho o fonte, e tento usá-lo.

Só num vá me copiar o site inteiro e dizer que é seu hein.

É tudo em ingles, a listagem: http://www.webdesignerwall.com/trends/best-of-css-design-2007/ 

Compartilhe nos Sites Sociais:

Mostrando conteudo em abas

Hoje eu estava procurando algum sistema de abas, pra usar no meu CMS, e no trajeto achei varios interessantes, vou fazer uma lista deles. Mas todos eles são de sites em ingles

Esse usa algumas imagens nas abas deixando um efeito bem legal:

http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml

esse usa ajax para caregar o conteudo, só tomem cuidado com o SEO :

http://20bits.com/2007/05/23/dynamic-ajax-tabs-in-20-lines/

esse é legal por que, não é preciso clicar na aba é só passar o mouse em cima:

http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange//

Esse é interessante pois cada aba tem um link(o que eu estava procurando) ou seja com esse link ele já abre na aba desejada:

http://phrogz.net/JS/Tabtastic/index.html

Achados em: http://www.linksweb.com.br/ 

Compartilhe nos Sites Sociais:

Formatação de textos HTML, com editor WYSIWYG

Para quem oferece algum sistema, onde qualquer pessoa possa enviar textos é interessante, ter um editor para formatação de textos, já que não é qualquer um que sabe comandos HTML para formatar o texto. E o seu uso é recomendado para não permitir que qualquer comando HTML possa ser usado, já que alguns comandos poderiam arruinar o seu Layout

Para fazer isso existem dois tipo de editores:

WYSIWYG(What You See Is What You Get), que é um editor visual ou seja ao usa-lo você já verá o texto formatado, igual o word, g-mail, wordpress, etc.

BBCODE(Bulletin Board Code), que é uma simples função para substituir caracteres, ex: a tag <b></b> ficará [b][/b], como o seu nome diz ele foi criado para fóruns, onde é encontrado comumente, para criar um editor desse é preciso saber bastante programação, já que é preciso, substituir todos os caracteres, e bloquear o uso de outros comandos html.

Usando um WYSIWYG

Os editores desse tipo, são de uso mais facil, pois são feitos com Javascript, e podem ser usados com qualquer tipo de sistema, PHP, ASP, etc.

Quando eu estive procurando por isso, achei um monte de editores assim, mas não consegui usar ou adaptar ao que eu queria quase nenhum.

O unico que eu me dei bem foi o TinyMCE. Veja aqui um exemplo dele Para usa-lo é bem simple, com o download dele em alguma pasta do seu sistema, e adicione o seguinte no arquivoirá usa-lo

<script type=”text/javascript” src=”pasta_onde_esta_os_arquivos/tinymce/tiny_mce.js”></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak,imagemanager,filemanager",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,spellchecker,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
content_css : "/example_data/example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
template_external_list_url : "example_data/example_template_list.js",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv"
});
</script>

Esse segundo javascript serve para formatar a exibição, no caso aqui ele irá aparecer todas as opções, mas como ele usa um esquema de plugins, cada botão é um plugin, então é possiveo formatar isso.

Como pode ser visto ele tem theme_advanced_buttonsX_add e na frente de cada uma tem os botões que seram mostrados, ou seja é só deletar o nome do botão para remove-lo. E se não for usar um botão pode remover a sua pasta dentro do tinymce para ficar mais leve.

Adicionando esses scripts ele irá adicionar o editor em todas as textareas que houver na página.

Compartilhe nos Sites Sociais:

Adicionando o efeito de neve ao seu site

Para entrar no espírito de natal é legal adicionar algo no site, mudar o layout ou criar um logo de natal, mas isso pode dar trabalho, algo bem facil de se fazer é colocar um efeito de neve caindo. Por isso vou postar um script em javascript que faz isso.

Um exemplo de como ficará pode ser visto aqui.

Ele usa uma imagem de neve então copie essa imagem aqui(ou qualquer uma a sua escolha)

o link para essa imagem é http://i12.tinypic.com/6uscqjq.gif

para usa-lo é bem simples simplesmente copie todo o conteudo a seguir e cole após o <body> de seu site.

(more…)

Compartilhe nos Sites Sociais: