Category Archives: JQuery

Dicas jQuery, plugins jQuery…

Adicionando código jQuery no WordPress

Fala meu povo!!!

Seguinte, vamos dar uma olhada em como adicionar um script próprio no WordPress usando o jQuery.

Estou usando o tema Twentytwelve do WordPress.

Na pasta do tema do WordPress, abra uma pasta chamada js.

Nela vamos criar o arquivo “script.js”

Criado o arquivo coloque o script desejado jQuery dentro dele e salve.. como no exemplo:


jQuery(document).ready(function(){
jQuery('#teste').html("teste de exemplo");

\\seu código aqui

});

Importante observer que ao invés de usar o ” $(document).ready(function(){ \\………… }); “, utiliza-se “jQuery(document).ready(function(){ \\………… }); “.

Salve o arquivo scritp.js , e vamos editar outro arquivo functions.php que esta também na pasta do tema.

Nele vamos inserir o seguinte código no final do arquivo.


function adicionandoScript () {
 wp_register_script('nome-do-seu-novo-script',
 get_template_directory_uri() . '/js/script.js',
 array('jquery')
 );
 wp_enqueue_script('nome-do-seu-novo-script');
 }
add_action('wp_enqueue_scripts', 'adicionandoScript');

Pronto!

Lembre-se de limpar o cache do Wordpres se estiver habilitado, e do navegador.

Agora é só curtir o resultado!

Abs!

Código Jquery para scrollTop plugin

Fala galera!

Hoje vamos de mais uma dica de jquery….

Vou ensinar um modo beeem básico de como desenvolver um pequeno script em jQuery para criar seu próprio funcionalidade scrollTop ( aqueles botõeszinhos que retornam ao topo da página automaticamente).

Unha neles…

Primeiramente adicione em sua página o seguinte Código HTML:

<span class="push-top"></span>

Adicionamos alguns elementos básicos de CSS.

É importante observar… o position: fixed, e o bottom:- 70px.

 

O bottom: -70px, vai dar o efeito visual de subir…do botão.


.push-top{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 -webkit-transform: rotate(-90deg);
 bottom: -70px;
 right:60px;
 opacity: 1;
 z-index: 4;
 }
 .push-top:hover{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 bottom: -70px;
 right:60px;
 opacity: 0.3;
 z-index: 4;
 }

E agora o código jQuery…


$(document).ready(function(){<span style="line-height: 1.714285714; font-size: 1rem;">$('.push-top').click(function(){</span>

$('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
 });

$(window).scroll(function(event){
 if($(window).scrollTop() > 200){
 $('.push-top').stop().animate({bottom:'40px'}, 300);
 }
 if($(window).scrollTop() < 200){
 $('.push-top').stop().animate({
 bottom: '-70px'
 }, 300);
 return false;
 }
 });

Pronto! Adicionado, você pode estilizar o CSS a sua maneira… como bem… entender… para conferir dá uma olhada aqui mesmo no blog, pois esse script tá rodando aqui….

Abs!