Hello I have several javascript files, I want to put them on the site but place them using grid in css.
I'll share the code with you, I do not understand:
Where do I need to write columns and rows so that after I add columns and rows to the .box-1 class it will change its position?
I have several more javascript files for which I want to change the position, my question, is it advisable to leave each javascript file separately and link it to HTML or is it recommended to merge all the javascript files into one file and then link to HTML?
Thanks.
const panels = document.querySelectorAll('.panel')
panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses()
panel.classList.add('active')
})
})
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.box-1 {
display: flex;
width: 30vw;
height: auto;
flex-direction: row;
}
.container {
display: flex;
width: 90vw;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.box-1 {
grid-column: 3/4;
grid-row: 2/3;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
#media (max-width: 480px) {
.container {
width: 100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
}
<div class="box 1">
<div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore The World</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Wild Forest</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<h3>Sunny Beach</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<h3>City on Winter</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Mountains - Clouds</h3>
</div>
</div>
</div>
I succeeded:
I added 2 queues so that they could take up space and the JavaScript file I reduced its width-
enter code here #import
url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container {
display: flex;
width: 30vw;
justify-items: center;
grid-column: 2/3;
}
.card{
grid-column: 1/2;
width: 80vh;
margin: 30px;
}
.card2{
grid-column: 3/4;
width: 80vh;
margin: 30px;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 30vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
grid-column: 3/4;
width: 30vh;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
#media (max-width: 480px) {
.container {
width: 100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
}
Related
After adding a position: fixed; to my header everything was in front of my header because they were using a position: absolute or position: relative I deleted them, and problem solved but now I want to change the position of price since I can not use a relative or absolute position because of this:
in this image price uses a relative position and header uses a fixed position but price is infront of the header so i decided to delete the position from price:
How can I change the position of price in the following code? For example I want to put it in bottom right without setting a position: absolute or position: relative.
Or if there is a better solution that can help me to put my content behind the fixed header without deleting the position property of contents what is it?
.header {
width: 100%;
height: 200px;
position: fixed;
background-color: darkcyan;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
}
body {
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer {
background: darkslateblue;
margin-top: 100px;
height: 100px;
margin-right: 0px;
width: 100%;
}
.card {
max-width: 400px;
margin: auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size: 22px;
border-radius: 3px;
width: 131px;
padding: 5px;
}
.card button {
border: none;
color: white;
background-color: #000;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size: 20px;
}
.card img {
height: 300px;
width: 300px;
}
}
#media (max-width: 1319px) {
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
<head>
<!-- <link rel="stylesheet" href="{% static 'main.css' %}"> -->
<div class="header">
<h1>header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
<!-- {% for i in p%} -->
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
<!-- {%endfor%} -->
</div>
<div class="footer">
<h1>hello</h1>
</div>
</body>
Add a z-index property in the header class.
.header{
width: 100%;
height: 200px;
position: fixed;
background-color: darkcyan;
top: 0;
left: 0;
right: 0;
z-index: 100;
margin-top: 0;
margin-right: 0;
}
I want to expand the div on click. An idea is for the div to start expanding until its full-page height and width starting from the position of the div before it starts expanding.
I know I didn't explain that to you clearly but I hope my current code will help you understand.
I want to the div to expand from its current position to fill the full page. It almost works but it works from the position I set in the animation.
Do you have any idea how can I receive the div's current position in Javascript and set that value as animation's starting point?
$(document).ready(function() {
$('.about').click(function() {
$('.about').addClass('active');
$('.about').removeClass('border');
})
$('.projects').click(function() {
$('.projects').addClass('active');
$('.projects').removeClass('border');
})
})
.hero {
position: relative;
width: 100%;
height: calc(100vh - 150px);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1.5em;
}
.border {
border-radius: 15px;
border: 1px solid #000;
cursor: pointer;
}
.about {
grid-row: 1/2;
background-color: chocolate;
}
.projects {
grid-row: 1/3;
grid-column: 2/3;
background-color: cyan;
}
#grid-split {
grid-row: 2/3;
grid-column: 1/2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5em;
}
#keyframes expand {
0% {
width: 0vw;
height: 0vh;
top: 20%;
left: 20%;
}
100% {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
}
.about.active {
position: fixed;
top: 0;
left: 0;
z-index: 100;
animation: expand .5s ease-in;
width: 100vw;
height: 100vh;
}
.projects.active {
position: fixed;
top: 0;
left: 0;
z-index: 100;
animation: expand .5s ease-in;
width: 100vw;
height: 100vh;
}
<div class="hero">
<div class="about border"></div>
<div class="projects border"></div>
<div id="grid-split">
<div class="contact border"></div>
<div class="process border"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I have a grid on my page but it doesn't seem to be doing what I'm asking of it (as usual haha). There are two main issues which I can't seem to solve.
Number 1: The right side of the grid (recent articles) seems to take up too much space. Ideally I'd want the grid to be centred so both halves are equal sizes
Number 2: When resizing, the left part of the grid gets compressed while the right side doesn't. If possible I'd like the left side to stay constant and have the right side of the 'recent articles' list be compressed
The code used is here:
HTML:
<div class="homepage">
<div class="topics">
<div class="homepage-topics-title">
Explore some topics:
</div>
<div class="individual-topics">
Productivity
Orginisation
Time-Management
</div>
</div>
<div class="recent">
<div class="homepage-recent-title">
Recent articles
</div>
<div class="hompage-recent-articles">
{{{body}}}
</div>
</div>
</div>
CSS:
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6rem 0;
}
#media (max-width: 767px) {
.site-content {
padding: 3rem 0;
}
}
/* Homepage code */
.homepage{
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 3rem;
}
.homepage-recent-title{
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
padding-left: 3rem;
line-height: 1;
}
.homepage-topics-title{
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
margin-left: 3rem;
line-height: 1;
}
.individual-topics{
position: relative;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 5rem;
padding-right: 50%;
font-size: 1.6rem;
font-weight: 400;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3;
}
If you adjust you grid-template-columns, I think you get what you need.
/* Homepage code */
.homepage{
display: grid;
grid-template-columns: min-content 1fr;
margin-top: 3rem;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6rem 0;
}
#media (max-width: 767px) {
.site-content {
padding: 3rem 0;
}
}
/* Homepage code */
.homepage {
display: grid;
grid-template-columns: min-content 1fr;
margin-top: 3rem;
}
.homepage-recent-title {
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
padding-left: 3rem;
line-height: 1;
}
.homepage-topics-title {
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
margin-left: 3rem;
line-height: 1;
}
.individual-topics {
position: relative;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 5rem;
padding-right: 50%;
font-size: 1.6rem;
font-weight: 400;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3;
}
<div class="homepage">
<div class="topics">
<div class="homepage-topics-title">
Explore some topics:
</div>
<div class="individual-topics">
Productivity
Orginisation
Time-Management
</div>
</div>
<div class="recent">
<div class="homepage-recent-title">
Recent articles
</div>
<div class="hompage-recent-articles">
{{{body}}}
</div>
</div>
</div>
I am at my wits end trying to figure out how to make the sign in modal
mobile responsive and continue to show display when the screen is down
to 320x568.
Here is the modal html
<body>
<div class="navbar-fixed">
<nav style="background-color: white;">
<div class="nav-wrapper">
<!-- Logo goes here -->
<a [pphref="index.html" class="brand-logo right">
<img class="responsive-img" src="../assets/images/HG3.png">
</a>
<!-- Collapsable menu is here -->
<a href="#" data-activates="mobile-demo" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="left hide-on-med-and-down">
<li class="active">
Home
</li>
<li>
Contact Us
</li>
<li>
Favorites
</li>
<li>
<!-- Modal Trigger, the 'href' points to the Modal Structure -->
<a class="waves-effect waves-light loginbtn btn modal-trigger" data-toggle="modal" href="#login-modal" id="signInBtn">Sign In</a>
<a class="waves-effect waves-light loginbtn btn modal-trigger" data-toggle="modal" href="#login-modal" id="signOutBtn">Sign Out</a>
<!-- Modal Structure -->
<div class="modal fade" id="login-modal" tabindex="-1" data-toggle="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
Here is CSS. Media queries are set at min-width. I'm not sure if I need to change the z-index and change things around that way.
nav ul a,
nav .brand-logo {
color: #444;
}
p {
line-height: 2rem;
}
/* This css is for the .main class */
#main {
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.main-container {
background-color: #f8f8f8;
position: relative;
left: 0;
-webkit-transition: left .2s ease-in-out;
transition: left .2s ease-in-out
}
.container {
width: 100%;
max-width: 1440px;
position: relative;
margin: 0 auto;
padding: 0 20px
}
#media screen and (min-width:840px) {
.container {
padding: 0 40px
}
}
.hero {
background-position: center center;
background-size: cover;
background-image: url("../images/greenjuice.jpg");
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
overflow: hidden;
height: 100vh;
-webkit-transition: left .2s ease-in-out;
transition: left .2s ease-in-out
}
.hero .container {
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.hero h1 {
width: 100%;
text-shadow: -2px 2px 10px rgba(55, 55, 55, 0.25)
}
#hero {
position: fixed;
top: 65px;
left: 0;
right: 0;
z-index: 1
}
#after-hero {
margin-top: 100vh
}
.wf-active #hero .tag {
-webkit-animation: opacity 1s ease;
animation: opacity 1s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.wf-active #hero h1 {
-webkit-animation: opacity 2s ease .25s;
animation: opacity 2s ease .25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.hero--generic {
background-image: url("../images/greenjuice.jpg");
padding-top: 100px;
padding-bottom: 100px;
height: auto;
min-height: 400px
}
.hero--generic h1 {
font-size: 48px
}
#media screen and (min-width:840px) {
.hero--generic h1 {
font-size: 700px
}
}
.hero--index {
background-image: url("../images/greenjuice.jpg")
}
.hero--index h1 {
margin-bottom: .6em
}
.hero--index h1 {
color: rgb(17, 22, 31)
}
.hero--index h3 {
font-size: 48px;
color: whitesmoke;
margin-bottom: 1em;
text-shadow: -2px 2px 10px rgba(55, 55, 55, 0.25);
line-height: 1.2em
}
.responsive-img {
height: 100px;
width: 100%
}
#media screen and (min-width:0) and (max-width:479px) {
.hero--index h3 {
display: none
}
}
.hero--index .tag {
color: #717f81
}
/* Css for .panel */
.panel {
position: relative;
z-index: 15;
}
#media screen and (min-width:840px) {
.panel--solutions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
}
.solution {
background-size: cover;
overflow: hidden;
color: #656565
}
#media screen and (min-width:840px) {
.solution {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 50%;
height: auto
}
}
#media screen and (min-width:840px) {
.solution:before {
float: left;
padding-top: 100%;
content: ""
}
}
.solution__container {
background-color: rgba(255, 255, 255, 0.801);
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* padding:350px 200px; */
width: 100%;
margin: 200px 0px;
/* margin-bottom: auto; */
-webkit-transition: background-color .5s ease;
transition: background-color .5s ease
}
#media screen and (min-width:1200px) {
.solution__container {
padding: 100px 80px
}
}
#media screen and (min-width:1600px) {
.solution__container {
padding: 100px
}
}
#media screen and (min-width:840px) {
.solution__container:hover,
.solution__container:focus {
background-color: transparent
}
}
#media screen and (min-width:840px) {
.solution__container:hover .solution__inner,
.solution__container:focus .solution__inner {
background-color: rgba(255, 255, 255, 0.904);
border-color: transparent
}
}
.solution__container p {
width: 100%;
text-align: center
}
.solution__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
-webkit-transition: all .6s ease;
transition: all .6s ease
}
#media screen and (min-width:840px) {
.solution__inner {
-webkit-box-pack: center;
-ms-flex-pack: center;
/* justify-content:center; */
padding: 40px;
border: 2px dashed #188138
}
}
.solution__inner * {
text-align: center
}
.solution__header {
font-size: 30px;
color: #188138
}
#media screen and (min-width:840px) {
.solution__header {
font-size: 40px
}
}
.solution__body {
margin: 20px auto 30px;
font-size: 16px
}
#media screen and (min-width:840px) {
.solution__body {
font-size: 18px
}
}
.solution--ordering {
background-image: url()
}
.solution--category {
background-image: url()
}
.solution__icon {
margin-bottom: 30px
}
/* End of main container css */
/* Start of footer css */
footer {
position: relative;
z-index: 16;
color: #fff;
overflow: hidden
}
.panel--learn-more {
background-color: #05180ae1;
overflow: hidden;
-webkit-transition: background-color .3s ease;
transition: background-color .3s ease
}
#media screen and (min-width:840px) {
.panel--learn-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 158px
}
}
.panel--learn-more:hover,
.panel--learn-more:focus {
background-color: #082505
}
.learn-more__header {
font-size: 40px;
margin: 40px 20px;
text-align: center;
text-transform: none
}
#media screen and (min-width:840px) {
.learn-more__header {
margin: 0 auto;
font-size: 35px
}
}
.learn-more__link {
font-style: italic;
text-decoration: none
}
#media screen and (min-width:0) and (max-width:839px) {
.learn-more__link {
display: block
}
.solution__container {
padding: 0px;
}
}
.learn-more__link:hover,
.learn-more__link:focus {
text-decoration: none
}
.footer__bottom {
background-color: #233c23;
overflow: hidden
}
.footer__bottom .container {
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 190px
}
#media screen and (min-width:840px) {
.footer__bottom .container {
height: 100px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
}
.footer__navigation {
margin: 0 auto;
padding: 0;
font-size: 18px;
text-align: center
}
#media screen and (min-width:840px) {
.footer__navigation {
margin: 0 30px
}
}
.footer__navigation a {
color: #fff
}
.footer__navigation a:hover,
.footer__navigation a:focus {
color: #fff
}
.footer__item {
display: inline-block;
padding: 0 12px 6px
}
#media screen and (min-width:840px) {
.footer__item {
padding: 0 20px
}
}
.footer__item__link {
text-decoration: none
}
.footer--social {
margin: 0 auto 20px;
padding: 0;
text-align: center
}
#media screen and (min-width:840px) {
.footer--social {
margin: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
}
.footer__social-link {
padding: 0 8px
}
.footer__social-link .icon {
width: 48px;
height: 48px;
fill: #7e7e7e
}
.footer__social-link .icon:hover,
.footer__social-link .icon:focus {
fill: #ccc
}
.footer-background {
background-color: #f8f8f8;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 0;
opacity: 0
}
.page-bottom .footer-background {
opacity: 1
}
/* End of footer css. */
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 380px;
line-height: 0;
height: auto;
color: rgba(255, 255, 255, .9);
overflow: visible;
}
.parallax-container .section {
width: 100%;
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin: 0;
}
.materialboxed {
width: 30%;
margin: auto;
float: left;
}
.brand-logo {
width: 10%;
opacity: 0.8;
}
.carousel {
overflow: visible;
}
.carousel .carousel-item {
width: 300px;
height: 300px;
}
.modal-body {
color: black;
}
.loginbtn {
background-color: #062605;
}
.btn {
background-color: #032504;
}
.btn:hover,
.btn-large:hover {
background-color: #1B5E20;
}
.btn:focus,
.btn-large:focus,
.btn-floating:focus {
background-color: rgb(7, 31, 8);
}
/* CSS for modal. */
#login_register_btn {
float: left;
margin-left: 5px;
}
#login_lost_btn {
float: left;
}
#login-btn {
float: left;
margin-right: 5px;
}
#register_login_btn {
float: left;
}
#register-btn {
float: left;
margin-right: 5px;
}
.modal {
display: none;
position: fixed;
left: 0;
right: 0;
background-color: #fafafa;
padding: 0;
/* max-height: 70%; */
max-height: 59%;
width: 55%;
margin: auto;
overflow-y: hidden !important;
border-radius: 2px;
will-change: top, opacity;
}
.modal-overlay {
z-index: 0;
}
.modal .modal-content {
padding: 24px;
margin-bottom: 69px;
}
/* End CSS for Modal. */
#media only screen and (max-width: 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
/* This css is for the .main class */
}
#media only screen and (max-width: 600px) {
#index-banner .section {
top: 0;
}
}
I am trying to make a slide menu using jquery and css. But i have one problem with open close section.
When i click the open button for .left-sidebar-menu it is opening with unnecesarry space from .left-sidebar-menu left side. How can i fix it anyone can help me here ?
$(document).ready(function() {
var win = $box = $('.left-sidebar-menu');
$('.js-open-callback').on('click', function(event) {
event.stopPropagation();
/* $(".left-sidebar-menu").toggleClass("open-right");*/
jQuery.fn.blindRightToggle = function(duration, easing, complete) {
return this.animate({
marginLeft: -(parseFloat(this.css('marginLeft'))) < 0 ? 0 : this.outerWidth()
}, jQuery.speed(duration, easing, complete));
};
$box.blindRightToggle('slow');
$box.toggleClass("open-right");
});
});
.header {
position: relative;
padding: 15px 15px 0px 0px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#1e88e5;
height:50px;
}
.containerMain {
position: relative;
width: 100%;
max-width: 1050px;
margin: 0px auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.left-sidebar-menu {
float: left;
position: relative;
width: 100%;
max-width: 40px;
min-width: 40px;
min-height: 500px;
background-color:#8e24aa;
}
.posts-container {
position: relative;
float: left;
width: 100%;
max-width: 700px;
min-height: 900px;
padding-left: 35px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#d81b60;
}
#media screen and (max-width:970px) {
.right-sidebar {
display:none;
}
.posts-container {
max-width: 744px;
min-height: 900px;
padding-left: 108px;
}
}
#media screen and (max-width:840px) {
.posts-container {
max-width: 700px;
min-height: 900px;
padding-left: 35px;
padding-right: 21px;
}
}
#media screen and (max-width:580px) {
.left-sidebar-menu {
visibility:hidden;
opacity:0;
}
.open-right {
visibility:visible;
opacity:1;
}
.posts-container {
max-width: 700px;
min-height: 900px;
padding-left: 15px;
padding-right: 18px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas">
<div class="header"><div class="js-open-callback">OPEN</div></div>
<div class="containerMain">
<div class="left-sidebar-menu"></div>
<div class="posts-container">ss</div>
</div>
</div>
You should really be using padding-left instead of margin-left, which causes the white space on the left.
Just replace the margingLeft property in the object you are passing to this.animate() with
paddingLeft: -(parseFloat(this.css('paddingLeft'))) < 0 ? 0 : this.outerWidth()
$(document).ready(function() {
var win = $box = $('.left-sidebar-menu');
$('.js-open-callback').on('click', function(event) {
event.stopPropagation();
/* $(".left-sidebar-menu").toggleClass("open-right");*/
jQuery.fn.blindRightToggle = function(duration, easing, complete) {
return this.animate({
paddingLeft: -(parseFloat(this.css('paddingLeft'))) < 0 ? 0 : this.outerWidth()
}, jQuery.speed(duration, easing, complete));
};
$box.blindRightToggle('slow');
$box.toggleClass("open-right");
});
});
.header {
position: relative;
padding: 15px 15px 0px 0px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#1e88e5;
height:50px;
}
.containerMain {
position: relative;
width: 100%;
max-width: 1050px;
margin: 0px auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.left-sidebar-menu {
float: left;
position: relative;
width: 100%;
max-width: 40px;
min-width: 40px;
min-height: 500px;
background-color:#8e24aa;
}
.posts-container {
position: relative;
float: left;
width: 100%;
max-width: 700px;
min-height: 900px;
padding-left: 35px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#d81b60;
}
#media screen and (max-width:970px) {
.right-sidebar {
display:none;
}
.posts-container {
max-width: 744px;
min-height: 900px;
padding-left: 108px;
}
}
#media screen and (max-width:840px) {
.posts-container {
max-width: 700px;
min-height: 900px;
padding-left: 35px;
padding-right: 21px;
}
}
#media screen and (max-width:580px) {
.left-sidebar-menu {
visibility:hidden;
opacity:0;
}
.open-right {
visibility:visible;
opacity:1;
}
.posts-container {
max-width: 700px;
min-height: 900px;
padding-left: 15px;
padding-right: 18px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas">
<div class="header"><div class="js-open-callback">OPEN</div></div>
<div class="containerMain">
<div class="left-sidebar-menu"></div>
<div class="posts-container">ss</div>
</div>
</div>