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.
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
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 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
}
Wasn't sure the best way to title this question...view the codepen in question:
http://codepen.io/LA1CH3/pen/NqPJEx
I want to have a list of elements that have a "read more" link that slides up with the title when hovered over. I want all the elements to be the same height, though they will all have different titles.
HTML:
<div class="a">
<img src="http://toronto3d.ca/wp-content/uploads/2011/10/3d-archiitectural-rendering-interior-classic-kitchen.jpg">
<div class="hover">
<h3>The Complete Works of William Shakespeare Bla Bla Overflow</h3>
<h4>Link here</h4>
</div>
</div>
CSS:
.a {
background-color: blue;
padding: 10px;
display: inline-block;
transition: 1s;
min-height: 250px;
}
h3 {
width: 100%;
}
.hover {
display: block;
background-color: red;
text-align: center;
position: relative;
height: 60px;
overflow: hidden;
transition: 1s;
width: 290px;
}
.b {
margin-top: -50px;
height: 100px;
}
JS:
$(".a").hover(function(e){
e.preventDefault();
$(this).find(".hover").toggleClass("b");
});
Essentially, I would like to have a div, which holds and image and a title underneath. When the image is hovered, the title would slide up, and from the overflow below the image, a "read more" link would slide up in place of where the title is. I have sort of implemented this, but it doesn't seem right. Also, if I have a title that is long, it will run off the hover div. Whats a good way to make this functionality work?
Try with absolute positioned elements. Modified codepen
.a {
background-color: blue;
border: 10px solid blue;
display: inline-block;
transition: 1s;
min-height: 250px;
overflow: hidden;
position: relative;
}
h3, h4 {
margin: 10px 0;
font-size: 1.2em;
line-height: 1.3;
}
.hover {
display: block;
background-color: red;
text-align: center;
position: absolute;
transition: 1s;
width: 100%;
left: 0;
bottom: -2.3em;
}
.b {
bottom: 0;
}
As #isherwood mentioned, you can omit JavaScript.
Have messed about with your codepen to suggest this
var origPanelText = $.trim($('#title').html());
$(".a").hover(function(e){
e.preventDefault();
$(this).find(".hover").toggleClass("b");
});
$('#title').mouseenter(function(){
var addition = 'Read more...';
var panelText = $.trim($('#title').html()).length;
var theTitle=$.trim($(this).html());
if (panelText > 30) {
var cutString = theTitle.substring(0, 30);
$(this).html(cutString+addition);
}
});
$('#title').mouseleave(function(){
$('#title').html(origPanelText);
});
Any use? EJK
I have a few tumbnails that I want to show some text on them in hover. I could make them dark in hover but do not know how to add text.
example: http://www.lenzflare.com/video-production-portfolio/
Here is what I have done:
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -150px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>
Demo: http://jsfiddle.net/jmXdh/79/
Well I'm going to assume you want this in a list:
There are a few main concepts here: Relative positioning and how it works with absolute positioning, Source order, and your centering technique.
When giving position:relative; to the box, you are saying "I am the boundary now - for any absolutely positioned things within me" (unless they are relative, and then like that on down the line) - So, the absolutely positioned cover thing you want to fade in - is absolutely positioned to one or more edges of the relative box. (most people use top: 0; left: 0;) --- so the absolute box is no longer in the "flow" and lives in it's own magic world determined by the relative parent.
Source order: your html will appear bottom up when stacking. so your cover thing should be below the image (in the html order) - you could use z-index - but there is no need to do that.
The negative margins are not really awesome and unneeded here. You can just text align center them. I would do some tests and put borders around stuff so you can see what it actually happening. ALSO - I encourage you to use box-sizing: border-box; on everything...
Read about: Border box
HTML
<ul class="thumbnail-list">
<li>
<a href="#" class="image-w">
<img alt="thumbnail"
src="http://placekitten.com/600/300" />
<div class="cover">
<h3>Title</h3>
<p>A little bit more about the thing</p>
</div>
</a>
</li>
</ul> <!-- .thumbnail-list -->
CSS
.thumbnail-list {
list-style: none;
margin: 0; paddingn: 0;
}
.thumbnail-list li {
float: left;
}
a {
text-decoration: none;
color: inherit;
}
.thumbnail-list .image-w {
display: block;
position: relative;
width: 16em;
}
.image-w img {
display: block;
width: 100%;
height: auto;
}
.cover {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
color: rgba(255,255,255,0);
text-align: center;
transition: all 1s linear;
}
.cover:hover {
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
transition: all .2s linear;
}
.thumbnail-list h3 {
font-size: 1.2em;
}
.thumbnail-list p {
font-size: .9em;
}
Here is the code in action on jsfiddle
you could consider something like this fiddle.
I copy my code here:
=================
HTML
<a href="/" class="img"
style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');"
onmouseover="this.firstElementChild.style.display='block'" >
<span class='play' onmouseout="this.style.display = 'none'";>
my lovely text here
<span>
</a>
=================
CSS
a {
min-height:104px;
min-width:184px;
display: inline-block;
overflow: hidden;
position: relative;
}
.play{
display:none;
color:#fff;
height:104px;
width:184px;
background-color:rgba(0,0,0,0.5);
position: absolute;
}
It sounds like you want to have a tooltip, if so then add a title to the a href:
<a href="/" title="This is my text" >
You could also use the tooltip in jQuery UI.
Otherwise, you could use the javascript onmouseover or the jQuery hover / mouseenter events to show the text in the play div. You may need to make sure that the z-index of the play div is higher than the img.
This works:
.pic{
background: url(http://i42.tinypic.com/2v9zuc1.jpg);
width: 200px;
height: 100px;
}
.text{
background: black;
text-align: center;
color: white;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.text:hover{
opacity: 0.8;
}
<div class="pic">
<div class="text">My Text</div>
</div>
DEMO
Add some text content to the play element.
<div class="play">Some text</div>
With added css for .play:
color:#fff;
font-size:16px;
Try this: http://jsfiddle.net/JU7zm/
<a href="/">
<div class="play">text</div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a .play {
display: none;
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 184px;
height: 104px;
color: #fff;
}
a:hover .play { display: block; }
Here's a simple JS solution you can insert into your HTML:
<script type="text/javascript">
document.getElementById("your_image_id").title = 'your hover text';
</script>