Como utilizar plugin jQuery?

Camila Pimentel · August 26, 2020 at 12:27 AM

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 August 26, 2020 at 12:29 AM by Camila Pimentel

Cerzedelo · August 26, 2020 at 07:33 AM

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>

M6 · August 26, 2020 at 08:42 AM

@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 August 26, 2020 at 08:54 AM by M6

Zex · August 26, 2020 at 08:58 AM

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 August 26, 2020 at 08:58 AM by Zex

Camila Pimentel · August 26, 2020 at 11:08 AM

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 August 26, 2020 at 11:11 AM by Camila Pimentel

M6 · August 26, 2020 at 11:15 AM

@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".

Camila Pimentel · August 26, 2020 at 11:25 AM

@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.

M6 · August 26, 2020 at 11:30 AM

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?

Camila Pimentel · August 26, 2020 at 11:43 AM

@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 August 26, 2020 at 11:55 AM by Camila Pimentel

Cerzedelo · August 26, 2020 at 12:35 PM

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 August 26, 2020 at 12:36 PM by Cerzedelo

Camila Pimentel · August 26, 2020 at 12:43 PM

@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 August 26, 2020 at 12:46 PM by Camila Pimentel

Cerzedelo · August 26, 2020 at 01:06 PM

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)

Como utilizar plugin jQuery?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information