How can I make an element (element id #move-slower) move slower than the speed of the butter scroll container? My goal is to place this element somewhere behind the main container with the page content (which will use butter scroll) and have it move slower when scrolling than the container controlled by butter scroll.
I'm open to using other jQuery plugins other than butter scroll as long as I can achieve the same effect of this plugin.
Using:
https://github.com/cmalven/butter-scroll
HTML
<div class="outer-container js-outer-container">
<div class="inner-container js-inner-container">
<div id="slower-element"><img src="https://via.placeholder.com/100x300.png/09f/fff" alt=""></div>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
</div>
</div>
</div>
JS
new ButterScroll({
$containerEl: jQuery('.js-outer-container'),
$elToScroll: jQuery('.js-inner-container'),
scrollEase: 0.07, // optional
maxDepthOffset: 500 // optional
});
CSS
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.inner-container {
overflow: hidden;
}
img {
max-width:100%;
height:auto;
}
#slower-element {
position:fixed;
top:0;
left:0;
}
Fiddle
https://jsfiddle.net/ts7j3n5z/
Related
So I was having trouble with changing a 3x3 image gallery layout on any screen > than 768px (tablet/desktop) to an image slider for any screen < than 768px (mobile).
After the help of everyone and especially Danilo (solutions in the comments), the problem was that the css was not correctly targetting the screen, I needed - #media only screen, I had also missed a DIV... (I know noob error).
So if anyone is trying to change the content displayed from desktop layout to mobile layout in Bootstrap 4, you can use CSS media queries that target the wrapped DIV to display or not display.
Updated working snippet below:
#media only screen and (min-width: 768px) {
.slider {
display: none;
}
.block {
display: block;
}
}
#media only screen and (max-width: 768px) {
.slider {
display: block;
}
.block {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
<!--- Start of Gallery Section -->
<div id="hold-tests">
<div class="col slider">
<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
<div class="carousel-inner col-" role="listbox">
<!--- First Slide -->
<div class="carousel-item active">
<img src="Img/PHportrait.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait.png" alt="background image">
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
<div class="col block">
<div id="gallery" class="offset">
<div class="col-md">
<div class="row no-padding">
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
</div>
<!--- End of Gallery Section -->
Since you're using bootstrap, use it. No jQuery needed for this, as it's completely covered already.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
Only visible starting from md
</div>
<div class="d-md-none">
Only visible on small screen
</div>
https://getbootstrap.com/docs/4.0/utilities/display/
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Also note that ids usually don't start with a #. Even though this may be legal, you'd then at least had to select them with $('##option1') in your jquery code.
You can do that, just using CSS
html
<div class="hold-tests">
<div class="col test1">Test1</div>
<div class="col test2">Test2</div>
<div class="col test3">Test3</div>
</div>
css
#media only screen and (min-width: 768px) {
.test1 {
display: none;
}
.test3 {
display: block;
}
}
#media only screen and (max-width: 768px) {
.test3 {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
I have a website page built in html, however there was a weird thing happened. Whenever i browse that page in google chrome, the images displayed will be overlapping all times. However, this can be resolved when i do the page refresh or press F5. Can any experts please give your advice?
This is my section that having problem.
**HTML**
<section class="wrapper">
<section class="content portfolio medium-images">
<div class="container">
<div class="row sub_content">
<!--begin isotope -->
<div class="col-lg-12 isotope">
<!--begin portfolio_list -->
<ul class="portfolio_list clearfix ">
<!--begin List Item -->
<li class="list_item col-md-3 col-lg-3 col-
sm-3">
<div class="recent-item">
<figure>
<img src="images/products
/Bearings.jpg" alt="" />
</figure>
</div>
<div class="text_option">
<h4>Bearings</h4>
</div>
</li>
<li class="list_item col-md-3 col-lg-3 col-
sm-3">
<div class="recent-item">
<figure>
<img src="images/products/Brakes.png"
alt="" />
</figure>
</div>
<div class="text_option">
<h4>Brakes</h4>
</div>
</li>
<!--end List Item -->
</ul>
<!--end portfolio_list -->
</div>
</div>
<!--./row-->
</div>
<!--./div-->
</section>
</section>
Please refere this Demo to show two images without overlapping:
.mainRunner {
border: 1px solid #000;
position: relative;
}
.img1 {
border: 1px solid #f00;
position: relative;
z-index: 2;
float:left;
}
.img2 {
border: 1px solid #0f0;
position: relative;
float:left;
}
<div class="mainRunner">
<img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
<img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>
So I have a page where I have a main image frame, and below it I have thumbnails.
When the user clicks on a thumbnail, the main image frame changes the image to the image shown in the clicked thumbnail. Like a carousel. See the image below.
Now, my problem is, if the user will add 20 thumbnails, I don't wanna show all. I want the thumbnails to always show just the 3 and be swipeable on mobile, so you can scroll horizontally and browse the thumbnails.
So let's say my code is:
<div class="main-image-frame">
<img src="img.jpg">
</div>
<div class="thumbnail-container">
<div class="thumbnail>
<img src="tnail.jpeg">
</div>
<div class="thumbnail>
<img src="tnail.jpeg">
</div>
<div class="thumbnail>
<img src="tnail.jpeg">
</div>
<div class="thumbnail>
<img src="tnail.jpeg">
</div>
<div class="thumbnail>
<img src="tnail.jpeg">
</div>
<div class="thumbnail>
<img src="tnail.jpeg">
</div>
</div>
How do I make it horizontally scrollable and swipeable in mobile? I guess a combination of CSS and js but I have no idea how to start
No need to use JavaScript. It can be done using CSS.
Set the container to a fixed width, and give it two important properties:
overflow-x:scroll;
white-space:nowrap;
Then for each thumbnail, have the following:
display:inline-block;
.container {
background-color:red;
height:100px;
width:calc(100% - 40px);
margin:10px;
overflow-x:scroll;
padding:10px;
white-space: nowrap;
}
.thumbnail {
background-color:blue;
display:inline-block;
height:100%;
width:30%;
}
.thumbnail img {
height:100%;
width:100%;
}
<div class="container">
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
<div class="thumbnail">
<img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img>
</div>
</div>
This is what I currently have:
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Title</h2>
<hr class="small">
<div class="row">
<div class="col-md-6" id="logo">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="logo.jpg">
</div>
</div>
<div class="col-md-5" id="description">
<div class="portfolio-item">
Text
</div>
</div>
</div>
I want to be able to center the image inside the column on the left, but I'm not exactly sure how. I've tried to follow this one here but it didn't work properly.
How to vertically align an image inside div
Try this:
http://codepen.io/tiagofabre/pen/LNagaB
Also there is a realy cool article about flex in this link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Title</h2>
<hr class="small">
<div class="container-fluid col-md-6 vertical-center">
<div class="col-sm-12 bg-green">
<img class="img-responsive center-block" src="http://placeimg.com/100/100/animals" />
</div>
</div>
<div class="container-fluid col-md-6 vertical-center">
<div class="col-sm-12 bg-green">
<div class="portfolio-item">Text</div>
</div>
</div>
</div>
into parent div, add this class:
col-lg-6 col-lg-push-6
like this:
<div class="col-lg-6 col-lg-push-6" id="logo">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="logo.jpg">
</div>
</div>
You can set portfolio-item position to relative and img to position absolute and give the image top: 50%; transform: translateY(-50%) https://jsfiddle.net/pu4L80gq/
Also you can use JS to determine image container height and image height to give margin-top to image or padding-top to the container :
(image container height - image height) would give you the rest space in the container then divide it on two and with this value you can center your image vertically https://jsfiddle.net/pu4L80gq/1/
$(document).ready(function () {
var imgContHeight = $('.img-container').height();
var image = $('.img-container img');
var imgHeight = image.height();
image.css({
marginTop: (imgContHeight - imgHeight) / 2
});
});
I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.
Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)