So I made this site using css, javascript and html. On my local system, the internal css that i've added to my html file loads perfectly. But when i deploy it online (I use netlify) that internal css seems not loaded and I cant see any content.
I even tried to remove that internal css and make another file and link to my html document, still no signs of work. It is now too brainstorming to me, as i am not able to find any solutions.
I am sharing the links of the file if anyone of you would like to help me, please?
gsap.to('#moon',{
scrollTrigger:{
scrub: 1
},
scale: 1.5,
})
gsap.to('#bg',{
scrollTrigger:{
scrub: 1
},
scale: 1.2,
})
gsap.to('#santa',{
scrollTrigger:{
scrub: 1
},
scale: 1.5,
y: -500,
x: 2400
})
gsap.to('#tree',{
scrollTrigger:{
scrub: 1
},
x: -250
})
gsap.to('#cloud1',{
scrollTrigger:{
scrub: 1
},
x: -150
})
gsap.to('#cloud2',{
scrollTrigger:{
scrub: 1
},
x: 200
})
gsap.to('#text1',{
scrollTrigger:{
scrub: 1
},
y: -950
})
gsap.to('#text2',{
scrollTrigger:{
scrub: 1
},
y: -950
})
#import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Frijole';
font-weight: 200;
}
body{
/* background: rgb(97, 0, 0); */
height: 200vh;
}
section{
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 10, 68);
mix-blend-mode: screen;
}
section img#bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#cloud1{
position: absolute;
top: 100px;
left: 50px;
max-width: 600px;
z-index: 2;
}
section img#cloud2{
position: absolute;
top: 200px;
right: 50px;
max-width: 600px;
z-index: 2;
}
section img#santa{
position: absolute;
bottom: 50px;
left: -600px;
z-index: 1;
max-width: 600px;
transform: scale(0.5);
}
section #tree{
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 266px;
background: url(../images/tree.png);
background-position-y: 266px;
z-index: 10;
}
section #text1{
position: absolute;
bottom: -500;
left: 0;
width: 100%;
text-align: center;
color: #fff;
text-shadow: 2px 2px 12px #000;
font-size: 5.5em;
z-index: 9;
}
section #text2{
position: absolute;
bottom: -600;
left: 0;
width: 100%;
text-align: center;
font-family: 'Balsamiq Sans', sans-serif;
transition: .093s;
color: #fff;
text-shadow: 2px 2px 12px #000;
font-size: 2em;
z-index: 9;
}
<html>
<head>
<title>Merry Christmas</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Balsamiq Sans' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Frijole' rel='stylesheet'>
<link rel="icon" href="images/favicon.png" type="image/png" size="32x32">
<link rel="stylesheet" type="text/css" href="css/snow.css">
<style>
.snow, .winter-is-coming {
z-index: 100;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: absolute;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background: url(../images/bg.jpg);
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
background-size: contain;
}
.snow--near + .snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");
background-size: contain;
}
.snow--mid + .snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");
background-size: contain;
}
.snow--far + .snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
</style>
</head>
<body>
<section>
<div class="winter-is-coming">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
</div>
<img src="images/bg.jpg" id="bg">
<img src="images/moon.png" id="moon">
<img src="images/cloud1.png" id="cloud1">
<img src="images/cloud2.png" id="cloud2">
<img src="images/santa.png" id="santa">
<div id="tree"></div>
<h2 id="text1">Merry Christmas!</h2><br>
<h4 id="text2">And a very happy new year from us! Enjoy Holidays!!</h4>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>
You have a class .winter-is-coming with CSS z-index:100;. Change it to z-index:1; then everthing should be fine now.
Related
i have created a sliding menu that shows two items at a time. However, when the second slide in view is clicked, instead of loading in content, it puts the slide to the top of the nav and then it will load content once clicked again.
I would like the slide to load in the content and not move to the top, it does it once the slides reach the ned but i could have 20 slides in at a time.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap');
body {
overflow: hidden;
width: 990px;
height: 1570px;
margin: 0 0 0 25px;
font-family: open sans;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 20px;
border: 20px #fff solid;
}
.poiIframe {
overflow: hidden;
width: 990px;
height: 100%;
left: 25px;
margin: 0;
z-index: 1;
background: white;
border: 0px;
}
.poiMenu {
overflow: hidden;
position: absolute;
width: 410px;
height: 830px;
bottom: 200px;
left: 55px;
}
.swiper-container {
position: absolute;
width: 100%;
height: 102%;
top: 0px;
left: 0px;
z-index: 100;
}
.poiBtn {
overflow: hidden;
position: absolute;
width: 350px;
height: 350px;
top: 10px;
left: 10px;
background: white;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.poiBtnImg {
overflow: hidden;
position: absolute;
width: 330px;
height: 170px;
top: 10px;
left: 10px;
border-bottom: solid 2px #F0F0F0;
border-radius: 20px;
z-index: 10;
}
.poiBtnTitle {
overflow: hidden;
position: absolute;
width: 330px;
height: 140px;
top: 200px;
left: 10px;
color: #222;
font-size: 2.1vh;
display: table;
}
.poiBtnTitle span {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
.poiFtr {
position: absolute;
overflow: hidden;
bottom: 25px;
left: 50px;
height: 150px;
width: 990px;
background-image: url(../img/bg/iframeFtrBg.png);
background-repeat: no-repeat;
z-index: 10;
background-color: white;
}
.poiFtrBtn {
position: absolute;
overflow: hidden;
top: 20px;
height: 122px;
width: 138px;
z-index: 100;
background-repeat: no-repeat;
border: 0;
}
.attractions {
background-image: url(../img/btn/NCity/attractionsBtn.png);
left: 0px;
}
.universities {
background-image: url(../img/btn/NCity/universitiesBtn.png);
left: 420px;
}
.hospitals {
background-image: url(../img/btn/NCity/hospitalsBtn.png);
left: 280px;
}
.transport {
background-image: url(../img/btn/NCity/transportGreyBtnV2.png);
left: 560px;
}
.entertainment {
background-image: url(../img/btn/NCity/entertainmentBtn.png);
left: 140px;
}
.libraries {
background-image: url(../img/btn/NCity/librariesBtn.png);
left: 560px;
}
.parks {
background-image: url(../img/btn/NCity/parksBtn.png);
left: 700px;
}
.sports {
background-image: url(../img/btn/NCity/sportsFacilitiesBtn.png);
left: 840px;
}
.attractionsActive {
background-image: url(../img/btn/NCity/attractionsBtn2.png);
left: 0px;
}
.universitiesActive {
background-image: url(../img/btn/NCity/universitiesBtn2.png);
left: 420px;
}
.hospitalsActive {
background-image: url(../img/btn/NCity/hospitalsBtn2.png);
left: 280px;
}
.transportActive {
background-image: url(../img/btn/NCity/transportGreenBtnV2.png);
left: 560px;
}
.entertainmentActive {
background-image: url(../img/btn/NCity/entertainmentBtn2.png);
left: 140px;
}
.librariesActive {
background-image: url(../img/btn/NCity/librariesBtn2.png);
left: 560px;
}
.parksActive {
background-image: url(../img/btn/NCity/parksBtn2.png);
left: 700px;
}
.sportsActive {
background-image: url(../img/btn/NCity/sportsFacilitiesBtn2.png);
left: 840px;
}
.swiper-vertical>.swiper-scrollbar {
position: absolute;
right: 0px;
top: 1%;
z-index: 50;
width: 10px;
height: 98%;
}
.swiper-pagination-bullet-active {
background-color: #C4D000 !important;
}
<html>
<head>
<meta charset="utf-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MZLHQBBKRP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MZLHQBBKRP');
</script>
<title>Notts City - Attractions</title>
<link href="../../../css/d2n2WhatsNearby.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<!-- Main POI Frame -->
<iframe class="poiIframe" name="poiIframe" src="pois/Attractions/oldMarketSquare.html"></iframe>
<!-- Info Area -->
<div class="poiMenu">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- POI 1 -->
<div class="swiper-slide"><a href="pois/Attractions/oldMarketSquare.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Old Market Square.png" /></div>
<div class="poiBtnTitle"><span>Old Market Square</span></div>
</div>
</a> </div>
<!-- POI 2 -->
<div class="swiper-slide"><a href="pois/Attractions/nottinghamCastle.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Nottingham Castle.png" /></div>
<div class="poiBtnTitle"><span>Nottingham Castle</span></div>
</div>
</a> </div>
<!-- POI 3 -->
<div class="swiper-slide"><a href="pois/Attractions/yeOldeTripJerusalem.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Ye Olde Trip to Jerusalem.png" /></div>
<div class="poiBtnTitle"><span>Ye Olde Trip to Jerusalem</span></div>
</div>
</a> </div>
<!-- POI 5 -->
<div class="swiper-slide"><a href="pois/Attractions/touristInfoCentre.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Nottingham Tourism and Travel Centre.png" /></div>
<div class="poiBtnTitle"><span>Tourism and Travel Centre</span></div>
</div>
</a> </div>
</div>
<!-- <div class="swiper-scrollbar"></div>-->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Initialize Swiper -->
<script> var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 2,
spaceBetween: 60,
freeMode: true,
// scrollbar: {
// el: '.swiper-scrollbar',
// hide: false,
// },
pagination: {
el: '.swiper-pagination',
},
})
</script>
</body>
</html>
/*when you click on the picture it should open an overlay, which closes if you click anywhere*/
<script type="text/javascript">
function on() {document.getElementById("over1").style.display="block";}
function off() {
document.getElementById("over1").style.display = "none";
}
function on() {document.getElementById("over2").style.display="block";}
function off() {
document.getElementById("over2").style.display = "none";
} </script>
<style>
.container{
background-color: #94AB98;
height:370px;
width:280px;
margin: 30px;
margin-bottom: 60px;
float: left;
display: inline-block;
}
.container .bildbt1{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic1);
}
.container .bildbt2{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic2);}
#over1{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#over2{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#text1{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
#text2{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
</style>
/*those are my containers, with buttons*/
<body>
<div class="container">
<div id="over1" onclick="off()">
<a id="text1">some text</a></div>
<button class="bildbt1" onclick="on()">
</button>
<h2>text too</h2>
</div>
<div class="container">
<div id="over2" onclick="off()">
<a id="text2">
also text</a>
</div>
<button class="bildbt2" onclick="on()"></button>
<h2>and there is also text</h2>
</div>
</body>
It only shows Overlay 2, i tried various options but it doesn't work.
Can you help me?
I'don't know why I can't poste this question...
It looks like your post is mostly code; add some more details...
i think there are enough details.
I am trying to complete a wave animation that has the animation, fills the screen to a certain point and stops on the first click on a navigation menu. I have tried making it play the animation back in reverse when you click the navigation menu again, but it will not work. Does anyone know if this is possible with Java/ JQuery, and if so how do you do it? Currently all it does is a harsh clip back to the previous state, and I don't like how harshly it clips.
$(document).ready(function() {
$('.hb_menu').click(function() {
$('.line_1').toggleClass("rotate_1");
$('.line_2').toggleClass("rotate_2");
$('.line_3').toggleClass("rotate_2");
$('.hidden_svg').toggleClass("show_svg");
$('.circ').toggleClass("rotate_circ");
});
});
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 4;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
.visible_svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.hidden_svg {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
z-index: 2;
filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}
.show_svg {
opacity: 1;
}
.hb_menu {
max-width: 2vw;
width: 2vw;
max-height: 1.75vw;
height: 1.75vw;
position: absolute;
right: 1.5vw;
top: 1.5vw;
z-index: 4;
}
.line_1,
.line_2,
.line_3 {
max-width: 2vw;
width: 2vw;
max-height: .25vw;
height: .25vw;
background-color: #fff;
position: absolute;
right: 0;
z-index: 2;
top: 0vw;
transition: .5s all;
margin-bottom: .25vw;
}
.line_2 {
top: .5vw;
}
.line_3 {
top: 1vw;
}
.rotate_1 {
transform: rotate(45deg);
}
.rotate_2 {
transform: rotate(-45deg);
top: 0vw;
}
.main_nav_cont {
max-width: 50vw;
width: 50vw;
max-height: 50vw;
height: 50vw;
position;
absolute;
top: 25vw;
left: 25vw;
font-size: 1.75vw;
z-index: 4;
}
.circ {
position: absolute;
top: -41vw;
max-width: 45vw;
width: 45vw;
max-height: 48vw;
height: 48vw;
background-color: #8C572B;
border-radius: 14.6675vw;
}
.rotating_circle_1 {
left: -10vw;
}
.rotating_circle_2 {
left: 10vw;
}
.rotating_circle_3 {
left: 30vw;
}
.rotating_circle_4 {
left: 50vw;
}
.rotating_circle_5 {
left: 70vw;
}
.rotate_circ {
animation: wave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
#keyframes wave {
from {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
to {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="../JavaScript/main.js"></script>
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Hello World</h1>
</header>
</section>
</nav>
</section>
<section class="hb_menu">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</section>
<div class="rotating_circle_1 circ"></div>
<div class="rotating_circle_2 circ"></div>
<div class="rotating_circle_3 circ"></div>
<div class="rotating_circle_4 circ"></div>
<div class="rotating_circle_5 circ"></div>
</body>
</html>
The last line in the JS portion of your code adds a clicked class to the .circ element. Once that class is on, the second click on your hamburger menu icon will trigger new unwave animation I made by just reversing the to and from values of the original wave animation.
$(document).ready(function() {
$('.hb_menu').click(function() {
$('.line_1').toggleClass("rotate_1");
$('.line_2').toggleClass("rotate_2");
$('.line_3').toggleClass("rotate_2");
$('.hidden_svg').toggleClass("show_svg");
$('.circ').toggleClass("rotate_circ");
$(".circ").addClass("clicked"); // adds "clicked" after the very first click
});
});
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 4;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
.visible_svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.hidden_svg {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
z-index: 2;
filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}
.show_svg {
opacity: 1;
}
.hb_menu {
max-width: 2vw;
width: 2vw;
max-height: 1.75vw;
height: 1.75vw;
position: absolute;
right: 1.5vw;
top: 1.5vw;
z-index: 4;
}
.line_1,
.line_2,
.line_3 {
max-width: 2vw;
width: 2vw;
max-height: .25vw;
height: .25vw;
background-color: #fff;
position: absolute;
right: 0;
z-index: 2;
top: 0vw;
transition: .5s all;
margin-bottom: .25vw;
}
.line_2 {
top: .5vw;
}
.line_3 {
top: 1vw;
}
.rotate_1 {
transform: rotate(45deg);
}
.rotate_2 {
transform: rotate(-45deg);
top: 0vw;
}
.main_nav_cont {
max-width: 50vw;
width: 50vw;
max-height: 50vw;
height: 50vw;
position;
absolute;
top: 25vw;
left: 25vw;
font-size: 1.75vw;
z-index: 4;
}
.circ {
position: absolute;
top: -41vw;
max-width: 45vw;
width: 45vw;
max-height: 48vw;
height: 48vw;
background-color: #8C572B;
border-radius: 14.6675vw;
}
.rotating_circle_1 {
left: -10vw;
}
.rotating_circle_2 {
left: 10vw;
}
.rotating_circle_3 {
left: 30vw;
}
.rotating_circle_4 {
left: 50vw;
}
.rotating_circle_5 {
left: 70vw;
}
.rotate_circ {
animation: wave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
/* this new rule only applies after you have clicked once AND the wave animation has already been triggered */
.circ.clicked:not(.rotate_circ) {
animation: unwave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
#keyframes wave {
from {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
to {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
}
#keyframes unwave {
from {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
to {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="../JavaScript/main.js"></script>
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Hello World</h1>
</header>
</section>
</nav>
</section>
<section class="hb_menu">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</section>
<div class="rotating_circle_1 circ"></div>
<div class="rotating_circle_2 circ"></div>
<div class="rotating_circle_3 circ"></div>
<div class="rotating_circle_4 circ"></div>
<div class="rotating_circle_5 circ"></div>
</body>
</html>
I know this question can be answered in many ways but I need someone to do this for me. I want my animation to do its thing and then a random number pops up? Right now I have 2 functions in one click (I need that). I'm new to this and a simple formula would be great! Can anyone help, if you can it would be appreciated! Thank you!
THIS IS ALL THE CODE!
startbtn = function() {
$('.wheel').addClass('animated-wheel');
setTimeout(setRandom('random') {}, 6000);
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
function setRandom(id) {
document.getElementById(id).innerHTML = getRandom();
}
function refresh() {
location.reload();
};
.number {
text-align: center;
color: white;
font-size: 78px;
}
.wheel {
width: 200px;
height: 100px;
left: 600px;
top: 300px;
background: green;
position: relative;
}
.animated-wheel {
-webkit-animation: myfirst4s 2;
-webkit-animation-direction: alternate;
animation: myfirst 4s 2;
animation-direction: alternate;
}
#-webkit-keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: black;
left: 600px;
top: 0px;
}
66% {
background: red;
left: 600px;
top: 650px;
}
100% {
background: black;
left: 600px;
top: 0px;
}
}
#keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: green;
left: 600px;
top: 300px;
}
66% {
background: black;
left: 600px;
top: 0px;
}
100% {
background: red;
left: 600px;
top: 650px;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
</head>
<div class="wheel">
<h1 class="number" id="random"></h1>
</div>
<button onclick="startbtn();setRandom('random');">Start</button>
<button onclick="refresh()">Reset</button>
</body>
</html>
You had a syntax error in your setTimeout():
startbtn = function() {
$('.wheel').addClass('animated-wheel');
setTimeout(function() {
// Remove animation class
setRandom('random');
$('.wheel').removeClass('animated-wheel');
}, 6750);
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
function setRandom(id) {
document.getElementById(id).innerText = getRandom();
}
function refresh() {
location.reload();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
<style>
.number {
text-align: center;
color: white;
font-size: 78px;
}
.wheel {
width: 200px;
height: 100px;
left: 600px;
top: 300px;
background: green;
position: relative;
}
.animated-wheel {
-webkit-animation: myfirst4s 2;
-webkit-animation-direction: alternate;
animation: myfirst 4s 2;
animation-direction: alternate;
}
#-webkit-keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: black;
left: 600px;
top: 0px;
}
66% {
background: red;
left: 600px;
top: 650px;
}
100% {
background: black;
left: 600px;
top: 0px;
}
}
#keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: green;
left: 600px;
top: 300px;
}
66% {
background: black;
left: 600px;
top: 0px;
}
100% {
background: red;
left: 600px;
top: 650px;
}
}
</style>
</head>
<div class="wheel">
<h1 class="number" id="random"></h1>
</div>
<button onclick="startbtn();">Start</button>
<button onclick="refresh()">Reset</button>
</body>
</html>
Hope this helps,
There are tons of more elegant way but here is correction of your error:
setTimeout(function(){
setRandom('random')
}, 6000);
I have a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>
This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>