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>
Related
I have this working on a project that convert div into images. everything works but I have having this problem on mobile resizing. anytime the web page loads for the first time I will have to use my hand to zoom in for it to fit mobile screen size. I have several method for it work but is not working. Take a look at my code and see if am doing it right. Am not good with JavaScript if there a script to get done I will be open to
<div class="container" >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-7" style="background-color: #fff;">
<div id="outer">
<div class="meme-generator " >
<div class="meme-generator-wrapper" id="memeGeneratorWrapper">
<div id="memeGeneratorImg">
</div>
<div id="memeOverlay" class="meme-hidden meme-generator-overlay"></div>
<h4 class="name" id='outputAccHomePagePermalink'></h4>
</div>
<div class="meme-generator-controls">
<a class="button button-primary meme-upload" href="#" style="font-size: 17px; font-weight:bold;">
<label>
<input id="memeAddPhoto" type="file">
</label>
Add Photo
</a>
<a class="button button-primary" id="memeClearPhoto" href="#" style="font-size: 17px; font-weight:bold;">Clear Photo</a>
<button class="button button-primary" id="foo" style="font-size: 17px; font-weight:bold;">download</button>
</div>
<div class="home_page_title">
<input id="nameField" type="text" name="Accessable[accsc_home_page_title]" placeholder="Enter Your Name Here"
data-depend-id="accsc_home_page_title" style="font-size: 17px; font-weight:bold; margin-top: 20px;">
</div>
</div
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
.meme-generator-wrapper {
position: relative;
margin-bottom: 80px;
width: 492px;
height: 607px;
background: url("{% static 'dp.png' %}") no-repeat center right #222228;
-webkit-background-size: contain;
-moz-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.meme-generator-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{% static 'dp.png' %}") no-repeat 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
z-index: 1;
}
.meme-generator-controls {
margin-top: 10px;
}
.meme-upload {
position: relative;
}
.meme-upload label {
background: #000;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
top: 0;
left: 0;
}
.meme-upload input {
cursor: pointer !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cr-slider-wrap{
position: absolute;
bottom: 100%;
z-index: 99;
}
.name{
text-align: center;
font-size: bold;
text-transform: capitalize;
color :#ee2047 !important;
font-weight: bold;
}
.home_page_title input{
width:71%;
border: 1px solid #091639;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.meme-generator-controls .button {
background-color: #091639;
}
.meme-generator-controls .button:hover {
background-color: #ee2047
}
#media (max-width: 767px) {
.cr-slider-wrap{
position: absolute;
bottom: 100%;
left: 10%;
z-index: 99;
}
#wrap {
position: fixed;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#outer {
left: -20px;
padding-left: 30px;
padding-top: 70px;
padding-bottom: 70px;
position: fixed;
width: 180%;
background: #fff;
transform-origin: 0% 0%;
border-radius: 10px;
box-shadow: 0px 3px 25px rgba(223, 207, 207, 0.2);
}
#mob{
width: 100vh;
}
}
Looks like you are using bootstrap, usually you can use the classes:
"img-responsive" for bootstrap 3
"img-fluid" for bootstrap 4
If you want to scale an image just using CSS though, you can set the max-width to 100% on the image tag. I have included a bootstrap example for using img-fluid on the img tag - Hope it helps :)
<!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>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" >
<div>
<img src="img.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</body>
</html>
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.
I created this page with the help stack overflow guys. There are three minor issues which I couldn't fix. I'd like help from you.
In this link you can see a countdown timer. I need to add a text "Go" after number .
You can see a counter glow border ( For now its blue color ). Can we add a moving border effect for that? Eg https://codepen.io/vishwakarma02/full/wOVYWy
Sometimes the the border showing just behind the text "Practice shot". That shouldn't be like that.
Can you guys please check and give solutions. I have shared my code here. Thanks :)
var timeLeft = 3;
var videoCounter = 2;
var videoText = 2;
var elem = document.querySelector('.countdown-content__count');
var timerId;
function countdown() {
if (timeLeft == 0) {
clearTimeout(timerId);
$(".countdown-content__timer").fadeOut();
$(".video-wrapper span").fadeOut();
var playPromise = $("#video")[0].play();
} else {
elem.innerHTML = timeLeft;
timeLeft--;
}
}
function practiceShot(){
setTimeout(function(){
$(".countdown-content__head").slideUp(1000, function(){
$(".countdown-content__timer").css({
opacity: 0,
display: 'inline-block'
}).animate({opacity:1},600);
timerId = setInterval(countdown, 1000);
countdown();
});
}, 2000);
}
practiceShot();
document.getElementById('video').addEventListener('ended', function() {
if (videoCounter == 0) {
return;
}
document.getElementsByClassName("countdown-content__head")[0].innerHTML = "<span>Practice Shot </span>" + videoText;
videoText++;
videoCounter--;
timeLeft = 3;
elem.innerHTML = "";
$(".countdown-content__timer").fadeIn();
$(".video-wrapper span").fadeIn();
$(".countdown-content__head").slideDown(1000, function(){
$(".countdown-content__timer").css({
opacity:1,
display: 'inline-block'
}).animate({opacity:0},600);
});
practiceShot();
}, false);
<div class="practice-shot-screen full-screen-height">
<div class="row">
<div class="col-sm-6">
<span class="video-wrapper">
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<span></span>
</span>
</div>
<div class="col-sm-6">
<div class="practice-shot-image">
<img alt="" src="images/practice-image.jpg">
</div>
</div>
</div>
<div class="countdown-content">
<div class="v-align-container">
<div class="v-align-grid">
<div class="countdown-content__head">
<!-- <strong> <img alt="" src="images/hd-border.png"> </strong> -->
<span>PRACTICE SHOT 1</span>
<!-- PRACTICE SHOT 1 -->
<!-- <strong> <img alt="" src="images/hd-border.png"> </strong> -->
</div>
<div class="countdown-content__timer">
<!--test-->
<!--test-->
<span class="countdown-content__count"></span>
</div>
</div>
</div>
</div>
</div><!--practice-shot-screen-->
Css :
.practice-shot-screen {
position: relative;
}
.practice-shot-screen .row {
height: 100%;
margin: 0;
}
.practice-shot-screen [class^="col-"] {
padding: 0;
}
.practice-shot-screen .v-align-container {
position: relative;
}
.practice-shot-screen .video-wrapper {
height: 100%;
width: 100%;
display: inline-block;
position: relative;
}
.video-wrapper span {
content: '';
display: block;
width: 3000px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
opacity: 0.7;
}
.practice-shot-screen .video-wrapper video {
height: 100%;
width: 100%;
display: inline-block;
object-fit: cover;
}
.practice-shot-image {
height: 100%;
width: 100%;
}
.practice-shot-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.countdown-content {
max-width: 800px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
margin: auto;
}
.countdown-content__head {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 85px;
text-transform: uppercase;
color: #fff;
-webkit-text-stroke: 1px #fff;
text-shadow: 0px 0px 10px #fff;
text-align: center;
position: relative;
margin: 0;
}
.countdown-content__head::after {
content: '';
display: block;
height: 147px;
width: 770px;
background: url(../images/hd-border.png) no-repeat;
text-align: center;
margin: 0 auto;
background-size:contain;
}
.countdown-content__head::before {
content: '';
display: block;
height: 147px;
width: 770px;
background: url(../images/hd-border.png) no-repeat;
text-align: center;
margin: 0 auto;
background-size:contain;
}
.countdown-content__timer {
font-family: 'beonwebfont';
font-size: 320px;
color: #ea3323;
-webkit-text-stroke: 1px #ea3323;
text-shadow: 0px 0px 10px #ea3323;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid #fff;
border-color: #467fff;
-webkit-box-shadow: 0 0 15px #467fff;
-moz-box-shadow: 0 0 15px #467fff;
box-shadow: 0 0 30px #467fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
}
.countdown-content__timer > span {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.countdown-content__timer video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
I have added html and css here : https://jsfiddle.net/Coder95/w5h4n9cq/
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>
I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The a tag has styling on it so it extends to 100% of the width and height of the div.
It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.
I have this HTML structure
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
and this CSS
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
and the jQuery
$(document).ready(function(){
$('.player').hover(
function () {
$(this).closest('a').show();
},
function () {
$(this).closest('a').hide();
}
);
});
You don't need javascript to do that...just adjust the positioning.
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
}
.player:hover a {
display: block;
}
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="http://www.fillmurray.com/250/250" alt="player desc" />
</div>
</div>
$.closest() searches through an element's parents, not its children. You should probably use $('a', this) to select the child <a> element.
Change html to
<div class="player">
<a id="name" href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
And Javascript to
$(document).ready(function() {
$('.player').hover(function() {
$('#name').toggle('display');
});
});
See if this helps you have tried to use your code to make it work.(For some reason this works for the first time. U got to re run this)
$(document).ready(function(){
$('.player').hover(
function () {
$(this).append($("a").html());
},
function () {
var ss = $(".player__name");
ss.remove();
}
);
});
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="player">
<a href="/player?PlayGuid=123" id="play1">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>