Hi I have an issue with my slick slider plugin.
I want to have 4 slides in one (2 rows, 2 slides for row) - in the size > 768px, if I have a width < 768px I want to have one slide. My structure looks like:
<div class="gallery-slider">
<div class="gallery-box"></div>
<div class="gallery-box"></div>
<div class="gallery-box"></div>
<div class="gallery-box"></div>
<div class="gallery-box"></div>
<div class="gallery-box"></div>
</div>
My JS code looks like:
$('.gallery-slider').slick({
dots: true,
infinite: false,
speed: 300,
rows: 2,
slidesPerRow: 2,
responsive: [
{
breakpoint: 768,
settings: {
rows: 1,
slidesPerRow: 1
}
},
]
});
Why my mobile view not work,
What can I do in this situation?
Related
I'm using slack responsive carousel to show items this items comes from array $ctrl.items and I'm using ng-repeat inside this slack carousel till now It works fine
the problem is when I click on a any button which changes the items inside $ctrl.items array
slack starts to view the items vertically and if i changed the screen width to smaller or larger screen the problem disappears and the slider works fine again
<slick
dots="true"
infinite="false"
speed="300"
slides-to-show="3"
slides-to-scroll="3"
responsive="[{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}]"
>
<div ng-repeat="item in $ctrl.items">
<div class="thumbnail">
<h6>category</h6>
<h4>{{item.name}}</h4>
<img src="http://placehold.it/300x200/" alt="Slide11" />
<h6>
{{item.price}} €
<i class="fas fa-cart-arrow-down gray"></i>
</h6>
</div>
</div>
</slick>
this solved the problem
For change slide content, you have to set ng-if to destroy and init it
controller:
$scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
$scope.numberLoaded = true;
$scope.numberUpdate = function(){
$scope.numberLoaded = false; // disable slick
//number update
$scope.numberLoaded = true; // enable slick
};
I am trying to use angular gridster to have charts inside them. Below is the code which I am using. First thing is it doesnt allow me to move or resize any of these grids. Second its making each chart inside the grid repeat 4 times . Can anyone let me know what I could be doing wrong with the html or the configuration for gridster. I have referenced the css and js files for it correctly.
$scope.standardItems = [{
size: {
x: 2,
y: 2
},
position: [0, 0]
},
{
size: {
x: 2,
y: 2
},
position: [2, 0]
},
{
size: {
x: 2,
y: 3
},
position: [0, 2]
},
{
size: {
x: 1,
y: 1
},
position: [4, 2]
}
];
$scope.gridsterOpts = {
minRows: 2, // the minimum height of the grid, in rows
maxRows: 5,
columns: 1, // the width of the grid, in columns
colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns'
rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets.
margins: [10, 10], // the pixel distance between each widget
defaultSizeX: 2, // the default width of a gridster item, if not specifed
defaultSizeY: 1, // the default height of a gridster item, if not specified
minSizeX: 1, // minimum column width of an item
maxSizeX: null, // maximum column width of an item
minSizeY: 1, // minumum row height of an item
maxSizeY: null, // maximum row height of an item
isMobile: true, // stacks the grid items if true
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
resizable: {
enabled: true,
start: function(event, uiWidget, $element) {}, // optional callback fired when resize is started,
resize: function(event, uiWidget, $element) {}, // optional callback fired when item is resized,
stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished resizing
},
draggable: {
enabled: true, // whether dragging items is supported
handle: 'h5', // optional selector for resize handle
start: function(event, uiWidget, $element) {}, // optional callback fired when drag is started,
drag: function(event, uiWidget, $element) {}, // optional callback fired when item is moved,
stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished dragging
}
};
<div gridster="gridsterOpts">
<ul>
<li style="border: solid 1px;" gridster-item="item" ng-repeat="item in standardItems">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5>{{charts.data.chartsName[$parent.$index]}}</h5>
</div>
<div class="field-container" style="margin-top: 10px;">
<select class="form-control col-md-4" ng-change="charts.hasChanged[arrKey]" ng-model="charts.type[arrKey]" ng-init="charts.type[arrKey] = charts.data.chartsDefault[$parent.$index]">
<option ng-repeat="chartsTypeValue in charts.data.chartsType[arrKey] " >{{chartsTypeValue}}</option>
</select>
<!-- <label class="floating-label">Chart Type</label> -->
</div>
</div>
</div>
<div class="svg-container" ng-if="charts.type[arrKey] =='Bar'" style="width: 400px; height: 250px;">
<bars-chart ng-if="arrValue" chart-data="arrValue" />
</div>
<div class="svg-container " ng-if="charts.type[arrKey] =='Pie'" style="text-align: -webkit-center; width: 400px; height: 220px; ">
<donut-Chart ng-if="arrValue" chart-data="arrValue">
</donut-chart>
</div>
<div class="svg-container " ng-if="charts.type[arrKey]=='Line'" style="width: 400px; height: 220px; ">
<line-Chart ng-if="arrValue" chart-data="arrValue">
</line-chart>
</div>
<hr>
</li>
</ul>
</div>
</div>
Hi everyone I have a pie chart made with nvd3 and when graph.data=[] it doenst show anything.. I want to display a simple message like "No data to show"
View:
<tab ng-if="dataConsNetfilter" heading="Summary" disable="!tabClick" active="true">
<p>{{dataConsNetfilter}}</p>
<div class="no-data" ng-if="dataConsNetfilter.data.length==0">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataConsNetfilter.types" resize>
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options && graph.data.length>0">
<center><nvd3 options='graph.options' data="graph.data"></nvd3></center>
<br>
</div>
</div>
</tab>
Logs from view:
{"types":[{"type":"netfilter.nfacct_bytes","options":{"chart":{"type":"pieChart","height":500,"width":1000,"margin":{"top":20,"right":20,"bottom":50,"left":55},"noData":"No data to show in the specified range","legend":{"rightAlign":false},"showValues":true,"legendPosition":"right","labelType":"percent","donut":true,"donutRatio":0.35,"duration":500,"xAxis":{"axisLabel":""},"yAxis":{"axisLabel":"Total","axisLabelDistance":-10}}},"data":[]}]}
Options:
var options = {
chart: {
type: 'pieChart',
height: 500,
width:1000,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
noData: 'No data to show in the specified range',
legend: {
rightAlign:false,
},
valueFormat: function(d) {
return d.value;
},
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: true, //Display pie labels
legendPosition: 'right',
labelType: 'percent', //Configure what type of data to show in the label. Can be "key", "value" or "percent"
donut: true, //Turn on Donut mode. Makes pie chart look tasty!
donutRatio: 0.35, //Configure how big you want the donut hole size to be.
duration: 500,
xAxis: {
axisLabel: ''
},
yAxis: {
axisLabel: 'Total',
axisLabelDistance: -10
}
}
}
My tab is all blank and i want to show a message to inform the user... how to do this?
My solution was "ng-if="dataConsNetfilter.types[0].data.length==0"
<tab ng-if="dataConsNetfilter" heading="Summary" disable="!tabClick" active="true">
<p>{{dataConsNetfilter}}</p>
<div class="no-data" ng-if="dataConsNetfilter.types[0].data.length==0">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataConsNetfilter.types" resize>
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options && graph.data.length>0">
<center><nvd3 options='graph.options' data="graph.data"></nvd3></center>
<br>
</div>
</div>
</tab>
I am currently facing a problem. I have a HTML page which contains multiple div to load highcharts. Same page have all the jquery script.
I am using angularJS to route the page. Index page, Chart1Page and Chart2Page. When i am loading chart1page 1st time all charts load but if i come back from chart2page to chart1page some charts does not load. Below code is one of the chart which not load. If i replace with some other chart like pie the result is same. Do i need to check the sequence?
<script>
function freecapacity() {
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'freecapacity',
type: 'column',
margin: 75
},
title: {
text: 'Free Capacity'
},
subtitle: {
text: ''
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: ['A', 'B', 'C', 'S', 'D', 'DD', 'PD']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
});
}
freecapacity();
</script>
<html>
<div class="row">
<h5 class="form-control" style="background-color:#D2D7D3"><label>Hub and GSA Information</label></h5>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
<div class="form-control" style="height: 350px;" id="freecapacity"></div>
</div>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
<div class="form-control" style="height: 350px;" id="gsanomination"></div>
</div>
</div>
</html
I recommend you use the Angularjs directive for Highcharts: https://github.com/pablojim/highcharts-ng
Than set up the Highchart object in the view controller instead of using script tags in the html file.
i am using a plupload plugin inside an accordion. I first create the the plupload and then I create the accordion.
The plupload creates well... but the accordion height is not resized so that the whole plupload is seen sinside it. The height is about 50 px instead and the vertical scroll appears.
This is the JavaScript code:
function createUploader()
{
$("#uploader").pluploadQueue("destroy");
$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '/upload.php',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: {width: 320, height: 240, quality: 90},
// Specify what files to browse for
filters: [
{title: "Archivos de imagen", extensions: "jpg,gif,png"},
{title: "Archivos comprimidos", extensions: "zip,rar"},
{title: "Documentos", extensions: "doc,docx,xls,xlsx,ppt,pdf,pptx,csv,txt"}
],
// Flash settings
flash_swf_url: '/js/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '/js/plupload/plupload.silverlight.xap'
});
}
function creaDialogoAdjuntos()
{
createUploader();
$('#acordeon_adjuntos').accordion();
}
$(function() {
creaDialogoAdjuntos();
}
And this is the HTML:
<div id="acordeon_adjuntos">
<h3>Nuevo Adjunto</h3>
<div>
<form id="attach" action="{{ path('_renombra_archivos') }}">
<div id="uploader">
<p>Su navegador no tiene soporte Flash, Silverlight, Gears, BrowserPlus o HTML5.</p>
</div>
<input type="hidden" id="adjComId" name="compromiso" />
</form>
</div>
<h4>Adjuntos</h4>
<div>
<table id="adjuntos_compromisos"><tr><td></td></tr></table>
<div id="adjuntos_paginacion"></div>
</div>
</div>
Any help to solve this will be appreciated.
Thanks
Jaime