Jump to content
Camila Pimentel

Como utilizar plugin jQuery?

Recommended Posts

Camila Pimentel

Olá, pessoal! Sou nova por aqui e inscrevi-me propositadamente para fazer a pergunta mais n00b que provavelmente já circulou no forum. Desculpem, desde já.

Preciso muito de utilizar este plugin: https://www.jqueryscript.net/other/jQuery-Plugin-To-Play-Audios-On-Scroll-AudioFade.html, mas nem sequer sabia o que era jQuery há dois dias atrás. Tenho andado a tentar safar-me sozinha mas está difícil.

Já fiz o download do plugin e da jQuery library. Segundo o que fui pesquisando pareceu-me que devia inserir o plugin no html do blog desta forma, mas não está a resultar (nada acontece).

<head><script src="jquery.min.js"></script>

<script src="js/AudioFade.js"></script></head>

<body>
  <audio loop id="scrollaudio" src="sound/complex.mp3"></audio>
  <audio loop id="scrollaudio2" src="sound/amok.mp3"></audio>
  <audio id="scrollaudio3" src="sound/correct.wav"></audio>

(...)

<script> $(function() { var first = new AudioFade('#scrollaudio', 300, 1300, 700).init();
                       var second = new AudioFade('#scrollaudio2', 2200, 3000).init();
                       var third = new AudioFade('#scrollaudio3', 4000).init(); }); 
  </script>
</body>

O que estou a fazer de errado? Muito agradecida desde já.

Edited by Camila Pimentel

Share this post


Link to post
Share on other sites
Cerzedelo
6 horas atrás, Camila Pimentel disse:

<html>
<head>
<link rel="stylesheet" href="../ficheiro.css">
</head>
<body>
....
<script src="../jquery.js"></script>
<script>
$(function(){
...
});
</body>
</html>

Olá, pessoal! Sou nova por aqui e inscrevi-me propositadamente para fazer a pergunta mais n00b que provavelmente já circulou no forum. Desculpem, desde já.

Preciso muito de utilizar este plugin: https://www.jqueryscript.net/other/jQuery-Plugin-To-Play-Audios-On-Scroll-AudioFade.html, mas nem sequer sabia o que era jQuery há dois dias atrás. Tenho andado a tentar safar-me sozinha mas está difícil.

Já fiz o download do plugin e da jQuery library. Segundo o que fui pesquisando pareceu-me que devia inserir o plugin no html do blog desta forma, mas não está a resultar (nada acontece).


<head><script src="jquery.min.js"></script>

<script src="js/AudioFade.js"></script></head>

<body>
  <audio loop id="scrollaudio" src="sound/complex.mp3"></audio>
  <audio loop id="scrollaudio2" src="sound/amok.mp3"></audio>
  <audio id="scrollaudio3" src="sound/correct.wav"></audio>

(...)

<script> $(function() { var first = new AudioFade('#scrollaudio', 300, 1300, 700).init();
                       var second = new AudioFade('#scrollaudio2', 2200, 3000).init();
                       var third = new AudioFade('#scrollaudio3', 4000).init(); }); 
  </script>
</body>

O que estou a fazer de errado? Muito agradecida desde já.

Em primeiro lugar os ficheiros JavaScript não são inseridos na tag <head> , mas sim no final da página antes das funções em JavaScript, pois se forem adicionados depois das funções estas não funcionarão.

Na tag <head> adicionam-se os ficheiris CSS para estlizarem a página.

<html>
<head>
<link rel="stylesheet" href="ficheiro.css">
</head>
<body>
....
<script src="../jquery.js"></script>
<script>
$(function(){
...
});
</body>
</html>

Outro pormenor a ter em atenção é a forma de indicar os caminhos para o local onde estão os ficheiros, pois se o ficheiro não for devidamente carregado as funções não funcionarão. Pode sempre utilizar o ficheiro carregado via CDN, mas para isso tem de estar online, ligada à internet, mas em principio deverá funcionar.

CDN para o jquery

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

 

Share this post


Link to post
Share on other sites
M6

@Camila Pimentel @Cerzedelo a informação sobre a localização da tag <script> no final do <body> não está inteiramente correta, é, digamos, antiquada.

Historicamente o javascript (ficheiros e scripts) eram colocados no <head> - por várias razões, em particular por uma questão de organização.
Depois, por questões de evolução/complexidade os programadores passaram  a não manipular o DOM enquanto o documento estava a ser carregando, esperando até que o documento seja todo carregado para depois modificá-lo.
Porquê?
Porque o browser não sabe que o ficheiro de script não vai modificar o documento até que ele seja todos carregado e executado, o parser pára a análse.

Hoje em dia esta técnica já não é necessária pois os atributos "async" e "defer" resolvem esta questão, e a norma atualmente é colocar as a tag <script> novamente no <head>.

Nota: a documentação/tutorias do jQuery mostram as tags de <script> no <head>.

Edited by M6

10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Zex

Uma coisa que é aconselhável fazer é ver que erros aparecem na consola.

Isso já costuma indicar onde estão a maior parte dos erros.

(Clicar com a tecla direita na página / Inspecionar / Consola)

Edited by Zex

Share this post


Link to post
Share on other sites
Camila Pimentel

Muito agradecida, @Cerzedelo, @M6 e @Zex.

@Zex, fiz o que me recomendou. O que me surgiu foi:

[Error] Failed to load resource: the server responded with a status of 404 () (AudioFade.js, line 0) ......http://nomedoblog.blogspot.com/js/AudioFade.js
[Error] Failed to load resource: the server responded with a status of 404 () (jquery.min.js, line 0)  ......http://nomedoblog.blogspot.com/jquery.min.js
[Error] Refused to execute https://nomedoblog.blogspot.com/jquery.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute https://nomedoblog.blogspot.com/js/AudioFade.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Failed to load resource: the server responded with a status of 404 () (complex.mp3, line 0) http://nomedoblog.blogspot.com/sound/complex.mp3
[Error] Failed to load resource: the server responded with a status of 404 () (amok.mp3, line 0)      http://nomedoblog.blogspot.com/sound/amok.mp3
[Error] Failed to load resource: the server responded with a status of 404 () (correct.wav, line 0)     http://nomedoblog.blogspot.com/sound/correct.wav

Desculpem, de novo, e podem crer na vergonha que uma leiga como eu passa por vos incomodar, mas que quer isto dizer? Que estou a fazer de errado? Fiz o download do plugin e da jQuery library mas claramente o problema é que não estou a saber encaminhá-los para o blog. Agradecida.

Edited by Camila Pimentel

Share this post


Link to post
Share on other sites
M6

@Camila Pimentel, não há vergonha nenhuma no processo de aprendizagem, ninguém aqui nasceu ensinado.
Os erros que ai estão - 404 - é indicativo de que os ficheiros não foram encontrados.

Revê os caminhos para o mesmo, tendo em atenção que os caminhos relativos físicos do lado do servidor não têm qualquer relação com os caminhos lógicos do URL.

Ou seja, se clicares em http://nomedoblog.blogspot.com/js/AudioFade.js vais ter o tal 404 - ficheiro não encontrado - o que quer dizer que o ficheiro AudioFade.js (no servidor) ou não existe, ou está noutro local por engano.

Tem igualmente atenção ao nome dos ficheiros pois um "A" não é a mesma coisa que um "a", em particular em sistemas Linux onde os ficheiros são "case sensitive".


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Camila Pimentel

@M6, obrigado pela força, de verdade.

Não entendo porque vai à procura dos ficheiros em supostas páginas do blog. Onde deverei guardar o plugin e a jQuery library? Parece que não estou a direccioná-los bem ou não estão no sítio correcto.

Share this post


Link to post
Share on other sites
M6

Não sei se posso dar alguma ajuda nesse ponto uma vez que sendo o Blogspot um blog que não é teu, acho que o acesso deve ser limitado - penso eu.

Uma forma de saberes a localização dos ficheiros é veres onde está a raiz do site e "contares" a partir dai.

Quando carregas o ficheiro para lá, sabes onde fica?


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Camila Pimentel

@M6, confesso que não compreendi. Já estou para aqui a rir-me.

Eu sei a localização dos ficheiros. Eheh. Os ficheiros de que fala são o plugin, a jQuery library e os áudios, certo? Está tudo numa pasta no meu ambiente de trabalho.

<head><script src="jquery.min.js"></script>

<script src="js/AudioFade.js"></script></head>

<body>
  <audio loop id="scrollaudio" src="sound/complex.mp3"></audio>
  <audio loop id="scrollaudio2" src="sound/amok.mp3"></audio>
  <audio id="scrollaudio3" src="sound/correct.wav"></audio>

Eles deste modo estão mal direccionados? Não deveria bastar colocar deste modo para que os procure e encontre no meu computador?

Edited by Camila Pimentel

Share this post


Link to post
Share on other sites
Cerzedelo
52 minutos atrás, Camila Pimentel disse:

@M6, confesso que não compreendi. Já estou para aqui a rir-me.

Eu sei a localização dos ficheiros. Eheh. Os ficheiros de que fala são o plugin, a jQuery library e os áudios, certo? Está tudo numa pasta no meu ambiente de trabalho.


<head><script src="jquery.min.js"></script>

<script src="js/AudioFade.js"></script></head>

<body>
  <audio loop id="scrollaudio" src="sound/complex.mp3"></audio>
  <audio loop id="scrollaudio2" src="sound/amok.mp3"></audio>
  <audio id="scrollaudio3" src="sound/correct.wav"></audio>

Eles deste modo estão mal direccionados? Não deveria bastar colocar deste modo para que os procure e encontre no meu computador?

Assim à primeira vista e pelo que é descrito no código, na pasta onde está o ficheiro do html, deverá ter o ficheiro do jquery.

Depois dentro dessa pasta, deverá ter outras 2 pastas, uma identificada por js, onde no seu interior estará o ficheiro AudioFade.js, e um outra identificada por sound onde deverá colocar os ficheiros de som

Mas se pretender por o projecto online, aí o aconselhável é utilizar o endereço do CDN do jquey e dos outros ficheiros se existir essa possibilidade. Ver: https://code.jquery.com/

Edited by Cerzedelo
  • Vote 1

Share this post


Link to post
Share on other sites
Camila Pimentel

@Cerzedelo, parece que então o problema é esse: não tenho nenhuma pasta com o ficheiro html. Estou a editar o html de um template directamente no blogspot. Não é possível usar o plugin deste modo?

Edited by Camila Pimentel

Share this post


Link to post
Share on other sites
Cerzedelo
16 minutos atrás, Camila Pimentel disse:

@Cerzedelo, parece que então o problema é esse: não tenho nenhuma pasta com o ficheiro html. Estou a editar o html de um template directamente no blogspot. Não é possível usar o plugin deste modo?

Neste caso a não ser que tenha acesso ao servidor onde está alojada a página do blogspot e consiga colocar o referido plugin, (desconfio que não tenha esse privilégio) somente por via CDN é que conseguirá indicar o caminho para o referido plugin. (Desconheço se esse plugin tenha essa possibilidade)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.