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";
}
}
})
Related
<!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>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!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>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame
I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
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 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'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);