I am trying to add fullscreen navigation area, i already made it, but the transition is not working, but another CSS code is working, what i missed here? is there something i need to add in somewhere when using angular2?
Here is my component folder looked like :
below is my css file, navbar.component.css :
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
below is my html file, navbar.component.html :
<div id="myNav" class="overlay" *ngIf="displayNav">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" (click)="openNav()">☰ open</span>
below is my typescript file, navbar.component.ts :
import { Component } from '#angular/core';
#Component({
moduleId: module.id,
selector: 'app-navbar',
templateUrl: 'navbar.component.html',
styleUrls: ['navbar.component.css']
})
export class NavbarComponent {
public displayNav: boolean = false;
constructor() { }
openNav(){
this.displayNav = true;
console.log(this.displayNav);
}
closeNav(){
this.displayNav = false;
console.log(this.displayNav);
}
}
when i click on ☰ open it just show the div area with id="myNav" without transition, i already set the transition in class="overlay"
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
but i try the transition in usual html with javascript n css, it work, what do i missed here?
The transition isn't working because *ngIf removes the element from the DOM. You can achieve the desired effect in a few ways. Add and remove an active class on click with NgClass or use angular 2's animations, particularly transition(* <=> void, animation(...)).
I suggest the former because an element that should often disappear and reappear shouldn't use *ngIf.
If i got it right this is the only thing you need to change in your code:
HTML
<div id="myNav" class="overlay" [ngClass]="{active: displayNav}">
CSS
.overlay {
visibility: hidden;
opacity: 0
...
}
.overlay.active {
visibility: visible;
opacity: 1
}
Related
I was following 2 youtube tutorials while working on a website. One tutorial was on building a complete website that's responsive and the second was on creating an image gallery with a grid layout. The end result that I had when I finished working on my website looked good but I noticed two problems.
When you decrease the size of the website so that it takes up half of your screen, the navbar shrinks down and you get a hamburger menu. But clicking on the hamburger isn't opening it up like it should. There's an eventListener that should be adding and removing a class called active but nothing is happening.
This is the html code that contains the navbar and hamburger icon
<header>
Glitta Art Studio
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
This is the CSS for the media query
#media(max-width: 1140px) {
section {
padding: 50px 8%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
background: #2b2640;
transition: .3s;
}
header .navbar .active {
top: 70px;
}
.navbar a {
padding: 1.5rem;
display: block;
}
.col {
width: 50%;
margin-bottom: 10px;
}
}
And here's the JavaScript
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
menu.addEventListener("click", function () {
navbar.classList.toggle("active")
});
window.onscroll = () => {
navbar.classList.remove("active");
};
The second problem is technically not as big of a deal as the nav, but it's been more annoying for me to deal with so far. When you move your mouse over one of the images in the gallery section, a white box appears over the image with a title of the image and some information about it. But for some reason, the person in the tutorial added an a tag to the text in these boxes and I blindly added that to my project without thinking. Clicking on the box brings you back up to the homepage so I want to get rid of that completely and not have it link to anything. I'm not sure what the issue is with the CSS, but if you try to remove the a tags in the html and replace them with a regular p tag then it completely ruins the the grid of images and they all get stuck on one side of the screen.
Here's the HTML code of the gallery (There's 10 divs exactly like this with the same filler text and temporary image)
<div class="image-gallery">
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
Painting Title
</h3>
<span class="category">
text about piece here
</span>
</div>
</div>
</div>
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
Painting Title
</h3>
<span class="category">
text about piece here
</span>
</div>
</div>
</div>
And here's the CSS
.gallery {
margin: 0;
padding: 0;
position: relative;
}
.image-gallery {
width: 100%;
max-width: 950px;
margin: 0 auto;
padding: 50px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-auto-rows: 250px;
grid-auto-flow: dense;
grid-gap: 20px;
}
.image-gallery .image-box {
position: relative;
background-color: #d7d7d8;
overflow: hidden;
}
.image-gallery .image-box:nth-child(7n + 1){
grid-column: span 2;
grid-row: span 2;
}
.image-gallery .image-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.image-gallery .image-box:hover img {
transform: scale(1.1);
}
.image-gallery .image-box .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafaf2;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.5s ease;
z-index: 1;
}
.image-gallery .image-box:hover .overlay {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
opacity: 1;
}
.image-gallery .image-box .details {
text-align: center;
}
.image-gallery .image-box .details .title {
margin-bottom: 8px;
font-size: 24px;
font-weight: 600;
position: relative;
top: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box .details .category {
font-size: 18px;
font-weight: 400;
position: relative;
bottom: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box:hover .details .title {
top: 0px;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box:hover .details .category {
bottom: 0;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
color: #222222;
text-decoration: none;
}
Sorry for asking these basic questions. I haven't practiced coding anything in a long while so I've forgotten a lot of things.
Edit: I was able to fix the gallery issue. Now its just the hamburger issue that I have to deal with
You can try implying the function in the HTML element itself like this:
<div class="bx bx-menu" id="menu-icon" onclick="ToggleClassActive()"></div>
and you need to delete the eventlistener function and use this instead
function ToggleClassActive(){
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
navbar.classList.toggle("active");
}
You also need to ensure that the script is after the elements(The best place to place your script is right before the
And could you please show the error which occurs in the console
TL DR it should be display: flex; opacity: 1
I have a menu which works in the following way:
On mouseenter or click, the menu is shown (display: flex, opacity: 1)
On mouseleave or click (outside the menu area) the menu is hidden (display: none, opacity: 0)
The problem occures when I try to "open" the menu in the Dev. Tools on 320x480 resolution.
When I click on the menu area, only #envelope does the transformation. #links (should also transform but don't becouse of the following reasons) which should get display: flex actually gets display: none assigned to it.
Note: It's working in full screen. Something is bothering him with the 320x480 res.
If I can elaborate or provide any additional information, let me know.
Thank you
function hide (){
document.getElementById("links").style.display = "none";
};
function show (){
document.getElementById("links").style.display = "flex";
document.getElementById("links").style.opacity = "1";
};
var menu = document.getElementById("menu");
menu.addEventListener("mouseenter", show);
menu.addEventListener("mouseleave", hide);
menu.addEventListener("click", show);
document.addEventListener("click", function (){
if (this != menu){
document.getElementById("links").style.display="none";
}
});
#menu{
height: 10vh;
background-color: red;
text-align: center;
transition: all 1s ease-out;
padding-top: 5vh;
}
#menu:hover{
color: red;
}
#envelope{
height: 0;
display: block;
background-color: blue;
min-width: 100%;
z-index: 1;
position: absolute;
left: 0;
content: "";
opacity: 0;
transition: all 1.3s ease-out;
}
#links{
height: 0;
display: none;
background-color: pink;
justify-content: center;
z-index: 2;
min-width: 100%;
opacity: 0;
transition: all 1s ease-in;
}
#google{
margin-top: -1vh;
width: 150px;
}
#mysite{
padding-left: 5%;
margin-top: -1vh;
width: 150px;
}
#menu:hover #envelope{
height: 100px;
opacity: 1;
}
#menu:focus #envelope{
height: 100px;
opacity: 1;
}
#menu:hover #links{
opacity: 1;
height: 300px;
}
#menu:focus #links{
opacity: 1;
height: 300px;
}
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div style="width: 20%;"></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>
</div>
Don't use transition: all because the browser then need to loop through all properties, and it might cause lag.
Don't use position: absolute unless you have to.
I removed #envelope and inserted the "Click here ..." text in a label (explanation why below).
I arranged classes so I didn't have to repeat code.
Pure CSS solution below.
I made a little CSS hack, where I used a label and a checkbox to simulate a click. So when clicking on the label#menu-toggler, the (hidden) checkbox is checked, which triggers #menu-toggler:checked ~ #links.invisible. I had to add another class to #links, otherwise the low specificity wouldn't trigger the change.
html, body { /* new */
margin: 0px;
padding: 0px;
}
#menu {
height: 15vh; /* changed */
background-color: red;
text-align: center;
margin: 0.5rem; /* new */
}
#menu > input#menu-toggler { /* new */
display: none;
}
#menu > .tagline { /* new */
display: block; /* to get padding to work */
padding: 5vh 0px;
transition: opacity 1s;
}
#menu:hover > .tagline { /* new */
opacity: 0;
}
#menu > .tagline, /* new */
#menu > #links /* new */
{
transition-timing-function: ease-out;
}
#menu > #links {
display: flex;
justify-content: space-around; /* changed */
position: relative; /* changed */
left: -0.5rem; /* changed */
top: -5vh; /* changed */
opacity: 0;
height: 0;
width: 100vw; /* changed */
z-index: 1;
overflow: hidden; /* new */
background-color: pink;
transition-property: height, opacity;
transition-duration: 1.3s;
}
#menu:hover #links,
#menu-toggler:checked ~ #links.invisible { /* new */
height: 150px !important; /* changed */
opacity: 1 !important;
}
#links #google,
#links #mysite
{
width: 150px;
}
<div id="menu">
<input id="menu-toggler" type="checkbox" />
<label for="menu-toggler" class="tagline">Click here to browse the internet.</label>
<div id="links" class="invisible">
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>
I want to show a popup message when i click on select button like "you have selected this event"
how to do in angular 2?
<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
SELECT
</button>
You can use a structural directive *ngIf to create popup, my example:
<button type="button"(click)="popup = true">
SELECT
</button>
<div class="overlay" *ngIf="popup">
<div class="popup">
<h2>Here i am</h2>
<a class="close" (click)="popup = false">×</a>
<div class="content">
you have selected this event
</div>
</div>
</div>
some styles:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
cursor: pointer;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
https://stackblitz.com/edit/angular-g4rdha?file=src%2Fapp%2Fapp.component.ts
Hope it helps!
Add Onclick event to parent page. For popup just add a modal create with reference of a seperate page in order to customize pop up seperately.
let test= this.modalCtrl.create('popuppage',
{
message: 'message',
(Enter all parameters you want to pass to the pop up page)
}
,{cssClass:'settings-modal'});
test.present();
Now you can create your pop up page named 'popuppage'as you require
May be you are looking for toaster in the screen which you can add to your project by installing third party UI library like primeNg and it is good to use.
Please look it here.
https://primefaces.org/primeng/#/toast
I am currently working on a library bookkeeping service for my school. I am using Electron to create practically a website, which will then be compiled into a cross-platform application afterward. However, I have run into an early problem with angular routing. I plan to use angular navigation because it removes the white buffer between switching pages and in this app I plan to be switching pages frequently.
So far this is my home screen, the animation inside works fine without the ng-view container, but then the links don't work, however, when I put the ng-view container, the animation and whole page altogether seem frozen. Also referring to the root folder for routing doesn't seem to be working for me, so I had to use ../ to go up one folder.
Here is my code.
var app = angular.module("Librain", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "../HomePage/homePage.html"
})
.when("/people", {
templateUrl: "../MembersPage/members.html"
})
});
body {
background-color: #83DDF7;
margin: 0;
padding: 0;
/*Sets to fill background*/
min-height: 800px;
min-width: 1024px;
/*Sets up scaling*/
width: 100%;
height: auto;
/*Sets up the positioning*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*==========Title Box For Title===========*/
.SideBox {
/*positioning and sizing*/
position: fixed;
text-align: center;
top: 55%;
left: 0;
width: 0%;
height: 18%;
/*color of the box with opacity*/
background-color: rgba(255, 255, 255, .8);
box-shadow: 0 0 .25em rgba(158, 67, 7, .25);
border-radius: .25em;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
/*The */
animation: slideIn 3s forwards;
}
#keyframes slideIn {
/*
Making the box slide into the screen
by increasing the width over 3 seconds
*/
0% {
width: -5%;
}
100% {
width: 30%;
}
}
/*The styling for the text within the content box*/
.SideText {
color: #0090AD;
font-size: 0px;
font-family: Arial;
text-align: left;
animation: appearingText 2s forwards;
animation-delay: 1s;
}
#keyframes appearingText {
/*
Making the box slide into the screen
by increasing the width over 3 seconds
*/
0% {
font-size: 0px;
}
100% {
font-size: 125px;
}
}
/*=============Navigation bar============*/
ul {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: right;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 28px 32px;
}
li a:hover {
text-decoration: none;
font-weight: bold;
}
li a:hover:not(.active) {
color: black;
}
li a.active {
color: white;
background-color: #0090AD;
}
<!DOCTYPE html>
<html ng-app="Librain">
<head>
<!--Sourcing jquery, css, and necessary pages-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<link rel="stylesheet" href="homePageStyles.scss">
<script src="homePage.js"></script>
<title>Librain</title>
</head>
<body>
<div class="SideBox">
<div class=SideText>Librain</div>
</div>
<ul>
<li><a class="active" href="#!">Home</a></li>
<li>Members</li>
</ul>
<ng-view></ng-view>
</body>
</html>
Thank you for helping me, I am new to this and have never attempted an app before. I appreciate all the help I can get.
Also is it possible to scale the text within the sidebox with the box itself? As I make the window smaller, it gets out of place and is too large for the box.
Initially all my page content is shown. When I click the button (in the footer) called 'about us' my overlay covers the page and shows some info. When I am done reading and I hit the 'X' in the right corner the overlay closes (as it should do) but I am left with a webpage without my content. The same content that was there prior to clicking the 'about us' button is now hidden.
Why is this?
My HTML:
<footer>
<a id="footer_" href="#" onclick="openNav()">☰ Over ons </a>
</footer>
My JS:
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
My CSS:
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
the default content on the page:
HTML:
<div id="content" >
<!-- Intro -->
<article id="menu_a">
<h2>Introduction</h2>
<figure>
<img src="http://placehold.it/150x150" alt="Intro image"/>
</figure>
<p>
some text here bla bla bla....
</p>
</article>
</div>
JSFIDDLE: https://jsfiddle.net/t60623gj/
I would suggest using jQuery for the job, would make it much easier.
Something along the lines of :
$(document).ready(function() {
$('#footer').click(function() {
$('#myNav').slideUp();
});
$('.closebtn').click(function() {
$('#myNav').slideDown();
});
});
Depending on what you want your nav to do exactly.
Also there seems to be a problem with your fiddle - it only displays your footer.
EDIT
Or if you want to manipulate the height attribute of the element you can use .animate()
Hope this helps.