I have the following HTML/CSS/JS:
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product {
display: inline-block;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
I want to achieve, that the div 'product-details' is displayed in the same line as the image and both of them should take 50% of the place available.
Additionally, i want to stick the checkout div to the bottom of the whole div, it is actually not even shown.
As you see, I used display: inline-block for the product div, but it is not working, I don't know why.
So bascically i want to achieve: image on the left, details on the right.
There is a lot more CSS and HTML, for a better readability I removed them.
The whole body is position: fixed, because it should always take the full page.
This is a MVCE and should work in a jsfiddle or in codepen.
Can someone help me?
First, it looks like some of your selectors weren't even working. Second, you were applying inline-block to the parent, when it really should have been applied to the children.
Either way, I think flexbox is a better solution here. I also made the image shrink or expand to fill the available space.
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.product {
display: flex;
}
.product>div {
width: 50%;
}
.product .prodcut-image {
margin-right: 20px;
}
.product img {
width: 100%;
height: auto;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Try this
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body{
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container{
position: relative;
height: 100%;
width: 100%;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product{
display: inline-block;
width:100%;
}
.cart-preview .body .products-container > .product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container > .product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before{
content: ' \25CF';
font-size: 30px;
}
.prodcut-image{
display:inline-block;
}
.product-details{
display:inline-block;
vertical-align:top;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout > button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left:100px;
}
.taxes{
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total{
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes{
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value{
float: right;
}
.cart-total .label{
float: left;
}
.taxes .value{
float: right;
}
.taxes .label{
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="img.svg" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://fakeimg.pl/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Although html structure should be updated and more refined.
Related
i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!
I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>
Good morning. I've an error. I tried to add display: flex to display those divs in horizontal line with the flex-wrap: wrap to break line if there's ended available width. Why it does not work right now?
.header {
width: 100%;
height: auto;
margin: auto;
}
.header .header__center {
width: 90%;
height: 100%;
margin: auto;
}
.header .header__center .row {
width: 100%;
height: auto;
text-align: center;
}
.header .header__center .row .header__bussword-text {
font-size: 45px;
color: #353535;
padding-top: 40px;
padding-bottom: 30px;
}
.header .header__center .row01 {
width: 90%;
display: flex;
margin: auto;
overflow: none;
}
.header .header__center .row01 .ref__square {
width: 150px;
height: 180px;
background: #fff;
border: 1px solid #ff3b49;
position: relative;
margin: 5px;
}
.header .header__center .row01 .ref__square:nth-child(1):before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url("fluid.png") no-repeat;
background-size: 190%;
background-position: center;
opacity: .7;
}
.header .header__center .row01 .ref__square .ref__logo-container {
width: 100%;
height: 80px;
position: absolute;
top: 0;
}
.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
max-width: 80%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.header .header__center .row01 .ref__square .ref__information {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.header .header__center .row01 .ref__square .ref__information .ref__link {
color: #050505;
}
.header .header__center .row01 .ref__square .ref__information .ref__code {
font-weight: 600;
}
<div class="header">
<div class="header__center">
<!-- Specific container -->
<a target="_blank" href="http://g4skins.com/ref/DDVX">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="g4.webp" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">g4skins.com</p>
<p class="ref__code">Code: DDVX</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
<!-- Specific container -->
<a target="_blank" href="https://csgopolygon.com">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="csgopolygon.png" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">csgopolygon.com</p>
<p class="ref__code">Code: chudy69</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
</div>
</div>
You've placed display:flex on .row01 which has only 1 child. If you want to sort .row01 you want flex to be applied on parent/container. So I made .my_cool_flex_container as parent with display:flex.
.my_cool_flex_container {
display: flex;
}
.header {
width: 100%;
height: auto;
margin: auto;
}
.header .header__center {
width: 90%;
height: 100%;
margin: auto;
}
.header .header__center .row {
width: 100%;
height: auto;
text-align: center;
}
.header .header__center .row .header__bussword-text {
font-size: 45px;
color: #353535;
padding-top: 40px;
padding-bottom: 30px;
}
.header .header__center .row01 {
width: 90%;
margin: auto;
overflow: none;
}
.header .header__center .row01 .ref__square {
width: 150px;
height: 180px;
background: #fff;
border: 1px solid #ff3b49;
position: relative;
margin: 5px;
}
.header .header__center .row01 .ref__square:nth-child(1):before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url("fluid.png") no-repeat;
background-size: 190%;
background-position: center;
opacity: .7;
}
.header .header__center .row01 .ref__square .ref__logo-container {
width: 100%;
height: 80px;
position: absolute;
top: 0;
}
.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
max-width: 80%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.header .header__center .row01 .ref__square .ref__information {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.header .header__center .row01 .ref__square .ref__information .ref__link {
color: #050505;
}
.header .header__center .row01 .ref__square .ref__information .ref__code {
font-weight: 600;
}
<div class="header">
<div class="header__center">
<h1>Checkout my new flex container below!</h1>
<div class="my_cool_flex_container">
<!-- Specific container -->
<a target="_blank" href="http://g4skins.com/ref/DDVX">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="g4.webp" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">g4skins.com</p>
<p class="ref__code">Code: DDVX</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
<!-- Specific container -->
<a target="_blank" href="https://csgopolygon.com">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="csgopolygon.png" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">csgopolygon.com</p>
<p class="ref__code">Code: chudy69</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
How to achieve the carousel of multiple divs after clicking on add button? For each loop will repeat the div for every click of Add button. After click, multiple divs to be placed side by side and when it is overflow we need to do the carousel functionality for it with arrow marks as next and prev. Any Ideas on how to solve this?
.small-header {
min-height: 124px;
background-position: center right;
text-align: center;
display: table;
width: 100%;
padding: 22px 20px 0;
background: #fff;
box-sizing: border-box;
}
.small-header .vertical-align {
display: table-cell;
vertical-align: middle;
}
.component-carousel {
width: 530px;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
}
.component-carousel:before {
left: 0;
}
.component-carousel:after, .component-carousel:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 1;
}
.component-carousel .outer-content {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.component-carousel .items {
position: relative;
height: 190px;
left: 145px;
}
.component-carousel .items .item {
top: 0;
left: -50px;
height: 190px;
box-sizing: border-box;
float: left;
margin: 0 20px 0 0;
position: relative;
display: table;
}
.your {
display: block;
height: 290px;
border: 2px solid #5e6a71;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 0 0 0;
width: 244px;
position: relative;
background: #fff;
}
.component-carousel .bullets {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
z-index: 3;
}
.component-carousel .bullets li {
transition: all .15s ease-out;
display: inline-block;
margin: 0 3px;
}
.your>p.card-number {
margin-top: 95px;
margin-bottom: 10px;
position: relative;
color: #5e6a71;
}
.your .infonumber {
display: block;
}
.your p.card-number:after {
content: "";
display: block;
width: 70%;
height: 1px;
background: #bec3c6;
margin: 0 auto;
margin-top: 7px;
}
.card-left:after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 95px;
background: #cecfd1;
right: -15px;
top: 0;
}
.card-detail-container {
display: block;
position: absolute;
width: 100%;
height: 80px;
left: 0;
top: 180px;
color: #5e6a71;
}
.card-left {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 18px;
}
.card-right {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 35px;
}
.card-detail-container p {
line-height: 14px !important;
}
.component-carousel.show-two .controls {
display: none;
}
.component-carousel .controls {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
}
.component-carousel .controls li.disabled {
opacity: .2;
cursor: pointer;
}
.component-carousel .controls li:first-child {
left: 0;
}
.component-carousel .controls li {
transition: all .15s ease-out;
position: absolute;
top: 0;
cursor: pointer;
background: url(/image/component/carousel/arrows.png) no-repeat center left;
height: 100%;
width: 19px;
}
.component-carousel .controls li:last-child {
right: 0;
background-position: center right;
}
.button {
border: 1px solid #a8a8a8;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
position: relative;
text-decoration: none;
white-space: normal;
cursor: pointer;
color: #292929;
}
.btn {
position: relative;
color: #4f4f4f;
left: 38%;
width: 25% !important;
max-width: 580px;
text-transform: capitalize;
}
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-horizontal" }))
{
if (Model.Details != null && Model.Details.Count() > 0)
{
<div class="small-header">
<div class="vertical-align">
<div class="component-carousel">
<div class="outer-content">
<div class="mask">
<ul class="items" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<li class="item">
#foreach (var item in Model)
{
<div class="your">
<p class="card-number">
<span class="infonumber">123456</span>
</p>
<div class="card-detail-container">
<div class="card-left">
<p class="card-shape-title">Circle</p>
<p class="card-barcode-title">24242</p>
</div>
<div class="card-right">
<p class="card-carat-title">222</p>
<p class="card-certificate-title"></p>
</div>
</div>
</div>
}
</li>
</ul>
</div>
</div>
<ul class="controls">
<li class="prev disabled"></li>
<li class="next"></li>
</ul>
</div>
</div>
</div>
}
<div class="btns">
<button type="submit" id="addinfo" class="btn button" value="Add">Add<span></span><span></span></button>
</div>
}
$(document).ready(function(){
$(".l-right").click(function(){
debugger;
$(".menu-overlay").show();
});
$(".icon-close").click(function(){
debugger;
$(".menu-overlay").hide();
});
});
.header-top {
background: rgba(0, 47, 77, .3);
height: 100px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 12;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: -40px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 30px;
left: 10px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.icon-menu{
color: #FFFFFF;
font-size: 2.2em;
}
.menu-overlay {
display: none;
position: fixed;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
}
.menu-body{
position: fixed;
top: 0;
z-index: 99999;
right: 0;
height: 100%;
background-color: #ef4f51;
width: 35%;
float: right;
}
span.closer {
font-size: 50px;
float: right;
color: white;
padding: 30px;
}
.menu-pan{
width: 100%;
float: left;
padding: 0 80px;
}
.menu-pan li {
padding: 10px 0;
}
.menu-pan li a {
color: white;
text-decoration: none;
font-size: 32px;
}
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
/* margin-left:10px; */
/* margin-right: 100px; */
margin-top:35px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<header>
<div class="header-top clearfix">
DONATE NOW
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive" />
<a class="l-right toggle-menu" href="#" id="pop">
<span class="icon-menu" onclick="openNav()"></span>
</a>
</div>
<div class="menu-overlay">
<div class="menu-body">
<span class="closer" onclick="closeNav()"><i class="icon-close icons"></i></span>
<ul class="menu-pan">
<li>Home</li>
<li>About Us</li>
<li>What We Do</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</header>
hello the above code is for hamburger side navigation menu i want to make it shrink or resize on on page scroll as well i want to open that menu from right side with smooth transition effect & when i click outside opened menu (menu-body) it should close.
See below working code.
Comments are added for code description
$(document).ready(function(){
$(".l-right").click(function(){
debugger;
$(".menu-overlay").show();
});
$(".icon-close").click(function(){
debugger;
$(".menu-overlay").hide();
});
/** SCROLL **/
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
//clearHeader, not clearheader - caps H
$("header").addClass("sticky");
}
else{
$("header").removeClass("sticky");
}
/* You can adjust on scroll behaviour here */
});
});
.header-top {
background: rgba(0, 47, 77, .3);
height: 100px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 12;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: -40px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 30px;
left: 10px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.icon-menu{
color: #FFFFFF;
font-size: 2.2em;
}
.menu-overlay {
display: none;
position: fixed;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
}
.menu-body{
position: fixed;
top: 0;
z-index: 99999;
right: 0;
height: 100%;
background-color: #ef4f51;
width: 35%;
float: right;
}
span.closer {
font-size: 50px;
float: right;
color: white;
padding: 30px;
}
.menu-pan{
width: 100%;
float: left;
padding: 0 80px;
}
.menu-pan li {
padding: 10px 0;
}
.menu-pan li a {
color: white;
text-decoration: none;
font-size: 32px;
}
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
/* margin-left:10px; */
/* margin-right: 100px; */
margin-top:35px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.sticky .header-top{
background: red;
height:50px; /*You can adjust sticky/shrinked menu and its child using .sticky class*/
}
.sticky .btn{
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<header>
<div class="header-top clearfix">
DONATE NOW
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive" />
<a class="l-right toggle-menu" href="#" id="pop">
<span class="icon-menu" onclick="openNav()"></span>
</a>
</div>
<div class="menu-overlay">
<div class="menu-body">
<span class="closer" onclick="closeNav()"><i class="icon-close icons"></i></span>
<ul class="menu-pan">
<li>Home</li>
<li>About Us</li>
<li>What We Do</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</header>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK