Édipo Costa Rebouças

Substitui

outcode.innerHTML = outvisual.innerHTML = '<b>'+nome.value+'<\/b><br\/><b>'+email.value+'<\/b><br\/><b>'+endereco.value+'<\/b><br\/>';

Por

outcode.value = outvisual.innerHTML = '<b>'+nome.value+'<\/b><br\/><b>'+email.value+'<\/b><br\/><b>'+endereco.value+'<\/b><br\/>';

colega, não tem nada de errado com o firefox, o padding tem que realmente aumentar o width da div

a largura vai sem o width+padding+border

talvez seja interessante você ver esse tópico:

http://forum.wmonlin...42

que fala sobre esse bug no ie6 e anteriores

você tem que usar o beforeShowDay descrito na documentação, ai você marca a data como selected coloca um tooltip e o onSelect para você definir uma ação quando a data qualquer data for selecionada.

Eu uso um Datepicker mais antigo, mas creio que da pra usar o mesmo esquema que eu uso lá.

Eu tenho um Objeto em javascript que importo via um arquivo eventos.js

var listaEventos = {
'03/12/2009' : {title : 'Veja os eventos do dia 03/12', url: 'http://citrus7.com.br/clientes/rygcard/agenda/dia/2009-12-03/'}.
'04/12/2009' : {title : 'Veja os eventos do dia 03/12', url: 'http://citrus7.com.br/clientes/rygcard/agenda/dia/2009-12-03/'}.
 
}

ai no que eu uso eu consigo fazer esse esquema com 1 parametro no option, nesse, mas nesse você vai ter que fazer com os dois, no beforeShowDay para você marcar o input, no beforeShowDay vc vai ter que iterar no array para ver se a data esta lá e usa as opções que estão descritas na doc do ui.

no onSelect, vc vai ter que iterar no array pra verificar se a data esta lá, e se sim, executar uma ação.

para iterar nesses objetos, eu uso um for in...

for(x in obj)

onde x vai ser a chave, no caso a data e ai pra acessar o objeto no for vc coloca obj[x]
exemple:

for(x in listaEventos){ alert(listaEventos[x].title);}

Boa sorte.

Kahor, tem que usar alguma coisa com clear:both para os float's

<!-- /right --> 	</div> 	<!-- /box --> 	<br style="clear: both"> 	</div> 	<!-- /nav -->

se você quiser usar min-height no ie6 tem um hack simples e valido

min-height: 300px; height: auto !important; height: 300px;

Bom dia galera do forúm, estou precisando implementar uma video ou algo parecido como uma video conferencia para um sistema de EAD, acho que uma boa solução bem customizavel e multiplataforma seria em flash, queria saber por onde começo e se vcs tem alguma dica, esteva lendo um pouco na net e vi um software que já faz isso, mas preciso de uma customização, então, se alguem me der uma dica do que preciso aprender para implementar isso fico grato.

Vlw.

é ai que você vai ter que integrar com o carousel, ou fica como ideia, você pode usar uma div com overflow:hidden para os thumbs, criar os botões, e toda vez que forem apertados, você usa a função toSCroll para a div das thumbs, nunca fiz isso, mas seria uma alternativa(eliminando o carousel).

o bom desse script é que ele gera os thumbs a partir das imagem maiores, eliminando assim ter que criar thumbs....

se for seguir o exemplo do alex, você pode por exemplo colocar outro atributo tag img com a url da imagem real.

Talvez o jquery.cylcle seja disnecessario para o neu caso.

$(".anyClass img").click(function(){
				$("#tamReal").attr("src", $(this).attr("realsrc"));
			});

mas o cycle é bem util, tem bastante efeito, fica como dica para um proximo projeto.

alguem sabe mexer como streaming?

pode me falar como funciona, se tenho que contratar um servidor especial e tals?

vlw.

BoxModelHack

O ie6 e versões anteriores usa um modelo de caixa dirente do especificado no W3C,

no do W3C a largura total de um elemento block é width+padding+border, no ie6 seria width-padding-border.

a versão que uso do ie6 hoje é bem deficil aparecer o bug, nela aparece na pseudo classe :active,:focus quando você foca o elemento com tabulação.

bem para fazer um box que atendam <=ie6 e outros browsers, usa-se essa sintese:

width: largura_para_ie6 px;
	voice-family: ""}"";
	voice-family: inherit;
	width: largura_para_outros px;

isso funciona com height tb.

flw

margin-bottom não funciona no ie7: float in float

quando você tem um elemento float dentro de outro elemento float assim:

<div id="pai">
   <div id="filho">
   #pai e #filho são floats
   </div>
</div>

se você tentar especificar um margin-bottom no #filho não vai funcionar no ie7(que tristeza).

Solução:

Bem é bem mais uma gambi do que uma solução:

1: você pode colocar um elemento com clear:both embaixo do div filho
2: você pode espeficar um margin-bottom no elemento pai com seletores do ie para simular o efeito correto no.
exemplo:

#pai{
 margin-bottom: 0; // para todos os browsers
*margin-bottom: 10px; // para ie6 e ie7
_margin-bottom: 0; // para ie6 
}

3-colocar um tag envolta do filho que não seja float (não testei mas teoricamente deveria funcionar )

para qualquer outra solução com excessao da 2, a ideia é não deixar a margem do filho encostar no limite inferior do pai.

vou escrever sobre o double flloat do ie6.
este bug dobra a margem de um elemento float.

ele ocorre quando temos essa estrutura no html:

<div id="master">
   <div class="cols"> <!-- coluna 1--></div>
   <div class="cols"> <!-- coluna2 --></div>
</div>

sendo que e +- o seguinte css:

.cols{
  float: left;
  margin: 0 20px;
 }

o bug acontece com o primeiro div.cols que escosta sua margem na outra div que a contem(#master) e se a margem do segundo div tocar a outra extremidade do master, ela é dobrada tb.

uma solução para isso, somente quando se trabalha com div e elementos que são "nivel de bloco" por padrão, é declarar display: inline; para os divs das extremidades.

mas se você esta trabalhando com uma tag a( poderia ser qualquer outra tag inline), por exemplo, e precisa de que ela seja bloco, bem sua solução é ver alguma outra forma de definir o espaçamento entre essas entre a primeira e ultima tag em relação ao container.
pode ser com width, padding, qualquer outra coisa.

Tópico criado para discutirmos soluções para bugs.

Antes de Postar:
1 - Verifique se o bug já não esta listado.
2 - Leia esse post inteiro.

Como funciona?
1 - post o bug com a maior de riqueza de detalhes possível.
2 - os membros do fórum irão discutir sobre o problema.
3 - quando uma solução for encontrada, mandem mp para o moderador.
4 - o moderador ira incluir um link(com uma breve descrição do bug) para um post explicando a solução.

Observações:
O tópico se restringe a discussão do tema da sala, mas serão aceitas soluções que incluam outras linguagens, como javascript, activex e afins...

Bugs resolvidos:
1-Espaçamento incorreto no ie6 quando se tenta alinhar um background separado feito com duas divs.
2-Double float, margens dobradas no ie6 em elementos com float
3- boxModelHack, problemas width-padding-border, modelo não standard do ie6
4- margin-bottom não funciona no ie7, float in float

1. Rollovers Com Imagens

Bem, eu sei que não é nenhum mistério fazer um rollover em css, mas vou passar uma técnica que considero muito útil para se fazer tal efeito, sem tirar as características de semântica e acessibilidade do documento HTML. Tal efeito é relativamente útil quando se deseja usar fontes que não sejam genéricas.
Primeiro, na folha de estilo, criaremos duas definições de classe, .bot e .icon, sendo que a classe bot será para botões com rollover e a classe icon para imagens e botões sem rollover.

Mãos a obra:

.bot, .icon{  display:  block;  line-height: 0;  text-align: left;  text-indent:  -999999px;  overflow: hidden;  background-repeat:  no-repeat;}.bot:hover{  background-position: 0 -30px;}.bot.teste{   height: 15px; width: 200px;  background-image: url(teste.gif);}.icon.teste{   height: 15px; width: 200px;  background-image: url(teste.gif);}

O que fizemos?

.bot, .icon
Fazemos uma declaração comum a duas classes através do seletor vírgula.

Display :block
Definimos uma classe .bot e .icon como display: block para que independente do elemento possa trabalhar ele com height e width.
line-height: 0
Zera a altura da linha onde o texto se encontra, sumindo com o texto.

Text-align: left
Alinha texto a esquerda.

Text-indent: -999999px
Empurramos o texto que se encontra dentro do link a esquerda, escondendo o mesmo.
Overflow: hidden
Escondemos qualquer coisa que por acaso ultrapasse nossas definições de height X width, é uma garantia de que o texto identado não vai aparecer.

Background-repeat: no-repeat
Com isso o background não fica repetindo, efeito indesejado na maioria dos botões com rollover.

.bot:hover
Possibilita acionar uma nova formatação quando o mouse esta sobre o elemento com .bot através da pseudo-classe hover , quando o mouse sair o elemento volta à formatação antiga. essa classe só deve ser usado com o elemento <a> para garantir maior compatibilidade.

Background-position: 0 -30px
Em conjunto com . bot:hover faz a imagem que vai estar de fundo subir 30 pixels.
Código HTML.
Com Rollover(bot), sem Rollover(icon)

<a href="http://www.google.com" class="bot teste" title="google"> Google </a><a href="http://www.google.com" class="icon teste" title="google"> Google </a>

Sobre a imagem:
Normalmente uso imagens inferiores a altura de 30px por isso uso o background-position: 0 -30px;
Coloco no mesmo arquivo de imagem as duas imagens do botão normal a imagem do rollover sempre vai 30px abaixo do topo da imagem.
no total, vai ser a altura 30px(variavel) + a altura da imagem
Exemplo de imagem

http://www.citrus7.c..._civilidade.gif

site com essa aplicação
http://www.almanaque...escente.com.br/

Acessível?
Sim, uma vez que você deixa o texto dentro da tag, qualquer navegador vai conseguir interpretar que aquilo é um link para o Google, alguns leitores de tela não conseguem ler, por isso o title= "google"
Fim.


2. Transparência com Conteúdo Opaco


Aplicar transparência em um elemento é fácil, mas tem muita gente que tem dúvida de como deixar o fundo transparente e o conteúdo opaco, neste tópico, pretendo explicar com executar tal técnica usando css.

nesse exemplo vou usar somente tags html, mas existem outros jeitos de se fazer isso, com hacks (não curto hacks), com uma transparência falsa, ou um png de fundo ... tópico: http://forum.wmonlin...mp;hl=opacidade

nossa estrutura vai ser assim:

pai
filho com fundo transparente;

filho com conteúdo;

Código HTML

<div id="pai">		<div class="fundo"> <!-- --> </div>		<div class="conteudo"> 		 Lorem ipsum dolor sit amet adipiscing elit consectetuer maecenas elit	</div></div>

Caso você tenha dúvidas, espero que elas sejam resolvidas agora:

div id= "pai"
Vai conter o div da transparência e o div do conteúdo.

div id="fundo"
Vamos fazer a transparência com ele

div id="conteudo"
Aqui vamos colocar todo conteúdo.

vamos a nossa css:

<style type="text/css">  #pai{ position: relative; width: 100%; height: 100%;}	  	#pai .fundo{  	  position: absolute; top: 0; left: 0;  		width: 100%; height: 100%;      		z-index: 0;  		background-color: red;  		-moz-opacity: 0.65;  		-khtml-opaciy: 0.65;  		opacity: 0.65;  		filter: alpha(opacity=65);  		z-index: 0;  	}    	#pai .conteudo{  		position: relative;  		z-index: 1;  	}  </style>

O que fizemos?

#pai
position: relative
colocamos o div pai como position:relative para que seu elemento filho que esta como absolute, fique tome como referência x y ele e não o body;

width:100%; height: 100%;
Bem, no IE precisamos configurar uma altura para o div pai, para que seu filho possa usa-la, por isso colocamos esses valores, poderiam ser outros. e na realidade precisamos configurar somente o height.

#pai .fundo
position: absolute; top: 0; left: 0;
Defini o div .fundo como esta um posicionamento absoluto que independe das divs que estão no mesmo nível que ele, seus "irmãos"( não sei se é um termo técnico para isso mas foi o melhor que arranjei de momento), por exemplo, a div conteúdo é irmão da div fundo, pois ambos são filhos do div #pai. top e left definem o posicionamento do div em relação ao div pai.

background-color: red
Configura uma cor para o fundo.

-moz-opacity: 0.65; -khtml-opaciy: 0.65; opacity: 0.65; filter: alpha(opacity=65);
Configura transparência para diversos navegadores, a unica instrução que é web standard é a opacity do css3. Pequena observação ao filter:, que usa um numero inteiro e não um float.

z-index: 0
Define a sobreposição de elementos irmãos, só pode ser usado quando o elemento esta com position: relative ou absolute, um elemento com valor um fica sobre um elemento com valor zero, e assim por diante.

#pai .conteudo
position: relative
Usado para que possamos configurar a propriedade z-index;

z-index: 1
configura uma sobreposição da div conteúdo em relação a div fundo.

Fim....

Até mais.

3. min-width sem hacks

Nesse breve tutorial, vou explicar como aplicar um min-width que funcione no ie6 sem hacks
Primeiro passo o link da solução com hack, pois minha solução não funciona em elementos que não pode conter outras tags, por exemplo, img.

http://www.dustindia...ight-fast-hack/

A idéia da minha solução, é que o min_width_container tenha o tamanho da propriedade min-width que vai impedir que o #container diminua seu tamanho além do que queremos.

Nossa Estrutura

div pai (chamado de #container)
div filho (chamado de .min_width_container)

Código HTML

<div id="container"> <div class="min_width_container"> <!-- min-width for ie6 and browser no support min-width declaration --> </div></div>

Vamos as CSS:

#container{	width: 100%; height: 30px; /* width for IE6 */	min-width: 998px;}#container .min_width_container{ width: 998px; }

O que fizemos?

#container
width: 100%;
Faz com que #container ocupe todo largura da pagina;

height: 30px;
Uma altura ao acaso.

min-width: 988px
Declaração padrão para browser que suportam a propriedade min-width;

#container .min_width_container
width: 998px;
Essa é a mágica, no IE6 .min_width_container não vai deixar que #container fique menor que ele, seria como você tentar bater palmas com um cubo entre a suas mão, o cubo impede uma mão de chegar a outra, essa declaração define a largura do cubo, no caso nosso cubo seria .min_width_container e as mãos as extremidades do #container.

Obs: só testei essa técnica com divs, quando tentei fazer <div id="container"> <span class="min_width_container"> </span> </div> a técnica não funcionou, creio que só funcione a tags a nível de bloco, mais ainda tenho que testar mais essa técnica.

Por que usar essa técnica quando possível e não um hack?
Pois não sabemos até quando um hack vai continuar funcionando.

Até mais.

4. Listas com imagens

Nesse pequeno tutorial, vou mostrar como fazer uma lista com imagens..

teremos que usar esta definição de classe.

.list0, .list0 .listItens,.list0 .item{  padding: 0;  margin: 0;  list-style: none;  font-size: 0;  line-height: 0;  border: 0;}

e mais as classes definidas neste post para as imagens.

1. Rollovers Com Imagens

sem muitos rodeios, aplicamos assim

<ul class="list0">    <li class="item">        <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>    </li>    <li class="item">        <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>    </li></ul>

Se for uma lista com muitos itens e você quiser dividi-la por categorias:

<ul class="list0">   <li class="item">       <span class="icon titulo1"> Titulo1  </span>      <ul class="listItens">          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>      </ul>   <span class="hideThis"> Fim de  Titulo 1</span>   </li>   <li class="item">       <span class="icon titulo1"> Titulo1  </span>      <ul class="listItens">          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>      </ul>   <span class="hideThis"> Fim de  Titulo 1</span>   </li>   <li class="item">       <span class="icon titulo1"> Titulo1  </span>      <ul class="listItens">          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>      </ul>   <span class="hideThis"> Fim de  Titulo 1</span>   </li>   <li class="item">       <span class="icon titulo1"> Titulo1  </span>      <ul class="listItens">          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>          <li class="item">              <a href="url" class="bot citrus7" title="citrus7"> Citrus7 </a>          </li>      </ul>   <span class="hideThis"> Fim de  Titulo 1</span>   </li></ul>  O código pode parecer um pouco poluido por causa das classes, mas é isso que garante uma maior portabilidade do código, caso for preciso mudar as tags da lista.

Caso você queria que a lista fique alinhada horizontalmente, você deve atribuir float: left; para a classe item e/ou para classe listItens (dependendo do efeito desejado).
nestes dias, estavamos discutindo como deixar os itens de uma lista centrelizados... vou estudar este tópico e logo atualizo o tópico.