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;
}
Related
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 :).
I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?
Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
In my blogger website second line of main menu is not displaying correctly.First line is working fine, second line is also working fine but not displaying correctly when i moves mouse pointer on second line buttons than they displays but in general looks completely white.
My website link - Click Here
HTML codes-
.social-text .snapchat a:after {
content: "Snapchat"
}
.social-text .email a:after {
content: "Email"
}
.social-text .external-link a:after {
content: "WebSite"
}
#header-wrap {
position: relative;
margin: 0
}
.header-header {
background-color: #fff;
width: 100%;
height: 90px;
position: relative;
overflow: hidden;
padding: 30px 0
}
.header-header .container {
position: relative;
margin: 0 auto;
padding: 0
}
.header-logo {
position: relative;
float: left;
width: auto;
max-width: 120px;
max-height: 100px;
margin: 0;
padding: 0px 0
}
.header-logo .header-image-wrapper {
display: block
}
.header-logo img {
max-width: 120%;
max-height: 150px;
margin: 0;
margin-left: 70px
}
.header-logo h1 {
color: $(title.color);
font-size: 36px;
line-height: 60px;
margin: 0
}
.header-logo p {
font-size: 12px;
margin: 5px 0 0
}
.header-ads {
position: relative;
float: right
}
.header-ads .widget>.widget-title {
display: none
}
.header-ads .widget {
max-width: 100%
}
.header-ads .widget .widget-content {
width: 728px;
max-width: 100%;
max-height: 90px;
line-height: 1
}
.header-menu {
position: relative;
width: 100%;
height: 46px;
z-index: 10;
font-size: 13px;
margin: 0;
background-color: $(main.dark.color);
border-top: 2px solid $(main.color)
}
.header-menu .container {
position: relative;
margin: 0 auto;
padding: 0
}
#main-menu .widget,
#main-menu .widget>.widget-title {
display: none
}
#main-menu .show-menu {
display: block
}
#main-menu {
position: relative;
height: 46px;
z-index: 15
}
#main-menu ul>li {
float: left;
position: relative;
margin: 0;
padding: 0;
transition: background .17s
}
#main-menu #main-menu-nav>li:hover,
#main-menu #main-menu-nav>li.li-home {
background-color: $(main.color)
}
#main-menu ul>li>a {
position: relative;
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 46px;
display: inline-block;
margin: 0;
padding: 0 15px;
transition: color .17s ease
}
#main-menu #main-menu-nav>li>a {
text-transform: uppercase;
font-weight: 700
}
#main-menu ul>li:hover>a {
color: #fff
}
#main-menu ul>li>ul {
position: absolute;
float: left;
left: 0;
top: 46px;
width: 180px;
background-color: $(main.dark.color);
z-index: 99999;
margin-top: 0;
padding: 0;
border-top: 2px solid $(main.color);
visibility: hidden;
opacity: 0
}
#main-menu ul>li>ul>li>ul {
position: absolute;
float: left;
top: 0;
left: 100%;
margin: -2px 0 0
}
#main-menu ul>li>ul>li {
display: block;
float: none;
position: relative
}
#main-menu ul>li>ul>li:hover {
background-color: $(main.color)
}
#main-menu ul>li>ul>li a {
display: block;
height: 36px;
font-size: 13px;
color: #fff;
line-height: 36px;
box-sizing: border-box;
margin: 0;
padding: 0 15px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all .17s ease
}
#main-menu ul>li>ul>li:hover>a {
color: #fff
}
#main-menu ul>li.has-sub>a:after {
content: '\f107';
float: right;
font-family: FontAwesome;
font-size: 12px;
font-weight: 400;
margin: 0 0 0 5px
}
#main-menu ul>li>ul>li.has-sub>a:after {
content: '\f105';
float: right;
margin: 0
}
#main-menu .mega-menu {
position: static!important
}
#main-menu .mega-menu>ul {
width: 100%;
box-sizing: border-box;
padding: 20px 10px
}
#main-menu .mega-menu>ul.mega-menu-inner {
overflow: hidden
}
#main-menu ul>li:hover>ul,
#main-menu ul>li>ul>li:hover>ul {
visibility: visible;
opacity: 1
}
#main-menu ul ul {
transition: all .25s ease
}
.mega-menu-inner .mega-item {
float: left;
width: 20%;
box-sizing: border-box;
padding: 0 10px
}
.mega-menu-inner .mega-content {
position: relative;
width: 100%;
overflow: hidden;
padding: 0
}
.mega-content .post-image-wrap {
width: 100%;
height: 120px
}
.mega-content .post-image-link {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: relative;
overflow: hidden;
padding: 0
}
.mega-content .post-title {
position: relative;
font-size: 13px;
font-weight: 700;
line-height: 1.5em;
margin: 7px 0 5px;
padding: 0
}
.mega-content .post-title a {
display: block;
color: #fff;
transition: color .17s
}
.mega-content .post-title a:hover {
color: $(title.hover)
}
.mega-content .post-meta {
font-size: 11px
}
.no-posts {
float: left;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center
}
.mega-menu .no-posts {
line-height: 60px;
color: $(title.color)
}
.show-search,
.hide-search {
position: absolute;
right: 0;
top: 0;
display: block;
width: 46px;
height: 46px;
background-color: $(main.color);
line-height: 46px;
z-index: 20;
color: #fff;
font-size: 15px;
text-align: center;
cursor: pointer;
padding: 0;
transition: background .17s ease
}
.show-search:before {
content: "\f002";
font-family: FontAwesome;
font-weight: 400
}
.hide-search:before {
content: "\f00d";
font-family: FontAwesome;
font-weight: 400
}
#nav-search {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
z-index: 99;
background-color: $(main.dark.color);
box-sizing: border-box;
padding: 0
}
#nav-search .search-form {
width: 100%;
height: 46px;
background-color: rgba(0, 0, 0, 0);
line-height: 46px;
overflow: hidden;
padding: 0
}
#nav-search .search-input {
width: 100%;
height: 46px;
font-family: inherit;
color: #fff;
}
1, you have more menu items right, so you have to reduce font-size, padding from (#main-menu ul > li > a).
2, Or otherwise you can go for a inner scroll.
.header-menu {
position: relative;
width: 100%;
/* height: 46px; */
z-index: 10;
font-size: 13px;
margin: 0;
background-color: #384a5f;
border-top: 2px solid #ffd012;
}
#main-menu {
position: relative;
/* height: 46px; */
z-index: 15;
}
#main-menu ul{
display:flex;
flex-wrap:wrap;
}
replace this code in your css for each element! i just removed the height for both header and main menu so that the div can expand with the height of her child! added display:flexfor ul to make height adjust depending on child
I have working code.in which I have one timeline. and each event inside timeline is connected to each other.
Here is one delete button that removes the particular data. and there is another one which copies the data.
But I want when I click on up button and down button.
Like when I click on up button. it should swap the third element data to second data and second data to third data.
and same working on down button.
Here is working example code please see it.
And help will be appreciated.
$(document).ready(function() {
$("#edit_button").click(function() {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function() {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "✖" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "✚" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "↑" + "</div>");
$(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function() {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function() {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle4', function() {
var currentData = $(this).parent().next().html();
var currentString = "<section>" + currentData + "</section>";
console.log(currentString)
var abc1 = $(this).next().replaceWith(currentString);
console.log(abc1)
});
$("#slide").on('click', '.deleteStyle3', function() {
var previousData = $(this).parent().prev().html();
var previousString = "<section>" + previousData + "</section>";
console.log(previousString)
var abc = $(this).prev().replaceWith(previousString);
console.log(abc)
// $(this).parent().remove().html();
// $(this).closest("section").after(previousString);
// $(this).closest("section").before(currentString);
// console.log(currentData);
// console.log(previousData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>
Please refer the jsfiddle for your referance. Here on mouse down and up key pressed item will be selected.
https://jsfiddle.net/webdev_sudhi/avudyb2t/3/
$(document).ready(function() {
$("#edit_button").click(function() {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function() {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "✖" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "✚" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "↑" + "</div>");
$(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function() {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function() {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle4', function() {
var currentData = $(this).parent().next().html();
var currentString = "<section>" + currentData + "</section>";
console.log(currentString)
var abc1 = $(this).next().replaceWith(currentString);
console.log(abc1)
});
$("#slide").on('click', '.deleteStyle3', function() {
//added new code here
var previousData = $(this).parent().prev();
$preTitle = $(previousData).find('header').text();
$preContent = $(previousData).find('article').text();
$(this).parent().find('header').text($preTitle);
$(this).parent().find('article').text($preContent);
//end here
var previousString = "<section>" + previousData + "</section>";
console.log(previousString)
var abc = $(this).prev().replaceWith(previousString);
console.log(abc)
// $(this).parent().remove().html();
// $(this).closest("section").after(previousString);
// $(this).closest("section").before(currentString);
// console.log(currentData);
// console.log(previousData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>
I made some changes to you script to solve the problem:
Javascript: I used just one event to determine when you click up or down, but i had to add a data attribute with the name of the direction of the buttons to find out which button makes the call.
$(document).ready(function () {
$("#edit_button").click(function () {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function () {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "✖" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "✚" + "</div>");
$(this).append("<div class='deleteStyle3' data-direction='up'>" + "↑" + "</div>");
$(this).append("<div class='deleteStyle4' data-direction='down' >" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function () {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function () {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle3, .deleteStyle4 ', function (e) {
var direction = $(e.currentTarget).data().direction,
$currentSection = $(this).parent(),
$sectionToMove = direction === 'up' ? $(this).parent().prev() : $(this).parent().next(),
currentSectionData = $currentSection.html(),
sectionToMoveData = $sectionToMove.html();
$currentSection.html(sectionToMoveData);
$sectionToMove.html(currentSectionData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>
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%;
}