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
Related
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.
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.
Why does my cursor show this:
How do I change to default cursor?
This is my code config of amcharts for use in clone function to makeChart
var chartConfig = {
"type": "serial",
"categoryField": "period",
"addClassNames": true,
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [ {
"bulletField": "last",
"id": "", // id graph
"lineThickness": 4,
"title": "Redemption",
"valueField": "total",
"lineColor": "#ffffff",
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"categoryBalloonEnabled": false,
"cursorAlpha":0,
"cursorColor":"#000000",
"limitToGraph":"", id graph
"valueLineAlpha":0,
"valueZoomable":true,
},
"balloon": {
"adjustBorderColor" : false,
"borderColor": "#000000"
},
}
i delete some line because it show code mostly line and less detail .
can i fix it ?
thank you
The cursor is changed that way if you set the chartCursor's pan property to true. It seems like you have a very small chart in your screenshot, so you can disable the pan and set the zoomable property to false if you want a chartCursor that doesn't zoom.
chartCursor: {
pan: false,
zoomable: false,
// other config
}
Demo
Alternatively, if you need the pan functionality, you can override the cursor using css (assuming your chart div's id is chartdiv):
#chartdiv div {
cursor: default !important;
}
Demo
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.
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)