I am trying to show a <div> element once per hour, but the code is not working, when I add the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='showOnceAnHour' style='display: none'>
<script>
$(document).ready(function() {
setInterval(function() {
$("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
}, 60*60*1000);
});
</script>
This code is working fine without it but I want to show that content once per hour. Please take a look and let me know where I am going wrong.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.btnadpop {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btnadpop:hover {
background: #357ebd;
}
.btnadpop.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modaladpop:target:before {
display: none;
}
.modaladpop:before {
content:"";
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modaladpop .modal-dialoger {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
top: 20%;
}
.modaladpop:target .modal-dialoger {
top: -100%;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
}
.modal-bodyadpop {
padding: 20px;
}
.modal-headeradpop, .modal-footer {
padding: 10px 20px;
}
.modal-headeradpop {
border-bottom: #eeeeee solid 1px;
}
.modal-headeradpop h2 {
font-size: 20px;
}
.modal-footeradpop {
border-top: #eeeeee solid 1px;
text-align: center;
}
</style>
</head>
<body>
<div id='showOnceAnHour' style='display: none'>
<script>
$(document).ready(function() {
setInterval(function() {
$("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
}, 60*60*1000);
});
</script>
<!-- Modal -->
<div class="modaladpop" id="modal-one" aria-hidden="true">
<div class="modal-dialoger">
<div class="modal-headeradpop">
<h2>Welcome</h2>
</div>
<div class="modal-bodyadpop">
<p>This is an Example</p>
</div>
<div id="butnclose" class="modal-footeradpop"> Close
<script>
document.getElementById("butnclose").style.display = "none";
function showStuff() {
document.getElementById("butnclose").style.display = "block";
}
setTimeout(showStuff, 5000);
</script>
</div>
</div>
</div>
</div>
</body>
</html>
You are attempting to use jQuery selectors but you are not importing the jQuery library, you can do so by adding this in your HTML head:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
You are just missing JQuery CDN or static import in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='showOnceAnHour' style='display: none'><h1>Div</h1></div>
<script>
$(document).ready(function() {
setInterval(function() {
$("#showOnceAnHour").fadeIn().delay(10).fadeOut();
}, 60);
});
</script>
<h3>I Just changes the fadeIn and fadeOut time for demo purpose</h3>
Related
I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #6665ee;
}
.skill-bars{
padding: 25px 30px;
width: 600px;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
#media all and (max-width: 500px) {
.skill-bars{
background: black;
}
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: #6665ee;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span{
width: 90%;
}
.bar .progress-line.css span{
width: 60%;
}
.bar .progress-line.jquery span{
width: 85%;
}
.bar .progress-line.python span{
width: 50%;
}
.bar .progress-line.mysql span{
width: 75%;
}
.progress-line span::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span::after{
content: "90%";
}
.progress-line.css span::after{
content: "60%";
}
.progress-line.jquery span::after{
content: "85%";
}
.progress-line.python span::after{
content: "50%";
}
.progress-line.mysql span::after{
content: "75%";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="skill-bars">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line html">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>jQuery</span>
</div>
<div class="progress-line jquery">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>Python</span>
</div>
<div class="progress-line python">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>MySQL</span>
</div>
<div class="progress-line mysql">
<span></span>
</div>
</div>
</div>
</body>
</html>
So here for some reason, the background of the box turns black when you inspect the page and set it to responsive - that is what I want - but on my end, it does not work. Am I missing a reference link or something?
It does not work here: https://replit.com/join/wgghqoeseb-hussainomer1
What reference link do I seem to be missing? Any suggestions?
Add this to the header
<meta name="viewport" content="width=device-width, initial-scale=1" />
It helps the website position with the right viewport.
For more info checkout
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
I have my code from this site: https://isabelcastillo.com/error-info-messages-css
I want that a css message box is shown for 3 seconds after a button click and then the message is fading out.
Here is my code:
.isa_success,
.isa_error {
margin: 8px 0px;
padding: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.isa_error {
color: #D8000C;
background-color: #FFD2D2;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
<button id="handle">Fade</button>
<div id="isa_success">Whatever you want here - images or text</div>
Test
<script type="text/javascript">
function start() {
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}}
</script>
This script does not work.
Here is my working code. My main fault was that i have forgot to remove the classelement after a specific time.
Thanks for help!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fade{
background: red;
opacity:0;
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
margin: 8px 0px;
padding:8px;
position: absolute;
left: 50%;
top: 20%;
}
.elementToFadeInAndOut {
animation: fadeInOut 3s linear forwards;
}
#keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
</style>
</head>
<body onload="javascript:start();">
<body>
<script type="text/javascript">
function start() {
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 3000);
});
}
</script>
<button class="fadeButton">Button</button>
<div class="fade">This is a message!</div>
</body>
</html>
You are adding a class 'fade' to the classist but don't have it in the CSS file.
try this
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}
.isa_success,
.isa_error {
margin: 8px 0px;
padding: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.isa_error {
color: #D8000C;
background-color: #FFD2D2;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.fade{
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
<button id="handle">Fade</button>
<div id="isa_success">Whatever you want here - images or text</div>
Test
There is a possibility to do this without Javascript. What's important though is the sequence of the HTML elements.
Here I am using a hidden checkbox to determine whether or not a button (label) was clicked.
#clickMe {
display: none;
}
#clickMeLabel {
padding: 10px;
background-color: lightgreen;
border: none;
border-radius: 10px;
display: inline-block;
}
#clickMe:checked+#clickMeLabel {
background-color: green;
color: white;
}
#isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
transition: opacity 3s;
}
#clickMe:checked~#isa_success {
opacity: 1;
}
<input id="clickMe" type="checkbox">
<label for="clickMe" id="clickMeLabel">Click me</label>
<div id="isa_success">Whatever you want here - images or text</div>
I want to change background color of main wrapper using the background-color attribute via CSS button
My class is <div class='mainWrapper fullWidth'> the CSS for the class is .mainWrapper
Below is the CSS for the button I found it at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
I tried the following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<style>
body {
background: grey;
}
</style>
<script>
function colorize(light) {
if (light) {
document.body.style.background = 'grey';
}
else {
document.body.style.background = 'blue';
}
}
</script>
<body>
<div id="switch">
<button id="slider round" onclick="colorize(true)"></button>
<div id="slider">
<button onclick="colorize(false)"></button>
</div>
</div>
</body>
Do you want to change the background color with the toggle switch?
If so you can add an event listener to the checkbox and change the background of your wrapper div/class using javascript or jQuery.
Here is an example of it.
https://jsfiddle.net/ba513j27/
<div id="wrapper">
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked id="tog-bg">
<span class="slider round"></span>
</label>
</div>
<script>
document.getElementById("tog-bg").addEventListener('change', function(){
if(document.getElementById("tog-bg").checked) {
document.getElementById("wrapper").style.backgroundColor = "white";
} else {
document.getElementById("wrapper").style.backgroundColor = "green";
}
});
</script>
Select DOM elements using the class name, then add any color that you want
document.getElementsByClassName("mainWrapper").style.backgroundColor = "Color Name";
So I am trying to basically change the button that is currently actives color. I have tried to create a css class called "activePage" and add it to whichever button is clicked on. But that has not worked.
So basically if you click the "projects" button it should change the color of that button to red, and if you click the "about" button it should change that button to red and change the "projects" button back to its original color.
function homeTransition()
{
$(this).toggleClass('activePage');
if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("aboutContent").className = " animated slideOutLeft";
}
if(document.getElementById("projectsContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("projectsContent").className = " animated slideOutLeft";
}
if(document.getElementById("contactContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("contactContent").className = " animated slideOutLeft";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = "activePage animated slideInLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
$(this).toggleClass('activePage');
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = "activePage animated slideInLeft";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
$(this).toggleClass('activePage');
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = "activePage animated slideInLeft";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(38, 139, 190, 0.84);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
.activePage {
color: red;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:16px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:'Lato';
font-size: 1.5em;
font-weight: 300;
}
a:hover {
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
transition: all .2s ease-in-out;
}
.button:hover {
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<img id="astronaut" src="images/astronaut.png">
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()" class="noselect"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()" class="noselect"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()" class="noselect"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()" class="noselect"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
Your click functions are out of jQuery's scope.
I clipped out irrelevant code, so don't just copy and paste.
I change the HTML so it does not use onClick, and the binding happens inside jQuery's ready function instead. In addition, I modified the CSS to target the anchor tage which is actually responsible for the text style.
See the refactoring to your snippet I did below:
//Menu
$(function() {
function expand() {
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$('.noselect').click(function() {
$('.noselect').removeClass('activePage');
$(this).toggleClass('activePage');
});
$(".button").on('click', expand);
});
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(38, 139, 190, 0.84);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align: center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
.activePage {
color: red;
}
h1 {
margin-top: 60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding: 0;
list-style: none;
font-size: 16px;
}
li {
padding: 10px 10px;
}
a {
text-decoration: none;
padding: 10px 15px;
color: #fff;
font-family: 'Lato';
font-size: 1.5em;
font-weight: 300;
}
a:hover {
color: #0dffec;
}
.content {
position: relative;
width: 300px;
}
.button {
width: 20px;
height: 40px;
margin: 24% 36%;
padding: 14px;
cursor: pointer;
transition: all .2s ease-in-out;
}
.button:hover {
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
.activePage a {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<img id="astronaut" src="images/astronaut.png">
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" class="noselect">
<li><i class="fa fa-home"></i> home</li>
</div>
<div id="about" class="noselect">
<li><i class="fa fa-user"></i> about</li>
</div>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent"></div>
<div id="projectsContent"></div>
<div id="contactContent"></div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
There's an 'active' property in CSS that allows you to change color and other characteristics of your elements.
Example:
button:active{
background:olive;
}
button:focus{
background:olive;
}
Hope this helps
'this' variable inside homeTransition and all other functions referring to window object.
You can fix the code by:
Changing onclick function call in HTML to:
<div id="home" onclick="homeTransition(event)"
And by adding event arguement in js file:
function homeTransition(event) {
$(event.target).toggleClass('activePage');
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
I have a div content section .white-back is a slider.
I want to show it on two tags.
I tried to use:
.white-back{
display: flex;
object-fit: center;
align-items: center;
}
but it does not display on the screen.
It should look like:
The slider .white-back on the center of the screen.
div.form and div.invite is background of slider.
See my code at here:
$(".close, .nope").on('click', function () {
$('.modal').addClass('hidden');
$('.open').addClass('active');
})
$(".open").on('click', function () {
$(this).removeClass('active');
$('.modal').removeClass('hidden');
})
$('.quotes').slick({
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 6000,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
});
$( document ).ready(function() {
$('.no-fouc').removeClass('no-fouc');
});
*, :before, :after {
box-sizing: border-box;
margin: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body {
overflow: hidden;
}
.popup {
color: #FFF;
font-family: Roboto;
}
.modal {
height: 450px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .4s, box-shadow .3s .4s;
transition: .4s, box-shadow .3s .4s;
}
.modal.hidden {
box-shadow: none;
-webkit-transition: .4s, box-shadow 0s;
transition: .4s, box-shadow 0s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.modal.hidden .form {
top: 100%;
}
.modal.hidden .invite {
top: -100%;
}
.modal.hidden .invite .close {
height: 0;
width: 0;
top: 0;
right: 0;
}
.wrap-parent {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 500px #7a7a7a inset;
-webkit-text-fill-color: #FFF;
}
label {
font: 500 14px Roboto;
color: #ffb66e;
}
button {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
button:hover:before {
left: 110%;
-webkit-transition: .3s;
transition: .3s;
}
button:before {
content: '';
background: rgba(255, 255, 255, 0.3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transition: 0s;
transition: 0s;
}
h2 {
font: 30px Roboto;
text-transform: uppercase;
}
.close {
background: #474747;
height: 30px;
width: 30px;
border: 3px solid #FFF;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
-webkit-transition: .4s .3s;
transition: .4s .3s;
}
.close:before, .close:after {
content: '';
background: #FFF;
height: 80%;
width: 3px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.open {
color: black;
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.open.active {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
.form {
background: red;
padding: 440px 0;
-webkit-transform: skew(0deg, -20deg);
transform: skew(0deg, -20deg);
margin-top: -250px;
padding-top: 140px !important;
}
.invite {
background: black;
padding-top: 300px;
transform: skew(0deg, -20deg);
padding-bottom: 280px;
}
/*.form form {
-webkit-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
text-align: center;
}
.invite .content {
-webkit-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
text-align: center;
}*/
/* Simple Slider */
.white-back{
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background: #fff;
display: flex;
object-fit: center;
align-items: center;
}
.simple blockquote p {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #1e528e;
padding: 25px;
font-size: 1.25em;
font-style: italic;
text-align: center;
}
.simple cite {
font-size: 1em;
float: right;
font-style: normal;
color: #1e528e;
}
.simple cite a {
color: #2d91c2;
font-style: italic;
text-decoration: none;
font-size:.85em;
}
.simple cite a:hover {
color: #00B4CC;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daily UI #001 - Sign Up Modal</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
</head>
<body>
<div class="popup">
<a class="open active" title="open modal" href="#">Open Modal</a>
<div class="modal hidden wrap-parent">
<div class="form">
</div>
<div class="invite">
</div>
<!-- Simplest Slider -->
<section role="complementary" class="simple white-back quotes no-fouc">
<blockquote>
<p><strong>to cite (verb)</strong>: to acknowledge (give credit to) the original author or artist by providing a reference.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p><strong>citation (noun)</strong>: a properly formatted line of text that indicates the source for a quote, idea, fact etc. that you use.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p>If you are repeating a section of the article for emphasis, use an aside element.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p> A blockquote element cannot be inside a paragraph, and since HTML4 actually needs to contain paragraphs.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p><strong>to cite (verb)</strong>: to acknowledge (give credit to) the original author or artist by providing a reference.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p><strong>citation (noun)</strong>: a properly formatted line of text that indicates the source for a quote, idea, fact etc. that you use.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p>If you are repeating a section of the article for emphasis, use an aside element.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p> A blockquote element cannot be inside a paragraph, and since HTML4 actually needs to contain paragraphs.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
</section>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
</body>
</html>
Please click full screen button to show full my example.
Or JsFiddle: https://jsfiddle.net/gyzsaueg/2/
Add position:absolute; to your css for simple header
.white-back{
position: absolute;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background: #fff;
display: flex;
object-fit: center;
align-items: center;
}
You will have to adjust the height and width after.
Hope this helps.