I'm starting my journey in creating webpages. I crave something to try to imitate windows 10 start UI as well as there animation on browser. But the problem is that I'm not yet knowledgeable with javascript. If you dont mind please do check my codes for some problems. Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
CSS
#font-face {
font-family: RobotoL;
src:url(fonts/Roboto-Light.ttf);
}
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
JavaScript
function slideShow() {
setInterval( function show(){
var next = 0;
if (next == 0) {
animate();
next++:
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('samDesc').style.marginTop = "-2%";
document.getElementById('samDesc1').style.marginTop = "25%";
document.getElementById('samDesc1').style.opacity = "1";
document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('samDesc').style.marginTop = "17%";
document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('samDesc1').style.opacity = "0";
document.getElementById('samDesc').style.opacity = "1";
}
Use slideShow(); at the end of your javascript code.
Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin.
Hi Please check this code now working you define the wrong semicolon symbol the next++; and element id is wrong in js wrong i have fixed this issue check now this code.
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<style>
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
</style>
<script type="text/javascript" >
function slideShow() {
var next = 0;
setInterval( function show(){
if (next == 0) {
animate();
next++;
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('savDesc').style.marginTop = "-2%";
document.getElementById('savDesc1').style.marginTop = "25%";
document.getElementById('savDesc1').style.opacity = "1";
document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('savDesc').style.marginTop = "17%";
// document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('savDesc1').style.opacity = "0";
document.getElementById('savDesc').style.opacity = "1";
}
</script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
For the setInterval function in slideShow(), put either
setInterval('animate()', 1000);
Or
setInterval(animate, 1000);
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
The slider works fine; the testimonial changes with a click of the left or right chevron arrow buttons. But I want to make it so that when I click the right or left arrow, it does a fade-out into a fade-in transition into the next testimonial by means of opacity. As you can see that is what I attempted to do on the second script, but it didn't work. I'm not sure why it is not working, any help would be appreciated.
.testimonial {
position: relative;
top: 0px;
max-width: 800px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
text-align: center;
line-height: 2;
}
.testimonial span {
font-weight: 500;
font-size: 25px;
color: #fff;
}
.testimonial q {
font-size: 22px;
color: #fff;
}
.testimonial img {
padding-right: 10px;
padding-left: 10px;
width: 100px;
border-radius: 50%;
}
.left {
position: absolute;
cursor: pointer;
bottom: 120px;
right: 370px;
width: 30px;
height: 30px;
}
.right {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
bottom: 120px;
left: 370px;
}
.testimonials h1 {
position: relative;
font-size: 35px;
text-align: center;
top: 90px;
color: #fff;
}
.testimonials {
position: relative;
background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
background-size: cover;
font-size: 10px;
color: #000;
}
.testimonials::before {
content: "";
background-image: linear-gradient(35deg, darkgrey, darkslategrey);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.8;
}
.testimonialImg img {
position: relative;
text-align: center;
max-width: 140px;
top: 0px;
left: 160px;
}
.testimonialImg h1 {
position: relative;
top: 0px;
}
.chevron img {
filter: invert(1);
}
.testimonial4 img {
background: white;
border-radius: 50%;
padding-top: 20px;
padding-bottom: 20px;
}
.testimonial1 img {
padding: 0px;
background: white;
border-radius: 50%;
}
.testimonial3 img {
padding: 0px;
}
.testimonial2 img {
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="testimonials">
<div class="testimonialImg">
<h1>Testimonials</h1>
<img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png">
</div>
<div class="testimonial testimonial1">
<img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"><br>
<span>Albert Einstein</span> <br>
<q>We cannot solve our problems with the same thinking we used when we created them.</q>
</div>
<div class="testimonial testimonial2">
<img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"><br>
<span>Nelson Mandela</span> <br>
<q>I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.</q>
</div>
<div class="testimonial testimonial3">
<img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"> <br>
<span>Abraham Lincoln</span> <br>
<q>You cannot escape the responsibility of tomorrow by evading it today.</q>
</div>
<div class="testimonial testimonial4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"><br>
<span>Martin Luther King Jr</span> <br>
<q>Faith is taking the first step even when you don't see the whole staircase.</q>
</div>
<div class="chevron">
<img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);" onclick="navClickTransition(0);">
<img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&ext=jpg" class="right" onclick="nextSlide(1);" ; onclick="navClickTransition(0);">
</div>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("testimonial");
if (n > slides.length) {
slide_index = 1
}
if (n < 1) {
slide_index = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
<script type="text/javascript">
function navClickTransition() {
const navClick = document.getElementsByClassName("testimonial");
navClick.style.opacity = 1;
}
</script>
</html>
It was quite alright, however you missed a couple of steps in the animation process, here is a modified version of your code, I explained everything in comments.
Edited version whit fade out and fade in animations:
.testimonial {
position: relative;
top: 0px;
max-width: 800px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
text-align: center;
line-height: 2;
}
.active{
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.inactive{
opacity: 0;
animation-name: fadeOut;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.testimonial span {
font-weight: 500;
font-size: 25px;
color: #fff;
}
.testimonial q {
font-size: 22px;
color: #fff;
}
.testimonial img {
padding-right: 10px;
padding-left: 10px;
width: 100px;
border-radius: 50%;
}
.left {
position: absolute;
cursor: pointer;
bottom: 120px;
right: 370px;
width: 30px;
height: 30px;
}
.right {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
bottom: 120px;
left: 370px;
}
.testimonials h1 {
position: relative;
font-size: 35px;
text-align: center;
top: 90px;
color: #fff;
}
.testimonials {
position: relative;
background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
background-size: cover;
font-size: 10px;
color: #000;
}
.testimonials::before {
content: "";
background-image: linear-gradient(35deg, darkgrey, darkslategrey);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.8;
}
.testimonialImg img {
position: relative;
text-align: center;
max-width: 140px;
top: 0px;
left: 160px;
}
.testimonialImg h1 {
position: relative;
top: 0px;
}
.chevron img {
filter: invert(1);
}
.testimonial4 img {
background: white;
border-radius: 50%;
padding-top: 20px;
padding-bottom: 20px;
}
.testimonial1 img {
padding: 0px;
background: white;
border-radius: 50%;
}
.testimonial3 img {
padding: 0px;
}
.testimonial2 img {
padding: 0px;
}
#keyframes fadeIn {
from{opacity: 0}
to{opacity: 1}
}
#keyframes fadeOut {
from{opacity: 1}
from:{opacity: 0}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="testimonials">
<div class="testimonialImg">
<h1>Testimonials</h1>
<img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png">
</div>
<div class="testimonial testimonial1">
<img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"><br>
<span>Albert Einstein</span> <br>
<q>We cannot solve our problems with the same thinking we used when we created them.</q>
</div>
<div class="testimonial testimonial2">
<img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"><br>
<span>Nelson Mandela</span> <br>
<q>I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.</q>
</div>
<div class="testimonial testimonial3">
<img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"> <br>
<span>Abraham Lincoln</span> <br>
<q>You cannot escape the responsibility of tomorrow by evading it today.</q>
</div>
<div class="testimonial testimonial4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"><br>
<span>Martin Luther King Jr</span> <br>
<q>Faith is taking the first step even when you don't see the whole staircase.</q>
</div>
<div class="chevron">
<!-- you cant really have two onclick listeners, call the transition in the nextSlide instead -->
<img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);">
<img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&ext=jpg" class="right" onclick="nextSlide(1);">
</div>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
// you can pass the testemonial index to shorten your array
// tip: I would really use an id for the index not a class hece you wont have another testemonial w/ the same index
function navClickTransition(index) {
const navClick = document.getElementsByClassName("testimonial"+index);
// navClick is an array it does not have a style property
//navClick.style.opacity = 1;
// this is more like it, however you still not animating the stuff just setting the opacity to 1
for (let i = 0; i < navClick.length; i++){
navClick[i].style.opacity = 0;
}
}
// in the end you don't even need this function
// for the animation I would use a css animation whit a separate class that you can add to the testemonals on demand
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("testimonial");
var current;
for (i = 0; i < slides.length; i++) {
if (slides[i].style.display != "none")
current = slides[i];
}
if (n > slides.length) {
slide_index = 1
}
if (n < 1) {
slide_index = slides.length
}
// switches the animation classes you'll find inactive under active in the css
current.classList.remove("active");
current.classList.add("inactive");
// waits for a sec to let the animation finish before loading the next testemonial
setTimeout(() => {
for (i = 0; i < slides.length; i++) {
// you'll find the active class under the testemonial calss and the kexframes at the end of the css
slides[i].classList.remove("active", "inactive");
slides[i].style.display = "none";
}
slides[slide_index - 1].classList.remove("inactive");
slides[slide_index - 1].style.display = "block";
slides[slide_index - 1].classList.add("active");
}, 1000) // 1s is the animation hence we time out for 1000 mils
}
</script>
</body>
</html>
I am trying to create a loader for my website using css and javascript and it has to look something like
so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.
Edit- Sorry if was not clear but I want the orange slider as an animated loader
HTML -
<div style="margin-left:400px; margin-right:400px " class="progress-wrap
progress" data-progress-percent="20">
<div class="progress-bar progress"></div>
</div>
CSS -
#import "compass/css3";
.red{
background:black;
margin-left:300px;
top:100px;
}
.box{
width:100px !important;
height:100px !important;
z-index:-1;
}
.progress {
width: 100%;
height: 10px;
}
.progress-wrap {
background: #f80;
margin: 200px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: white;
left: 0;
position: absolute;
top: 0;
}
}
Javascript-
moveProgressBar();
$(window).load(function() {
moveProgressBar();
});
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 6500;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?
One solution is to set the progress bar to position: absolute and position it over the boxes.
As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.
Live demo: http://jsfiddle.net/rg0bq23p/45/
Javascript
var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';
HTML
<div class="wrapper">
<div id="progress" class="progress" data-progress="20">
<div class="bar"></div>
</div>
<div class="box dark-gray"></div>
<div class="box gray"></div>
</div>
SCSS
.wrapper {
width: 400px;
margin: 0 auto;
display: flex;
position: relative;
.progress {
position: absolute;
top: 150px;
left: -100px;
z-index: 1;
width: 90%;
background-color: #fff3e2;
.bar {
width: 0;
height: 15px;
background-color: #ffa41c;
transition: width 1s;
}
}
.box {
width: 200px;
height: 200px;
&.gray {
background-color: #bbb;
}
&.dark-gray {
background-color: #888;
}
}
}
I solved the problem using only HTML and CSS:
The result will be exactly as you want in the example you mentioned
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 268px;
height: 11px;
background: #f26522;
}
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>
For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
width: 100%;
border: 1px solid black;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 5%;
height: 11px;
background: #f26522;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
<script>
var width = 5;
var progress;
progress= setInterval(function(){
$('.progress-bar').css("width", width + "%");
width += 5;
if(width>=105){
clearInterval(progress);
}
}, 200);
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/21jdo8q7/1/
I have a menu for a game that I am making. It uses JavaScript to switch between the menu pages by changing the styles of the buttons and the display of the content. However, when I run it and click on any one of the three menu buttons nothing happens. It says the functions are not functions. It's probably a silly mistake but please help. Thanks for the help in advance.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background: linear-gradient(to bottom,#7EC0EE,#C1E5FF);
height: 100%;
width: 100%;
margin: 0;
}
#menu {
color: rgba(0,0,0,0.7);
font-family: Segoe UI;
background: #915921;
padding-left: 15px;
padding-top: 45px;
font-size: 17px;
position: fixed;
height: 50%;
width: 100%;
left: 0px;
top: 0px;
}
#menubar {
background: transparent;
color: rgba(0,0,0,0.6);
text-align: center;
line-height: 40px;
font-size: 20px;
position: fixed;
height: 40px;
width: 100%;
left: 0px;
top: 0px;
}
#first {
transition: background 0.5s;
background: transparent;
position: absolute;
height: 40px;
width: 33%;
left: 0px;
top: 0px;
}
#first:hover {
background: transparent;
}
#firstcontent {
display: block;
}
#second {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 33%;
left: 33%;
top: 0px;
}
#second:hover {
background: transparent;
}
#secondcontent {
display: none;
}
#third {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 34%;
left: 66%;
top: 0px;
}
#third:hover {
background: transparent;
}
#thirdcontent {
display: none;
}
</style>
</head>
<body>
<div id="menu">
<div id="menubar">
<div id="first" onclick="first()">FIRST</div>
<div id="second" onclick="second()">SECOND</div>
<div id="third" onclick="third()">THIRD</div>
</div>
<div id="firstcontent">
First
</div>
<div id="secondcontent">
Second
</div>
<div id="thirdcontent">
Third
</div>
</div>
<script>
var first = document.getElementById("first");
var firstcontent = document.getElementById("firstcontent");
var second = document.getElementById("second");
var secondcontent = document.getElementById("secondcontent");
var third = document.getElementById("third");
var thirdcontent = document.getElementById("thirdcontent");
function first() {
first.style.background = "transparent";
firstcontent.style.display = "block";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function second() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "transparent";
secondcontent.style.display = "block";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function third() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "transparent";
thircontent.style.display = "block";
}
</script>
</body>
</html>
That's may be because you have named the variable and function as same. Like first() { } and first = somevalue?
Either rename your variables or rename your functions. Having a variable and function with the same name just causes problems.
I am trying to use the addClass function to add class via JavaScript, but I just can't add the class. Is there a special way to define a class that will be added to an element onclick?
This is what I have tried:
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
if (classie.has(input, 'open'))
classie.remove(input, 'open')
else
classie.add(input, 'open');
console.log('I am back')
});
.search-bar {
position: absolute;
top: 30px;
right: 60px;
width: 300px;
height: 40px;
overflow: hidden;
}
.sb-label {
position: absolute;
right: 0px;
display: block;
width: 50px;
height: 40px;
background-color: #32ab32;
text-align: center;
z-index: 10;
cursor: pointer;
}
.sb-label img {
display: block;
z-index: 30;
cursor: pointer;
}
.sb-input {
position: absolute;
right: 0px;
width: 50px;
height: 40px;
border: none;
backface-visibility: hidden;
transition: left 0.7s;
z-index: 5;
}
.sb-input .open {
z-index: 90;
}
.sb-input .open {
width: 100%;
transition: left 0.7s;
}
<div class="search-bar">
<form>
<label class="sb-label" id="sb-label">
<img src="search-icon01.png" width="35px" height="35px">
</label>
<input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
</form>
</div>
I added a callback and I got a message on my console, indicating that the function is ok, and when I did this, it works:
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
input.style.zIndex = 90;
input.style.width = '100%';
console.log('I did it')
});
Apparently the problem is with my stylesheet. Could somebody please help me to correct this anomaly?
I'm curious where did you get classie from? Use classList, I think classie is too classy for us lowly developers:P
SNIPPET
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.search-bar {
position: absolute;
top: 30px;
right: 60px;
width: 300px;
height: 40px;
overflow: hidden;
}
.sb-label {
position: absolute;
right: 0px;
display: block;
width: 50px;
height: 40px;
background-color: #32ab32;
text-align: center;
z-index: 10;
cursor: pointer;
}
.sb-label img {
display: block;
z-index: 30;
cursor: pointer;
}
.sb-input {
position: absolute;
right: 0px;
width: 50px;
height: 40px;
border: none;
backface-visibility: hidden;
transition: left 0.7s;
z-index: 5;
}
.sb-input .open {
z-index: 90;
}
.sb-input .open {
width: 100%;
transition: left 0.7s;
}
</style>
</head>
<body>
<div class="search-bar">
<form>
<label class="sb-label" id="sb-label">
<img src="search-icon01.png" width="35px" height="35px">
</label>
<input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
</form>
</div>
<script>
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
if (input.classList.contains('open')) {
input.classList.remove('open');
} else {
input.classList.add('open');
console.log('i am back')
}
});
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
input.style.zIndex = 90;
input.style.width = '100%';
console.log('did i do it')
});
</script>
</body>
</html>