I have this slider which changes on hover over bullet but I also want to change the slides automatically after an interval.
Here Is the code for the slider
$(document).ready(function(){
var slide = $(".slide");
var viewWidth = $(window).width();
var sliderInner = $(".slider-inner");
var childrenNo = sliderInner.children().length;
sliderInner.width( viewWidth * childrenNo );
$(window).resize(function(){
viewWidth = $(window).width();
});
function setWidth(){
slide.each(function(){
$(this).width(viewWidth);
$(this).css("left", viewWidth * $(this).index());
});
}
function setActive(element){
var clickedIndex = element.index();
$(".slider-nav .active").removeClass("active");
element.addClass("active");
sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
$(".slider-inner .active").removeClass("active");
$(".slider-inner .slide").eq(clickedIndex).addClass("active");
}
setWidth();
$(".slider-nav > div").on("click", function(){
setActive($(this));
});
$(window).resize(function(){
setWidth();
});
setTimeout(function(){
$(".slider").fadeIn(500);
}, 2000);
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.nav {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: white;
}
.nav h1 {
font-weight: 300;
font-size: 3rem;
}
.nav .author {
text-align: right;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 600px;
line-height: 600px;
text-align: center;
color: white;
font-size: 2rem;
}
.slider {
background-color: white;
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
display: none;
}
.slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
-webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
-webkit-transition-duration: 1s;
transition-duration: 1s;
background-visibility: hidden;
-webkit-transition-delay: .75s;
transition-delay: .75s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
background-visibility: hidden;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
-webkit-transform: translateZ(0) scale(0.8, 0.8);
transform: translateZ(0) scale(0.8, 0.8);
-webkit-transition-duration: .5s;
transition-duration: .5s;
text-align: center;
line-height: 600px;
font-size: 5rem;
color: white;
}
.slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.slide:nth-child(2n) {
background-color: #2ecc71;
}
.slide:nth-child(3n) {
background-color: #3498db;
}
.slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 10px;
height: 10px;
border: 1px solid white;
z-index: 2;
display: inline-block;
margin: 0 10px;
cursor: pointer;
border-radius: 50%;
opacity: .5;
-webkit-transition-duration: .25s;
transition-duration: .25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(2);
transform: scale(2);
opacity: 1;
}
<html >
<head>
<meta charset="UTF-8">
<title>Gummy slider</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="nav">
<h1> slider</h1>
<p class="author">by Atishay Khare</p>
</nav>
<div class="loading">
Loading...
</div>
<div class="slider">
<div class="slider-inner">
<div class="slide active">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">2</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<nav class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
In here some error are also showing when i added it to snippet but it is working fine in my page i just need to make this silder to chnage silder automatically without click.
Use following code within setInterval() method to automatically cycling an item:
var navs = $(".slider-nav > div");
var cur = $(".slider-nav > .active").index();
var nxt = (cur + 1) % navs.length;
setActive(navs.eq(nxt));
See full code in snippet below.
$(document).ready(function(){
var slide = $(".slide");
var viewWidth = $(window).width();
var sliderInner = $(".slider-inner");
var childrenNo = sliderInner.children().length;
sliderInner.width( viewWidth * childrenNo );
$(window).resize(function(){
viewWidth = $(window).width();
});
function setWidth(){
slide.each(function(){
$(this).width(viewWidth);
$(this).css("left", viewWidth * $(this).index());
});
}
function setActive(element){
var clickedIndex = element.index();
$(".slider-nav .active").removeClass("active");
element.addClass("active");
sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
$(".slider-inner .active").removeClass("active");
$(".slider-inner .slide").eq(clickedIndex).addClass("active");
}
setWidth();
$(".slider-nav > div").on("click", function(){
setActive($(this));
});
$(window).resize(function(){
setWidth();
});
setTimeout(function(){
$(".slider").fadeIn(500);
}, 2000);
// Change Slider to automatically each 3 second.
setInterval(function(){
var navs = $(".slider-nav > div");
var cur = $(".slider-nav > .active").index();
var nxt = (cur + 1) % navs.length;
console.log(nxt);
setActive(navs.eq(nxt));
}, 3000);
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.nav {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: white;
}
.nav h1 {
font-weight: 300;
font-size: 3rem;
}
.nav .author {
text-align: right;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 600px;
line-height: 600px;
text-align: center;
color: white;
font-size: 2rem;
}
.slider {
background-color: white;
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
display: none;
}
.slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
-webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
-webkit-transition-duration: 1s;
transition-duration: 1s;
background-visibility: hidden;
-webkit-transition-delay: .75s;
transition-delay: .75s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
background-visibility: hidden;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
-webkit-transform: translateZ(0) scale(0.8, 0.8);
transform: translateZ(0) scale(0.8, 0.8);
-webkit-transition-duration: .5s;
transition-duration: .5s;
text-align: center;
line-height: 600px;
font-size: 5rem;
color: white;
}
.slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.slide:nth-child(2n) {
background-color: #2ecc71;
}
.slide:nth-child(3n) {
background-color: #3498db;
}
.slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 10px;
height: 10px;
border: 1px solid white;
z-index: 2;
display: inline-block;
margin: 0 10px;
cursor: pointer;
border-radius: 50%;
opacity: .5;
-webkit-transition-duration: .25s;
transition-duration: .25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(2);
transform: scale(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<nav class="nav">
<h1> slider</h1>
<p class="author">by Atishay Khare</p>
</nav>
<div class="loading">
Loading...
</div>
<div class="slider">
<div class="slider-inner">
<div class="slide active">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">2</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<nav class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</nav>
</div>
Set an interval. You can invoke automatically and reset with click event of a slide. Recall startAuto() to reset as there is a clearTnteval() added.
var Auto;
function startAuto() {
clearInterval(Auto);
Auto = setInterval(function(){
element = $(".middle-slider-nav .active").next();
setActive(element);
}, 3000);
}
Related
I have an issue with js. I want to make an responsive menu. I mean when I am on start page the start page is on first place on the list. If I am on contact page the contact is first in the list. var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]; <div class="name_container"><p class="pn">Start</p><p class="more">READ MORE</p></div> The menu is a circle with icons that are moving on it. First element in list is on bottom of the circle. On conclusion I need change the list dinamicly in js script depends on subpage i am on. I know i can create several js files and it will work, but i wonna try it by js or HTML or u have some ideas.
Thanks from any help
var element = document.getElementById('mobile_control');
var hammertime = new Hammer(element);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('swipeleft', function(ev) {
cmove("prev");
});
hammertime.on('swiperight', function(ev) {
cmove("next");
});
$(".action").on("click", function(){
cmove($(this).attr('id'));
});
$('.title').each(function(){
$(this).html("Earth".replace("<span class='letter'>$&</span>"));
});
var angle = 0;
var planet_id = 0;
function cmove(dir){
var n_planet = 8, next_id;
var prev, next;
var top = $("#pl"+ planet_id);
var orbit = $(".planet_container");
top.removeClass("pt");
if(planet_id == 0){
prev = $("#pl"+ (n_planet-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}else{
prev = $("#pl"+ (planet_id-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}
if(dir == "prev"){
next_id = (planet_id + 1) % n_planet;
angle -= 45;
next.addClass("pt");
planet_id++;
}else{
if(planet_id == 0){
next_id = 7;
planet_id = 7;
}else{
next_id = planet_id-1;
--planet_id;
}
angle += 45;
prev.addClass("pt");
}
$('.pn').each(function(){
$(this).html(planet[next_id].replace( "<span class='letter'>$&</span>"));
});
anime.timeline({})
.add({
targets: '.pn .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
});
orbit.css("transform", "rotateZ(" + angle + "deg)");
}
var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
let loocation_path = location.pathname.split('/');
var path = loocation_path[loocation_path.length - 1];
switch(path){
case 'index.html':
while(planet[0] != 'Start'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Start";
break;
case 'contact.html':
while(planet[0] != 'Contact'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Contact";
break;
}
const planets = document.querySelectorAll('.moon');
var moon_id = 0;
function moon(direction){
var n_planet = 8, moon_next;
if(direction == "prev"){
moon_next = (moon_id + 1) % n_planet;
moon_id++;
} else {
if(moon_id == 0){
moon_next = 7;
moon_id = 7;
} else {
moon_next = moon_id - 1;
--moon_id;
}
};
planets.forEach( ( planet, i ) => {
if ( i === moon_next ) {
planet.style.visibility = 'visible';
} else {
planet.style.visibility = 'hidden';
}
} );
};
body {
color: #444444;
font-size: 1rem;
margin: 0;
padding: 0;
}
.t-site-header {
padding-top: 20px;
height: 30vh;
}
.full_container {
position: relative;
display: block;
width: 100vmin;
height: 100%;
margin: auto;
z-index: 100;
}
.full_container .bottom {
position: absolute;
transform: rotate(180deg);
top: 0;
width: 100%;
height: 28vh;
}
.full_container .bottom .nav {
width: 100%;
height: 40px;
padding-top: 15px;
display: block !important;
}
.full_container .bottom .nav span {
color: #999;
cursor: pointer;
}
.full_container .bottom .nav span i {
font-size: 40px;
font-weight: 200;
}
.full_container .bottom .nav span:nth-child(1) {
padding-left: 10vmin;
}
.full_container .bottom .nav span:nth-child(2) {
padding-right: 10vmin;
float: right;
}
.full_container .bottom .orbit {
position: absolute;
top: 5vh;
width: 100%;
height: 100vmin;
border-radius: 50%;
border: 3px solid #eee;
margin: auto;
left: 0;
right: 0;
}
.full_container .bottom .orbit .planet_container {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.7s ease-in;
}
.full_container .bottom .orbit .planet_container .planet {
position: absolute;
border-radius: 50%;
width: 5vmin;
height: 5vmin;
transition: transform 0.4s linear;
will-change: transform;
}
.full_container .bottom .orbit .planet_container .pt {
transition: transform 0.4s ease-in;
transform: scale(1.7);
will-change: transform;
-webkit-animation: spin 0.4s;
animation: spin 0.4s;
}
/* */
.full_container .bottom .orbit .planet_container .earth {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
top: -2.5vmin;
left: 0;
right: 0;
margin: auto;
/* transform: rotate(180deg)*/
}
.full_container .bottom .orbit .planet_container .earth .mars .jupiter .saturn .uranus .neptune .mercury .venus .moon span {
top: -1vmin;
left: -1vmin;
}
.full_container .bottom .orbit .planet_container .mars {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
top: 12vmin;
/* transform: rotate(-135deg)*/
}
.full_container .bottom .orbit .planet_container .jupiter {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(-90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .saturn {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
bottom: 12vmin;
/* transform: rotate(-45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .uranus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 0;
left: 0;
margin: auto;
bottom: -2.5vmin;
/* transform: rotate(0deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .neptune {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
bottom: 12vmin;
/* transform: rotate(45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .mercury {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .venus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
top: 12vmin;
/* transform: rotate(135deg) scale(1.7);*/
}
.full_container .bottom .orbit .name_container {
position: absolute;
display: flex;
width: auto;
margin: auto;
left: 0;
right: 0;
top: 8vh;
text-align: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
transform: rotate(180deg);
}
.full_container .bottom .orbit .name_container .more {
width: 100%;
padding: 8px 0;
color: #bbb;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.full_container .bottom .orbit .name_container .more:hover {
color: #888;
transition: color 0.3s;
}
.full_container .bottom .orbit .name_container .pn {
font-size: 25px;
color: #666;
text-transform: uppercase;
padding-bottom: 4px;
letter-spacing: 4px;
padding-left: 8px;
border-bottom: 3px solid #bbb;
}
.full_container .bottom .orbit .name_container .pn .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
.moon {
width: 100%;
height: 100%;
-webkit-animation: planet_rotation 2s infinite linear;
animation: planet_rotation 2s infinite linear;
visibility: hidden;
}
.moon span {
width: 0.8vmin;
height: 0.8vmin;
background: black;
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#pl0{
transform: rotate(180deg);
}
#pl1{
transform: rotate(225deg);
}
#pl2{
transform: rotate(270deg);
}
#pl3{
transform: rotate(315deg);
}
#pl4{
transform: rotate(360deg);
}
#pl5{
transform: rotate(405deg);
}
#pl6{
transform: rotate(450deg);
}
#pl7{
transform: rotate(495deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<header class="t-site-header">
<div class="full_container" id="mobile_control">
<div class="bottom">
<div class="nav">
<span id="next" onclick="moon('next')" class="action"><i class="material-icons">keyboard_arrow_left</i></span>
<span id="prev" onclick="moon('prev')" class="action"><i class="material-icons">keyboard_arrow_right</i></span>
</div>
<div class="orbit">
<div class="planet_container">
<div class="planet pt earth" id="pl0">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mars" id="pl1">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet jupiter" id="pl2">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet saturn" id="pl3">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet uranus" id="pl4">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet neptune" id="pl5">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mercury" id="pl6">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet venus" id="pl7">
<div class="moon">
<span></span>
</div>
</div>
</div>
<div class="name_container">
<p class="pn" id="show_pathname"></p>
<p class="more">READ MORE</p>
</div>
</div>
</div>
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script><script src="./js/script.js"></script>
</body>
</html>
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>
I have a responsive menu bar that has a dropdown list which is named three. However, I cannot make its format same with the other title and it moves once it is being hovered. Is there any way that the format title of three be the same as one, two, four and five? And when it is being hovered, is it possible that its position be in a fixed place? Please help. I already tried inline but it doesn't work either. And kindly run the snippet in full screen.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel = "icon" href = "https://cdn.iconscout.com/icon/free/png-256/data-fiveence-46-1170621.png" type = "image/x-icon">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
#media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
#media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
#media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
#keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
p {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
p:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="one()">one</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">two</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<p class="strip__title" style="margin-left:-15px">three</p>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="sdct()">two</a>
<a class="dropdown-item" onclick="four()">four</a>
</div>
</li>
</ul>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">four</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="">five</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; /* add a width */
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: absolute; /*position is changes (relative --> absolute)*/
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
I have applied an if/else statement, (within a larger function), that does not seem to process at all in the Safari browser. The .addClass() and .removeClass() actions do not even apply when prompted.
This is a brief example of the if/else statement referenced, along with the according CSS:
$(document).ready(function() {
var $window = $(window);
var div2 = $('#toggle-element');
var div1 = $('#container');
$window.on('scroll', function() {
if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
div2.addClass('show');
} else {
div2.removeClass('show');
}
});
});
#toggle-element {
height: 50px;
text-align: center;
margin: auto;
top: 0;
bottom: 0;
right: 50%;
left: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 500ms, visibility 500ms;
-o-transition: opacity 500ms, visibility 500ms;
transition: opacity 500ms, visibility 500ms;
z-index: 1;
position: fixed;
max-width: 1000px;
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#toggle-element.show {
visibility: visible;
opacity: 1;
}
#container {
width: 60%;
height: 2000px;
margin: 0 auto;
position: relative;
background: blue;
display: block;
text-align: center;
color: #fff;
}
UPDATE: Here is a full snippet utilizing the example above:
$(document).ready(function() {
var $window = $(window);
var div2 = $('#toggle-element');
var div1 = $('#container2');
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
var window_top_to_div2 = ($window.height() - div2.height()) / 2;
var div1_top = div1.offset().top;
var div1_height = div1.height();
var div1_bottom = div1_top + div1_height;
if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
div2.addClass('show');
} else {
div2.removeClass('show');
}
});
});
#toggle-element {
height: 50px;
text-align: center;
margin: auto;
top: 0;
bottom: 0;
right: 50%;
left: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 500ms, visibility 500ms;
-o-transition: opacity 500ms, visibility 500ms;
transition: opacity 500ms, visibility 500ms;
z-index: 1;
position: fixed;
max-width: 1000px;
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#toggle-element.show {
visibility: visible;
opacity: 1;
}
#toggle-element .wrap {
position: relative;
height: 50px;
width: 80%;
margin: 0 auto;
}
#toggle-element .navbtns {
display: table-cell;
width: 50px;
height: 50px;
position: absolute;
top: 0;
background: transparent;
}
#toggle-element .navbtns svg {
fill: blue;
opacity: .8;
overflow: visible;
will-change: opacity;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#toggle-element .navbtns svg:hover {
opacity: 1;
}
#toggle-element .prev {
right: 0;
margin-right: -25px;
}
#toggle-element .next {
left: 0;
margin-left: -25px;
}
#container1,
#container3 {
width: 60%;
height: 1000px;
background: yellow;
margin: 0 auto;
display: block;
text-align: center;
}
#container2 {
width: 60%;
height: 2000px;
margin: 0 auto;
position: relative;
background: blue;
display: block;
text-align: center;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle-element">
<div class="wrap">
<a href="#" class="navbtns prev" title="Go to Next Page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,0,0,25,25,25,0,0,0,25,50ZM25,2A23,23,0,1,1,2,25,23,23,0,0,1,25,2Zm-3,9V39L32,25Z" style="fill-rule:evenodd"/></svg>
</a>
<a href="#" class="navbtns next" title="Go to Previous Page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,1,50,25,25,25,0,0,1,25,50ZM25,2A23,23,0,1,0,48,25,23,23,0,0,0,25,2Zm3,9V39L18,25Z" style="fill-rule:evenodd"/></svg>
</a>
</div>
</div>
<div id="container1">
Scroll down to <b>#container2</b>
</div>
<div id="container2">
This is <b>#container2</b>
</div>
<div id="container3">
Scroll up to <b>#container2</b>
</div>
Thanks to MikaelLennholm's recommendation, the issue has now been resolved!
The complication seemed to be with document.documentElement.scrollTop. By replacing it with $(window).scrollTop(), the script now runs smoothly cross-browser.
Here is a snippet of the working script, in action:
$(document).ready(function() {
var $window = $(window);
var div2 = $('#toggle-element');
var div1 = $('#container2');
$window.on('scroll', function() {
var scrollTop = $(window).scrollTop();
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
var window_top_to_div2 = ($window.height() - div2.height()) / 2;
var div1_top = div1.offset().top;
var div1_height = div1.height();
var div1_bottom = div1_top + div1_height;
if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
div2.addClass('show');
} else {
div2.removeClass('show');
}
});
});
#toggle-element {
height: 50px;
text-align: center;
margin: auto;
top: 0;
bottom: 0;
right: 50%;
left: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 500ms, visibility 500ms;
-o-transition: opacity 500ms, visibility 500ms;
transition: opacity 500ms, visibility 500ms;
z-index: 1;
position: fixed;
max-width: 1000px;
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#toggle-element.show {
visibility: visible;
opacity: 1;
}
#toggle-element .wrap {
position: relative;
height: 50px;
width: 80%;
margin: 0 auto;
}
#toggle-element .navbtns {
display: table-cell;
width: 50px;
height: 50px;
position: absolute;
top: 0;
background: transparent;
}
#toggle-element .navbtns svg {
fill: blue;
opacity: .8;
overflow: visible;
will-change: opacity;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#toggle-element .navbtns svg:hover {
opacity: 1;
}
#toggle-element .prev {
right: 0;
margin-right: -25px;
}
#toggle-element .next {
left: 0;
margin-left: -25px;
}
#container1,
#container3 {
width: 60%;
height: 1000px;
background: yellow;
margin: 0 auto;
display: block;
text-align: center;
}
#container2 {
width: 60%;
height: 2000px;
margin: 0 auto;
position: relative;
background: blue;
display: block;
text-align: center;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle-element">
<div class="wrap">
<a href="#" class="navbtns prev" title="Go to Next Page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,0,0,25,25,25,0,0,0,25,50ZM25,2A23,23,0,1,1,2,25,23,23,0,0,1,25,2Zm-3,9V39L32,25Z" style="fill-rule:evenodd"/></svg>
</a>
<a href="#" class="navbtns next" title="Go to Previous Page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,1,50,25,25,25,0,0,1,25,50ZM25,2A23,23,0,1,0,48,25,23,23,0,0,0,25,2Zm3,9V39L18,25Z" style="fill-rule:evenodd"/></svg>
</a>
</div>
</div>
<div id="container1">
Scroll down to <b>#container2</b>
</div>
<div id="container2">
This is <b>#container2</b>
</div>
<div id="container3">
Scroll up to <b>#container2</b>
</div>
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>