Link  8 Javascript solutions to common CSS problems

O problema de utilizar urchin.js

O problema de ainda utilizar urchin.js é que desde dezembro de 2007 o Google deixou de dar suporte ao script, dando atenção ao novo sistema ga.js, deixando 12-18 meses mais de vida para o urchin.js para realizar a migracão. Ao que tudo indica, vendo que muita gente ainda não efetuou a migração, esse prazo está se prolongando para evitar problemas (deixar de registrar visitas). Mas isso não é motivo de pânico, esse script não deixará de funcionar da noite para o dia.

Benefícios do novo script

Se o seu site ainda utiliza o sistema antigo, veja os benefícios que você está perdendo:

• Arquivo JS menor e mais rápido
• Detecção automática de HTTPS
• Maior segurança com namespaces
• Melhoras no segmento de comércio eletrônico
• Código customizado para sites que utilizam Ajax
• Você vai desfrutar de novas funcionalidades e relatórios

Como utilizar o novo sistema

A alteração é realmente simples, dependendo do número de aplicações em que devem ser efetuadas as alterações. Basicamente temos que efetuar a alteração no código que faz referência ao arquivo urchin.js e trocar por esse:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("SEU_CODIGO");
pageTracker._trackPageview();
} catch(err) {}</script>

Basta agora você trocar onde está indicado SEU_CODIGO para o seu código do analytics.

Via: Anieto2k

Mas Informação – Biaxar Completa Ext Core (Inclui exemplos)

Poderemos construir coisas como:

Carrusel – Ver Demo

Carrossel com o qual poder navegar por uma série de objetos. O qual pode ser configurado para satisfazer qualquer necessidade específica. Auto-play, animações, navegação e bem mais

Lightbox – Ver Demo

Os efeitos tradicionais gerados pelos Lightbox, muito simples de configurar mediante css.

Menú – Ver Demo

Menu com efeitos atraentes que converte uma lista de enlaces num menu horizontal ou vertical. Possui muitas opções para ser configurado, incluindo diferentes tipos de animações, fixar o elemento ativo, os atrasos etc.

Simple Tabs – Ver Demo

Simples Tabs, uma opção para implementar pestanas animadas que atuem como navegação de grande alcance, com só umas poucas linhas de código usando Ext. Core

Via xyberneticos.com

Link TinyJS

Vía Intenta | Webmasterlibre

Tooltips

Aqui estão 11 excelente soluções para criar tooltips utilizando várias soluções, tais como jQuery, MooTools, ou apenas CSS.

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

jQuery Ajax Tooltip

CSS Bubble Tooltips

Easy CSS Tooltip

CoolTips

ToolTip_MooTools

Via: Web Design Ledger

$fx()

$fx() ver 0.1 é um pequeno e realmente muito flexível Javascript para animar elementos HTML. Permite alterar qualquer propriedade CSS, combinar efeitos em corrente ou em paralelo, também tem capacidade para estabelecer diferentes chamadas que lhe dá ainda mais flexibilidade.

Os exemplos e as idéias de como implementar me deixou fascinado, asim que dediquem um pouco de tempo para ver de que se trata.

Link  $fx() ver 0.1 -Exemplos e Manual de uso – Baixar

Start/Stop Slider outra atraente proposta feita por Chris Coyier para gerar Conteúdo Deslizante (Slider) no seus projetos online. Requer  jquery e é completamente personalizavel desde do seu arquivo startstop-slider.js, basta ter um pouco de conhecimento ou tempo e curiosidade. Start/Stop Slider possui uma característica que é fácil deduzir já com o nome do projeto, permitindo mediante um botão parar a animação de nosso slider quando desejemos, uma boa forma de permitir a nossos usuários ler com tranqüilidade as coisas que desejemos mostrar neles.

Ver Demo - Download - Mas Info Start/Stop Slider by: Chris Coyier

Uso:
Realizar o link  correspondente a nossos script no encabeçado de nosso site o theme < head >…

<script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script src="js/startstop-slider.js" type="text/javascript"></script>

Adicionar estilo na nossa folha de Style.css

#slider		  { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
position: relative; margin: 50px 0; }
#mover		   { width: 2880px; position: relative; }
.slide		   { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1		{ font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
color: #ac0000; }
.slide p		 { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img	   { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

Conteúdo

<div id="slider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>Garden Rack</h1>
Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

<a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a></div>
<div class="slide">
<h1>Tulip Bulbs</h1>
Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

<a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a></div>
<div class="slide">
<h1>Garden Gloves</h1>
Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

<a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a></div>
</div>
</div>

Bom e isso é tudo, qualquer problema, você pode deixar um comentário.

Se você esta cansado de usar sempre os mesmos efeitos de lightbox no conteúdo de seus artigos ou em certas seções em particular, jQuery Popeye será uma alternativa peculiar. O jQuery Popeye foi inspirada nos tradicionais lightbox, basicamente não pretende obter os mesmos resultados. Tem características muito particulares, e é realmente muito atraente. jQuery Popeye poderá ser útil para montar galerias de imagens em seção realmente reduzidas, ampliar conteúdo de nossos post adicionando muitas imagens sem danar o desenho de nosso blog ou site, adicionar quantidade de imagens mediante Caixas de lightbox e não de forma individual, permite adicionar uma pequena descrição a cada imagem na parte inferior de nossa caixa utilizando o atributo ALT e variar um pouco o efeito, já que em vez de lightbox se assemelham mas aos pop-up.

Demo – jQuery.popeye demo (1025) – Articulo Original jQuery.popeye – an inline lightbox alternative

Para que funcione corretamente precisaremos baixar as seguintes librerias. jquery.popeye-0.2.1.js (incluida no pack original), ademais deveremos descarregar jquery.easing.1.3.js junto com jquery-1.2.6.js (Incluidas na minha demo). Uma vez com os arquivos deveremos realizar o links correspondente desde nosso arquivo.

Copiando e colando o seguinte código dentro de nossa etiqueta:

<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>

<script type="text/javascript">
<!--//<![CDATA[

$(document).ready(function () {
var options1 = {
easing:     'easeInOutCirc'
}
var options2 = {
direction:  'right',
duration:   230
}

$('#popeye1').popeye(options1);
$('#popeye2').popeye(options2);
});

//]]>-->
</script>

Tambien deveremos adicionar os links das folhas de estilo.

<link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />

Por ultimo: Começamos a montar nossas Caixas com as imagenes

<h2>Demo 1 - Popeye (Float:Left)</h2>
<!-- [EXEMPLO DEMO 1 ] begin -->
<div id="popeye1" class="popeye popeye-hasjs next">
<ul>
<li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
</ul>
</div>
<!-- [FIN EXEMPLO DEMO 1] end -->
<div style="clear:both;">
<h2>Demo 2 - Popeye (Float:Right)</h2>
<!-- [EXEMPLO DEMO 2 ] begin -->
<div id="popeye2" class="popeye">
<ul>
<li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a>
</li><li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
</ul>
</div>
</div>		 <!-- [FIM EXEMPLO DEMO 2] end -->

Qualquer dúvida é so deixar um comentário.

ImageFlow é uma bonita galeria feita em Javascript e a qual por seu aspecto sem dúvida ficaria bem em qualquer projeto online. ImageFlow é muito similar em vários aspectos com MooFlow ainda que conta com algumas diferenças. ImageFlow nos permite navegar entre as imagens utilizando o scroll de nosso mouse ou bem utilizando um sistema de navegação integrado à galeria e o qual moveremos esta vez, de forma manual com nosso mouse. Isto permite ao usuário deslocar entre cada uma das imagens, indo de um lado a outro. Também fizeram muitas melhoras com respeito ao div da galeria, o que garante que o deslocamento produzido por nosso mouse, só se produza ao estar sobre o div que contém à mesma. Sua utilização é sumamente fácil e os efeitos que fazem à galeria são muito agradáveis.

Ver demo – Download demo.

Instalacion:

Baixamos o script ImageFlowe, o primeiro que faremos será realizar o chamar o script, Copiamos e colamos o seguinte código dentro de nossa etiqueta < head >

<script type="text/javascript" src="js/imageflow.js"></script>

agregamos um pouco de estilo

<style type="text/css">
img {
    position:absolute;
    top:0px;
    border:none;
}
h1 {
    text-align:center;
}
a{
    color:#fff;
}
.none{
    visibility:hidden;
}
.none div{
    display:none;
}
.clear{
    clear:both;
}
#images{
    visibility:hidden;
}
#loading{
    margin-top:50px;
    text-align:center;
    width:100%;
}
#loading img{
    margin-top:10px;
    position:relative;
}
#captions{
    position:relative;
    text-align:center;
    z-index:10000;
}
#scrollbar{
    visibility:hidden;
    position:relative;
    border-bottom:1px solid #b3b3b3;
    z-index:10001;
}
#scrollbar_slider{
    position:absolute;
    margin-top:-7px;
    margin-left:-7px;
    z-index:10002;
    background-image:url(slider.png);
    background-repeat:no-repeat;
    width:14px;
    height:14px;
}
#imageflow{
background-color:#000;
    margin-left:350px;
    text-align:left;
        color: #fff;
}
</style>

Por ultimo a estrutura de nossa galeria

<div id="imageflow">
    <div id="loading">
        <b>Loading images</b><br />
        <img src="loading.gif" width="208" height="13" alt="loading" />
    </div>
    <div id="images">
        <img src="img/img001.png" alt="Image 1" />
        <img src="img/img002.png" alt="Image 2" />
        <img src="img/img003.png" alt="Image 3" />
        <img src="img/img002.png" alt="Image 4" />
        <img src="img/img003.png" alt="Image 5" />
        <img src="img/img001.png" alt="Image 6" />
        <img src="img/img002.png" alt="Image 7" />
        <img src="img/img003.png" alt="Image 8" />
        <img src="img/img002.png" alt="Image 9" />
        <img src="img/img001.png" alt="Image 10" />
    </div>
    <div id="captions"></div>
    <div id="scrollbar">
        <div id="slider"></div>
    </div>
</div>

<div class="clear"></div>

Fonte: Xyberneticos