0
Take a good look at the image below;
This test just above was done in a file HTML with CSS, and it’s working perfectly, but I did the same test in an Angular project with the same code and it didn’t work correctly, what happens is that the menu with the sign (More) appears on screen, but the menu that is hidden does not appear, is the same code and I don’t understand why it doesn’t work;
I put the Javascript import in the main Angular file in index.html, it looked like this;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AlgamoneyUi</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<app-root></app-root>
</body>
<script src="assets/script/script.js"></script>
</html>
This is the file app.component.html
<header>
<h1>Estrutura One Page</h1>
</header>
<main>
<nav>
<div class="menu"><i class="material-icons"></i></div>
<div class="nav-itens">
<a href="#topo" class="tooltip" data-tooltip="Topo fixo">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
<a href="#botao" class="tooltip" data-tooltip="Botões">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
<a href="#tolltips" class="tooltip" data-tooltip="Tooltips">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
<a href="#parallax" class="tooltip" data-tooltip="Parallax">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
</div>
</nav>
<section>
<div id="topo" class="section_info">
<div class="row container">
<h2 class="header">Topo Fixo</h2>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressсo. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem1.jpg"></div>
</div>
</section>
<section>
<div id="botao" class="section_info">
<div class="row container">
<h2 class="header">Botões de navegação</h2>
<p>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissсo, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infáncia. Várias versões tem evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem2.jpg"></div>
</div>
</section>
<section>
<div id="tolltips" class="section_info">
<div class="row container">
<h2 class="header">Tooltips</h2>
<p>Existem muitas variações das passagens modelo da indústria tipográfica e de impressсo. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem3.jpg"></div>
</div>
</section>
<section>
<div id="parallax" class="section_info">
<div class="row container">
<h2 class="header">Parallax</h2>
<p>Existem muitas variações das passagens do Lorem Ipsum disponíveis, mas a maior parte sofreu alterações de alguma forma, pela injecção de humor, ou de palavras aleatórias que nem sequer parecem suficientemente credíveis. Se vai usar uma passagem do Lorem Ipsum, deve ter a certeza que não contém nada de embaraуoso escondido no meio do texto. Todos os geradores de Lorem Ipsum na Internet acabam por repetir texto pré-definido, como necessário, fazendo com que este seja o primeiro verdadeiro gerador na Internet. Usa um dicionário de 200 palavras em Latim, combinado com uma dúzia de modelos de frases, para gerar Lorem Ipsum que pareуam razoáveis. Desta forma, o Lorem Ipsum gerado é sempre livre de repetição, ou de injecção humorística, etc.</p>
</div>
</div>
</section>
</main>
<footer>
<p>CURSO DEVMEDIA</p>
</footer>
This is the Javascript;
$(document).ready(function() {
$("nav").mouseover(function(){
$(".nav-itens").addClass("nav-show");
});
$("nav").mouseout(function(){
$(".nav-itens").removeClass("nav-show");
});
var page = $('html, body');
$('a.tooltip').click(function() {
page.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$(document).scroll(function(){
var topWindow = $(window).scrollTop();
if(topWindow > 60) {
$("header").addClass('header_fixed');
}else {
$("header").removeClass('header_fixed');
};
});
});
Can anyone identify the problem?
(1) Your style and js Imports get better if performed within the angular.json or angular-cli.json it depends on which version you are from the angular-cli. I believe that this helps in this part as per css and js in angular-cli (2) Are you using jquery? I don’t see the import of it, maybe that’s why it’s not working. I advise using the npm package manager for these installations if you are not using it yet.
– jcebidanes
you were right, really had errors in the browser console and was missing Jquery Imports, but I put the necessary imposition that was missing, and now is not generating more errors in the MSDOS console where I run
ng serverand is not generating more errors in the browser console, but still does not work.– wladyband
i have imported the correct way the javascript files, if you are in doubt here is my project in the Github repository https://github.com/wladyband/blog/blob/master/src/index.html
– wladyband
@jcebidanes that the tests putting in the angular-cli file , but also did not work.
– wladyband
Puts the Jquery code inside a Ngoninit in the Component where you call this button (more).
– jrr