Arquivo da tag: Source code

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

CSS3 Repeating Gradients [CSS3 Tips]

Há muitos recursos de CSS3 que mudam a maneira como decorar um site, um dos quais é CSS3 Gradients. Antes de CSS3, definitivamente, precisamos de imagens para criar o efeito de gradiente, agora somos capazes de entregar o mesmo (e melhor) efeitos usando apenas CSS.

Nós discutimos dois tipos de gradientes que podem ser conseguidos com CSS3:

Desta vez, vamos olhar para o seu irmão: repetição de  gradientes.

Continue lendo CSS3 Repeating Gradients [CSS3 Tips]

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;

Pegar informações dentro de uma TAG com Javascript

O código abaixo mostra como selecionar o valor de uma Tag, com javascript. O exemplo abaixo utiliza-se da tag span

Valor do Span aquiou
  alert(document.getElementById('creditototal').firstChild.data);

ou

 alert(document.getElementById('creditototal').innerHTML);

Outro exemplo:

function mostra(){
var altura = document.getElementById(&quot;img&quot;).height;
var largura = document.getElementById(&quot;img&quot;).width;
alert(&quot;Altura: &quot;+altura+&quot;nLargura: &quot;+largura);
}
window.onload = mostra;

Imagem com efeito de Zoom com jQuery

Então, hoje eu vou correr pela técnica usada para ampliar as miniaturas das imagens e exibir a sobreposição de texto.

jquery-thumbs Continue lendo Imagem com efeito de Zoom com jQuery

Mostrar estatísticas do FeedBurner

Image representing FeedBurner as depicted in C...
Image via CrunchBase

Aqui está uma peça rápida de código para simplesmente exibir estatísticas do FeedBurner no seu blog. Ainda estou para postar minhas estatísticas publicamente no meu blog, mas já vi vários blogs com o emblema feedburner padrão que acho que é muito feio. Então aqui está como, é só pegar as estatísticas usando PHP e cURL. Você pode, então, o estilo é como você gosta.


$ch = curl_init();
//set the feed url and options plus a timeout value
$timeout=5;
curl_setopt($ch,CURLOPT_URL,'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=AshleyFord-Papermashupcom');
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$result = curl_exec($ch);
// get just the subscriber number using the regex function
$subscribers = get_match('/circulation=&quot;(.*)&quot;/isU',$result);

echo 'Papermashup.com has &lt;strong&gt;'.$subscribers.'&lt;/strong&gt; subscribers';

//close connection
curl_close($ch);

function get_match($regex,$result)
{
 preg_match($regex,$result,$matches);
 return $matches[1];
}

Para ver a demostração clique aqui, para baixar clique aqui.

Fonte: http://papermashup.com/display-your-feedburner-stats/

Bonitos botões em CSS3

Eu me deparei com um punhado de sites que explicam como criar flexíveis CSS3 botões, mas eu nunca realmente gastou o tempo para implementar um até que eu achei um pouco grande escrever cortesia dos caras mais no blog Zurb (em inglês) que têm um fantástico postar sobre a criação de CSS3 botões. Então eu tomei o seu exemplo e tweaked-lo para atender às minhas necessidades. É importante notar que se o seu usando o Internet Explorer que você não vai ver todos esses efeitos como o IE ainda não suporta CSS3. Browsers compatíveis CSS3 são, Safari, Chrome e Firefox 3 +. Continue lendo Bonitos botões em CSS3

Checker de Disponibilidade de Usuário em jQuery, PHP e MySQL

Checa o banco de dados para verificar se um usuário existe ou não e retorna verdadeiro ou falso.

username

O JavaScript

  1. Então, para começar temos o nosso jQuery em função documento pronto, dentro deste temos um ouvinte de evento. Keyup função que quando acionada corre a função ‘username_check “.
  2. Dentro da função ‘username_check’, em primeiro lugar atribuir ‘username’ a variável com o valor do campo de entrada com o nome ID #.
  3. Vamos agora executar algumas verificações que o campo de entrada de nome de usuário não é vazia e que os seus 4 ou mais caracteres de comprimento. Se tudo estiver ok ea variável nome de usuário é de 4 caracteres podemos ir em frente e fazer a solicitação ajax. Continue lendo Checker de Disponibilidade de Usuário em jQuery, PHP e MySQL

Manipuladores de atributos no jQuery

English: The text "jQuery" in the of...
English: The text “jQuery” in the official logo of jQuery. For the entire logo, see: File:JQuery logo.svg (Photo credit: Wikipedia)

O jQuery oferece 10 métodos que que estão na categoria de atributos, neste post vou mostrar como cada um deles funcionam, com um exemplo simples e pratico, os métodos que estão na categoria de atributos são: Continue lendo Manipuladores de atributos no jQuery

15 Efeitos jQuery Fantásticos e Gratuitos

English: The text "jQuery" in the of...

Já falámos anteriormente sobre jQuery, uma livraria de funções Javascript, que se baseia no lema “Escrever menos e fazer mais”. A sua aparição remonta a Janeiro de 2006, tendo sido anunciado no BarCampNYC, sendo que até à data tem tido constantes actualizações, novos addons e melhorias. Veio ajudar a resolver problemas de incompatibilidades entre os navegadores, reduzir o tamanho de código e introduzir a reutilização de código através de plugins. Para si que é um utilizador devoto de jQuery, trazemos-lhe hoje 15 Efeitos jQuery Fantásticos e Gratuitos, para trazer novas e melhoradas funcionalidades aos seus websites! Continue lendo 15 Efeitos jQuery Fantásticos e Gratuitos