Slick slider animate back to first slide - slick.js

I am trying to make a Slick slider jump back to the first slide after the last slide. The closest answer to this topic I have found is this:
Slick slider goto first slide
But unfortunately it uses the fade animation so it does not have the effect I'm after. What I want is that the slideshow will play until the end and then scroll back to the beginning after the last slide is shown.
There are only three slides in my use case, and I can easily fire a message in the console when the last one is reached, but the slickslider method slickGoTo doesn't work.
(function($) {
var slider = $('.sightbox__slideshow');
slider.slick({
arrows: false,
autoplay: true,
infinite: true,
});
function jumpBack() {
slider.slick('slickGoTo', 0);
}
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(currentSlide);
if (currentSlide === 2 ) {
console.log('last slide');
jumpBack();
}
});
})(jQuery);
.sightbox__slideshow {
width: 250px;
padding: 50px;
}
.sightbox__slide--1 {
background-color: pink;
}
.sightbox__slide--2 {
background-color: green;
}
.sightbox__slide--3 {
background-color: yellow;
}
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<div class="sightbox__slideshow">
<div class="sightbox__slide sightbox__slide--1" id="sightbox__slide--1">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">1. first</p>
</div>
<div class="sightbox__slide sightbox__slide--2" id="sightbox__slide--2">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">2. second</p>
</div>
<div class="sightbox__slide sightbox__slide--3" id="sightbox__slide--3">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">3. third</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

You may change the trigger event to afterChange and resort to setTimeout function to stay on the last slide for a while (3 seconds approx).
The slick-slider preventing a custom action on its events can also be overridden using the setTimeout function.
function jumpBack() {
setTimeout(function() {
slider.slick("slickGoTo", 0);
},3000);
}
CODEPEN
Hope this helps.

Related

Next js <Image/> component doesnt overflow while making carousel like regular <img> tag

when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}

Nuxt.js Scroll to bottom of div element

What`s wrong with this code? After render div element scroll has to be in the bottom of div element. scrollTop not saving the value after func
<main>
<div v-if="messages">
<ul ref="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</div>
</main>
mounted() {
this.scrollToEnd();
},
methods: {
scrollToEnd() {
const height = this.$refs.messagesContainer.scrollHeight;
this.$refs.messagesContainer.scrollTo(0,height)
// doesnt work
// this.$refs.messagesContainer.scrollTop = height
}
}
main {
background-color: #fff;
height: 56vh;
ul {
height: 100%;
overflow: auto;
flex: auto;
}
}
you can get the y position of the element via the offsetHeight property like this:
var offsetTop = this.$refs.messagesContainer.offsetHeight;
You can find more information regarding offsetHeight, clientHeight and scrollHeight properties here
Note you need to call the scrollTo method on the window element:
example:
methods: {
scrollToEnd() {
var scrollHeight = this.$refs.messagesContainer.offsetHeight;
this.$refs.messagesContainer.scrollTop = scrollHeight;
}
}
Hope this helps :)
<main>
<ul v-if="messages" id="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</main>
scrollToEnd() {
const element = document.getElementById('messagesContainer')
element.scrollTop = element.offsetHeight + element.scrollHeight
}
This seems to work on Nuxt. This also provides a smooth scrolling as well.
const element = this.$refs.messagesContainer;
element.scrollIntoView({ behavior: "smooth", block: "start" });

KendoUI forcePageBreak does not display long Partial Views

I'm currently trying to save a PDF for a web application with many pages. I call the partial views into one main page and use KendoUI to save the DOM into the PDF. Because some of these pages are very long and are variant depending on user input, I need the data to display over multiple pages. Whenever forcePageBreak is not called, KendoUI naturally does this by displaying all the data over multiple pages. Although when I turn on forcePageBreak and set page breaks at the beginning of each Partial in the main page, each Partial will only display one page in the pdf, and the rest of the data is cut off.
Here is an example of the main page's code:
<div class="myCanvas" id="myCanvas">
<div class="page-break">#{Html.RenderPartial("_Page1", Model._VM_Page1);}</div>
<div class="page-break">#{Html.RenderPartial("_Page2", Model._VM_Page2);}</div>
<div class="page-break">#{Html.RenderPartial("_Page3", Model._VM_Page3);}</div>
<div class="page-break">#{Html.RenderPartial("_Page4", Model._VM_Page4);}</div>
<div class="page-break">#{Html.RenderPartial("_Page5", Model._VM_Page5);}</div>
<div class="page-break">#{Html.RenderPartial("_Page6", Model._VM_Page6);}</div>
</div>
<script>
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-break",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
I've tried putting page breaks within the beginning of each partial, to no avail. I've looked into trying to set groups, but I'm not exactly sure I understand if that will solve my problem. And CSS page-break-before: always isn't working. I'm unsure what to do.
The answer seems to be dive deeper for the lowest possible class that can have a page break before.
I generally solved this issue by putting the page breaks on the header classes within each Partial View. For example:
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-header",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
Where the logic of my code would be similar to:
<div class="main">
<div class="page-header>
Header
</div>
<div class="ContentContainer">
Content
</div>
</div>
It was weird because I had set the page breaks at the global level where the partials were being called and also at the local level where main was being called, but I needed to dive even deeper to the page-header items to get it to work.
Here is my example working properly
Step 1: All CDNs
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
Step 2: Add div to data div which you have created
<div data-uid="#= uid #" class="#= (id%10 == 0 ? 'page-break' : '') #">
</div>
Step 3: JS code
kendo.drawing.drawDOM("#downloadPDF", {
paperSize: "A4",
margin: {
left: "1cm",
top: "1cm",
right: "1cm",
bottom: "1cm"
},
scale: 0.8,
forcePageBreak: ".page-break"
})
.then(function(group) {
kendo.drawing.pdf.saveAs(group, "plagiarism.pdf")
});

how to show contents for notification within a fixed sized window using scroll bar?

when there are many contents then the contents are going outside the window box but i want to show all the contents within that box n if there are many contents then a scrollbar will be shown by which i can keep the contents within the box..can anyone help me fixed this?any help would be appreciated.
html page:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
//$(document).ready(function()
//{
//var hei=$('#notificationsBody').height();
//});
function myFunction2() {
$.ajax({
url: "all_notification.php",
processData:false,
success: function(data){
$('#notificationsBody').height();
$("#notification-latest").html(data);
},
error: function(){}
});
}
</script>
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
You do not need any java script for this...
just put your html content into another div and give it height, width and overflow: scroll;
<div style="height:500px; width: 200px; overflow: scroll;">
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
</div>
Now the internal content will not get outside and if overflow then scroll.

Popup window with ajax spinner for twitter bootstrap

Is there a standard popup window with ajax spinner in twitter bootstap? Although it should be, I haven't found anything about it.
This is what worked for me on an Ajax call using Font Awesome (as recommended in the accepted answer) and tweaking out the modal style a bit:
<!-- CSS -->
<style>
#spinner-modal .modal-dialog,
#spinner-modal .modal-content,
#spinner-modal .modal-body {
background: transparent;
color: rgba(255,255,255,1);
box-shadow: none;
border: none;
}
</style>
<!--[ SPINNER MODAL ]-->
<div class="modal fade" id="spinner-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<h3><i class="fa fa-cog fa-spin"></i> Working...</h3>
</div>
</div>
</div>
</div>
<!--[ JS ]-->
<script>
$('#search-form-input').autocomplete({
source: '/search.php',
minLength: 2,
select: function(event, ui) {
$('#spinner-modal').modal('show');
var url = '/a/results/index.php?i=' + ui.item.item_id;
window.location.href = url;
}
});
</script>
You can use bootstrap modal plugin http://twitter.github.com/bootstrap/javascript.html#modals for loading ajax content in popup.
There isn't a bootstrap way to have spinner, but you can do it at your own before showing modal popup.

Resources