I'm having a very silly issue here. I'm sure I'm missing something simple, or am overlooking something.
I have a set of tabs that I would like to change the background image each time you click on a new tab link. Just a simple background image change. Can't seem to get the document.getElementById to work. I think I'm not targeting it correctly.
Excuse the sloppiness of the code, still organizing it. No JS was implemented.
Any help at getting this working would be great!
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
body {
background: #3498DB;
}
a {
color: #fff;
text-decoration: none;
}
/*header {
color: #yellow;
text-align: center;
min-height: 140px;
margin-bottom: 60px;
}*/
header h1{
margin-top: 100px;
font-size: 50px;
margin-bottom: 20px;
font-weight: 100;
}
header a{
font-size: 18px;
margin-left: 20px;
}
.copyright {
font-size: 25px;
font-weight: 100;
color: #fff;
text-align: center;
margin-top: 100px;
}
/* Tabs Start */
.ease {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.tabs {
background-color:red;
position: relative;
margin-bottom: 50px;
}
.tabs > input,
.tabs > span {
width: 20%;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
}
.tabs > input {
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 99;
}
.tabs > span {
background: #deeab4;
text-align: center;
overflow: hidden;
}
.tabs > span i,
.tabs > span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.tabs > input:hover + span {
background: rgba(255,255,255,.1);
}
.tabs > input:checked + span {
background: #95d600;
}
.tabs > input:checked + span,
.tabs > input:hover + span {
color: #fff;
}
#tab-1, #tab-1 + span {
left: 0;
}
#tab-2, #tab-2 + span {
left: 20%;
}
#tab-3, #tab-3 + span {
left: 40%;
}
#tab-4, #tab-4 + span {
left: 60%;
}
#tab-5, #tab-5 + span {
left: 80%;
}
/*.tab-content {
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}*/
.tab-content section {
width: 100%;
display: none;
}
.tab-content section h1 {
margin-top: 15px;
font-size: 100px;
font-weight: 100;
text-align: center;
}
#tab-1:checked ~ .tab-content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .tab-content #tab-item-2 {
display:block;
}
#tab-3:checked ~ .tab-content #tab-item-3 {
display: block;
}
#tab-4:checked ~ .tab-content #tab-item-4 {
display: block;
}
#tab-5:checked ~ .tab-content #tab-item-5 {
display: block;
}
/* effect-1 */
.effect-1 > input:checked + span {
background: #8cd600;
}
/* Boxes */
.box60-1 {
float:left;
width:50%;
height:317px;
display:block;
background-color:#FFF;
background: rgb(204, 204, 204); /* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box40-2 {
float:left;
width:40%;
height:317px;
display:block;
background-color:#FFF;
background: rgb(204, 204, 204); /* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box60-1 strong, .box40-2 strong {
font-weight:bolder;
font-size: 26px;
}
.box60-1 p, .box40-2 p {
text-align:center;
font-size: 22px;
}
/* Picture Change */
.tab-content {
background-image:url(picture-1.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}
.pic1 {
background-image:url(picture-1.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic2 {
background-image:url(picture-2.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic3 {
background-image:url(picture-3.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic4 {
background-image:url(picture-4.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic5 {
background-image:url(picture-5.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
<div class="container">
<div class="tabs">
<!-- tab-title -->
<input type="radio" id="tab-1" name="tab-effect-1" checked="checked">
<span>Call Center</span>
<input type="radio" id="tab-2" name="tab-effect-1">
<span>Self-Service</span>
<input type="radio" id="tab-3" name="tab-effect-1">
<span>Customer Outreach</span>
<input type="radio" id="tab-4" name="tab-effect-1">
<span>Workforce Optimization</span>
<input type="radio" id="tab-5" name="tab-effect-1">
<span style="line-height:20px; padding-top:10px;">Cloud Infrastructure<br>and Platforms</span>
<!-- tab-content -->
<div id="tab-content" class="tab-content">
<section id="tab-item-1">
<div class="box60-1">
<p><strong>blah <br>
blah blah</strong></p>
<p>hello good sir</p>
</div>
</section>
<section id="tab-item-2">
<h1>Two</h1>
</section>
<section id="tab-item-3">
<h1>Three</h1>
</section>
<section id="tab-item-4">
<h1>Four</h1>
</section>
<section id="tab-item-5">
<h1>Five</h1>
</section>
</div>
</div>
</div>
I suggest taking the onclick out of the anchor tag (it is not being read because what your actually clicking on to change tabs in the input) and placing an onchange in the input itself. You will also change the classnames of each to read tab-content pic1, tab-content pic2, etc. otherwise the tab-content class gets replaced totally.
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
body {
background: #3498DB;
}
input {
z-index: -1;
}
a {
color: #fff;
text-decoration: none;
}
header h1 {
margin-top: 100px;
font-size: 50px;
margin-bottom: 20px;
font-weight: 100;
}
header a {
font-size: 18px;
margin-left: 20px;
}
.copyright {
font-size: 25px;
font-weight: 100;
color: #fff;
text-align: center;
margin-top: 100px;
}
/* Tabs Start */
.ease {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.tabs {
background-color: red;
position: relative;
margin-bottom: 50px;
}
.tabs > input,
.tabs > span {
width: 20%;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
}
.tabs > input {
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 99;
}
.tabs > span {
background: #deeab4;
text-align: center;
overflow: hidden;
}
.tabs > span i,
.tabs > span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.tabs > input:hover + span {
background: rgba(255, 255, 255, .1);
}
.tabs > input:checked + span {
background: #95d600;
}
.tabs > input:checked + span,
.tabs > input:hover + span {
color: #fff;
}
#tab-1,
#tab-1 + span {
left: 0;
}
#tab-2,
#tab-2 + span {
left: 20%;
}
#tab-3,
#tab-3 + span {
left: 40%;
}
#tab-4,
#tab-4 + span {
left: 60%;
}
#tab-5,
#tab-5 + span {
left: 80%;
}
/*.tab-content {
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}*/
.tab-content section {
width: 100%;
display: none;
}
.tab-content section h1 {
margin-top: 15px;
font-size: 100px;
font-weight: 100;
text-align: center;
}
#tab-1:checked ~ .tab-content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .tab-content #tab-item-2 {
display: block;
}
#tab-3:checked ~ .tab-content #tab-item-3 {
display: block;
}
#tab-4:checked ~ .tab-content #tab-item-4 {
display: block;
}
#tab-5:checked ~ .tab-content #tab-item-5 {
display: block;
}
/* effect-1 */
.effect-1 > input:checked + span {
background: #8cd600;
}
/* Boxes */
.box60-1 {
float: left;
width: 50%;
height: 317px;
display: block;
background-color: #FFF;
background: rgb(204, 204, 204);
/* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box40-2 {
float: left;
width: 40%;
height: 317px;
display: block;
background-color: #FFF;
background: rgb(204, 204, 204);
/* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box60-1 strong,
.box40-2 strong {
font-weight: bolder;
font-size: 26px;
}
.box60-1 p,
.box40-2 p {
text-align: center;
font-size: 22px;
}
/* Picture Change */
.tab-content {
background-image: url(http://lorempixel.com/600/300/nature/1);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}
.pic1 {
background-image: url(http://lorempixel.com/600/300/nature/1);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic2 {
background-image: url(http://lorempixel.com/600/300/nature/2);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic3 {
background-image: url(http://lorempixel.com/600/300/nature/3);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
<div class="container">
<div class="tabs">
<!-- tab-title -->
<input type="radio" id="tab-1" name="tab-effect-1" checked="checked" onclick="document.getElementById('tabContent').className='pic1'">
<span>Call Center</span>
<input type="radio" id="tab-2" name="tab-effect-1" onclick="document.getElementById('tabContent').className='pic2'">
<span>Self-Service</span>
<input type="radio" id="tab-3" name="tab-effect-1" onclick="document.getElementById('tabContent').className='pic3'">
<span>Customer Outreach</span>
<!-- tab-content -->
<div id="tabContent" class="tab-content">
<section id="tab-item-1">
<div class="box60-1">
<p><strong>blah <br>
blah blah</strong></p>
<p>hello good sir</p>
</div>
</section>
<section id="tab-item-2">
<h1>Two</h1>
</section>
<section id="tab-item-3">
<h1>Three</h1>
</section>
<section id="tab-item-4">
<h1>Four</h1>
</section>
<section id="tab-item-5">
<h1>Five</h1>
</section>
</div>
</div>
</div>
Related
I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}
You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>
Info
I have a flickity slideshow, that on a 'static click' is going to the next pictures.In addition I have on top of the pictures inside my flickity slideshow a button with some caption and a a href linked to an external website (e.g. https://www.google.it).
Here my issue:
When I click on the link my flickity during the external loading (around 500 ms) is going to the next slide instead of stop working.
What i need is to go to the URL immediately without having my flickity going to the next slide instead.
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})
Have a look here ---------→
https://codepen.io/skurodrome/pen/XWXWapo
You Can't open google.com in same slider so please use target="blank" in anchor.Please see example it will work fine.
Change this HTML Code. Code is here :-
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})
body {
background: antiquewhite;
}
/*.is-selected .info {
opacity:1;
display:block;
transition: 0.25s;
transition-timing-function: ease-out;
transform: translateY(0);
opacity: 1;
}
.info{
transform: translateY(130%);
transition-timing-function: ease-in;
//transition: 0.2s;
opacity: 0;
transition: opacity .1s linear;
bottom: 100px;
position: absolute;
left: 50%;
background: #fff;
border-radius: 15px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*/
.is-selected .info {
transform: translateY(0);
left:50%;
-webkit-transform: translate(-50%,0px);
transform: translate(-50%,0px);
transition: 0.4s;
transition-timing-function: ease-out;
opacity:1;
display:block;
}
.info{
transform: translateY(130%);
transition-timing-function: ease-in;
opacity: 0;
transition: opacity .3s linear;
transition: 0.5s;
bottom: 20px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,80px);
transform: translate(-50%,80px);
background: #fff;
border-radius: 10px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.caption {
background: #FAFAFA;
margin: 0;
padding: 10px;
text-align: center;
}
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
padding: 2px;
background: linear-gradient(to top right, #fb8200, #c43390);
}
.avatar img {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/*
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
//background-color:rgba(236, 240, 241,1.0);
//border: 3px solid rgb(236, 240, 241);
display:inline-block;
border: 1px solid #cacaca;
overflow: hidden;
img {
width:100%;
}}
*/
.hide
{
display: none;
height:0;
}
.avatar-caption {
padding: 0 0 0 20px;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail img {
max-width: 100%;
max-height: 100%;
}
img {
height: auto;
max-width: 100%;
display: block;
}
.front-page-gallery .product-moods .gallery-cell .info a h3 {
font-size: .825rem;
}
.front-page-gallery .product-moods .gallery-cell .info a, .front-page-gallery .product-moods .gallery-cell .info h3, .front-page-gallery .product-moods .gallery-cell .info p {
white-space: nowrap;
line-height: 1.2;
}
h1, h2, h3, p, ul {
color: #262626;
letter-spacing: 0;
margin: 0;
font-size: 12px;
line-height: 14px;
}
h1, h2, h3 {
color: #262626;
color: rgba(var(--i1d,38,38,38),1);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 18px;
color:black;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail {
width: 40px;
height: 40px;
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: .5rem 1.4em .5rem 1.4rem;
text-decoration:none;
}
html,
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
.slide,
.main-carousel {
width: 100%;
height: 287px;
//height: 587px;
}
.carousel-cell { margin-right: 10px; }
.slide {
border-radius:10px;
padding: 1rem;
width: 500px;
color: white;
}
.slide-1 {
background: red;
}
.slide-2 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/c0.151.1349.1349a/s640x640/97960668_102131031487479_5118500540678732059_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=103&_nc_ohc=IZgKw1IUOCwAX_WD1KZ&oh=0e2dbbec3a33af0c1905fcfd8bc485bc&oe=5F1585A9");
background-repeat: no-repeat;
background-size: cover;
}
.slide-3 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/p640x640/95420076_657451761718836_7126794433093464345_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=cMN4jjBUawUAX-cMrN7&oh=a83c7fa9be06d83910444d8cf652a1fc&oe=5F13818B");
background-repeat: no-repeat;
background-size: cover;
}
.slide-4 {
background-image: url("https://pbs.twimg.com/media/Bi4fWQoCMAATf5e.jpg");
background-color: black;
background-size: cover;
//background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slide-5 {
background: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/flickity#2.0.11/dist/flickity.css">
<div class="main-carousel">
<div class="carousel-cell">
<div class="slide slide-1">
1
</div>
</div>
<!--2-->
<div class="carousel-cell" >
<div class="slide slide-2" ></div>
<div class="info">
<a target="_blank" href="https://www.google.com/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s150x150/61984225_404664133594231_7441499034704936960_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=GQqwKdosiZsAX_hOD2p&oh=83248d05fda0a9af488e722739842f15&oe=5F1342F9" alt="tester"></div></div><div class="avatar-caption"><h3>Samutaro</h3><p class="color">Narratives Not Noise</p></div></a></div></div>
<!--3-->
<div class="carousel-cell">
<div class="slide slide-3"></div>
<div class="info">
<a target="_blank" href="https://www.google.it/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s320x320/45710471_1974274545985110_3650146834896125952_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=6YMGwWKDusMAX8AQMU2&oh=9cdbea6cf114306d368ecf2bc50a4628&oe=5F168E4A" alt="tester"></div></div><div class="avatar-caption"><h3>Poptones 1979</h3><p class="secondary">⚡️AFFA</p></div></a></div>
</div>
<div class="carousel-cell">
<div class="slide slide-4">
4
</div>
</div>
<div class="carousel-cell">
<div class="slide slide-5">
5
</div>
</div>
</div>
<script src="https://unpkg.com/flickity#2.0.11/dist/flickity.pkgd.js"></script>
In my website I want to be able to allow the user to hover over an image and have the image zoomed in by a transition. I've been able to succeed with the implementation of the transition, however, when the image is being zoomed in, it constantly overlaps the other elements. My current layout is ordered in a grid and the container has been given the attribute overflow:hidden.
I tried to assign each element a z-index value of -1 when its being hovered, but the there is a continuous change between the layers which looks horrible. How do I allow each image to be zoomed in without overlapping into any of the other elements?
Here's my jsfiddle: https://jsfiddle.net/Syed213shah/4u0vh5Lb/
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
}
.item1:hover {
transform: scale(1.1);
z-index: -1;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item2:hover {
transform: scale(1.1);
z-index: -1;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item3:hover {
transform: scale(1.1);
z-index: -1;
}
I think it is more simple to use a pseudo-element or a inner tag (as you want) and scale this element setting its parent (our <a>) with overflow:hidden; to prevent your bug.
In my example I used a pseudoelement. I added these line of code to your CSS (I also commented some lines):
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
I didn't touch your HTML.
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg */
/* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */
/* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
/*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/
width: 100%;
height: 200%;
/*transition: all 0.5s ease-in-out;*/
position: relative;
}
/*.item1:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item2 {
/*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/*.item2:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item3 {
/*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/* -------------------------- */
/* I added these lines of code */
/* -------------------------- */
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
/*to set a background without repetition and always horizontally center you could use also this syntaxt:
background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent;
*/
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
/* -------------------------- */
/* I added these line of code */
/* -------------------------- */
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
<body>
<div class="full-height">
<script src="script.js"></script>
<div class="container">
<a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" >
<h2> Europe's biggest stadium </h2>
</a>
<a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" >
<h2>European Success</h2>
</a>
<a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" >
<h2>Current Squad</h2>
</a>
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li>Squad</li>
<li>Contact</li>
<li>About</li>
<a2><a>Created by Awais</a></a2>
</ul>
</div>
<h1>FC Barcelona</h1>
</div>
<div class="bottom-height">
</div>
</body>
instead of transform: scale on your images, perhaps using the background-size and background position might give the result you seek with a bit more control of the actual cropping you are already using.
the jsfiddle attached modifies your code with such an example. I did leave the transform scale in place for the text overlay. also note the image containers need a overflow:hidden in order to prevent hover interaction between cells.
here is your css modified accordingly;
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
background-position: 0% 50%;
background-size:200%;
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item1:hover {
background-size:220%;
background-position: 5% 50%;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
background-position: 0% 50%;
background-size:165%;
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item2:hover {
background-position: 5% 50%;
background-size:180%;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
background-position: 0% 15%;
background-size:175%;
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item3:hover {
background-position: 5% 15%;
background-size:195%;
}
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item1:hover h2,
.item2:hover h2,
.item3:hover h2 {
transform: scale(1.1);
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
#navbar .a2{
float: right;
line-height: 20px;
margin-right: 50px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar .a2 a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
https://jsfiddle.net/w9n6ajq1/
I am building a site with a js menu that loads content into a container div. The site works fine on desktop, and on the respsonsive mobile emulator on my desktop browser, but on my phone it doesn't scroll.
https://clippingpointmedia.co.za/cpm2019dev/
This is my main stylesheet:
/* CSS Document */
body {
padding: 0;
margin: 0;
background-color: #222;
font-family: 'Comfortaa';
}
#container {
display: block;
padding: 0;
}
#content {
margin-top: 0;
margin-right: 70px;
margin-left: 70px;
margin-bottom: 0px;
max-height:100vh;
overflow:hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
#page-content {
width: 100%;
min-height: 100vh;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #2693C1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mobile-nav, .mobile-footer {
display: none;
}
.side-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: -300px;
width: 360px;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.side-menu {
width: 300px;
background-color: #fff;
}
.menu-toggle, .mobile-menu-toggle {
width: 60px;
height: 60px;
background-size: 90%;
background-image: url("../images/MenuButtonOpen.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
float: right;
position: relative;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
.menu-top {
height: 150px;
padding: 20px 0 0;
text-align: center;
}
#mobile-cp-logo {
background: url("../images/HomeIcon-light.svg") no-repeat center;
height: 45px;
padding-top: 10px;
margin-bottom: 10px;
margin-left: -30px
}
#cp-logo {
height: 120px;
max-width: 175px;
display: block;
margin: 0 auto 20px;
background: url("../images/HomeIcon-dark.svg") no-repeat center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
#pt-container {
padding: 15px 0;
background-color: #ccc;
text-align: center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
width: 100%;
}
#prod-title, #digi-title, #event-title {
background-color: #ccc;
text-transform: uppercase;
color: #fff;
border-top: 1px solid #2693C1;
border-bottom: 1px solid #2693C1;
padding: 10px 0;
width: 66.66667%;
margin: 0 auto;
font-size: 20px;
font-weight: 300;
display: none;
}
.side-menu ul {
list-style: none;
}
.side-ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 30px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
text-decoration: none;
}
.side-ul li a::after, .top-ul li a::after {
float: right;
content: url("../images/arrow-right.svg");
padding-right: 20px;
padding-left: -20px;
}
.side-ul li a:focus::before, .top-ul li a:focus::before {
float: left;
content: url("../images/arrow-left.svg");
padding-right: -20px;
padding-left: 20px;
}
.side-sub-ul ul, .side-footer ul, .mobile-sub-ul ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.side-sub-ul li, .side-footer li, .mobile-sub-ul li {
float: left;
width: 33.333333%;
}
.side-sub-ul li a, .side-footer li a, .mobile-sub-ul li a {
display: block;
text-align: center;
text-transform: lowercase;
text-decoration: none;
width: 100%;
}
.side-sub-ul li a, .mobile-sub-ul li a {
color: #606060;
background-color: #ccc;
font-size: 13px;
padding: 18px 0;
margin: 7px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.side-sub-ul li, .mobile-sub-ul li {
background-color: #ccc;
list-style-type: none;
}
.side-footer li a {
color: #273658;
font-size: 8px;
padding: 5px 0;
background-color: #fff;
width: 100%;
}
.show {
display: initial
}
.hide {
display: none;
}
.menu-item-tablet {
display: none !important;
}
.wes-hi {
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
}
.social {
position: fixed;
width: 60px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.social a {
display: block;
text-align: center;
padding: 9px 0;
}
.mobile-footer a {
color: #fff;
font-size: 8px;
text-decoration: none;
padding: 0 5px;
}
.mobile-footer li {
display: inline-block;
}
#totop-btn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(0,0,0,0.8);
color: white;
cursor: pointer;
padding: 1px 14px 7px 15px;
font-size: 30px;
border-radius: 0;
transform: rotate(-90deg);
}
#totop-btn:hover {
color: #2693C1;
}
#bg {
position: fixed;
top: 0;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
z-index: -9;
background: url("../images/full-bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive Queries */
#media only screen and (max-width: 992px) {
/* Tablet View */
.menu-item {
display: none !important;
}
.menu-item-tablet {
display: block !important;
}
#content {
margin-right: 0;
/* padding-top: 10px;/* height: calc(100vh - 10px);*/
}
.social {
width: 100%;
bottom: 0;
transform: none;
text-align: center;
background: rgba(0,0,0,0.8);
top: auto;
position:absolute;
}
.social a {
display: inline-block;
padding: 5px;
}
.social a img {
transform: scale(0.75);
}
.mobile-footer {
display: inline-block;
vertical-align: 95%;
}
#totop-btn {
bottom: 50px;
}
.side-footer {
display: none
}
}
#media only screen and (max-width: 359px), (orientation: landscape) and (max-width:600px) {
/* Small Mobile View */
#container {
display: block;
width: 100%;
min-height: -webkit-fill-available;
}
#content {
margin-left: 0;
margin-top: 0;
padding-top: 0;
}
#page-content {
min-height: calc(100vh - 138px);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.side-nav {
display: none;
position:absolute;
visibility: hidden;
z-index: -99999;
}
#mobile-nav {
/* position: fixed;*/
top: 0;
width: 100%;
display: block;
background-color: rgba(0,0,0,0.8);
padding: 10px 0;
height: 55px;
overflow: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.mobile-menu-toggle {
height: 55px;
}
.top-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 20px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 14px;
text-transform: lowercase;
text-decoration: none;
}
.mobile-footer {
/* vertical-align: top;*/
padding-bottom: 3px;
}
.social {
height: 63px;
}
.social a {
padding: 4px 10px 0;
}
.side-sub-ul li a, .mobile-sub-ul li a {
padding: 15px 0;
margin: 7px 0;
}
}
And the relevant html:
<body>
<div id="loader"></div>
<div id="container" style="display: none">
<div id="mobile-nav">
<div class="mobile-menu-toggle" onclick="togglemobilenav()"></div>
<ul class="top-ul">
<div id="mobile-cp-logo"></div>
<li>Production
</li>
<li>Digital
</li>
<li>Events
</li>
</ul>
<ul class="mobile-sub-ul">
<li>About
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
<div class="side-nav">
<div class="menu-toggle" onclick="togglenav()"></div>
<div class="side-menu">
<div class="menu-top">
<div id="cp-logo"></div>
<div id="pt-container" style="display:none">
<div id="prod-title">Production</div>
<div id="digi-title">Digital</div>
<div id="event-title">Events</div>
</div>
</div>
<ul class="side-ul">
<li>Production
</li>
<li>Production
</li>
<li>Digital
</li>
<li>Digital
</li>
<li>Events
</li>
<li>Events
</li>
</ul>
<ul class="side-sub-ul">
<li>About
</li>
<li>About
</li>
<li>News
</li>
<li>News
</li>
<li>Contact
</li>
<li>Contact
</li>
</ul>
<ul class="side-footer">
<li>© clipping point 2019
</li>
<li>our terms & conditions
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<!-- content will be loaded here -->
<div id="content"></div>
<div class="social">
<img src="images/li-icon.svg" alt="" />
<!-- <img src="images/fb-icon.svg" alt="" />-->
<img src="images/tw-icon.svg" alt="" />
<img src="images/yt-icon.svg" alt="" />
<img src="images/insta-icon.svg" alt="" />
<ul class="mobile-footer">
<li>© clipping point 2019
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<div id="bg"></div>
</body>
I think it has something to do with the height of the #page-content div that I have set to min-height: calc(100vh - 138px) to compensate for the navbar at the top and the footer at the bottom.
Alternatively it may have something to do with visibility or positioning on the other elements. The layout of the site changes completely on smaller devices...
I've tried adding -webkit-overflow-scrolling: touch; to various elements, but even when I set it to all elements using * {} it still doesn't scroll.
I've read a dozen posts some of which point to position: fixed so i've tried switching to absolute positioning...
It seems like the whole page tries to scroll instead of the #content or #page-content div... i'm just at a loss! PLEASE HELP!!!
Add below CSS inside #media only screen and (max-width: 800px) in your style.css at line no 4030. It'll unable your parent scroll and disable your individual container scroll and also you add an individual footer in each container. So I also hide all container's footer and visible only last container footer. Try this I hope it'll help you out. Thanks
#ascensorBuilding {
overflow: auto !important;
}
#ascensorBuilding > div {
position: static !important;
overflow: hidden !important;
height: auto !important;
transform: none !important;
}
#ascensorBuilding > div .footer {
display: none;
}
#ascensorBuilding > div:last-child .footer {
display: block;
}
I experience a strange problem..
On some elements the :hover effect is not applied
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
z-index: -1;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>
The logoff button in the header has the :hover effect but the two Test buttons in the main content hasn't
What am I doing wrong?!
That's because the #main style has z-index: -1. That places it behind the container element.
You have
#main {
position: absolute;
z-index: -1;
}
#main's parent, #container, doesn't create any stacking context (because it has default opacity and isn't a positioned element with z-index different than auto). Therefore, #main and #container belong to the same stacking context.
Then, since #main is a stacking context with negative stack level, it will be shown under (in z-axis) the background of #container. Then, hovering #main contents is like hovering parent's background.
Therefore, :hover doesn't apply.
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>
very simple.
just change the width of sidebar and you'll see it is working fine.
actually sidebar is overlapping on your main div.
check this below
http://oi61.tinypic.com/20j0182.jpg