Im using the Slick-Slider as part of a responsive website. the problem is when you resize the browser the content panels in the slider will not swipe and gets stuck.
If you resize the browser to phone size and swipe to slide 5. Then resize the browser to full width.
You will see that you can no longer see slide 1 to 4 and the first slider will show on slide 5 onward.
HTML file code:
<div class="container-fluid">
<h1 class="text-danger">Recommended For You / Latest Offer</h1>
<div id="ig-offer" class="row">
<div id="ig-offer-6-latest" class="slider responsive">
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Account</div>
<img src="../../images/game/assassin.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div>
<div class="offer-desc text-muted small">
FIFA 15
<br />
Xbox ONE
</div>
<h4 class="txt-1line"><b>RM 103.90</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-cur">Currency</div>
<img src="../../images/game/ff-tactics.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">5,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.000703
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 23.90</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-itm">Item</div>
<img src="../../images/game/harvest-moon.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 486.56</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-bss">Boosting</div>
<img src="../../images/game/hero.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">10,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.000703
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 48.50</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-crd">Card</div>
<img src="../../images/game/lol.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
World of Warcraft
<br />
Firetree - Horde
</div>
<h4 class="txt-1line"><b>RM 263.10</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-cur">Currency</div>
<img src="../../images/game/reckoning.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Something of Something: Epicness</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 82.50</b></h4>
</div>
</div>
</div>
</div>
</div>
</div>
index.js :
jQuery("div[id^='ig-offer-6-']").slick({
dots: false,
infinite: true,
speed: 250,
slidesToShow: 6,
slidesToScroll: 1,
prevArrow: '<a class="slick-prev slick-nav slick-left" role="button" data-role="none"><span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span></a>',
nextArrow: '<a class="slick-next slick-nav slick-right" role="button" data-role="none"><span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span></a>',
responsive: [
{breakpoint: 1024, settings: {slidesToShow: 3}},
{breakpoint: 600, settings: {slidesToShow: 2}},
{breakpoint: 480, settings: {slidesToShow: 1}}
]
});
The slick.js is a default javascript download from github.
Thanks for your help.
Put below script then can able to solve the solution.
<script>
var $slider = $('#your-element'); // my slider
$(window).resize(function() {
$slider.slick('slickGoTo', 0);
});
</script>
Ps* this is only for slider with no animation.
Related
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
Basically, I have an accordion on mobile using the bootstap tab collapse.js. Everything works as should, but when the user clicks on to the next panel below, it seems to scroll them down the page and then back up to the container they clicked.
$(document).on('click', '#pdp-tabs-accordion .js-tabcollapse-panel-heading', function () {
self = $(this);
setTimeout(function () {
console.log('scrolling to');
console.log(self.closest('.panel'));
ScrollToElement(self.closest('.panel'), 95);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-controls="advice" role="tab" data-toggle="collapse" class="js-tabcollapse-panel-heading collapsed" data-parent="#pdp-tabs-accordion" aria-expanded="false">Centre</a></h4> </div>
<div id="advicecentre-collapse" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body js-tabcollapse-panel-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xl-6 col-xl-offset-3">
<div class="row">
<div class="product-misc product-misc--advice-centre" id="advice-centre">
<h3>Centre</h3>
<p>We have selected the following pages from our Advice Centre as possibly the most relevant for you.</p>
<div class="row">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
What is DWR?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
DWR Washing & Care
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Ratings Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Seams Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
2, 2.5 or 3 Layer Fabric?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Keeping Warm In The Snow
</div>
</div>
</div>
<div class="product-misc__item" itemprop="productID">
<p>We have hundreds more pages, including more Buying Guides and Size Chart.</p>
</div>
<h3 class="margin-top">Size Charts</h3>
<div class="row" id="size-charts">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
686 - Men's Snowboard Jackets Size Chart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions or ideas you might have to why this is happening would be great.
thanks in adavance!
Actually, my web page has 2 div tags which are vertically separated using col-md values. Its like <div class="col-md-6"> and <div class="col-md-6">. Right now both the divs are aligned side-by-side. .
But when I minimize the browser window, then both the divs are aligned one by one.
Code Snippet here:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
My question, could anyone suggest me how to retain the position of the divs?
This is your code with the change 'col-md-6' to 'col-6'. I just linked the latest bootstrap css and its working perfect(side by side). Hope this can help you.
.col-6{
border: solid 1px red;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
try this, this will work
<div class="row">
<div class="col col-6">
//first content
</div>
<div class="col col-6">
//second content
</div>
</div>
for more details about this document as #tico suggested.
Edit
Even though this is not a good idea but you said the top one is not working in your case.I know this not suggestible but try this once
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
//first content
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
//second content
</div>
</div>
JSFiddle
Hey! I've decided to use Masonry, which I find completely awesome.
Although I've ran into the issue where when I use it in a collapsible, it only works on the first collapsible when it's open. I can't seem figure out a way to get it to work when the collapsible is closed and then opened.
I would think it's because when the page loads the images aren't shown/don't exist. I've tried using Juery on click methods for when the collapsible is clicked to load Masonry. That didn't seem to work so I scratched that. I've tried using another on click method to reload Masonry when it's open. That also didn't seem to work correctly.
I am fairly new to JavaScript so I wouldn't be surprised if I had done something wrong. But any help would greatly appreciated. Especially considering I've been banging my head for the last few days on this.
I hope this is enough! Thanks in advance!
HTML :
<ul class="collapsible popout">
<li class="active">
<div class="collapsible-header">
<h1 class="bodyFont noMargin">
Landscapes
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes1" name="Landscapes1">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link to album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes2" name="Landscapes2">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
<li>
<div id="secondCategory" class="collapsible-header">
<h1 class="bodyFont noMargin">
Potraits
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="card deep-purple lighten-4" id="Butterflies" name="Butterflies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Bees" name="Bees">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="RollyPolies" name="RollyPolies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Ants" name="Ants">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
</ul>
CSS:
.grid {
margin: 0%;
}
.card,
.grid-sizer {
width: 31.3%;
margin-top: 5px;
margin-bottom: 5px;
}
.gutter-sizer {
width: 2%;
}
JS:
$(".collapsible").collapsible();
var $grid = $(".grid");
$grid.masonry({
itemSelector: ".card",
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
percentposition: true,
horizontalOrder: true
});
$grid.imagesLoaded().progress(function() {
$grid.masonry("layout");
});
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php