I'm trying to make an overlay design, I have a button when clicked, a new overlay div will be displayed on top my main div , how ever I can't seem to figure out why the overlay div I have created is not appearing. I have watch tutorials and search similar situation like mine but I cant understand why it is not showing.
This is my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Liu+Jian+Mao+Cao&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="thiscss/randomqoutes.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>RCaT11</h2>
<div class="qoutewrapper">
<h1>Have an Inspirational day!</h1>
<button id="btn">Genererate Qoute</button>
</div>
<div class="overlaycontainer">
</div>
</div>
</body>
<script type="text/javascript" src="javascript/randomqoutes.js"></script>
</html>
this is my css file, I have set the "overlaycontainer" class display to none to that it will not show up first until the button is clicked :
body {
background: linear-gradient(to left, #ED8F20, #EBD626);
margin: 0;
padding: 50px;
}
.container {
display: flex;
}
.qoutewrapper {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
width: 900px;
height: 250px;
margin: 0 auto;
margin-top: 10%;
padding: 10px;
display: flex
}
.qoutewrapper h1 {
white-space: nowrap;
font-weight: 700;
font-size: 70px;
margin: 0 auto;
position: relative;
left: 90px;
margin-top: 50px;
}
h2 {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
font-size: 2em;
position: absolute;
left: 90%;
color: red;
float: right;
}
.container button {
color: rgba(26, 25, 25, 0.897) !important;
text-transform: uppercase;
background: none;
padding: 12px;
border: 2px dotted rgba(26, 25, 25, 0.897) !important;
font-weight: 800;
float: right;
margin-top: 200px;
}
.container button:hover {
color: #EBD626 !important;
background: rgba(26, 25, 25, 0.897);
border-color: none !important;
transition: all 0.4s ease 0s;
display: flex;
}
.overlaycontainer {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
display: none;
}
this is my javascript file, I have written that when button is clicked the display will be set to "flex" to display the "overlaycontainer", however it is not showing up,
document.getElementById('btn').addEventListener('click', function() {
document.querySelector('.overlaycontainer').style.display = "flex";
})
position your .overlaycontainer by adding these CSS lines and it will show up.
position: absolute;
left: 0;
top: 0;
An element must have a height and width to show up, it does not mean we always have to set width and height to elements. What was happening is, you were setting the height of the .overlaycontainer to 100% and it was not taking it and for that its parent must-have fix width to work.
Normally overlay is positioned.
The position property is used to manipulate the location of an element.
The position:absolute is always refer to its parent, which needs to be set as position:relative.
When you change the left or top value the position of the .overlaycontainer changes. if you give position: relative to the parent or any grandparents element of the overlay (in must of the cases you have to), it will change its location on that respect. if any of the element's ancestors has no position: relative which is our case, the element will be relative to the body.
Related
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
I am making a page with two main parts, div a on the left half of the screen which will have text, and div b on the right half which will have a really tall image.
Originally, I imagined having the left side fixed so that when the user scrolls down to see the entire image, the text on the left stays visible.
However, I realized sometimes the text may overflow beyond the screen, and the fixed div would not scroll down to show it.
Below is the image of what I'm talking about:
My question is: can I make the left div scroll down until the bottom of the div is revealed, and then stays fixed as the user continues to scroll?
If that didn't make sense, an example is the right bar of the Facebook main page at
https://www.facebook.com
Here is the code I have so far: https://pastebin.com/ZPVEbjX9
html,
body {
padding: 0;
margin: 0;
background-color: #FFF;
color: #000;
display: flex;
font-family: Montserrat;
}
div#a {
position: fixed;
width: 40%;
height: 100%;
}
div#box {
position: absolute;
width: 70%;
height: 100%;
margin: auto 0;
background-color: #FFFAAA;
}
div#b {
position: relative;
width: 60%;
height: 100%;
margin-left: 40%;
background-color: #000;
}
div#backToTop {
position: fixed;
width: auto;
height: 30px;
right: 20px;
bottom: 20px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
a#backToTop {
text-decoration: none;
font-size: 15px;
color: #FFF;
padding: 10px;
vertical-align: middle;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="stylesBig.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<title>G</title>
</head>
<body>
<a name="top"></a>
<div id="a">
<div id="box">
<p>a</p>
</div>
</div>
<div id="b">
<img src="image.png" style="width: 100%;" />
<div id="backToTop"><a id="backToTop" href="#top">back to top</a></div>
</div>
</body>
</html>
What am I doing wrong and how can I fix it?
I saw this offer on a website which was being displayed above the navbar.
It looked like this once clicked on the arrow on the top right corner.
And how can I make it responsive?
Can anyone share how to implement such a solution? Are there any already existing solutions which I can reuse?
It is simple to make one by yourself.
The main steps are:
create a div element, fixed to the top, height zero
put a button to the top right corner
bind an event to the button, when clicked, toggle the height of the div.
Here's an example: http://codepen.io/SLRXXX/pen/YWVdJZ
$('.button').on('click', function () {
$('.top').toggleClass('active');
});
.top {
position: fixed;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.strip {
height: 0;
background-color: yellow;
transition: height 0.5s;
line-height: 40px;
text-align: center;
overflow: hidden;
}
.top.active .strip{
height: 40px;
}
.button {
position: absolute;
top: 0;
right: 5px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
background-color: yellow;
color: #fff;
cursor: pointer;
}
.arrow-down {
transition: transform 0.5s;
}
.top.active .arrow-down{
transform: rotate(180deg)
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="top">
<div class="strip">
some content
</div>
<div class="button">
<i class="glyphicon glyphicon-chevron-down arrow-down"></i>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
I am just a beginner in coding with HTML/CSS, and I am having trouble trying to float a specific div. Every time a type: "float:center" it will not work. Any ideas? (The div bellow will have "*" around it.)
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Java Source-Home</title>
<link rel="stylesheet" type="text/css" href="Java-Source-CSS.css">
</head>
<body>
***<div id="buttons">***
Home
Videos
Downloads
Help
Contact
<div id="header">
<h1>Java Source_</h1>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Java-Source-JS.js"></script>
</body>
</html>
CSS Code
body {
background-color: white;
}
#header {
float: right;
background-color: orange;
font-family: Courier;
border-radius: 5px;
margin-right: 30px;
margin-top: 40px;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
#buttons {
background-color: grey;
height: 80px;
width: 1260px;
float: center;
clear: both;
}
a {
text-decoration: none;
color: black;
font-family: Courier;
font-size: 18px;
padding: 5px;
background-color: orange;
margin-left: 30px;
text-align: center;
clear:both;
}
a:hover {
font-size: 20px;
color: red;
}
Keep in mind I'm just a beginner with HTML/CSS.
float: center doesn't exist. Only possible properties are right, left, none, and inherit. If you use right or left, the element will be taken from the normal flow of the web page and placed at either right or left side of its parent element. Text and inline elements will wrap around the floated element.
To know more about float you can have a read on this page: http://css-tricks.com/all-about-floats/
To center your block-level element horizonally you can use margin: 0 auto. The element needs to have a width speciefied, in your case it's 1260px. What auto will do, is that the remaining space right and left of the element is split evenly between margin-right and margin-left.
And here's a little example: http://jsfiddle.net/4yw3M/
You can see, the yellow div is centered horizontally with margin: 0 auto.
There is no such CSS rule as float: center.
You need to use other methods to center such as text-align: center or margin-right: auto.
See this post for help: Align a div to center