I'm experiencing an issue with using scrollreveal.js together with flexbox.
I've created a few two-column rows along the page using display flex and when trying to reveal each column separately with the scrollreveal reference only one of them are working.
Any workaround while still being able to maintain the flex attributes?
HTML
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
</div>
CSS
.grid {
display: flex;
}
.column.__50 {
width: 50%;
}
JS
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');
If I understand you clearly:
Given- the existing code
When- page is scrolled
Then- Columns should scroll into view
I've provided a snippet that shows that it does work based on your code but you have to give enough space for the scrollreveal effect to take place.
TO TEST
Add a div that takes up the space from the initial view.
Add a height to the .column.__50 class so you can see it in action.
Add a border so you can see how they are placed, you can always comment the border out after you no longer need it. Good practice for 'debugging' and visualizing your divs.
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');
.grid {
display: flex;
}
.column.__50 {
width: 50%;
height: 800px;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
<div class="column __50 ">
No class="__reveal 1"
</div>
<div class="column __50 ">
No class="__reveal 2"
</div>
</div>
<div class="grid">
<div class="column __50 __reveal">
one
</div>
<div class="column __50 __reveal">
two
</div>
</div>
As I understand, You have to pass a sequence interval (in milliseconds) to the reveal() method, making sequenced animations a breeze.
sr.reveal('.__reveal', 300);
You can read the documentation from this reference link
Stack Snippet
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal', 300);
.grid {
display: flex;
font: 13px Verdana;
flex-wrap: wrap;
}
.column.__50 {
width: 50%;
height: 100px;
background: red;
border: 8px solid #ffffff;
border-radius: 20px;
padding: 20px;
color: #fff;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
<div class="column __50 __reveal">three</div>
<div class="column __50 __reveal">four</div>
</div>
Related
I have a 2 column grid component like the image below. If there is an odd number of components say 5, there should be two rows of 2 and one row of single component placed to the left.
But the problem I am having is that, my 5th component is going to the full width and it is not to the left. It should like this pic here. How can I make the 5th component to just stay on the left and not the full width, when there are odd number of components?
If I remove the flex: 1 1 auto; from my CSS it works, BUT the issue is, when I shrink the window size, then the components that don't have description(example second component) is not going to the full width. Image here: https://imgur.com/a/VAMGYK4
Note: I can't modify the HTML. I can only change the CSS.
Here is my CSS and HTML:
CSS:
.myWrapper
{
display: flex;
flex-wrap: wrap;
width: 102.5%;
float: left;
margin: -10px;
}
.myContentBox
{
flex: 1 1 auto;
}
<div class="myWrapper">
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
</div>
.
Try using grid instead of flex.
Check out this working example.
https://jsfiddle.net/mnfghd7t/7/
HTML
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
Refer this to learn more about grid.
https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/
Is this satisfy you requirement?
.myWrapper
{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.myContentBox
{
width: 49%;
background: red;
border: 1px solid blue;
}
<div class="myWrapper">
<div class="myContentBox col-sm-6 col-md-6">1</div>
<div class="myContentBox col-sm-6 col-md-6">2</div>
<div class="myContentBox col-sm-6 col-md-6">3</div>
<div class="myContentBox col-sm-6 col-md-6">4</div>
<div class="myContentBox col-sm-6 col-md-6">5</div>
</div>
I'm creating a slide on a site that uses bootstrap 4 and owl carousel 2. Do I need to put the navigation on the slide, how do this, see my code below:
NOTE: I need to make navigation within a container not to get 100% of the width of the window.
HTML
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
</section>
JS
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'],
navContainer:'.nav-container'
})
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="slide-content">
<div class="container">
<div class="nav-container"></div>
</div>
</div>
</section>
.slide {
position: relative;
}
.slide .slide-content {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
right: 0;
z-index: 9999;
}
This will place the navigation in the center of the slide. if you want it at the bottom adjust to suit
I would recommend using flexbox css for this. justify-content: center will align it horizontally, and align-content: center or align-items: center will center it vertically.
Without your css, I'm guessing here a bit, but I put together a quick example to show how the navigation can be set to not to stretch 100% width;
http://jsfiddle.net/8qhfj6u2/
HTML
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
CSS
body{
background: #ccc;
}
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
.container{
height: 300px;
width: 400px;
margin: 0 auto;
background: #000;
display: flex;
align-items: center;
}
.nav-container{
background: #fff;
width: 300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 5px;
}
JavaScript
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="prev">Previous</div>','<div class="next">Next</div>'],
navContainer:'.nav-container'
})
});
This is how my webpage is currently looking:
And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time).
I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.
More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.
This is my code currently:
<div class="container">
<div class="row">
<div class="col-xs-6" id="big-box">
<div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="mini-box" id="firstBox">1</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="secondBox">2</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="thirdBox">3</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="fourthBox">4</div>
</div>
</div>
</div>
</div>
</div>
With some basic CSS to change the looks of the text and background colour etc.
I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?
Thanks in advance
I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:
.row {
position: relative; // set bounds for mini-box absolute.
}
.mini-box {
position: absolute;
top: 0px;
bottom: 0px;
}
I'm not a big fan of bootstrap so i have a alternative,
flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin
.parent {
align-items: flex;
display: flex;
height: 200px;
}
row {} .child1 {
background-color: green;
color: #fff;
width: 300px;
margin: 0 10px;
}
.child2 {
background-color: grey;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child3 {
background-color: red;
color: #fff;
margin: 0 10px;
height: 95px;
}
.child4 {
background-color: pink;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child5 {
background-color: black;
color: #fff;
margin: 0 10px;
height: 95px;
}
<div class="parent">
<div class="child1">text big</div>
<div class="row">
<div class="child2">text 1</div>
<div class="child3">text 2</div>
</div>
<div class="row">
<div class="child4">text 3</div>
<div class="child5">text 4</div>
</div>
</div>
css tricks for more info over flexbox
I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!
Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>
You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>
I have slick.js running with 5 images cycling at a time.
The trouble I'm having is getting 15 images to display on the first slide stacked in a 5 across and 3 down layout so users can scroll/paginate through 15 images at a time rather than just 5.
I'm currently using:
var slickOpts = {
slidesToShow: 5,
slidesToScroll: 5,
dots: true,
prevArrow: '.btn-prev',
nextArrow: '.btn-next'
};
When I set both slidesToShow and slidesToScroll to 15 it just fits them all on one row instead of stacking them.
I've also tried increasing the parent container height but still no luck.
#dashboard {
height: 600px
}
How can I get them to stack in that 5x3 layout and scroll through 15 at a time?
http://jsfiddle.net/q1qznouw/19/
DEMO
You can tell the plugin that first 15 items are 1 item this way you can scroll a set of 15 items.
HTML:
<div id="dashboard">
<div class="panel">
<div class="panel__item">1</div>
<div class="panel__item">2</div>
<div class="panel__item">3</div>
<div class="panel__item">4</div>
<div class="panel__item">5</div>
<div class="panel__item">6</div>
<div class="panel__item">7</div>
<div class="panel__item">8</div>
<div class="panel__item">9</div>
<div class="panel__item">10</div>
<div class="panel__item">11</div>
<div class="panel__item">12</div>
<div class="panel__item">13</div>
<div class="panel__item">14</div>
<div class="panel__item">15</div>
</div>
<div class="panel">
<div class="panel__item">16</div>
<div class="panel__item">17</div>
<div class="panel__item">18</div>
<div class="panel__item">19</div>
<div class="panel__item">20</div>
<div class="panel__item">21</div>
<div class="panel__item">22</div>
<div class="panel__item">23</div>
<div class="panel__item">24</div>
<div class="panel__item">25</div>
<div class="panel__item">26</div>
<div class="panel__item">27</div>
<div class="panel__item">28</div>
<div class="panel__item">29</div>
<div class="panel__item">30</div>
</div>
</div>
CSS (For Layout):
.panel__item {
border: 10px solid #333;
background: #ccc;
height:200px;
margin: 10px;
font-size: 72px;
text-align: center;
line-height: 200px;
margin: 2%;
width: 16%;
float: left;
box-sizing: border-box;
}
.panel__row {
margin: 0 -2%;
}
Dont forget to change the number of items in JS from 5 to 1.
Please check
Check http://jsfiddle.net/q1qznouw/23/
You need to set
height:200px !important;
width:200px !important;
in panel and also need to set overflow:hidden to your dashboard and sets its height accordingly