Is there a way with slick to use responsive settings to unslick and reslick the slider below and above certain resolutions automatically?
I tried to use the simple method
var rooms = jQuery('.room-slides').slick({
dots: false,
slidesToShow: 1,
centerMode: true,
draggable: true,
infinite: true,
speed: 300,
adaptiveHeight: false,
variableWidth: true,
responsive: [
{
breakpoint: 960,
settings: "unslick"
}
]
});
However below 960px the entire HMTL is deleted from the DOM, I thought the "destroy" method was only for de-attach all CSS/JS associated not the entire slider.
Related
I have to join two sliders in to one slider (thumbnails and big preview). At the mobile breakpoints it must be horizontal orientation for thumbnails and for desktop it must be vertical orientation for thumbnails.
initialization for big preview
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
initialization for thumbnails
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
infinite: false,
focusOnSelect: true,
arrows: false,
adaptiveHeight: true,
vertical: false,
verticalSwiping: false,
responsive: [
{
breakpoint: 992,
settings: {
vertical: true,
verticalSwiping: true,
}
},
],
});
For instance, slider preview
Mobile
Desktop
on fiddle fiddle code a jqpivot shows sales data of cars. Following problem could be a css issue or a configuration issue. When i ran the same code in IE with the size of height of grid set to 100.
{
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true, width: 75 },
shrinkToFit: false,
useUnformattedDataForCellAttr: false,
autoResizing: { compact: true },
groupingView: {
groupField: ["x0"],
groupColumnShow: [false],
groupText: ["<span class='group-text'>{0}</span>"]
},
width: 600,
height:100,
toolbar: [true, "top"],
pager: true,
rowNum: 7,
threeStateSort: true,
sortname:['x1'],
caption: "<b>Car sales statistics</b>",
rowList: [5,7, 10, 20, 100, "10000:All"]
});
As shown on the image below, when the user scrolls down and stops at a point and clicks on row the highlighter shows that the row is not in one line instead there is a visual split. . with a large dataset this is very visible to the naked eye on IE. How do i fix this issue?
I can't reproduce the problem in IE, but I'd recommend you to add
$grid.trigger("jqGridResizeStop.setFrozenColumns");
in your code to force recalculation of the height and the position of all elements of frozen divs. See https://jsfiddle.net/OlegKi/rkxutxuv/7/ as an example.
I use a slick carousel on http://www.be-virtual.org/schnittchen (on the bottom of the page).
I use the following code to make the slides automatically:
$('.center').slick({
centerMode: true,
centerPadding: '60px',
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
But that code doesn't work.
You're calling the slick carousel on a class named ".center", yet your carousel container doesn't have a class of center on it; it has a class of ".ca-container." Try to change one or the other in your code.
My JavaScript looks as follows:
$(document).ready(function () {
oTable = $('#ecTable').dataTable({
"sScrollY": "580px",
"sScrollX": "600px",
"bPaginate": false,
"bScrollCollapse": true,
"bProcessing": true,
"bInfo": true,
"aaSorting": [[0, 'desc']]
});
});
And the resulting table looks as follows:
As you can see, something isn't right. I can't seem to get DataTables to actually display the X scroll bar.
Try this..
"sScrollXInner": "100%",
"sScrollX": "100%"
I am using Datatable in my ruby on rails application. I follow the same one which is here..
https://github.com/rweng/jquery-datatables-rails
And My datatable sorting and searching working properly. But I can't see my table tool option (eg - copy, csv, excel, pdf, save ) in my table header.
I want to show my table just like this....
Please help.
i got this by adding ZeroClipboard.js
<script src="http://localhost/assets/js/ZeroClipboard.js"></script>
Update (2016):
Although they are retiring the TableTools for Buttons and Select extensions (source), this is a slightly more recent version of the dom option example:
var oTable = $('#my-table').dataTable({
autoWidth: false,
autoHeight: false,
paging: false,
dom: 'TCfrtip', // <-- Update letters for whichever extensions you want to use
responsive: false,
searching: true,
ordering: true,
stateSave: true,
scrollY: 550,
scrollX: true,
scrollCollapse: true,
fixedHeader: false,
buttons: [
'copyHtml5',
'csvHtml5',
'excelHtml5',
'pdfHtml5'
],
columnDefs: [{
targets: 'no-sort', // disable sorting on class="no-sort"
orderable: false
}],
drawCallback: function (settings) { }
});
Previous Answer (2013):
The solution is to add this:
"sDom": '<"H"TCfr>t<"F"ip>'
Inside your javascript. It will work with show/hide columns nicely as well. If you are not using show/hide columns you can remove the capital "C".
Example (with show/hide columns):
// Users
$("#users-datatable").dataTable({
"bStateSave": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $('#users-datatable').data('source'),
"bScrollInfinite": true,
"bScrollCollapse": true,
"iDisplayLength": 100,
"sScrollY": "500px",
"sScrollX": "100%",
"sDom": '<"H"TCfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "Your custom message would go here."
},
"print"
]
}
});
Hopefully this will help someone.