I have code that moves a circle around the screen. My goal is to reduce the amount of code with css animation. But I don't understand how to do it. There is a problem that I cannot solve if I use css animation. The circle goes beyond the screen, although I have code to prevent this. Help please
I have JS code as well as html and css. Also, my js code helps with opening the popup.
let elem = document.querySelector('.button');
function check() {
const popup = document.getElementsByClassName('popup');
if (document.getElementById('popup__input').checked = true) {
for (var i = 0; i < popup.length; i += 1) {
popup[i].style.display = 'block';
}
} else {
popup.style.display = "none";
}
}
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.top = randXP;
elem.style.left = randYP;
};
setInterval(changePosition, 1000);
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
input[type=text],
select {
width: 100%;
max-width: 758px;
height: 60px;
padding: 12px 20px;
margin: 40px 0;
font-size: 60px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
form {
position: absolute;
display: flex;
justify-content: center;
}
.form__input {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 45px;
padding-right: 45px;
}
.close__button {
width: 0px;
position: absolute;
display: flex;
justify-content: end;
align-items: start;
height: 0px;
cursor: pointer;
border: none;
outline: none;
font-size: 2rem;
font-weight: bold;
background-color: rgb(208, 201, 201);
}
.form__button {
width: 550px;
height: 55px;
margin-top: 110px;
position: absolute;
font-size: 40px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
border: 1px solid #000;
border-radius: 10px;
width: 850px;
height: 200px;
background: rgb(208, 201, 201);
justify-content: end;
align-items: end;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
#media (max-width: 1024.98px) {
.button {
width: 80px;
height: 80px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
}
#media (max-width: 890px) {
.popup {
width: 750px;
}
}
#media (max-width: 768.98px) {
input[type=text],
select {
width: 500px;
height: 50px;
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 350px;
height: 45px;
margin-top: 105px;
position: absolute;
font-size: 30px;
}
.popup {
width: 600px;
}
}
#media (max-width: 620.98px) {
.popup {
width: 480px;
}
input[type=text],
select {
width: 395px;
height: 50px;
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.close__button {
margin-left: 10px;
}
.form__input {
padding-left: 0px;
padding-right: 0px;
}
form {
margin-left: 10%;
}
}
#media (max-width: 507.98px) {
input[type=text],
select {
width: 280px;
height: 40px;
padding: 12px 20px;
margin: 45px 0;
font-size: 25px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 240px;
height: 35px;
margin-top: 95px;
position: absolute;
font-size: 20px;
}
.popup {
width: 360px;
}
}
#media (max-width: 400.98px) {
input[type=text],
select {
width: 290px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 200px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 360px;
height: 150px;
}
}
#media (max-width: 358.98px) {
input[type=text],
select {
width: 230px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 180px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 290px;
height: 150px;
}
}
#media (max-width: 300.98px) {
input[type=text],
select {
width: 200px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 140px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 255px;
height: 150px;
}
}
<main>
<div class="button">
<input onclick="check()" type="checkbox" name="popup__input" id="popup__input" class="popup__check">
</div>
<div class="popup" name="popup" id="popup">
<label class="popup__label">
<form>
<div class="form__input">
<input type="text" id="fname" name="fname"><br><br>
</div>
<div class="close-button__container">
<button class="close__button">×</button>
</div>
<button class="form__button" type="submit" form="nameform" value="Submit">Відправити</button>
</form>
</label>
</div>
<div class="overlay">
</div>
</main>
Since #Cerbus wrote, there is no way to generate random numbers with CSS. Only SCSS can create a random number on the initial build of the CSS file. You could write a keyframe animation in CSS with many steps and random positions.
You could generate these steps with JS :).
Related
I have created a loading page with css and html. I would like to display a loading bar to display when the page is loading, between 0% to 100%.I have used justify-content:space-between to solve this but I can't seem to make this work. I have read previous posts on this in the forum but am still stuck. here is my code, both html and css
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
base.scss
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
```
loader.scss
```
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "Orbitron", sans-serif;
&__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c7a;
border-bottom: 3px solid #6cff8c7a;
}
&__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
&--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
}
&__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
&--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
}
&--border {
width: 85%;
height: 1px;
background: #6cff8c7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
}
&__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100px;
display: flex;
justify-content: space-between;
padding-left: 10px;
}
}
```
you need to edit you .loading__counter:
width: 100%;
box-sizing: border-box;
padding: 0 10px;
See the working example below:
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "
Orbitron"
, sans-serif;
}
.loading__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c 7a;
border-bottom: 3px solid #6cff8c 7a;
}
.loading__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
}
.loading__bar--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
.loading__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.loading__text--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
}
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
.loading__text--border {
width: 85%;
height: 1px;
background: #6cff8c 7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
.loading__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
So this problem has been bugging me for a few days now. I've been trying to get a working nightmode switch on my site. I've asked on here before and after what I thought was the solution, using help from this site and stack exchange, I started experiencing an annoying problem.
Here is a video of my problem: https://ryan-simms.com/problem
The problem only occurs when nightmode is enabled and I don't understand what the actual problem is. I've tried all sorts of different JavaScript codes with the same result everytime. Also before anyone says it's because of the DOMContentLoaded bit, I have already tried removing it on only using it when adding the EventListeners on my buttons.
Also I tried to change the way getCookie() works with a few different methods.
Are cookies the right way or is there a better way?
Here is my HTML stripped down to the basics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ryan Simms</title>
<link id ="pageStyle" rel="stylesheet" href='css/lightStyle.css' type='text/css'>
<script src="scripts/lightSwitch.js"></script>
<script src="scripts/cookie.js"></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'>
</head>
<body>
<script src="lightSwitch.js"></script> <!-- Loads LightSwitch Script -->
<button type="button" id="lightSwitchOn">Turn On Night Mode</button>
<button type="button" id="lightSwitchOff">Turn Off Night Mode</button>
</body>
</html>
Here is my JavaScript:
document.addEventListener("DOMContentLoaded", handleDocumentLoad);
function handleDocumentLoad() {
var style = document.getElementById("pageStyle");
var offSwitch = document.getElementById("lightSwitchOff");
var onSwitch = document.getElementById("lightSwitchOn");
offSwitch.addEventListener('click', lightsOn);
onSwitch.addEventListener('click', lightsOff);
function lightsOff() {
document.cookie = "lights = off; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'css/darkStyle.css');
}
function lightsOn() {
document.cookie = "lights = on; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'css/lightStyle.css');
}
function getCookie( name ) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
var end = null;
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
end = document.cookie.indexOf(";", begin);
} else {
begin += 2;
end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return decodeURI(dc.substring(begin + prefix.length, end) ).replace(/"/g, '');
}
function checkCookie() {
var nightmode = getCookie("lights");
if (nightmode == "off") {
lightsOff();
} else {
lightsOn();
}
}
checkCookie();
}
Here is my default CSS:
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
font-family: 'Roboto';
font-size: 22px;
color: #1C1C1C;
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
}
/*Navigation*/
nav {
width: 100%;
background-color: #D8D8D8;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 10px;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #1C1C1C;
text-decoration: none;
}
/*Main heading*/
h1 {
position: relative;
margin: 0 auto;
text-align: center;
}
/*Images*/
img {
border: solid 0px #1C1C1C;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
textarea {
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #1C1C1C;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #1C1C1C;
border-radius: 2px;
padding: 5px;
}
#logo {
border: 0px;
display: inline;
position: absolute;
top: 40px;
left: 30px;
margin-left: 10px;
font-size: 40px;
}
#enter {
margin-top: 40px;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
background-color: #D8D8D8;
margin-top: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 10px;
margin-left: 10px;
}
/*Light Switches*/
#lightSwitchOn {
display: inline;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 40px;
}
#lightSwitchOff {
display: none;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 40px;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
height: 8%;
width: 100%;
background-color: #D8D8D8;
padding-left: 30px;
}
/*Layout for device with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
And my CSS when night mode is enabled:
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
font-family: 'Roboto';
font-size: 22px;
color: #FFF;
background-color: black;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
}
/*Navigation*/
nav {
width: 100%;
background-color: #1C1C1C;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 10px;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #FFF;
text-decoration: none;
}
/*Main heading*/
h1 {
position: relative;
margin: 0 auto;
text-align: center;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
border: solid 0px #FFF;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
textarea {
max-width: 100%;
max-height: 100%;
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #FFF;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #FFF;
border-radius: 2px;
padding: 5px;
}
#logo {
border: 0px;
display: inline;
position: absolute;
top: 40px;
left: 30px;
margin-left: 10px;
font-size: 40px;
}
#enter {
margin-top: 40px;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
background-color: #1C1C1C;
margin-top: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 10px;
margin-left: 10px;
}
/*Light Switches*/
#lightSwitchOn {
display: none;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 20px;
}
#lightSwitchOff {
display: inline;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 20px;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
height: 8%;
width: 100%;
background-color: #1C1C1C;
padding-left: 30px;
}
/*Layout for device with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
Are cookies the right way or is there a better way?
Since you don't care about the cookie on the server side, prefer localStorage. You can replace all of your cookie code with things like
localStorage.setItem('lights', 'off');
if(localStorage.getItem('lights') === 'off') { ... }
Instead of loading a new stylesheet for your night mode, consider adding a .dark class to your body if night mode is on and incorporating the appropriate changes in your main stylesheet.
body {
font-family: 'Roboto';
font-size: 22px;
color: #1C1C1C;
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
body.dark {
color: #FFF;
background-color: black;
}
/*Navigation*/
nav {
width: 100%;
background-color: #D8D8D8;
padding-top: 10px;
padding-bottom: 10px;
}
.dark nav {
background-color: #1C1C1C;
}
So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>
Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.
As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}
I'm pretty new to Javascript and I have an issue checking if an input is filled or not.
So here is the problem: I have a label which is over the input (position: absolute). On focus and when the input is filled the label go to the top of the input. But if I remove the text on the input, the label stay on the top of the input.
So I need something to check if the input is filled but my solution isn't working. (the label should go back to the center of the input)
Any help will be appreciate :)
document.querySelector('.form__input').addEventListener('blur', onInputBlur);
function onInputBlur(ev) {
if (ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper {
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input {
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus {
outline: none;
}
.form__input:focus+.form__label,
.input--filled+.form__label {
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus+.form__label::after,
.input--filled+.form__label::after {
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label {
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after {
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
Just remove the class in your event listener again.
document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );
function onInputBlur( ev ) {
if(ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
} else {
console.log('is-empty');
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper{
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input{
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus{
outline: none;
}
.form__input:focus + .form__label,
.input--filled + .form__label{
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus + .form__label::after, .input--filled + .form__label::after{
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label{
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after{
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
You have to remove the class if the the input is empty - see demo below:
document.querySelector('.form__input').addEventListener('blur', onInputBlur);
function onInputBlur(ev) {
if (ev.target && ev.target.value.trim().length > 0) {
ev.target.classList.add('input--filled');
} else {
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper {
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input {
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus {
outline: none;
}
.form__input:focus+.form__label,
.input--filled+.form__label {
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus+.form__label::after,
.input--filled+.form__label::after {
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label {
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after {
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
You should add ev.target.classList.remove('input--filled'); if your field is empty
document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );
function onInputBlur( ev ) {
if(ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
} else {
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper{
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input{
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus{
outline: none;
}
.form__input:focus + .form__label,
.input--filled + .form__label{
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus + .form__label::after, .input--filled + .form__label::after{
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label{
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after{
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
you need a else to remove the class
document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );
function onInputBlur( ev ) {
if(ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
} else {
console.log('is-empty');
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper{
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input{
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus{
outline: none;
}
.form__input:focus + .form__label,
.input--filled + .form__label{
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus + .form__label::after, .input--filled + .form__label::after{
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label{
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after{
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
I would like my chat box to collapse when they touch the header of the chat, similar to facebook. I know that hide_wrapBox is correctly being added, but it doesn't set the height of its contained elements to a (collapsed) fixed height. In other words, the messages inside the chat box
disappear but the box still stands, where I'd prefer it to minimize.
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
Jquery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
#media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}
It's actually collapsing, but you have the wrapper around those divs such as #messages-card which is setting a height. So while #messages is collapsing, parent of #messages-card is maintaining the height you have set, making it appear nothing is collapsing:
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
You'll need to play around with adjusting that wrapper's height, and it's positioning to resolve the issue you're having.
Instead of adding hide_wrapBox to messages try toggling it on wrapBox
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').addClass('hide_wrapBox');
}else{
$('.wrapBox').removeClass('hide_wrapBox');
}
});