Expressá-la

Ontem, como todos os outros "Dia Ground Hog", eu estava trabalhando em alguns layouts CSS / tableless. Tudo estava indo bem no IE 7, 3 FF e Chrome, untill de repente, vi algumas margens un-ignoráveis ​​visto apenas no Google Chrome. Apesar de muito estranho e PREOCUPANTE, era algum problema de novo bug / que eu tinha vindo accross, houve finalmente um pouco de tempero no meu trabalho mundano. Triste (mas agradável) que foi fixado dentro de alguns minutos da sonda ...

Basicamente, Parecia Google Chrome ignorou meu CSS Redefine (margin: 0px). Na verdade, foi causado pelo estilo agente do usuário (-webkit-preenchimento inicial: 40px). Então a solução foi redefinir esse estilo, definindo padding: 0 os elementos mal-comportados.
Uma boa maneira de evitar que esse problema acontece com qualquer elemento é usar um descanso CSS global como segue

* {Margin: 0; padding: 0;}

O que é o User Agent Folhas de Estilo (especificação)?
O seguinte excerto é retirado http://meiert.com/en/blog/20070922/user-agent-style-sheets/ link, siga para ler mais sobre Folhas de Estilo do usuário do Agente

CSS 1 introduz a idéia ao afirmar que cada User Agent (UA, muitas vezes um "navegador" ou "cliente web ') terá uma folha de estilo padrão que apresenta documentos em um razoável - mas, sem dúvida mundano - maneira. CSS 2 diz que os agentes do usuário conforme deve aplicar uma folha de estilo padrão (ou se comportam como se fez) e que uma folha de agente de usuário estilo padrão deve apresentar os elementos da linguagem do documento de forma que satisfaçam as expectativas de apresentação gerais para o idioma do documento; CSS 3 é susceptível de ser da mesma mente.

Como as especificações CSS deixá-lo até implementações se usar uma folha de estilo "real" para a exibição padrão ou não, não é surpreendente que você não encontrar uma folha de estilo padrão em cada pasta de instalação do navegador. Ao contrário do Internet Explorer da Microsoft, bem como o Opera, por exemplo (e, tanto quanto eu sei), navegadores Gecko como o Firefox eo Netscape Navigator (procure por "html.css"), mas também o Konqueror torná-lo bastante simples de compreender o seu estilo padrão.

Esta escola mais antiga, mas como de costume, é o meu suplemento de memória ...
Então é disabled = "true" e disabled = "false" mesmo? Sim
Não acredito ..., bem! isso é do jeito que está ... aqui está uma explicação rápida ...
"Deficiente" é um atributo de qualquer elemento de formulário / campo e, portanto, pode aceitar qualquer valor pela sua própria natureza.

Enquanto este atributo está presente, o elemento irá ser desactivado, independentemente do seu valor. para, por exemplo.
<input type="text" value="This é disabled" disabled>
<input type="text" value="This é disabled" disabled="disabled">
<input type="text" value="This é disabled" disabled="true">
<input type="text" value="This é disabled" disabled="false">

Todos os itens acima fará com que o campo desta forma "DESATIVADO".

Simplesmente não fornecendo o atributo "DESATIVADO" mantém o campo "habilitados" ... como abaixo

<input type="text" value="This não é disabled" />

Lembre-se de "qualquer valor (ou nenhum valor) do atributo disabled, o navegador irá torná-lo desabilitado". Para manter as coisas claras em nossa mente W3C recomenda que usamos disabled = "disabled" nestas situações.

Esta é a diferença que, quando usamos esse atributo em javascript ...

document.form.element.disabled = true / / o elemento será desativado
document.form.element.disabled = false; / / o elemento será ativado

Os argumentos acima são válidas também para estes atributos e elementos:

• verificado (botão de rádio e caixa)
• selecionado (opção)
• nowrap (td)

Google inicia um movimento de pessoas prontas para despejar IE6 ... Por usuários escutas IE6 com um popup no carregamento da página ... pode não ser uma idéia muito boa ... mas sendo um desenvolvedor de interface do usuário, eu tenho que aderir a esta banda vagão ... menos um navegador para me preocupar Desculpe ... é egoísta! mas eu incluir este javascript ... (tente essa página no IE6) ...
Hey! e sobre a nota mais brilhante ... Ver é uma demonstração do Poder de JAVASCRIPT .... ele pode até mesmo derrubar um gigante (ou uma vez que era)

SO ... Ajuda livrar o mundo do IE6 com uma linha de javascript!

http://code.google.com/p/sevenup/

Com outro navegador para cuidar a partir de amanhã! (IE8 sai de seu Estado amanhã Beta) ... Sua IE6 tempo muito alta é dada a sua Morte Mercy tempo devido ... Unidos venceremos para a queda do IE6

"IE6 é o 4 Netscape novo. Os hacks necessários para apoiar IE6 são cada vez mais vistos como carga em excesso. Como Netscape 4 em 2000, o IE6 é percebido como estar a atrasar a web. "

Jeff Zeldman, as normas de guru

E, entretanto, para aqueles como eu, que serão inundados com chamadas de quebra de layouts CSS no IE8, aqui é o trabalho de idade em torno / corrigir usando Meta Tags (meta http-equiv = "X-UA-Compatible") você pode tentar ...

Mis-se comportando IE8: CSS quebras de layout (Segmentação uma versão de navegador usando Meta Tags no IE8)

Heres outro pedaço pouco de malandragem Javascript que eu tive que cavar em volta porque a situação commaned-lo. Em um dos meus sites da Web, eu tive esta situação onde eu tive que implementar "windows.onload" duas vezes. A primeira coisa que veio à mente um inexperiente como o meu (eu tenho que dizer honestamente que, uma vez que tenho vindo a utilizar frameworks JavaScript e bibliotecas, eu forgotton para fazer coisas simples no meu próprio ... triste mas é verdade), é o seguinte método ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 etc ..

Desculpe dizer, mas, isso não vai funcionar ... não quero discutir a ciência execução de Javascript muito ... mas de acordo com minha experiência recente, apenas a função anterior (onloadfn3) vai realmente mal executada.

Em situações normais, ao contrário do meu (que eu vou falar um pouco mais tarde) ... você poderia fazer uma das seguintes opções para executar funções de onload mutliple ....

Ou algo assim

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Para a minha situação atual, eu não posso usar qualquer um dos acima ...
Por que eu preciso chamar windows.onload duas vezes, ao invés de chamar duas funções dentro de uma função onload único? Aqui é rápido olhar para a minha declaração do problema ...

"Páginas de meu site são estruturados como o tema do WordPress .... ou seja, há um header.php e footer.php comuns que é incluído em todas as páginas do site. Há uma implementaion função onload nos footer.php para fazer algumas funções onload comuns. E há poucas páginas que precisam de algo de sua própria OnLoad, além daqueles feitos pela função onload comum. Se eu atribuir função de callback diretamente para o manipulador de window.onload, ele irá sobrepor-se callbacks previamente designados nos footer.php "

.... O meu problema entendido ?

Bem! existem poucas soluções que eu encontrei. Todos eles são muito semelhantes e, principalmente, implementions de uma solução dada por Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solução:

Basta adicionar este código javascript para o site ...

 addLoadEvent função (func) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'função') {
        window.onload = func
     Else {}
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

E chamá-lo de vez da "windows.onload" usual

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Mais código para ser executado no carregamento da página *
 }); 

As vantagens deste trecho de código ...
1. Primeiramente, Ele permite que você tem eventos windows.onload múltiplos, chamados de partes separadas do seu código, sem overridding a definição anterior
2. É muito discreto. Pode ser colocado em um arquivo com seus outros scripts ou em um arquivo separado.
3. Ele funciona mesmo window.onload já foi definido.

Outra tut rápido. Aqui é algo simples e agradável usando o poder do CSS ... mas foi concieve difícil (e certamente não era eu), para começar. Adicionando Dropshadow, pode ser um pedaço de bolo para muitos de nós, usando algumas ferramentas de edição de imagem como o Photoshop anf fogos de artifício etc
A razão pela qual, optei por sombra usando CSS é que, geralmente durante a criação de um design de página / html de um aplicativo, os requisitos de manter a iteração. O que quero dizer é, em um site já existente, com muitas imagens, como as que exibem freinds lista ou uma galeria de imagens, será difícil para o reprocessamento de toda a carga de imagens que já haviam sido descarregadas para adicionar ou remover as sombras, para que matéria.
Então, se você fez um pouco de pensamento frente ao criar os htmls para adicionar essas divisões extras ou geralmente a situação é que você tem uma lógica de loop gerando esses ícones / Miniaturas em XSL, PHP. JAVA ou qualquer linguagem de programação / scripting outro, você pode adicioná-la a qualquer momento, então é apenas a questão de mostrar e esconder essas sombras usando a propriedade Display CSS, como por os clientes em constante mudança requisitos ... Eu havn't feito esse tipo de visão de futuro antes disso ... mas ahev começou agora!

No exemplo abaixo, a imagem original é a sombra livre e as dropshadows são aplicados como necessário! Além disso, eu ter ido um pouco mais, usando os truques da minha Tut anteriores (Well! estes são, provavelmente, menor variedade de tutoriais, por isso só se justifica chamá-los de "Tut" 's) sobre Usando CSS propriedade do clipe para mostrar apenas

Imagem Original

Dropshadow Resultados CSS

Veja o Demo | Download de SourceFiles

Por que eu quero entender isso?? Humm ...!!

A maioria dos escritores CSS concordaria que o CSS propriedade Clip é provavelmente uma das propriedades não-utilizados CSS. Era tão verdadeiro para mim também e foi mais feliz para negligenciá-lo, até que comecei a modificar o MooTools DOIS Knob componente Slider (pino) (com indicador de Range) .

Houve uma boa sugestão de um dos utilizadores de componentes para modificar o componente deslizante utilizando imagens recortadas backgroud (contra uma divisão de largura variável) para indicar a gama deslizante. Assim chegou a minha hora de entrar na diversão, mas un fretado (para mim é claro) águas da propriedade Clip CSS.

Bem! quão difícil pode ser? Não muita coisa ... SIM e NÃO. A sintaxe a utilizar a propriedade Clip CSS é muito vertical, mas o significado / usuage é um pouco croocked. Com uma memória como a minha, toda vez que eu sento para retocar a minha Script Slider ... Tenho tokeep referindo-se ao uso desta propriedade CLIP, para me lembrar a lógica que eu criei no meu script .... DAÍ! pensado para pen-lo para baixo, com uma esperança de lembrar que o futuro (e também para o benefício daqueles que parecem boggled pela propriedade Clip CSS)

O que Clipe CSS fazer?

Clipe é parte do módulo de efeitos visuais do CSS 2,1. Simplificando, seu trabalho é colocar uma janela visível em cima de um objeto que está sendo cortada, portanto, recorte de imagens e criação de miniaturas sem ter que criar arquivos adicionais (Já coloquei este recurso para melhorar o uso do componente Slider )

Usando a propriedade Clip CSS, você pode criar um recorte usando a forma rect. Como muitas outras propriedades CSS (como margem de preenchimento etc,), utilizando rect requer quatro coordenadas superior, inferior, direita, esquerda (TRBL). A natureza croocked desta propriedade reflete quando você dar uma olhada no clipe como calcula a região de corte, usando essas quatro coordenadas (envia cérebro em um lance por um tempo). Agora, para confundi-lo do fundo começa a partir do topo, eo direito começa a partir da esquerda. . Você vê o que eu disse? .... Por isso este post ...

Esta pequena confusão pode facilmente desaparecer, com esta explicação visual da propriedade CSS Clip / rect como abaixo!!

Clipe Requisitos CSS

A tarefa que temos começado é para cortar a imagem em miniatura a seguir em uma imagem mais quadrada olhando (e também uma imagem de grande-angular)

Thumbnal Original / Imagem	Requisitos Clipe para Sqaure Thumbmail

Clipe Resultados CSS

Veja o Demo | Download de SourceFiles

Às vezes, para manter o pageweight baixo ... nós dividimos nossos scripts em fragmentos ... Estes fragmentos javascript pode ser carregado como e quando necessário (em um evento ou ao clicar em um link ou botão, etc.)

Javascripts Carregando dinamicamente é simples e muito para a frente como abaixo ...

= “text/javascript” > <Tipo de script = "text / javascript">
função loadNewScript (fonte) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', fonte);
document.body.appendChild (s);
}
</ Script>

e você pode ter o link seguinte chamada em qualquer lugar do corpo, ou você pode ter este script "onLoad" do documento em si ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Script Carga Dinâmica </ a>

ou

<body onload="loadNewScript('myDynamicScript.js');">

Se você é uma pessoa css, você sabe a dor na obtenção de seus layouts de trabalho cross-browser. IE8 é mais uma chave inglesa nos trabalhos para os desenvolvedores de nós. Anywaz! se você bater em cima desta questão, como eu fiz ontem, onde o seu CSS funcionando perfeitamente no IE7 (e anterior) e Firefox tem de repente começou a birra no IE8, tente este ... É bem parecia resolver os meus problemas para o momento ....

Usando declaração Meta, podemos especificar o motor de renderização que gostaria de usar o IE8. Então, para forçar o IE8 para renderizar como IE7 ... Insira o Tag Meta seguinte na cabeça de seu documento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Por padrão Meta IE seria: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
o que tornaria o IE8 renderizar a página usando o modo padrão novo.

Se necessário, esta sintaxe poderia ser usado para acomodar para outros navegadores como abaixo:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Mais sobre doctypes:

Se você ainda não familiarizados com o tipo de animal chamado "Doctype" ... está aqui alguma leitura rápida
Quais são DOCTYPES? Quais são Peculiaridades BROWSER e modo estrito?
Definir o DOCTYPE no XSL

Para um mais profundo entendimento sobre DOCTYPES, tente visitar esses links ...
A List Apart: Fixe seu site com o DOCTYPE direito!
A List Apart: Beyond DOCTYPE: Web Standards, compatibilidade e IE8

Nota: Embora muitos de nós HTML / CSS pessoas têm negligenciado a importância de decleration DOCTYPE em nossos documentos, Definir o DOCTYPE correto, é geralmente a resposta a problemas com o navegador mais transversais.

Com uma variedade de carrosséis lá fora, muitos para Mootools também, eu ainda decidi escrever minha própria classe Carousel, por algumas boas razões
1. Espontânea um recurso de paginação (para ser capaz de saltar um slide particular / passo no carrossel).
2. Desejavam a liberdade com a colocação dos botões ESQUERDA e DIREITA / links, onde quer que eu por favor.
3. Mais controle sobre os passos de slides.

Eu consegui criar um novo carrossel, com as características acima ... como abaixo ... Sinta-se livre para sugerir as modificações que exijam!

Meu exemplo parecido com este ... [ Ver Demo ]

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 1991 vezes)

1. Paging Carousel

Você pode facilmente adicionar a paginação para o carrossel, simplesmente definindo o sinalizador de paginação, que é parater última passou ao criar a instância do MooCarousel a verdade (quer paginação) ou falso (donot querendo paginação).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de slides, sss = tamanho do passo de slides

E claro que você pode mudar o look-n-feel destes achors de paginação que você queira, modificando o seu CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging atual, página carousel_paging {outline: none; width:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 0 0 1px; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging atual {background: # 4D4D9B; color: # ffffff;}..

Bem! há um pequeno problema, porém, as âncoras de paginação se definido, então ele vai ficar sempre gerado depois que o componente do carrossel. Eu queria torná-lo dinâmico, bem como, mas apenas para manter o Script para soprar as proporções, eu decidi ignorá-lo.
Mas você sabe um pouco de JavaScript, você pode facilmente modificar o código de geração de paginação na classe MooCarousel para agradar às suas necessidades.

2. Personalizar os ícones de esquerda e direita

Você pode alterar o posicionamento, imagens ou qualquer propriedade displat dos botões esquerdo e direito simplesmente por brincar com o CSS. ser capaz de alterar as colocações dos buttoms Esquerda e Direita foi o motivo real para mim o meu direito Classe nosso carrossel.
Uma vez que esta classe MooCarousel, aceita o ID é um desses botões, você pode realmente colocar os botões em qualquer lugar da página, por favor ... não tem que ser na hierarquia de elementos, como no meu exemplo.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personalizar Passos de slides

O que quero dizer MEUS PASSOS SLIDE Personalização?
A maioria dos Carrosséis deslize o total com a janela visível. Então, dizer que você tinha quatro itens (como no meu exemplo acima), ele coloca todos os quatro itens. Com este componente Carrossel, Você passa o número de slides eo tamanho do passo de sua escolha.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de slides, c_sss = tamanho do passo de slides

Além disso, na minha example1 eu calcuted o tamanho do passo slide, baseado na lógica em que, eu sei que número de itens, a largura em cada item e as margens que deram depois de cada item no meu CSS.

/ * Para bacanal 1 * /

var c1_w = 92; Largura Item / farra /

var c1_n = 10; / Número / Total de Itens farra Comparação

var c1_pp = Número 4 / / Comparação de perpage Itens bacanal

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = tamanho do passo de slides

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / NS = número de slides

c1_sss + = c1_marginFactor / / sss = tamanho do passo de slides, 51 para as margens

Requisitos: Mootools 1.2

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 1991 vezes)