Blog

240 plugins legais do jQuery

2010-04-22T17:34:00.000-03:00

Propriedade CSS para Referência Javascript

2010-04-11T18:11:00.001-03:00

Propriedade CSS	Referência Javascript
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
float	styleFloat
text-align	textAlign
text-decoration	textDecoration
text-decoration: blink	textDecorationBlink
text-decoration: line-through	textDecorationLineThrough
text-decoration: none	textDecorationNone
text-decoration: overline	textDecorationOverline
text-decoration: underline	textDecorationUnderline
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

Como usar?

Sintaxe

EntidadeHTML.style.ReferenciaJavascript = "valor de CSS";

Exemplo

document.getElementById("principal").style.border = "1px solid #000";

Validação de campos de formulário com Javascript

2008-09-20T13:53:00.002-03:00

Uma solução bastante simples e interessante para a validação de campos de formulários, utilizando javascript.

A mensagem não de erro, não abre-se num pop-up, mas sim ao lado do campo.

Para baixar o código javascript, clique aqui

Abaixo segue o código para ser inserido entre as tags <head>

<script type="text/javascript">
// Somente os dados dos campos deste formulário vai aqui.
// As rotinas/funções de uso geral estão no arquivo, que está separado.

function validateOnSubmit() {
var elem;
var errs=0;
// execute all element validations in reverse order, so focus gets
// set to the first one in error.
if (!validateTelnr (document.forms.demo.telnr, 'inf_telnr', true)) errs += 1;
if (!validateAge (document.forms.demo.age, 'inf_age', false)) errs += 1;
if (!validateEmail (document.forms.demo.email, 'inf_email', true)) errs += 1;
if (!validatePresent(document.forms.demo.from, 'inf_from')) errs += 1;

if (errs>1) alert('Campos Inválidos');
if (errs==1) alert('There is a field which needs correction before sending');

return (errs==0);
};
</script>

Agora, segue o código html, para ser inserido entre as tags <body>

<form name="demo" onsubmit="return validateOnSubmit()" action="#">
<div style="width: 100%">
<div style="width: 15%; float:left"><label for="from">Seu nome:</label></div>
<div style="float:left">
<input type="text" name="from" id="from" size="35" maxlength="50" onchange="validatePresent(this, 'inf_from');">
</div>
<div id="inf_from">*</div>
</div><br />

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="email">Se e-mail:</label></div>
<div style="float:left">
<input type="text" name="email" id="email" size="35" maxlength="50" onchange="validateEmail(this, 'inf_email', true);">
</div>
<div id="inf_email">*</div>
<div><br />

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="age">Sua idade (em anos):</label></div>
<div style="float:left">
<input type="text" name="age" id="age" size="35" maxlength="5" onchange="validateAge(this, 'inf_age', false);">
</div>
<div id="inf_age"> </div>
</div><br />



<div style="width: 100%">
<div style="width: 15%; float:left"><label for="telnr">Seu telefone (fixo):</label></div>
<div style="float:left">
<input type="text" name="telnr" id="telnr" size="35" maxlength="25" onchange="validateTelnr(this, 'inf_telnr', true);">
</div>
<div id="inf_telnr">* Você pode usar espaços ou hífen!</div>
</div><br />

<div style="width: 100%">
<div> </div>
<div><input type="Submit" name="Submit" value=" Enviar "></div>
<div> </div>
</div>

</form>

Para ver o formulário em funcionamento, clique aqui.

É isso aí!

Abraços

fonte: http://www.xs4all.nl/~sbpoley/webmatters/formval.html

Tirando o bug do .PNG no I.E. 6

2008-09-20T10:36:00.002-03:00

Infelizmente o Internet Explorer 6 (e versões anteriores) não dá suporte ao tipo de arquivo de imagen PNG.

Para isso, é necessário colocar o seguinte hack (CSS - Alpha PNG support for IE):

Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará.
O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo.

\*/
* html img/**/ {
filter:expression(
this.alphaxLoaded ? "" :
(
this.src.substr(this.src.length-4)==".png"
?
(
(!this.complete)
? "" :
this.runtimeStyle.filter=
("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
(this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+
String(this.alphaxLoaded=true).substr(0,0)+
(this.src="blank.png").substr(0,0)
)
:
this.runtimeStyle.filter=""
)
);
}
html, body {
color:#000;
background:#333333;
}

Abraços,

Posicionando imagens ao lado de textos (os editores chamam-a de "olho") usando a técnica de "listas de definição"

2008-09-19T16:47:00.007-03:00

Uma dúvida que eu tinha: Como deixar deixar imagens ao lado de textos, sem usar tabelas?

Para resolver esse problema utilizei a técnica de "lista de definição", no qual usa-se as tags <dt>, <dl> e <dd> com o auxilio de CSS.

A tag dl vem do inglês definition list e significa lista de definição.

A tag dt vem do inglês definition term e significa termo de definição.

A tag dd vem do inglês definition description e significa descrição de definição.

O uso combinado dessas tags permite obter resultados similares ao das tags ul e li de listas exceto pelo marcador.

Como exemplo, utilizarei o seguinte código:

<dl class="destacar">
<dt> <img src="http://www.miltonsylvio.com/img/mr-been.gif" width="96" height="96" />Titulo do Texto</dt>
<dd> Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...</dd>
</dl>

Agora o código CSS:

dl.destacar {
margin: 15px 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}

dl.destacar dt img {
float: left;
margin: 0 10px 0 0;
padding: 0 3px 3px 0;
}

dl.destacar dd {
margin-left: 110px;
font-size: 90%;
line-heigh:1.5em;
color:#666;
}

dl.destacar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

dl.destacar dt {
margin: 0 0 .5em 0;
font-famlily: Georgia, Times, Times New Roman;
font-size: 140%;
color: #1f328b;
}

Abaixo, o resultado:

Titulo do Texto: Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...

É isso aí!

Atendimento Precário

2008-03-25T13:10:00.000-03:00

Conversando com o professor Rômulo, da faculdade, vimos o quanto o atendimento de agência digital anda devendo a seus clientes ou futuros (ou ex-futuros) clientes. Para que a nossa teoria fosse colocada em prática, mandei alguns e-mails dizendo que necessitava do desenvolvimento de uma intranet para a empresa que trabalho.

Bingo, nossa teoria estava certa, de 10 e-mails enviados, apenas 2 retornaram o meu contato!

Com a modernização, tecnologias surgindo a toda hora e sistematização, as agências (isso inlcui as digitais, de publicidade, design, etc...) não tem mais aquele atendimento de antigamente, onde o cliente era tratado como a coisa mais importante da empresa (e deveria continuar sendo, pois são eles que nos pagam) . Hoje, por exemplo, quando você liga para o atendimento de um banco, você só houve a gravação falando!

E o mal atendimento não é só mais no pós, está acontecendo também no pré-atendimento, onde propostas de serviços são enviadas por e-mail ou por fax, contratos, etc... Tudo pela economia!

Será que não seria interessante em economizar em outras coisas, e investir e priorizar no atedimento diferenciado para cada cliente?

Será que os gerentes, diretores da parte de atendimento já se colocaram na posição de cliente?

É, acho que evoluir sim, mas preservar aquilo que é nosso pilar de existência é mais importante! É hora de tratarmos os clientes como alguém da nossa família, alguém que queremos bem, alguém no qual a felicidade dele estará acima de tudo!

Abraços!

Blog

240 plugins legais do jQuery

Form Validation

File upload

Form - Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows