Converter número para o formato moeda (Real)

Number.prototype.formatMoney = function(c, d, t){ var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0; return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ""); }; // usando (1000).formatMoney(2, ',', '.'); //retorna 1.000,00

Fonte: http://stackoverflow.com/q/149055/1582080

Lazy Load de imagens com jQuery

Um recurso muito interessante que pode agilizar o carregamento da página é somente carregar do servidor as imagens quando o usuário as visualizar. Esta técnica é conhecida como Lazy Load e o existe um plugin jQuery para fazer isso Lazy Load Plugin for jQuery que é bastante simples.

** Primeiramente inclua as bibliotecas jQuery e Lazy Load Plugin for jQuery:

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

<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>

A ideia é que quando a página for carregada as imagens do site irão carregar uma imagem pequena na marcação img e quando a marcação img realmente aparecer o javascript irá carregar a imagem correta, então deve colocar a imagem padrão pequena no atributo src e a imagem a ser carregada no data-original, lembrando ainda que como a imagem que carregará por padrão é pequena(tipicamente uma 10×10) se faz necessário colocar o tamanho da imagem “real” nos atributos width e height para evitar redimensionamento ao rolar a página.

<img class="lazy" src="img/grey.gif" data-original="img/imagem_grande01.jpg" width="600" height="600">

** Agora que já temos a imagem é só iniciar o plugin.

$(document).ready(function(){

    $(".lazy").lazyload();

});

** Também é possível colocar um efeito de fadeIn para fazer a transição para aparecer a imagem.

$(document).ready(function(){

    $(".lazy").lazyload({effect : "fadeIn"});

});

Segue um exemplo utilizando imagens do Instagram

Fonte : http://www.botecodigital.info/jquery/lazy-load-de-imagens-com-jquery/

Botão para rolar para o topo da página com jQuery

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

HTML

<a href="#top">go top</a>

REALIZAR SOMA COM JAVASCRIPT: Como somar valores vindos de um campo input type text do formulário com javascript

Definição da função parseFloat:

A função parseFloat() analisa uma string e retorna um número em ponto flutuante.

Esta função determina se o primeiro caractere na string de caracteres especificada é um número. Se for, ele analisa a sequência até que atinja o fim da sequência, e retorna o número como um número, e não como uma cadeia de caracteres.

SOLUÇÃO:

Temos um campo texto:

[sourcecode language="html"]
<input type="text" name="txtValor" id="txtValor">
[/sourcecode]

Definimos uma variável pra realizar a soma:

[sourcecode language="javascript"]
var total = 0;
[/sourcecode]

Efetuamos a soma pegando o campo text com jQuery:

[sourcecode language="javascript"]
total = parseFloat(total) + parseFloat($(‘#txtValor’).val());
[/sourcecode]

Exibindo o total:

[sourcecode language="javascript"]
alert(total);
[/sourcecode]

Pronto, tenho uma soma, que pode ser feita inclusive com pontos flutuantes.

fonte: http://dilbertorosa.com/tag/somar-e-nao-concatenar-valores-com-javascript

Redireciona para outra páginas após algum tempo de inatividade.

Segue o código.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        var timeout;
        $(document).on("mousemove keydown click", function () {
            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function () {
                window.location = "screensaver.html";
            }, 3 * 60 * 1000);
        }).click();
    });
</script>

Alterando Imagem usando Jquery

<img id="my_image" src="first.jpg"/>

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Para fazer uma rotação de imagem ao clicar com o mouse utilize este script :

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Colocar uma imagem como fundo de página inteira.


Css normal:

html {
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Css para fazer a imagem expandir na vertical:

Aqui usamos um elemento inline, que será capaz de redimensionar a imagem em qualquer navegador. Montamos um min-height que o mantém enchendo a janela do navegador na vertical, e definir uma largura de 100%, o que mantém o preenchimento horizontalmente. Também estabeleceu um min-width da largura da imagem para que a imagem nunca fique menor do que realmente é.

#bg {
 position:fixed;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
}
#bg img {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 min-width:50%;
 min-height:50%;
}
<div id="bg">
 <img src="images/bg.jpg" alt="">
</div>

Método jQuery:

<html>
<head>
 
<style>
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
</style>
 
<script>
$(window).load(function() {    
 
 var theWindow        = $(window),
     $bg              = $("#bg"),
     aspectRatio      = $bg.width() / $bg.height();
 
 function resizeBg() {
 
  if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
       .removeClass()
       .addClass('bgheight');
  } else {
      $bg
       .removeClass()
       .addClass('bgwidth');
  }
 
 }
 
 theWindow.resize(function() {
  resizeBg();
 }).trigger("resize");
 
});
 
</script>
</head>
<body>
<img src="images/bg.jpg" id="bg" alt="">
</body>
</html>

fonte : http://www.crashcoder.com/css-tutorials-how-to-set-full-image-as-background-in-website/

Lendo variáveis de um URL com JavaScript

Esta funcção basicamente lê a url da página atual, executa algumas expressões regulares na URL, em seguida, grava os parâmetros de URL em uma matriz associativa, que podemos acessar facilmente.
Então, como exemplo, se tivéssemos o seguinte url com o javascript na parte inferior no lugar.

http://eniomarcelo.com.br/index.php?id=123&page=home

Para pegar o valor 123 dentos da variável id e para pegar o valor home dentro da variável page, segue a seguinte função em javascript:


<script>

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

var first = getUrlVars()["id"];
var second = getUrlVars()["page"];

alert(first);
alert(second);



</script>

Espero que gostem. Grande Abraço.


fonte : http://papermashup.com/read-url-get-variables-withjavascript/

Reveal – Plugin jQuery para criação de Modal e Lightbox

Existem várias formas de mostrar o conteúdo do site de forma bonita e ao mesmo tempo
funcional. Fora isso é importante sempre pensar na experiência do usuário, para facilitar o modo que as informações são mostradas e entregues.


Nos primórdios da Web existiam os famigerados pop-ups, que só atrapalhavam a navegação, além de irritar os usuários. O pior é que esse tipo de recurso é utilizado até hoje e muita gente simplesmente nem sabe que eles existem, pois utilizam os bloqueadores que já fazem parte dos navegadores modernos.


Mas, agora, é possível criar um efeito bonito e ao mesmo tempo funcional para abrir informações extras na tela sem prejudicar a navegação…

Ficou fácil criar o efeito Ligthbox!


Reveal é um plugin jQuery para a criação de Modal em qualquer tipo de site ou projeto. Incluindo algumas poucas linhas ao seu código é possível criar umLigthbox elegante sem precisar alterar nada.


Basta chamar os arquivos “js” e incluir a tag “data-reveal-id” em seus links. Mais fácil que isso? Não existe!
Download e Informações


Site Oficial e Demonstração: http://www.zurb.com/playground/reveal-modal-plugin


É a sua chance de criar sites mais modernos, bonitos e funcionais.

fonte : http://www.tekzoom.com.br/reveal-plugin-jquery-para-criacao-de-modal-e-lightbox/

Vegas – Coloque um Slideshow como Background de seus sites

Hoje vamos apresentar um recurso que pode interessar muito aos designers e fotógrafos que pretendem criar um site para expor seus trabalhos. Mas claro que isso não se limita apenas a estes dois profissionais, muito pelo contrário, com certeza será útil para a criação de sites que precisam de um Slideshow de imagens que realmente chame a atenção do visitante.

Vegas – Seu background nunca mais será o mesmo!

Vegas – Plugin jQuery

O Plugin jQuery Vegas cria backgrounds em tela cheia em qualquer tipo de site. O mais interessante é a possibilidade de criar um Slideshow de imagens e fotos, que podem ser escolhidas pelos usuários ou até mesmo de forma aleatória.

Imagine criar um site de portfólio e ao invés de colocar no ar uma página com seus trabalhos poder mostra-los no fundo do site, enquanto o restante do conteúdo fica por cima. Com certeza um recurso muito bacana e que irá impressionar.

Download e Informações

Gostou da ideia? Então não perca mais tempo e conheça um pouco mais sobre o Vegas:

• Site Oficial do Plugin jQuery Vegas
• Demonstração Online

fonte : http://www.tekzoom.com.br/vegas-background/