I have a webpage but it looks different on different browsers. Even the amount of padding and margin I gave are way off and let's not talk about the JS stuff.
I also have it live here:
https://iam-shivam.github.io/DrumPad/drumpad.html
How do I make sure that they look the same on all browsers? Some way to automate this or manual tips?
I even tried a prefix-free script, but it didn't seem to do any good. Maybe I'm using it wrong. Here's the link:
http://leaverou.github.io/prefixfree/
HTML File:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual DrumPad</title>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\drumpad.css">
<link rel="prefetch" href="sounds\">
<script type="text/javascript" src="https://raw.githubusercontent.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row middle">
<div class="header" style="">
<img src="images/logo.png" alt="Logo" width="300px" height="118px">
</div>
<div class="container col-xs-12 col-md-8 col-md-offset-2 buttonGroup">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 big">
<button data-key="65" class="drumpad">A<br><sub>CLAP</sub></</button>
<button data-key="83" class="drumpad">S<br><sub>HIHAT</sub></</button>
<button data-key="68" class="drumpad">D<br><sub>KICK</sub></</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 big">
<button data-key="70" class="drumpad">F<br><sub>OPENHAT</sub></</button>
<button data-key="71" class="drumpad">G<br><sub>BOOM</sub></</button>
<button data-key="72" class="drumpad">H<br><sub>RIDE</sub></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 big">
<button data-key="74" class="drumpad">J<br><sub>SNARE</sub></</button>
<button data-key="75" class="drumpad">K<br><sub>TOM</sub></</button>
<button data-key="76" class="drumpad">L<br><sub>TINK</sub></button>
</div>
</div>
</div>
</div>
</div>
<script src="scripts\jquery-3.2.1.min.js"></script>
<script src="scripts\bootstrap.min.js"></script>
<script>
function playIt(e){
var keys = document.querySelector('[data-key="'+e.keyCode+'"]');
if(keys == null)return;
mainStuff(keys);
}
function mainStuff(keys){
keys.classList.add('playing');
var sname = keys.querySelector('sub').innerHTML.toLowerCase();
var audio = new Audio("sounds\\"+sname+".wav");
audio.play();
keys.addEventListener('transitionend',function(){
keys.classList.remove('playing');
});
}
document.addEventListener('keydown',playIt);
var all = document.querySelectorAll('.drumpad');
all.forEach(key => key.addEventListener('click', function(){
mainStuff(this);
}));
</script>
</body>
</html>
CSS File:
:root {
--bcolor: black;
}
body {
margin: 0;
padding: 0;
background-color: #000000;
}
.middle {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
height: 100vh;
border-left: 4px solid var(--bcolor);
border-right: 4px solid var(--bcolor);
}
.header {
text-align: center;
color: white;
}
.drumpad {
padding: 8%;
float: left;
margin: 0.5%;
background-color: #020202;
background-color: rgba(2, 2, 2, 0.6);
color: white;
border: 2px solid white;
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
font-size: 1.7rem;
transition: all 0.07s;
-moz-transition: all 0.07s;
-ms-transition: all 0.07s;
-o-transition: all 0.07s;
-webkit-transition: all 0.07s;
font-weight: bold;
width: 150px;
text-align: center;
}
.playing ,
.drumpad:active {
background-color: #020202;
background-color: rgba(2, 2, 2, 0.8);
border: 2px solid #1A0000;
border: 2px solid rgba(26, 0, 0, 0);
transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
}
.big {
display: flex;
justify-content: center;
}
.buttonGroup {
margin-top: 3%;
}
#media screen and (orientation:portrait) {
.buttonGroup button{
padding: 10%;
}
.buttonGroup{
margin-top: 10%;
}
.drumpad{
margin: 1%;
width: 120px;
}
}
Related
function togbtn10() {
$("#b1").toggleClass("divbtnbg divbtnbg-blue");
$("#b3").toggleClass("divbtnbg-blue divbtnbg");
$("#b2").toggleClass("divbtnbg-blue divbtnbg");
}
function togbtn11() {
$("#b2").toggleClass("divbtnbg divbtnbg-blue");
$("#b1").toggleClass("divbtnbg-blue divbtnbg");
$("#b3").toggleClass("divbtnbg-blue divbtnbg");
}
function togbtn12() {
$("#b3").toggleClass("divbtnbg divbtnbg-blue");
$("#b2").toggleClass("divbtnbg-blue divbtnbg");
$("#b1").toggleClass("divbtnbg-blue divbtnbg");
}
.divbtnbg {
display: inline-block;
border: 1px solid #CCC;
background-color: white;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
cursor: pointer;
vertical-align: middle;
max-width: 100%;
padding: 16px;
text-align: center;
border-radius: 4px;
color: rgb(130, 130, 130) !important;
}
.divbtnbg-blue {
display: inline-block;
border: 1px solid #CCC;
background-color: #e7f6fe;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
cursor: pointer;
vertical-align: middle;
max-width: 100%;
padding: 16px;
text-align: center;
border-radius: 4px;
color: rgb(130, 130, 130) !important;
}
.divbtnbg:hover {
color: rgb(130, 130, 130) !important;
background-color: #e7f6fe;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
border-radius: 8px;
margin-right: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<div class="row">
<div class="col-md-4 divbtnbg" id="b1" onclick="togbtn10()">
<div class="col-12">Update 1</div>
</div>
<div class="col-md-4 divbtnbg" id="b2" onclick="togbtn11()">
<div class="col-12">Update 2 </div>
</div>
<div class="col-md-4 divbtnbg" id="b3" onclick="togbtn12()">
<div class="col-12">Update 3 </div>
</div>
</div>
</div>
Hi, Here i am trying to make div as a button and i almost get it but there is one problem.
The problem is when click one div it would be selected and rest of the other div will be inactive.
While checked one div at that time the background color should also be active color blue.
The color should be the same which i used for mouse hover.
I try to do using toggled js but this can work for only at one id
(function togbtn10()
{
$("#b1").toggleClass("divbtnbg divbtnbg-blue");)}
the above js work properly for only one div if i used same for other div it get all selected on click
Please help on this. Thank you
First of all I want to tell you that there are no need of three different function to move active class we can do it using a simple script code.
This is the snippet for your problem solution:
$(document).ready(function() {
$('.divbtnbg').click(function() {
$('.divbtnbg').removeClass('active');
$(this).addClass('active');
});
});
.divbtnbg {
display: inline-block;
border: 1px solid #CCC;
background-color: white;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
cursor: pointer;
vertical-align: middle;
max-width: 100%;
padding: 16px;
text-align: center;
border-radius: 4px;
color: rgb(130, 130, 130) !important;
}
.divbtnbg.active,
.divbtnbg:hover {
color: rgb(130, 130, 130) !important;
background-color: #e7f6fe;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
border-radius: 8px;
margin-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 divbtnbg" id="b1">
<div class="col-12">Update 1</div>
</div>
<div class="col-md-4 divbtnbg" id="b2">
<div class="col-12">Update 2 </div>
</div>
<div class="col-md-4 divbtnbg" id="b3">
<div class="col-12">Update 3 </div>
</div>
</div>
</div>
</body>
</html>
That should be a smal change to be made only
$(".menu > div").click(function(){
$(".menu > div.selected").removeClass("selected");
$(this).addClass("selected")
})
.divbtnbg {
display: inline-block;
border: 1px solid #CCC;
background-color: white;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
cursor: pointer;
vertical-align: middle;
max-width: 100%;
padding: 16px;
text-align: center;
border-radius: 4px;
color: rgb(130, 130, 130) !important;
}
.divbtnbg:hover, .selected {
color: rgb(130, 130, 130) !important;
background-color: #e7f6fe;
box-shadow: 0px 0px 4px rgb(130, 130, 130) !important;
border-radius: 8px;
margin-right: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<div class="row menu">
<div class="col-md-4 divbtnbg" id="b1">
<div class="col-12">Update 1</div>
</div>
<div class="col-md-4 divbtnbg" id="b2">
<div class="col-12">Update 2 </div>
</div>
<div class="col-md-4 divbtnbg" id="b3">
<div class="col-12">Update 3 </div>
</div>
</div>
</div>
I want to achieve this layout with the items of the carousel:
But this is what I've been able to accomplish:
Here is my code and a fiddle http://jsfiddle.net/xvac9usr/8/:
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Card Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
</head>
<body>
<div class="carousel">
<button class="carousel__icon carousel__prev">
Prev
</button>
<ul class="carousel__list">
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--1">
<h1 class="heading-primary">Wild</h1>
<h2 class="heading-secondary">Nevada</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rocky</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--2">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__active">
<div class="card__image card__image--3">
<h1 class="heading-primary">Refreshing</h1>
<h2 class="heading-secondary">Amazonas</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rainy</div>
<div class="card__tag">Dangerous</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--4">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--5">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
</ul>
<button class="carousel__icon carousel__next">
Next
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
JS:
$(document).ready(() => {
var carousel = $(".carousel__list"),
carouselItems = $(".carousel__item"),
clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
itemWidth =
carouselItems.width() +
parseInt(carouselItems.first().css("marginRight"));
const refreshChildPosition = () => {
for(let i = 0; i < carouselItems.length; ++i){
$(carouselItems[i]).css("left", itemWidth * i);
}
};
refreshChildPosition();
//carousel.width(itemWidth * carouselItems.length);
$(".carousel__next").click(e => {
e.preventDefault();
});
$(".carousel__prev").click(e => {
e.preventDefault();
moveRight();
});
});
CSS:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-family: "Open Sans", sans-serif; }
.card {
overflow: hidden;
width: 50rem;
height: 60vh;
border-radius: 0.8rem;
box-shadow: 0px 122px 264px -115px black;
transition: all 0.3s ease-out; }
.card:hover {
transform: translateY(-1rem);
box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7); }
.card:not(:last-child) {
margin-right: 9rem; }
.card__image {
width: 100%;
height: 100%;
border-radius: inherit;
padding: 3rem 0;
z-index: 1;
position: relative;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out; }
.card__image--1 {
background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
.card__image:hover {
transform: scale(1.03); }
.card__tag-box {
position: absolute;
left: 0;
bottom: 0;
padding: 2rem 3rem;
display: flex;
flex-wrap: wrap; }
.card__tag {
border: solid 1px white;
padding: 3px 5px;
border-radius: 3px;
transition: transform 0.2s, background-position 0.3s ease-out;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #9e9e9e 50%);
background-size: 225%;
display: inline-block;
margin: 0.2rem 0; }
.card__tag:hover {
background-position: 100%;
transform: translateY(-0.2rem); }
.card__tag:not(:last-child) {
margin-right: 1rem; }
.card__active {
transform: translateY(-0.5rem) scale(1.1); }
.card__active:hover {
transform: translateY(-2rem) scale(1.1); }
.card__small {
transform: scale(0.9); }
.card__small:hover {
transform: translateY(-1rem) scale(0.9); }
.carousel {
height: 100vh;
position: relative; }
.carousel__list {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none; }
.carousel__item {
position: absolute; }
.carousel__item:not(:last-child) {
margin-right: 4%; }
.carousel__icon {
cursor: pointer;
position: absolute;
width: 5rem;
height: 5rem; }
.carousel__prev {
left: 0;
top: 50%;
z-index: 100; }
.carousel__next {
right: 0;
top: 50%;
z-index: 100; }
body {
font-family: "Open Sans", sans-serif;
font-size: 1.4rem; }
.heading-primary {
font-weight: 300;
letter-spacing: 1px;
font-size: 2em; }
.heading-secondary {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 1px; }
By subtracting the position by 440 I can seem to get a similar result but it is a hard coded solution and not responsive.
Try removing/comment this piece of css code and test your application
.carousel__item {
position: absolute; }
In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker
Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.
I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>
It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.
I'm trying to add "Back to top" button to my website. It is supposed to show up when user scrolls to the bottom of my website. But it won't fade in. It just won't. I have no idea what's wrong, I checked my code and everything should be working fine, but it doesn't. Back to top button codes are simple and so is mine... I don't know, just look at the code.
index.html - temporary I have my CSS styles here also:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Clockwork</title>
<link href='http://fonts.googleapis.com/css?family=Righteous|Titillium+Web:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="orange.ico">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
background: url('retro-vintage-pink-city.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
color: white;
font-family: 'Titillium Web', 'Courier New', sans-serif;
}
html {
height: 100%;
}
.home-section {
height: 100%;
}
.about-section {
height: 80%;
padding-top: 24px;
text-align: justify;
background: rgba(16,16,16,0.9);
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0 0 20px #000;
}
.media-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.press-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.buy-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.paragraphs {
font-size: 16px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
}
.logo {
margin: 0 auto;
transform: translateY(50%);
}
.btn-md, .btn-md:hover, .btn-md:active, .btn-md:focus {
padding: 12px 24px;
border: none;
border-radius: 0px;
box-shadow: 0 0 28px #000;
color: #fff;
background: linear-gradient(45deg, #005387 0%, #005387 39%, #007387 100%);
font-size: 20px;
font-weight: bold;
}
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}
</style>
</head>
<body id="page-top" data-spy="scroll">
<i class="icon-chevron-up"></i>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<section id="home" class="home-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive logo" src="logo.png" />
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="paragraphs">
<p style="text-align: center; font-size: 42px; font-weight: bold;">About</p>
<p style="text-align: center;"><strong>Lurk into the story and let it fill you up with an indescribable joy of exploring the fantastic and yet sometimes mysterious world of <span style="color: rgb(255, 163, 0)">Clockwork!</span></strong></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="anna.png" />
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12 paragraphs">
<p>Set in a vastly mind-opening era of 60s the game features an <span style="color: rgb(255, 163, 0); font-weight: bold;">ensemble cast</span> of various and colorful characters with each one having his or her own motivations, plans and goals. Join them in their unknowingly, but surprisingly funny venture which would eventually lead to a truly astonishing final in... Well, let's leave that for you to discover! As it will come to the end of the story, all our heroes' paths will cross and therefore they'll together try to save us all from an unexpected, but sadly <span style="color: rgb(255, 163, 0); font-weight: bold;">inevitable doom</span>. This is the event that will be <span style="color: rgb(255, 163, 0); font-weight: bold;">remembered!</span></p>
<p>On their way stands a whole army of many, many, many very smart, as it often occurs, evil-geniuses and also a bunch of ordinary morons who shall do nothing, but only slow our heroes down. Let them not stop our <span style="color: rgb(255, 163, 0); font-weight: bold;">salvation!</span></p>
</div>
</div>
<div class="row">
<div class="col-lg-12 paragraphs text-center" style="transform: translateY(50%);">
BUY
</div>
</div>
</div>
</div>
</div>
</section>
<section id="media" class="media-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Media</h1>
</div>
</div>
</div>
</section>
<section id="press" class="press-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Press</h1>
</div>
</div>
</div>
</section>
<section id="buy" class="buy-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Buy</h1>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="jquery.easing.min.js"></script>
<script src="scrolling-nav.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js:
// ===== Scroll to Top ====
$(document).ready(function(){
$("#return-to-top").hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
return false;
});
});
Here's jsfiddle:
http://jsfiddle.net/kjgeaeqc/