//obiekt TopBottomBar
function TopBottomBar(obj) {
//properties
this.position = obj.position;
this.message = obj.message;
this.link = obj.link;
this.baseDiv = this.createNewBar();
}
//methods
TopBottomBar.prototype.show = function(){
var allNodes = document.body.childNodes;
console.log(!document.getElementById('topBottomBar'));
if(this.position === 'top' && !document.getElementById('topBottomBar'))
{
document.body.insertBefore(this.baseDiv, allNodes[0]);
this.baseDiv.className = ' top-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
}else if(this.position === 'bottom' && !document.getElementById('topBottomBar'))
{
document.body.insertBefore(this.baseDiv, allNodes[allNodes.length - 1].nextSibling);
this.baseDiv.className = 'bottom-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
}else{
console.log('Ziomus bar istnieje, tymczasowa wiadomoΕΔ');
return;
}
}
TopBottomBar.prototype.createNewBar = function(){
var baseDiv = document.createElement("div");
var button = document.createElement("a");
button.href = this.link;
var icon = document.createElement("i");
icon.className += 'fa fa-btc';
button.id += 'buttonlink';
var textButton = document.createTextNode(this.message);
var span = document.createElement("span");
var closeButton = document.createTextNode("X");
span.id += 'closelink';
//dodanie w kolejnosci, ikona, przycisk, X zamkniecia
span.appendChild(closeButton);
button.appendChild(textButton);
baseDiv.appendChild(icon);
baseDiv.appendChild(button);
baseDiv.appendChild(span);
baseDiv.id += 'topBottomBar';
if(this.position === 'top'){
baseDiv.className += 'top-fixed';
}
if(this.position === 'bottom'){
baseDiv.className += 'bottom-fixed';
}
return baseDiv;
}
TopBottomBar.prototype.hide = function(){
var elementToDelete = document.getElementById('topBottomBar');
document.body.removeChild(elementToDelete);
}
var topBarparameters = {
message: "Get Widget",
position: "top",
link: '#'
}
var bottomBarparameters = {
message: "Get Widget",
position: "bottom",
link: '#'
}
var upBar = new TopBottomBar(topBarparameters);
var bottomBar = new TopBottomBar(bottomBarparameters);
document.getElementById('up').addEventListener('click', upBar.show.bind(upBar));
document.getElementById('down').addEventListener('click', bottomBar.show.bind(bottomBar));
body
{
background-image: url('background.png');
font-size: 20px;
font-family: Open Sans,sans-serif;
position: relative;
}
#nav
{
position: relative;
font-size: 25px;
width: 100%;
height: 1.5em;
background-color: #C21B1B;
padding-top: 10px;
text-align: center;
}
#nav a
{
text-decoration: none;
font-family: sans-serif;
color: black;
border: 2px solid black;
border-radius: 20px;
display: block;
background-color: #4123C0;
width: 8em;
margin: 0 auto 0 auto;
}
#nav a:hover
{
background-color: #2001A0;
color: white;
}
#container
{
width: 75%;
margin: 0 auto 0 auto;
padding: 10px 0 0 0;
}
#footer
{
width: 100%;
height: 3em;
background-color: #372323;
text-align: center;
color: white;
padding-top: 10px;
}
#topBottomBar
{
color: #f4f4f4!important;
background: #363d4d!important;
display: block;
white-space: nowrap!important;
overflow: hidden;
padding: 5px 42px!important;
text-align: center!important;
left: 0;
right: 0;
position: fixed;
font-size: 0;
z-index: 30000;
}
#topBottomBar.top-animation{
-webkit-transition: top 2s ease;
transition: top 2s ease;
top: 0px;
}
#topBottomBar.bottom-animation{
-webkit-transition: bottom 2s ease;
transition: bottom 2s ease;
bottom: 0px;
}
#topBottomBar {
margin: 0;
padding: 0;
border: 0;
box-sizing: content-box!important;
box-shadow: none;
background-clip: padding-box!important;
line-height: 1.2;
vertical-align: middle;
text-align: left;
font-weight: 400;
font-family: inherit;
font-style: normal;
letter-spacing: normal;
text-shadow: none;
text-transform: none;
float: none;
z-index: 2147483635;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
filter: none;
}
#topBottomBar #buttonlink
{
display: inline-block;
text-decoration: none;
cursor: pointer;
line-height: 32px;
font-size: 14px;
font-weight: 700;
max-width: 317px;
text-align: center;
border-radius: 2px;
vertical-align: middle;
padding: 0 20px;
color: #ffffff!important;
background: #ffcd53!important;
font-family: inherit;
}
#topBottomBar .fa{
line-height: 1;
vertical-align: middle;
display: inline-block;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 22px;
height: 22px;
width: 22px;
color: #d3d3d3!important;
text-indent: 0!important;
top: 0!important;
left: 0!important;
padding: 10px;
background: 0 0!important;
z-index: -1;
position: absolute;
display: block!important;
text-decoration: none!important;
opacity: .5!important;
}
#topBottomBar .fa:hover
{
animation: colorChange 2s;
}
#keyframes colorChange{
from {color: #c2c2c2;}
to {color: #FFFFFF;}
}
#topBottomBar #closelink
{
display: inline-block;
vertical-align: middle;
font-size: 22px;
height: 22px;
width: 22px;
cursor: pointer;
position: absolute;
padding: 10px;
right: 0;
top: 0;
transition: transform 200ms,opacity 200ms!important;
transition-property: transform, opacity;
transition-duration: 200ms, 200ms;
transition-timing-function: initial, initial;
transition-delay: initial, initial;
}
#topBottomBar #closelink:hover{
animation: colorChange 1s;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}
#topBottomBar .top-fixed
{
top:-42px !important;
}
.bottom-fixed
{
bottom: -42px!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Bar effectschange</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/font-awesome-4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="nav">
Get new version
</div>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac blandit lectus. In hac habitasse platea dictumst. Aenean metus lorem, tincidunt eu enim et, rutrum vehicula sem. Vivamus scelerisque viverra nisl vitae condimentum. Proin ultricies aliquet molestie. Proin faucibus quam in felis egestas malesuada. Fusce convallis leo sem, sed laoreet est eleifend at. Nullam rutrum massa lacus, vel viverra odio consequat eu. Curabitur pharetra ligula auctor pretium placerat. Nulla non arcu porta, placerat lacus vel, pretium tellus. Phasellus tempor, massa quis condimentum bibendum, erat mi rhoncus mauris, sit amet fringilla elit leo id erat. Sed vehicula tellus quis turpis mollis auctor. Praesent quis tempor lectus. Nullam ut tincidunt odio, vitae varius magna.</p>
<p>Duis vel placerat magna. Morbi ac cursus tortor. Pellentesque consequat, turpis ut mollis dictum, arcu diam sodales nisi, at hendrerit nunc velit vel metus. Mauris luctus sed dolor ac feugiat. In luctus erat vel fringilla rhoncus. Nulla id orci maximus, hendrerit nisl varius, hendrerit massa. Maecenas velit mauris, dictum malesuada massa id, varius lobortis orci. Vivamus quis placerat lorem. Suspendisse pellentesque mattis nunc sed semper. Proin et magna suscipit, aliquam ligula et, placerat est. Etiam tempor augue orci, et aliquet erat ultricies efficitur. Vivamus vitae fermentum tortor, nec porttitor ligula. Integer vel dapibus nunc. Vestibulum quis eros pretium, euismod velit id, dapibus sem.</p>
<button id="up">Up</button>
<i class="fa fa-btc" aria-hidden="true"></i>
<button id="down">Down</button>
<p>Aenean lorem enim, condimentum quis augue ultrices, molestie volutpat nibh. Praesent metus mi, dapibus in commodo non, mattis nec dolor. Phasellus a urna sem. Pellentesque sem justo, semper sed iaculis sed, mollis ac risus. Fusce et consectetur nisl, nec fringilla sem. Sed egestas lorem eros, a accumsan sem commodo vitae. Nulla porta, turpis id eleifend facilisis, nibh tellus feugiat diam, sit amet convallis leo diam in sem. Praesent venenatis vitae ante at bibendum. Morbi in mauris quam. Nam quis eros ullamcorper, porttitor elit vitae, hendrerit neque.</p>
<p>Vivamus a bibendum neque. Pellentesque vestibulum id magna at ornare. Sed volutpat molestie dolor, vitae congue ipsum pellentesque at. Duis ornare nunc in lorem ullamcorper rhoncus. Maecenas dictum purus massa, et pulvinar erat maximus ac. Pellentesque in diam consequat, vehicula orci porta, condimentum leo. Morbi ut dui sed massa accumsan commodo. Sed nibh eros, iaculis quis tellus ut, ultricies placerat nisi. Curabitur eu rhoncus ex. Sed interdum tristique purus nec commodo.</p>
<p><p>
</p>Suspendisse vulputate mauris et turpis venenatis congue. Nullam eu rutrum odio, sed aliquet nibh. Aliquam porttitor ultrices laoreet. Pellentesque pulvinar molestie malesuada. Sed pretium vestibulum dolor, scelerisque posuere velit tincidunt non. Sed blandit eleifend dapibus. Ut erat tortor, cursus non consequat pharetra, suscipit eu felis. Proin sit amet massa massa. Sed urna erat, molestie a ante ac, imperdiet cursus nunc. Proin iaculis eros quis diam tincidunt, porttitor convallis nunc luctus. Phasellus vestibulum, sem sit amet sodales ultricies, lorem tortor tempor nisl, non lacinia eros augue sed ex.</p>
</div>
<div id="footer">
<p>Join us in development! </p>
</div>
<script src="scripts/script.js"></script>
</body>
</html>
I am trying to animate a bar made dynamically in javascript, by using a CSS transition. The animation doesn't work. First I create my bar with javascript, and show it based on a click event.
I read that transition with jaascript is added as extra class to existing element. Is it possible that when I make element with javascript and also add the id and class with javascript, the transition happens faster than the original style and it doesn't appear to run at all?
TopBottomBar.prototype.show = function(){
var allNodes = document.body.childNodes;
console.log(!document.getElementById('topBottomBar'));
if(this.position === 'top' && !document.getElementById('topBottomBar')) {
document.body.insertBefore(this.baseDiv, allNodes[0]);
this.baseDiv.className = ' top-animation';
document.getElementById('closelink').addEventListener('click',this.hide.bind(this));
} else if(this.position === 'bottom' && !document.getElementById('topBottomBar')) {
document.body.insertBefore(this.baseDiv, allNodes[allNodes.length - 1].nextSibling);
this.baseDiv.className = 'bottom-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
} else {
console.log('Ziomus bar istnieje, tymczasowa wiadomoΕΔ');
return;
}
}
TopBottomBar.prototype.createNewBar = function(){
var baseDiv = document.createElement("div");
var button = document.createElement("a");
button.href = this.link;
var icon = document.createElement("i");
icon.className += 'fa fa-btc';
button.id += 'buttonlink';
var textButton = document.createTextNode(this.message);
var span = document.createElement("span");
var closeButton = document.createTextNode("X");
span.id += 'closelink';
span.appendChild(closeButton);
button.appendChild(textButton);
baseDiv.appendChild(icon);
baseDiv.appendChild(button);
baseDiv.appendChild(span);
baseDiv.id += 'topBottomBar';
if (this.position === 'top') {
baseDiv.className += 'top-fixed';
}
if(this.position === 'bottom') {
baseDiv.className += 'bottom-fixed';
}
return baseDiv;
}
top-animation and bottom-animation are my css transitions
#topBottomBar.top-animation {
-webkit-transition: top 2s ease;
transition: top 2s ease;
top: 0px;
}
The starting point for the top property is -42px, which is the height of my bar. I tested it on an easy example with one div hardcoded in HTML and everything was fine. The div went from -42px top to 0.
EDITED, added whole code, what i want to achieve is to make this bar animated with transition. There are 2 buttons which show bar.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
How to keep navbar section link (state=active) after clicking on it?
Having problems keeping the link in active state/highlighted. Thank you!
Code (HTML, CSS, Javascript) can be found here: https://drive.google.com/drive/folders/1SbnbS7SxSFJz_ceuhjhq5vLWtQtz4b45?usp=sharing
One way of doing that, pls check comments in code :
let sections = document.querySelectorAll('section');
const countSec = sections.length;
window.onbeforeunload = function () {
window.scrollTo(0, 0);
};
function createListItem() {
for (let x = 0; x < countSec; x++) {
let ul = document.getElementById("navbar__list");
let addListItem = document.createElement('li');
addListItem.setAttribute('class', 'newlist');
let secName = document.createTextNode(`Section ${x + 1}`);
let a = document.createElement('a');
// π add css class to link
a.classList.add("navlink")
// π listen to click on link
a.addEventListener('click', (e) => {
activeNav(e) // π call function on click
})
a.href = `#section${x + 1}`;
a.appendChild(secName);
a.style.cssText = 'text-decoration: none; font-weight: bold';
addListItem.appendChild(a);
ul.appendChild(addListItem);
addListItem.style.cssText = 'margin-right: 15px; position: relative; right: 10px; padding: 15px 0 15px 0;'
}
}
createListItem();
// π function for link click
const activeNav = (e) => {
clearNav() // π call function to clear all active links
e.target.classList.add("active") // π add active class to clicked link
}
// π function to clear all active links
const clearNav = () => {
const links = document.querySelectorAll('.navlink') // π get all links with previously added class
links.forEach(l => l.classList.remove('active'))
}
function checkViewPort(element) {
let rect = element.getBoundingClientRect();
return (rect.top);
}
window.onscroll = function () {
document.querySelectorAll("section").forEach(function(active){
if(
active.getBoundingClientRect().top>= -400 &&
active.getBoundingClientRect().top <= 150
) {
active.classList.add("your-active-class");
} else {
active.classList.remove("your-active-class");
}
});
};
let btn = document.querySelector(".btn_scroll");
window.onscroll = function () { scroll() };
function scroll() {
if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
}
function goToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
body {
background: rgb(136,203,171);
background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%);
margin: 0;
font-family: 'Merriweather', serif;
color: #fff;
}
h1 {
font-family: 'Fira Sans', sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
#media only screen and (min-width: 35em){
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* π class for active link */
.active {
background-color: #83c4f8 !important;
}
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p{
color: #fff;
}
.landing__container {
padding: 1em;
text-align: left;
}
#media only screen and (min-width: 35em){
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
section:nth-of-type(odd) .landing__container::before {
content: '';
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
.newlist a{
color: #ffffff !important;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 20px;
padding: 0px 10px !important;
transition: all 0.2s linear;
line-height: 15px;
}
.newlist a{
color:#1172c4 !important;
}
.newlist a:hover {
color: #ffffff !important;
background: #1172c4;
border-color: #1172c4;
}
li.newlist:hover a{
color:#ffffff !important;
}
.newlist:active {
border-radius: 22px;
}
.btn_scroll {
display: none;
color: black;
padding: 15px;
}
section.your-active-class {
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
#keyframes rotate {
from {
transform: rotate(0deg)
translate(-1em)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-1em)
rotate(-360deg);
}
}
<!DOCTYPE >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Manipulating the DOM</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<a onclick="goToTop()" class="btn_scroll btn_scroll--active" style="font-size: 60px; font-weight:bolder;">β</a>
</main>
<footer class="page__footer">
<p>© All rights reserved</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>
so I've been trying to make something move in the background of my website using canvas, like a object or just lines that randomly appear at slightly different speed and size. But my background is in the way of the canvas I think. Did I do something wrong, or is it in the way of my background? Im very new to coding, so please be patient with me. Thanks!
thanks
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
/*gare kleuren achtergrond*/
body {
background: white;
background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 20px;
overflow: auto;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*witte div*/
#div1 {
width: 101.5%;
height: 1000px;
margin-left: -10px;
margin-right: 220px;
padding: 50px, 50px, 50px, 50px;
background-color:white;
border-radius: 100px 100px 0px 0px;
}
#div1 h1{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
#div1 p{
color: black;
font-family: lucida console, monospace;
font-size: 50px;
text-align: center;
}
h1{
color: black;
font-family: lucida console, monospace;
font-size: 150px;
text-align: center;
margin-top: 300px;
}
.woord {
transition:0.5s;
border: 0px;
height: 550px;
margin-left: -10px;
margin-bottom: -22px;
}
li{
font-size: 30px;
font-family: lucida console, monospace;
display: inline;
text-align: center;
}
a{
transition: ease-in-out .2s;
}
a:link{
text-decoration: none;
color: black;
}
a:visited{
text-decoration: none;
color: black;
}
a:hover{
border: 1px solid;
zoom: 1.1;
}
.nav{
border:1px solid;
border-width:1px;
height: 64px;
list-style:none;
margin:0;
padding:0;
text-align:center;
box-sizing: border-box;
width: 1000px;
margin-left: 220px;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Javascript
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 40){
$(".woord").css({"opacity" : "0"})
}
else {
$(".woord").css({"opacity" : "1"})
}
})
})
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="gaar.js"></script>
</head>
<body>
<div class="woord">
<h1>website</h1>
<canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
<h1>main</h1>
<ul class="nav">
<li>Biografie</li>
<li>fotos</li>
<li>heuristiek</li>
<li>buienradar</li>
<li>Contact</li>
</ul>
<p>hoi</p>
<p>dit is mijn website</br>over mijzelf </p>
</div>
</body>
</html>
(Edited once I realized I misread the original question)
So theBODY element is going to be the root of everything visible on your document, so you're not going to get anything "behind" that tag, since everything else is considered a child of it.
If you want something to be behind "everything," you give it a z-index of -1. That will place it behind everything thats got a z-index set, and everything that's got the default index of 0. Note that for z-index to have an effect, your element must have absolute, fixed, relative or sticky positioning applied.
and if you want it to be visible, ensure anything that appears in front of it is at least partially transparent.
.behind {
/* may also be absolute, sticky, or relative */
position: fixed;
/* Put this element behind anything with a higher z-index */
z-index: -1;
background-image: url(https://placekitten.com/408/287);
width: 400px;
height: 280px;
top: 1em;
left: 1em;
}
h1, p {
/* 100% opaque */
/*background-color: white;*/
/* 100% transparency */
/*background-color: transparent;*/
/* 50% transparency */
background-color: rgba(255, 255, 255, 0.5);
}
body {
background-color: rgba(255, 0, 0, 1);
/* Nothing is ever actually behind the BODY tag. */
}
<html>
<body>
<h1>Hello, world!</h1>
<div class="behind"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales vehicula nulla vitae eleifend. Donec facilisis ligula a lectus tincidunt sagittis. Morbi libero diam, mattis eget tristique ut, tincidunt ut orci. Curabitur vulputate libero at interdum
vulputate. Quisque tincidunt, sapien quis dapibus accumsan, nulla urna ultrices risus, vel facilisis orci ex id odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus finibus tincidunt sem quis
fermentum. Donec nec tellus eu dui auctor blandit. Aliquam erat volutpat. Donec malesuada diam orci, vitae pulvinar odio tincidunt id. Nam interdum, dolor eu consectetur suscipit, enim eros tempor orci, sit amet ullamcorper ipsum erat id risus. Integer
finibus nisl vel risus interdum maximus. Cras id nulla ut arcu lacinia aliquet sit amet at arcu. Vestibulum scelerisque velit imperdiet leo aliquet, ultricies accumsan turpis faucibus. Cras pulvinar tempus ipsum, et tempor sapien bibendum semper.
Morbi bibendum placerat nisl.</p>
<p>Etiam placerat libero neque, ac imperdiet orci rutrum auctor. Morbi nec commodo justo. Fusce diam lorem, molestie vitae tortor id, vulputate lobortis urna. Aliquam id mauris ligula. Ut posuere tellus ac laoreet pellentesque. Phasellus mollis, felis
sit amet bibendum condimentum, dui risus feugiat quam, ac porttitor dolor mi non mauris. Duis commodo imperdiet tortor, id consequat dolor. Nullam non ullamcorper tellus, eget aliquam nisl. Nunc sed purus eget elit efficitur ornare blandit ut nunc.
Nam finibus iaculis ante, ut suscipit massa venenatis sed. Nullam porta, arcu vitae eleifend gravida, diam orci vulputate magna, in lacinia odio odio non tellus. Duis pretium eget diam vitae auctor. Aliquam cursus urna leo, ac vehicula quam posuere
ac. Etiam in quam justo.</p>
<p>Nullam dictum gravida orci, quis mollis tortor placerat at. Mauris justo diam, iaculis quis maximus vitae, tincidunt et nisl. Nullam venenatis eros risus, a facilisis elit tincidunt dictum. Suspendisse mi elit, lacinia vel elit lobortis, gravida pharetra
dolor. Curabitur quis tincidunt diam. Nulla ligula eros, viverra eu nisi et, suscipit blandit sem. Nullam egestas ante vitae quam hendrerit, quis vestibulum nibh sodales. Quisque in dolor viverra, condimentum tortor ut, bibendum ante. Fusce commodo
mi vel fringilla vehicula. Aliquam mauris leo, feugiat eu varius nec, ornare vel nibh.</p>
</body>
</html>
I need to make the navigation bar items in this code to be highlighted while their corresponding sections are brought into view using only HTML, CSS and Javascript. I mean I shouldn't use any libraries or frameworks and no HTML5 or CSS3. Some people told me to use something called "scroll spy", but after looking it up and doing some trials, I couldn't use it in my code, it didn't give the desired outcome. So please help me with it.
here's the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet"> <!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src = "js/app.js"></script>
</body>
</html>
Here's the CSS code
/* ---- Base Rules ---- */
body {
background: rgb(136,203,171);
background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%);
margin: 0;
font-family: 'Merriweather', serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: 'Fira Sans', sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
#media only screen and (min-width: 35em){
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: rgb(255, 255, 255);
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* ---- Module Rules ---- */
/* Navigation Styles*/
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: left;
}
.navbar__menu li {
display: inline-block;
background-color:green;
color: honeydew;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: rgb(255, 255, 255);
}
.navbar__menu .menu__link:hover .active {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
.active{
background: black;
}
/* Header Styles */
.page__header {
background: green;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p{
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
#media only screen and (min-width: 35em){
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: '';
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.your-active-class {
background-color: #cc1;
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
#keyframes rotate {
from {
transform: rotate(0deg)
translate(-1em)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-1em)
rotate(-360deg);
}
html {
scroll-behavior: smooth;
}
}
and here's the Javascript code
//create navigation menu
//make navigation menu buttons scroll into section
const sections = document.querySelectorAll('section');
const list = document.querySelector('ul');
const fragment = document.createDocumentFragment();
for (const section of sections){
const li = document.createElement('li');
const sect = section.getAttribute('data-nav');
const name = section.getAttribute('id');
li.innerHTML = `<a class="menu__link">${sect}</a>`;
list.appendChild(li);
fragment.appendChild(li);
li.addEventListener('click', (e) => {
e.preventDefault();
section.scrollIntoView({behavior: "smooth"})
})
}
list.appendChild(fragment);
//making active section's highlighted in yellow
window.addEventListener('scroll',() => {
const option =
{
root: null,
threshold:0.7,
rootMargin:'0px'
};
//Using the IntersectionObserver to get the active section
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach((entry) =>
{
if(entry.isIntersecting)//If section is in viewport
{
//adding active classes to the section in view
entry.target.classList.add("your-active-class");
}
else
{
// we are EXITING the "capturing frame" so we remove the active class
entry.target.classList.remove("your-active-class");
//if section is not visible we don't observe it anymore
observer.unobserve(entry.target);
}
console.log(entry.target);
});
}, option);
//doing this to all sections
sections.forEach((section) => {
//activate observer to observe sections
observer.observe(section);
});
});
You're very close! Good call with IntersectionObserver! That's a good native method for this kind of thing.
Basically, you can add an attribute that has the id of the corresponding section to your links
for (const section of sections) {
const li = document.createElement("li");
const name = section.getAttribute("data-nav"); //// CHANGED
const sectId = section.getAttribute("id"); //// CHANGED
li.innerHTML = `<a class="menu__link" data-selects="${sectId}" href="${sectId}">${name}</a>`; //// CHANGED
and then select them by that attribute in your IntersectionObserver:
entries.forEach((entry) => {
let correspondingNavItem = document.querySelector(
//// ADDED
`[data-selects="${entry.target.id}"]`
);
if (entry.isIntersecting) {
//If section is in viewport
//adding active classes to the section in view
entry.target.classList.add("your-active-class");
correspondingNavItem.classList.add("selected-link"); //// ADDED
correspondingNavItem.setAttribute("aria-current", true); //// ADDED
I modified your code in this codepen to show you how this could work: https://codepen.io/karlyanelson/pen/LYWaJyR
Note: the aria-current is to help with accessibility. You can learn more about aria-current here.
Also, to make your links in your navigation actually accessible (ie: able to be used by just a keyboard or screenreader), then they need a valid href. You can just pass in the id of the section you want them to navigate to.
How to create a CSS based modal popup with optional JavaScript? The solution should be mostly CSS based. I looked at some of the CSS only solutions, and they change the page URL. This question is intended to provide alternatives. For example, it's possible to create a CSS based modal popup with the :active and :focus selectors. It's also necessary to use the object tag for nesting anchors. A solution is posted below.
This solution works by using the :active, :focus css selectors to show the modal. To hide the modal, focus is transferred to a different anchor from the one which triggered it. object tag is used to nest anchors. JavaScript is optional, but preferred, for best operation.
document.addEventListener('DOMContentLoaded', e => Array.prototype.forEach.call(document.getElementsByClassName('no-drag'), l => l.addEventListener('dragstart', e => e.preventDefault())))
body {
background: #dfd;
}
.btn {
display: inline-block;
box-sizing: border-box;
margin: .2em;
border: .2em solid;
border-radius: .6em;
padding: .3em;
text-align: center;
text-decoration: none;
font-family: 'MS Shell Dlg 2', Arial;
cursor: pointer;
}
.btn-green {
border-color: #9b9;
background-color: #686;
color: #bdb;
}
.btn-green:hover {
border-color: #9cb;
background-color: #698;
color: #bed;
}
.modal-container {
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
z-index: 1;
cursor: default;
-webkit-transition: visibility .5s;
transition: visibility .5s;
}
.modal {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
border: .2em solid #9b9;
border-radius: .6em;
background-color: rgba(102, 136, 102, .8);
font-size: 1rem;
line-height: 1em;
overflow: hidden;
-webkit-transition: top .5s, right .5s, bottom .5s, left .5s;
transition: top .5s, right .5s, bottom .5s, left .5s;
}
.modal-header, .modal-footer {
position: absolute;
right: 1em;
left: 1em;
height: 2em;
border-radius: .3em;
background-color: rgba(102, 136, 102, .8);
padding: 0 .2em;
overflow: hidden;
}
.modal-header {
top: 1em;
}
.modal-footer {
bottom: 1em;
}
.modal-text, .modal-btn {
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: .2em;
color: #bdb;
}
.modal-text {
left: 0;
padding: .1em .3em;
line-height: 1.2em;
}
.modal-btn {
right: 0;
border-radius: .6em;
padding: .1em .6em;
background-color: rgba(85, 119, 85, .8);
line-height: 1.3em;
text-decoration: none;
}
.modal-btn:hover, .modal-btn:active, .modal-btn:focus {
background-color: rgba(119, 153, 136, .8);
color: #ced;
}
.modal-body {
position: absolute;
top: 4em;
right: 1em;
bottom: 4em;
left: 1em;
margin-right: .5em;
padding: 0 .5em;
text-align: justify;
overflow: auto;
}
.modal-body:after {
content: "";
display: block;
height: .5em;
}
.modal-show:active > .modal-container, .modal-show:focus > .modal-container {
visibility: visible;
}
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#media (min-width: 320px) {
/* Extra Extra Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#media (min-width: 480px) {
/* Extra Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#media (min-width: 576px) {
/* Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: .5em;
right: .5em;
bottom: .5em;
left: .5em;
}
}
#media (min-width: 768px) {
/* Medium */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 1.5em;
right: 1.5em;
bottom: 1.5em;
left: 1.5em;
}
}
#media (min-width: 992px) {
/* Large */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 3em;
right: 3em;
bottom: 3em;
left: 3em;
}
}
#media (min-width: 1200px) {
/* Extra Large */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 6em;
right: 6em;
bottom: 6em;
left: 6em;
}
}
<a class="btn btn-green modal-show no-drag" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false" draggable="false">
Modal
<div class="modal-container">
<div class="modal">
<object class="modal-header">
<div class="modal-text">Modal Dialog</div>
<a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">x</a>
</object>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ornare nisi, ac aliquam erat. Vestibulum rhoncus, ipsum vitae lobortis pellentesque, odio lorem convallis lorem, nec malesuada dolor magna vitae metus. Duis varius mi vel nunc lobortis blandit. Duis eu posuere tortor. Etiam ac arcu finibus, suscipit sem nec, pulvinar enim. Aliquam pellentesque arcu nec sem iaculis, vitae convallis purus imperdiet. Aenean et dolor a nulla placerat facilisis eget non arcu.
Duis venenatis nulla nec augue vulputate, vel dapibus dui accumsan. Curabitur quis purus vitae lectus cursus fermentum at vehicula turpis. Ut vel facilisis mauris. Duis accumsan, enim sed egestas elementum, orci mi mollis tellus, vel luctus tortor augue gravida est. Nulla at lorem sed elit facilisis interdum. Duis mattis non sapien at laoreet. Sed suscipit elit ut tellus laoreet, sit amet gravida nunc mollis. Nam ullamcorper est quis facilisis scelerisque. Duis nulla diam, blandit sed commodo quis, blandit id felis. Nam eleifend elit et orci aliquet gravida. Donec at commodo diam. Proin vehicula auctor gravida.
Vivamus finibus tempus lobortis. Integer convallis neque non ex placerat porta. Fusce a purus maximus, sollicitudin libero eu, vulputate nibh. Nullam pulvinar enim et purus tincidunt porta. Mauris diam enim, volutpat quis urna sed, rhoncus convallis ante. Vestibulum mollis metus eu dui elementum varius. Vestibulum sodales massa eget viverra malesuada. Vestibulum eget lacinia nunc.
Donec mattis lobortis lorem ac tempor. Donec iaculis, felis eu imperdiet accumsan, ex neque laoreet velit, vitae egestas felis diam vitae massa. Aenean maximus magna velit, vel mattis tortor dapibus sed. Cras vehicula fringilla nulla, eget mattis nibh. Quisque lacinia convallis massa, a consectetur nibh viverra id. Donec quis mauris vitae mi rhoncus lacinia. Ut metus felis, cursus et risus at, fringilla mattis dui. Vestibulum sollicitudin facilisis hendrerit. Morbi a risus nisl. Donec sed gravida turpis. Nulla hendrerit dui mollis dui accumsan, eget facilisis metus vestibulum. Sed vel molestie eros. Quisque ut felis purus. Donec nec bibendum quam, ac accumsan risus. Donec blandit eu ante sollicitudin rutrum. In vitae iaculis est, ac molestie nunc.
Nunc eu justo id dui ultricies facilisis quis eu tortor. Phasellus eget nulla quis elit fringilla maximus. Suspendisse tortor justo, tempor vel accumsan in, suscipit non leo. Pellentesque non gravida sapien. Sed vel ex vel dui tempor pellentesque a eget elit. Pellentesque gravida ligula quis mollis vestibulum. Quisque a nibh id nibh mollis tincidunt. Proin ex eros, sagittis a tellus vel, auctor rutrum arcu. Integer quam erat, congue non tellus vitae, fermentum suscipit metus. Cras quis mi id ante maximus cursus sit amet ac libero.
</div>
<object class="modal-footer">
<a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">Close</a>
</object>
</div>
</div>
</a>
There is a new HTML element called <dialog>. Its support is quite recent but there is a polyfill.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/dialog
Here is an example for you:
<dialog id="my-dialog">
<p>Hello from my dialog</p>
<button id="hide-button">Hide dialog</button>
</dialog>
<button id="show-button">Show dialog</button>
<script>
const showButton = document.querySelector('#show-button');
const hideButton = document.querySelector('#hide-button');
const dialog = document.querySelector('#my-dialog');
showButton.addEventListener('click', () => {
dialog.showModal();
});
hideButton.addEventListener('click', () => {
dialog.close();
});
</script>
I have created this animation and I would like to use it as a preloader.
Am I able to use an animation that is structured by html,css and js or should I create a .gif or a simple css animation?
If I can use it, how can I implement it in my website? I have seen a few tutorials where most people create a css animation and call the class to body and such, my issues is a different story.
var bar = $('span');
var p = $('.noumero');
var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length-1);
var interval;
var start = 0;
var end = parseInt(width);
var current = start;
var countUp = function() {
current++;
p.html(current);
if (current === end) {
clearInterval(interval);
}
};
interval = setInterval(countUp, (2000 / (end + 1)));
div.meter {
position: relative;
width: 400px;
height: 4px;
margin-top: 50px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1.8s linear;
-moz-animation: grower 1.8s linear;
-webkit-animation: grower 1.8s linear;
-o-animation: grower 1.8s linear;
position: relative;
top: -1px;
left: -1px;
background-color:rgba(255,0,0,1);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
.theR{
float:left;
font-size:24px;
font-weight:bold;
color:rgba(255,0,0,1);
float:left;
display:block;
margin-top:0px;
font-family: 'Montserrat', sans-serif;
}
.the255{
float:left;
font-size:24px;
font-weight:bold;
color:rgba(255,0,0,1);
float:left;
display:block;
margin-top:0px;
font-family: 'Montserrat', sans-serif;
}
.theline{
width:255px;
float:left;
font-size:24px;
font-weight:bold;
color:red;
float:left;
display:block;
}
#keyframes grower {
0% {
width: 0%;
}
}
#-moz-keyframes grower {
0% {
width: 0%;
}
}
#-webkit-keyframes grower {
0% {
width: 0%;
}
}
#-o-keyframes grower {
0% {
width: 0%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="meter">
<p class="theR">R</p>
<span style="width:255px;" class="theline"></span>
<p class="noumero the255"></p>
</div>
<div style="clear:both"></div>
You can set content of document to be displayed to display:none at css; use $.holdReady() to hold .ready() handlers; .fadeToggle() to fade out .meter element when animation completes and fade in content of document once .fadeToggle() of .meter container completes
$.holdReady(true);
var bar = $('span');
var p = $('.noumero');
var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length - 1);
var interval;
var start = 0;
var end = parseInt(width);
var current = start;
var countUp = function() {
current++;
p.html(current);
if (current === end) {
clearInterval(interval);
$(".meter").fadeToggle(500, function() {
$.holdReady(false);
})
}
};
interval = setInterval(countUp, (2000 / (end + 1)));
$(document).ready(function() {
$(".content").fadeToggle(5000)
})
div.meter {
position: relative;
width: 400px;
height: 4px;
margin-top: 50px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1.8s linear;
-moz-animation: grower 1.8s linear;
-webkit-animation: grower 1.8s linear;
-o-animation: grower 1.8s linear;
position: relative;
top: -1px;
left: -1px;
background-color: rgba(255, 0, 0, 1);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
.theR {
float: left;
font-size: 24px;
font-weight: bold;
color: rgba(255, 0, 0, 1);
float: left;
display: block;
margin-top: 0px;
font-family: 'Montserrat', sans-serif;
}
.the255 {
float: left;
font-size: 24px;
font-weight: bold;
color: rgba(255, 0, 0, 1);
float: left;
display: block;
margin-top: 0px;
font-family: 'Montserrat', sans-serif;
}
.theline {
width: 255px;
float: left;
font-size: 24px;
font-weight: bold;
color: red;
float: left;
display: block;
}
#keyframes grower {
0% {
width: 0%;
}
}
#-moz-keyframes grower {
0% {
width: 0%;
}
}
#-webkit-keyframes grower {
0% {
width: 0%;
}
}
#-o-keyframes grower {
0% {
width: 0%;
}
}
.content {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="meter">
<p class="theR">R</p>
<span style="width:255px;" class="theline"></span>
<p class="noumero the255"></p>
</div>
<div style="clear:both"></div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac tellus egestas, mattis arcu quis, tincidunt dui. Pellentesque pretium finibus sem, vitae egestas magna sollicitudin sed. Proin ac lectus eget magna porta molestie. Mauris enim tellus, iaculis eget lacus sit amet, varius fringilla augue. Vivamus aliquet lacinia ipsum eget aliquam. Sed et ex neque. Curabitur hendrerit faucibus dignissim. Sed id luctus nunc. Suspendisse ac enim at leo dictum fermentum. Phasellus congue quis nibh at aliquam. Fusce hendrerit dui vel eros tincidunt, id efficitur tellus auctor. Pellentesque et mi placerat eros consequat suscipit. Proin a placerat velit. Suspendisse quis laoreet metus. Integer tristique congue suscipit.
Sed nec accumsan ligula. Duis sit amet iaculis nibh. Suspendisse erat nulla, tincidunt id nibh eu, placerat aliquet ex. Vestibulum sed feugiat magna. Nulla facilisi. Morbi dictum lacinia enim vel commodo. Donec commodo, magna id fringilla varius, dui quam laoreet sem, ac interdum ligula eros non leo. Ut tristique ultricies lobortis. Aliquam justo sapien, malesuada tincidunt commodo et, feugiat in leo. Vivamus eu justo dui. Etiam malesuada magna ut metus malesuada, et dictum ex luctus. Phasellus luctus mauris nisl, id ultricies sem viverra sit amet. Vestibulum commodo nec urna eget dapibus. Integer eu congue purus. Suspendisse gravida convallis nisl ut ullamcorper. Maecenas aliquam orci vestibulum ligula porta, in porttitor libero consequat.
Aliquam eleifend, nisl faucibus elementum ornare, leo mi venenatis dolor, in viverra libero libero vel urna. Curabitur ac enim porta, vulputate tortor et, ultricies felis. Sed augue elit, ultrices in maximus ac, volutpat vel ex. Mauris ut porta erat. Ut eget metus euismod, elementum neque eget, condimentum lacus. Nunc placerat metus at aliquam elementum. Maecenas hendrerit aliquam nunc, at rutrum nunc auctor et. Nam gravida placerat orci, nec euismod justo dapibus in.
Vivamus arcu lectus, pulvinar aliquet mauris eget, suscipit ornare dolor. Cras convallis metus a nisi feugiat volutpat. Sed et tellus ultrices, pulvinar tortor vel, viverra lacus. Morbi ligula ipsum, cursus et sem id, suscipit aliquet ex. Proin interdum id sem nec tristique. Pellentesque vel euismod odio. Praesent porttitor ornare tellus vitae eleifend. Ut ac congue erat.
Nullam in tincidunt sem. Maecenas congue sodales malesuada. Quisque non elit ac risus facilisis sagittis. Duis ultricies lectus eget augue molestie volutpat. Vestibulum at urna sit amet arcu consectetur condimentum. Vivamus ultricies vehicula lacus sodales tristique. Curabitur at est tincidunt felis convallis ullamcorper. Nulla libero turpis, varius quis magna a, ultricies dapibus dolor. Suspendisse diam dui, bibendum ut convallis et, posuere nec magna. Sed iaculis orci in augue auctor, a rhoncus leo elementum. Donec lobortis sed nisl sit amet viverra. Donec pharetra urna eget faucibus egestas.
</div>
For me the simple way would be to use spinner like the ones that you can find in FontAwesome. But If you want to integrate your animation as preloader, you need to call an other function that will check the status of your loading, and if it's improving, you call countup:
interval = setInterval(checkLoading, (2000 / (end + 1)));
In checkLoading you can use a simple mathematical equation to know exactly your progress:
function checkLoading(){
var elementLoaded=countElements();
var realState = (elementLoaded/allElementsToLoad)*end;
while (realState<curent){
countUp();
}
}