Arquivo da tag: Javascript

21 simples e úteis Tutoriais de jQuery

Introdução

São 21 tutoriais que se concentram em seção diferente de um site (menu, galeria deslizante, dicas, dock, janela modal, ajax eturtorials jQuery).  jQuery é um framework em javascript incrível.

Menu de Navegação

Como configurar Serviço PageSpeed ​​do Google em seu site

Para deixar sites mais rápida, o Google lançou várias diretrizes e ferramentas que permitem otimizar seu site para carregar mais rápido. Se você seguiu todos os passos, como a criação de CDN, minifying CSS e javascripts etc, e achar que seu site ainda não carrega tão rápido quanto você queria, então é melhor para você é configurar Serviço PageSpeed ​​do Google e deixar o Google otimizar o seu site.

Como mexer no PageSpeed?

O conceito por trás do serviço PageSpeed ​​é simples. Depois que você configurá-lo, o Google vai pegar uma cópia do seu site, otimizá-lo e armazená-lo em seu servidor. Quando um pedido é feito em seu site, a versão otimizada e cache do servidor do Google são servidos no lugar da cópia a partir do seu próprio servidor. Continue lendo Como configurar Serviço PageSpeed ​​do Google em seu site

47 Surpreendentes Demos de Animações em CSS3

Aqui está uma compilação de 47 de cair o queixo CSS3 demos animação. Eles demonstram as possibilidades da transformação CSS3 e propriedade de transição. Alguns são muito úteis e podem ser utilizados como alternativas Javascript. A maioria deles são simplesmente para olhar. A fim de visualizar estes efeitos, você precisa de um navegador WebKit, como Safari e Chrome (desculpa para os usuários do Internet Explorer). Divirta-se!

CSS3 Clock With jQuery

css3 clock

Analogue Clock

analogue clock Continue lendo 47 Surpreendentes Demos de Animações em CSS3

50 Tutoriais CSS3 úteis

English: CSS3 Styling
English: CSS3 Styling (Photo credit: Wikipedia)

Cada dia CSS3 torna-se cada vez mais popular entre os web designers e desenvolvedores web. Hoje muitas funções interessantes e recursos estão sendo feitos para CSS3, que proporcionam menor tempo de conclusão, mais flexibilidade e fácil de manutenção para páginas web. Neste post vamos oferecer-lhe uma grande coleção de 50 úteis CSS3 tutoriais, você sempre pode usar sempre que precisar. Continue lendo 50 Tutoriais CSS3 úteis

Wookmark jQuery plugin

jquery-plugin-example

Navegando acabei achando esse http://www.wookmark.com/, quem tem um layout bem interessante e descobri que ele disponibiliza um script para poder usar, Olhem abaixo. Continue lendo Wookmark jQuery plugin

Tags HTML5 para IE8

Como sempre, o IE é muito atrás em tecnologia. Este artigo explica como obter suas tags HTML5 trabalhando como se estivessem em Opera, Safari, Chrome ou Firefox.

Você pode obter etiquetas HTML5 trabalho no IE7 e IE8, incluindo este JavaScript na cabeça do seu documento. Para preformance incluí-lo depois de carregar o CSS.

<!--[if lt IE 9]>
 <script>
 document.createElement('header');
 document.createElement('nav');
 document.createElement('section');
 document.createElement('article');
 document.createElement('aside');
 document.createElement('footer');
 document.createElement('hgroup');
 </script>
 <![endif]-->

 

Firefox, Opera, Chrome, todos consegue reconhecer, mas o IE8 e as versões anteriores, não. Certifique-se de declarar qualquer novo elemento HTML5 como block em seu arquivo css, ou declarar in-line para todos os navegadores, pra não ter conflito futuro.

header,nav,section,article,aside,footer,hgroup { display: block; }

Se preferir, você pode puxar um mais elaborado html shiv do Google Code assim:

<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Fonte: http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8

 

Colocar link “Leia mais” usando jQuery

O Plugin jQuery Expander é um script para mostrar/recolher o conteúdo de um texto grande.

Aqui está uma maneira simples de usar este plug-in seu HTML ou páginas ASP.NET

1. Declare uma Div ou ASP.NET Painel.

&lt;div class=&quot;readmore&quot;&gt;
   The Div Text Comes Here
&lt;/div&gt;

Continue lendo Colocar link “Leia mais” usando jQuery

jQZoom Evolution 2.3

Esse script pode ser modificado para exibir uma máscara sobre a imagem ou não mostrar uma janela de lupa.
Este plugin jQuery ajuda a inserir imagens detalhadas grandes em qualquer website.
O script pode ser aplicada a imagens únicas ou múltiplas na mesma página.

Nota: Atualizei o link que estava errado.

Imagens:

Este slideshow necessita de JavaScript.

Clique aqui para baixar.

Script para ajustar altura da div junto com a da página

Estava trabalhando em um site que tem um menu lateral, que tem a altura de 100%, só que quando abria um submenu, aparecia a barra de rolagem, e altura do menu não ajustava o tamanho sozinho, fiz uma demorada busca até que achei esse script abaixo.

Colocar antes da TAG </head>

&lt;/pre&gt;
&lt;script&gt;
function alertSize() {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &amp;&amp; ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body &amp;&amp; ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }

return [ alert(&quot;width: &quot;+myWidth+&quot; pxnheight: &quot;+myHeight+&quot; px&quot;) ];
}
&lt;/script&gt;
&lt;script&gt;
function ajustarAltura(){
 var heightTela = document.body.scrollHeight
 document.getElementById('menuLateral').style.height = heightTela+&quot;px&quot;;
}
&lt;/script&gt;
&lt;pre&gt;

Colocar no fim da página.

&lt;/pre&gt;
&lt;script&gt;
alertSize();
alert(&quot;menulateral: &quot;+$(&quot;#menuLateral&quot;).css(&quot;height&quot;));
alert(&quot;document.body.scrollWidth: &quot;+document.body.scrollWidth+&quot; pxndocument.body.scrollHeight: &quot;+document.body.scrollHeight+&quot; px&quot;);
&lt;/script&gt;
&lt;pre&gt;