[Resolvido] Qual o jeito certo e "definitivo" de se usar

Kaue Machado · Maio 1, 2011

Bom, estou começando com JQuery, sempre achei desnecessário para meus sites, tenho visto muitas criações incriveis com jQuery, e resolvi tentar.

O problema: Eu não consigo colocar os plugins nas minhas páginas! Básicamente o que encontro nos sites é algo do tipo:

Basic usage:

$('#counter').countdown({startTime: "01:12:32:55"});

Complete usage:

$('#counter').countdown({

stepTime: 60,

format: 'hh:mm:ss',

startTime: "12:32:55",

digitImages: 6,

digitWidth: 53,

digitHeight: 77,

timerEnd: function() { alert('end!!'); },

image: "digits.png"

});

Esse exemplo é deste plugin de countdown que estou tentando usar: http://code.google.com/p/jquery-countdown/

E todos os outros plugins que encontro também vem com as mesmas instruções. Eu consegui usar apenas o plugin do LightBox, nenhum outro.

Estou tentando fazendo o seguinte: Crio uma div, dentro da div eu coloco uma tag script com os códigos que estão no "Usage:" dentro. Mas simplesmente não aparece nada! Já baixei o script, verifiquei o local, está tudo correto, não sei porque não funciona...

Se alguém puder me ajudar, eu agradeço!

Lucas Peperaio · Maio 1, 2011

Ok, você inseriu na head a biblioteca jQuery também certo?

sua head deverá estar assim:

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!-- aqui você pode chamar os seus plug-ins -->
</head>

Kaue Machado · Maio 2, 2011

Ok, você inseriu na head a biblioteca jQuery também certo?

sua head deverá estar assim:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

</head>

Isso! a única diferença é que eu estava puxando direto do site do jQuery, será por isso? Vou mudar o código para puxar do CDN do google e já posto os resultados.

--edit--

É, não funcionou.

Vou postar o source pra ficar mais fácil:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPS! Ainda não...</title>
<link href="temporaria/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/htc8uxp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="/temporaria/jquery.countdown.min"></script>
</head>
<body>
<div id="canvas">
 <div id="content1">
<p style="font-weight: 900; font-size: 100px; line-height: 5px;">OPS!</p>
   <p style="line-height: 5px; font-size: 36px;">parece que nosso novo site</p>
   <p style="font-weight: 900; line-height: 5px;">ainda não está pronto...</p>
   </div>
 <div id="countdown"><script type="text/javascript">$('#counter').countdown({startTime: "01:12:32:55"});</script></div>
</div>
</body>
</html>

CSS (estilo.css)

html {
height: 100%;
background: url(/temporaria/imagens/body-bg.png) no-repeat fixed center center;
}

#canvas {
position: relative;
height: 500px;
width: 680px;
margin: 0 auto;
background: url(/temporaria/imagens/balloon.png) no-repeat fixed center center;
}
#content1 {
position: relative;
width: 630px;
height: 150px;
font-family: museo-slab-1, museo-slab-2, sans-serif, arial;
font-weight: 100;
font-size: 48px;
top: 100px;
left: 40px;
text-shadow: 1px 1px 0 #09C, -1px -1px 0 #F33, 0px 0px 3px #666;
line-height: 1mm;
}
#countdown {
position: relative;
width: 630px;
height: 150px;
font-family: museo-slab-1, museo-slab-2, sans-serif, arial;
font-weight: 100;
font-size: 48px;
top: 100px;
left: 40px;
text-shadow: 1px 1px 0 #09C, -1px -1px 0 #F33, 0px 0px 3px #666;
line-height: 1mm;
}

E o resultado é essa página: link

deveria aparecer um countdown embaixo do "ainda não está pronto"

Lucas Peperaio · Maio 2, 2011

Esta referência não está correta:

<script type="text/javascript" src="/temporaria/jquery.countdown.min"></script>

O certo seria:

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

E aqui também está errado:

<div id="countdown"><script type="text/javascript">$('#counter').countdown({startTime: "01:12:32:55"});</script></div>

o certo seria inserir o javascript desta parte na HEAD da página

Ai está o código arrumado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPS! Ainda não...</title>
<link href="temporaria/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/htc8uxp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="/temporaria/jquery.countdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
   $('#countdown').countdown({startTime: "01:12:32:55"}); });  
</script> 
</head>
<body>
<div id="canvas">
 <div id="content1">
       <p style="font-weight: 900; font-size: 100px; line-height: 5px;">OPS!</p>
   <p style="line-height: 5px; font-size: 36px;">parece que nosso novo site</p>
   <p style="font-weight: 900; line-height: 5px;">ainda não está pronto...</p>
   </div>
 <div id="countdown"></div>
</div>
</body>
</html>

Kaue Machado · Maio 2, 2011

Esta referência não está correta:

<script type="text/javascript" src="/temporaria/jquery.countdown.min"></script>

O certo seria:

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

E aqui também está errado:

<div id="countdown"><script type="text/javascript">$('#counter').countdown({startTime: "01:12:32:55"});</script></div>

o certo seria inserir o javascript desta parte na HEAD da página

Ai está o código arrumado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPS! Ainda não...</title>
<link href="temporaria/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/htc8uxp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="/temporaria/jquery.countdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
   $('#countdown').countdown({startTime: "01:12:32:55"}); });  
</script> 
</head>
<body>
<div id="canvas">
 <div id="content1">
       <p style="font-weight: 900; font-size: 100px; line-height: 5px;">OPS!</p>
   <p style="line-height: 5px; font-size: 36px;">parece que nosso novo site</p>
   <p style="font-weight: 900; line-height: 5px;">ainda não está pronto...</p>
   </div>
 <div id="countdown"></div>
</div>
</body>
</html>

Puts! Que vacilo meu esquecer do sufixo...

Então, agora o plugin apareceu, mas não funcionou ainda, http://www.imak.com.br, dá uma olhada, apareceram apenas os divisores " : : : " a contagem e as labels "Dias Horas Minutos Segundos" embaixo dos números não aparecem. Alguma idéia do que pode ser?

-- edit --

Já resolvi! Como os digitos eram determinados por uma imagem, eu precisava definir o local correto da imagem para o script funcionar.

Mas uma última dúvida: Muitos dos plugins que eu vi eram como esse, então pelas modificações que você fez no código fiz algumas suposições:

1) Eu sempre tenho que definir $(document).ready(function(){ antes do script?

2) Quando o script vem com o seguinte código: $('#countdown'), eu altero "#countdown" pela id da div que eu vou colocar no html e o javascript define o conteúdo da div dinamicamente?

3) Eu posso aplicar <div id="divdoplugin" style="propriedades"> para, por exemplo, alinhar o plugin, ou definir alguns estilo? Isso vai interferir no funcionamento do plugin?

Desde já agradeço!

Lucas Peperaio · Maio 2, 2011

1) Eu sempre tenho que definir $(document).ready(function(){ antes do script?

É recomendado, pois assim os scripts jQuery só irão comecar a manipular o DOM quando tudo estiver carregado.

2) Quando o script vem com o seguinte código: $('#countdown'), eu altero "#countdown" pela id da div que eu vou colocar no html e o javascript define o conteúdo da div dinamicamente?

Sim, o javascript altera o conteúdo da div dinamicamente através do DOM da página. Se usar $("#contdown") no script, terá que ter um elemento com ID contdown também.

3) Eu posso aplicar <div id="divdoplugin" style="propriedades"> para, por exemplo, alinhar o plugin, ou definir alguns estilo? Isso vai interferir no funcionamento do plugin?

Claro, você pode sim que não irá afetar o funcionamento do plug-in. Inclusive, você pode alterar diretamente com o ID da DIV...assim:

<style type="text/css">
#id{
  propriedade:valor;
}
</style>

(:

Kaue Machado · Maio 2, 2011

Valeu mesmo! Vou começar a pegar mais tutoriais sobre java e jquery, e logo mais criar coragem para me aventurar no ajax.

Só fiquei com uma dúvida... O que é o DOM da página? (rsrsrs não, não sei absolutamente nada de javascript)

Lucas Peperaio · Maio 2, 2011

Valeu mesmo! Vou começar a pegar mais tutoriais sobre java e jquery, e logo mais criar coragem para me aventurar no ajax.

Só fiquei com uma dúvida... O que é o DOM da página? (rsrsrs não, não sei absolutamente nada de javascript)

Procure tutoriais sobre javascript e jquery sim, aqui no imasters tem um monte deles. Entretanto, eu aprendi tudo o que eu sei de javascript aqui:

http://www.w3schools.com/js/default.asp

De uma forma simplificada, DOM é a sua página renderizada no seu navegador. Quando a sua página é carregada, todo o html, css e javascript é carregado no DOM. Para que você possa modificar, alterar, criar novos conteúdos dinamicamente, com javascript, é necessário alterar diretamente no DOM, visto que o javascript não pode alterar diretamente o arquivo. html da página.

Isso é necessário porque, os elementos da página estão em constante mudança, como o seu relógio, os números estarão sempre mudando. Para que essa mudança ocorra, o jQuery fica "manipulando" o DOM da página.

(:

Kaue Machado · Maio 2, 2011

Valeu pelas dicas, já entendo (1%) como o javascript funciona, já consigo até me virar com os scripts. Mas aproveitando o tópico, será que tem como você me dar mais uma ajuda? Na minha página (aqui: Clique aqui) Eu coloquei o countdown, será que tem como eu definir uma cor de fonte para XX semanas, outra cor para XX dias, e assim por diante? Tem alguma idéia de como faço isso? (não é possível diretamente pelo css)

Valeu! (denovo)

Lucas Peperaio · Maio 3, 2011

Tente assim:

<script type="text/javascript">
//dias
$("#countdown_amount:nth-child(1)").css("color","sua-cor-aqui");

//horas
 $("#countdown_amount:nth-child(2)").css("color","sua-cor-aqui");

//minutos
 $("#countdown_amount:nth-child(3)").css("color","sua-cor-aqui");

//segundos
 $("#countdown_amount:nth-child(4)").css("color","sua-cor-aqui");
</script>

insira a cor ali em "sua-cor-aqui", e mantenha este código na HEAD da sua página, abaixo de todos os scripts

Kaue Machado · Maio 3, 2011

Tente assim:

<script type="text/javascript">
//dias
$("#countdown_amount:nth-child(1)").css("color","sua-cor-aqui");

//horas
 $("#countdown_amount:nth-child(2)").css("color","sua-cor-aqui");

//minutos
 $("#countdown_amount:nth-child(3)").css("color","sua-cor-aqui");

//segundos
 $("#countdown_amount:nth-child(4)").css("color","sua-cor-aqui");
</script>

insira a cor ali em "sua-cor-aqui", e mantenha este código na HEAD da sua página, abaixo de todos os scripts

Ok! Obrigado mais uma vez, quando chegar em casa vou testar o script, Valeu!

Arquivado

[Resolvido] Qual o jeito certo e "definitivo" de se usar

Recommended Posts

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cruzamento de Bases

Consulta sem duplicação

Modelagem para questionário

Fóruns

Tempo Real

Informação importante