How can I enable infinite looping through the images in the pagination swiper?
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
loop: true, <----- doesnt work
clickable: true,
},
});
You don't need to use loop in pagionation.
var swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
Notice loop properties is set to true
Related
Hello i want to add videojs to my magento theme. Structure of directory.
config:
var config = {
paths: {
"videojs": "js/videojs/video.min"
},
shim: {
"videojs": {
deps: []
}
}
};
and inside view block:
<script>
define(['videojs'], function(videojs) {
'use strict';
var player = videojs('my-player', {
controls: true,
autoplay: true,
loop: true,
preload: 'auto'
});
});
</script>
In console i have Uncaught Error: Mismatched anonymous define() module: function(videojs) {
How can i fix this ?
You should change define to require in your block some like:
example.phtml
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{"techOrder": ["youtube"], "sources": [{ "type":
"video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}]}'>
</video>
<script>
require(['videojs'], function(videojs) {
'use strict';
var player = videojs('my-video', {
controls: true,
autoplay: true,
loop: true,
preload: 'auto'
});
});
</script>
I am using Vue.js to display json data from a locally stored file in a table on the web page. I also want to update the data in the json file by using data from a form. But I get the error mentioned above
import json from "../assets/data.json";
export default{
json,
data(){
return{
title: '',
date: new Date().toISOString().substr(0, 10),
modal: false,
menu2: false,
dialog: false,
notifications: false,
sound: true,
widgets: false,
task: '',
tasks: {},
}
},
methods: {
submit: function(){
this.tasks = {id: json.length+1, task:this.task,date: this.date, complete: false}
json.push(this.tasks)
var file = require('fs')
file.writeFile('../assets/data.json', json)
}
reset1(){
this.task = '';
this.date = new Date().toISOString().substr(0, 10);
}
},
name: "Form"
};
</script>
I have an ASP.net MVC solution and use jqGrid in it. To have a better performance I use loadonce: false as an option and it should be in this way, unfortunately It seems to be not supported by jqGrid because I cannot find any sign of that throughout my search.
$(document).ready(function () {
$("#jqGrid").jqGrid(
{
url: "/Student/GetStudents",
mtype: "GET",
datatype: "json",
contentType: "application/json; charset-utf-8",
jsonReader: {
root: "rows",
id: "StudentId",
repeatitems: false
},
colNames: ['StudentId', 'FirstName', 'LastName'],
colModel: [
{ label: 'StudentId', name: 'Id', key: true, width: 75 },
{ label: 'FirstName', name: 'FirstName', width: 150 },
{ label: 'LastName', name: 'LastName', width: 150 },
],
viewrecords: true,
loadonce: false,
width: '100%',
height: 'auto',
rowNum: 20,
rowList: [20, 30, 50],
sortable: true,
sortname: 'Id',
pager: "#jqGridPager",
autoencode: true,
scroll: false,
pgbuttons: true,
autowidth: true,
shrinkToFit: false,
forceFit: false,
gridview: false,
height: '100%',
scrollrows: true,
page: 1,
//pagerpos: 'center',
toppager: true,
recordpos: 'right',
multiselect: true,
multiboxonly: true,
direction: 'rtl',
ignoreCase: true,
caption: "",
rownumbers: true
});
$('#jqGrid').jqGrid('navGrid', '#jqGridPager', {
search: true,
searchtext: "Search",
edit: false,
add: false,
del: false,
excel: true,
refresh: false,
}, {}, {}, {}, {
closeOnEscape: true,
closeAfterSearch: true,
ignoreCase: true,
multipleSearch: false,
multipleGroup: false,
showQuery: false,
sopt: ['cn', 'eq', 'ne'],
defaultSearch: 'cn'
})
$('#jqGrid').jqGrid('navButtonAdd', '#jqGridPager', {
caption: "Export to Excel",
//buttonicon: "ui-icon-disk",
buttonicon: "ui-icon-folder-open",
onClickButton: function () {
exportToExcel();
},
});
});
function exportToExcel(data, e) {
exportExcelFile(data);
}
function exportExcelFile() {
debugger;
var data = $('#jqGrid')[0].addLocalData(true);
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
frame1.document.open("txt/html", "replace");
frame1.document.write(setTableOfData(data));
frame1.document.close();
frame1.focus();
sa = frame1.document.execCommand("SaveAs", true, "text.xls");
} else
$('#jqGrid').jqGrid('exportToExcel', { fileName: "exportedExcel.xls", navigator: true });
}
function setTableOfData(data) {
var htmlString = '<table>';
var header = '<tr><td>StudentId</td><td>FirstName</td><td>LastName</td></tr>';
htmlString += header;
for (var i = 0; i < data.length; i++) {
var tag = '<tr><td>' + data[i].Id + '</td><td>' + data[i].FirstName + '</td><td>' + data[i].LastName + '</td></tr>';
htmlString += tag;
}
htmlString += '</table>';
return htmlString;
}
Finally, I forced to post all the filtering and other settings of the grid to the server and return a link to the client. Then with the given link I became able to download the excel file.
Info: you can not download a file with post(ajax) request.
I am trying to load external URL into modal AlloyUI dialog in Liferay Portal. If I open dialog at the first time the contents are showing but at the second time the contents are not showing. If refresh the page its showing.
This is my function:
Liferay.provide(
window,
'openModal',
function(title, url) {
var A = AUI();
var width = 800;
var modal = Liferay.Util.Window.getWindow({
dialog: {
centered: true,
constrain2view: true,
modal: true,
resizable: false,
height: 650,
width: width,
//destroyOnClose: true,
destroyOnHide: true,
toolbars: {
footer: [
{
label: 'Close',
cssClass: 'btn-link pull-right',
on: {
click: function() {
modal.hide();
}
}
}
]
}
},
closeOnOutsideClick: true,
id:'test-dialog',
title: title
}).plug(A.Plugin.IO, {
uri: url,
on: {
success: function(event) {
console.log("success");
},
complete: function(event) {
console.log("complete");
},
start: function(event) {
console.log("start");
},
failure: function(event) {
console.log("failure");
}
}
}).render();
}
);
The function is used in this link:
Open dialog
When I open dialog at the second time I get this error:
Cannot read property 'Window' of undefined
Resolved by using A.Plugin.DialogIframe module insted of A.Plugin.IO
I am using jQgrid - and it is great!
I have one problem.
(Oleg are you still around?)
In the search/filter form (were you can choose the coulmn you want to filter and the operation you want do to), the only things that comes up is the "contain" operator.
My colModel looks like this:
var columnModel = [{ name: 'ID', index: 'ID', sortable: true, searchoptions: { sopt: ['eq', 'cn','bw']}},
{ name: 'FirstName', index: 'FirstName', sortable: true},
{ name: 'LastName', index: 'LastName', sortable: true }
];
But it only gives me the contains operator.
The full grid is like this:
myGrid.jqGrid({
url: './ViewNQueryData.asmx/ViewNQueryData',
datatype: 'json',
mtype: 'POST',
postData: {userID:currentUserId, sphereID:currentSphereId},
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData)
{
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colModel: columnModel,
colNames: columnNames,
rowNum: 10,
rowList: [10, 20, 300],
sortable: true,
pager: "#ViewNQueryPager",
viewrecords: true,
gridview: true,
height: 250,
shrinkToFit: true, //If using frozen coulmns change to false.
gridComplete: function ()
{
$('#totalRecordsFound').html(myGrid.jqGrid('getGridParam', 'records') + " Customers");
},
loadError: function ()
{
alert("Error fetching data");
}
}).jqGrid('navGrid', '#ViewNQueryPager',
{ edit: false, add: false, del: false, search: true, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } },
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
Can any one help me with this???
Fixed!
I had a snippet of code on my page that was doing this....