I hope you can help me.
I am using Debut theme and this is my product and I would like to be able to put a slideshow on my product, to change images and variant if possible when I press the arrows (which I painted by my self for the example).
this.settings = {
accessibility: true,
arrows: true,
dots: true,
fade: true,
draggable: true,
touchThreshold: 20,
autoplay: this.autorotate,
autoplaySpeed: autoplaySpeed,
// eslint-disable-next-line shopify/jquery-dollar-sign-reference
appendDots: this.$arrows,
customPaging: function(slick, index) {
return (
'<a href="' +
selectors.wrapper +
sectionId +
'" aria-label="' +
loadSlideA11yString.replace('[slide_number]', index + 1) +
'" data-slide-number="' +
index +
'"></a>'
);
}
};
As I was looking for what I needed was to change the value of the arrows var(which was false) to true in my theme.js file, as you can see I already did it but I still don't see results.
Related
Even following different examples I can't apply the solution. Here are some sites I visited:
https://react-slick.neostack.com/docs/example/custom-paging
https://codesandbox.io/s/react-slick-forked-rxj5vp?file=/index.js:472-572
https://jsfiddle.net/tjwo23L8/
For me it is always presented in the frontend a wrong value that is not the total value of slides. Here is the code I am applying:
const heroSettings = { dots: true, infinite: true,fade: true,lazyLoad: true, speed: 800, autoplay: true, autoplaySpeed: 5000,slidesToShow: 1,slidesToScroll: 1, customPaging: i => (<button> {i + '/' + (i + currentSLide)}</button>),};
I get a value on the frontend similar to: 1/30 or 2/7. Since I have 7 slides in total in the loop.
I have a dataTable and it has two rows in table header. One row is the column names while the other one is the input fields
I dont know but by default the sorting is being done on the input fields (2nd row) rather that the label fields (1st row)
My code for the datatable is
$('#result-table').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
I am cloning the header row and adding the input field as
$("#result-table thead tr").clone(true).appendTo("#result-table thead");
// add a text input filter to each column of the new row
$("#result-table thead tr:eq(1) th").each(function (i) {
var title = $(this).text();
$(this).html("<input type='text' class='form-control' placeholder='Search '" + title + "' />");
$("input", this).on( "keyup change", function () {
if ($("#result-table").DataTable().column(i).search() !== this.value) {
$("#result-table").DataTable().column(i).search(this.value).draw();
}
});
});
What's wrong?
Here are 2 things you need to make sure you are doing:
Make sure the clone() code and the code to create input fields is placed inside the $(document).ready(function() code - but it must be placed before the $('#result-table').DataTable({...}) code.
Make sure your DataTables initialization includes this option:
orderCellsTop: true,
You may already be doing (1) - but (2) is missing from the code in the question.
I am trying to use both Owl Carousel and Bootstrap to create tabs that have a continuous carousel for the tab navigation. I also want these tabs to cycle automatically.
Here is a visual reference:
And here is a fiddle:
https://jsfiddle.net/j28md74n/
The main JS that I'm using (i've commented out the areas where i'm stuck):
var owlTab = $(".tab-carousel.owl-carousel");
owlTab.owlCarousel({
navigation: false,
dots:true,
navigationText: [
"<i class='fa fa-angle-left'></i>",
"<i class='fa fa-angle-right'></i>"
],
items : 4,
lazyLoad : false,
autoPlay : false,
draggable: true,
stopOnHover : true,
paginationSpeed : 1000,
transitionStyle:"fade",
responsive: true,
loop: true,
rewindNav: true,
});
$( document ).ready(function() {
if ($('.tab-carousel.owl-carousel').length){
$('.tab-carousel.owl-carousel .owl-item').attr("role", "presentation");
$('.tab-carousel.owl-carousel .owl-item:first-child').addClass('active');
};
$( ".tab-carousel.owl-carousel .owl-item" ).click(function() {
$( ".tab-carousel.owl-carousel .owl-item" ).removeClass('active');
$(this).addClass("active");
});
});
var tabCarousel = setInterval(function() {
var tabs = $('.tab-carousel.owl-carousel .owl-item'),
active = tabs.filter('.active'),
next = active.next('.owl-item'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
var indexNum = active.index();
console.log(indexNum);
if (indexNum > 2){
$('.owl-pagination .owl-page:eq(0)').removeClass("active");
$('.owl-pagination .owl-page:eq(1)').addClass("active");
// Here's where I want to change the owl carousel 'page'...to page '2'
};
if (indexNum <= 2){
$('.owl-pagination .owl-page:eq(0)').addClass("active");
$('.owl-pagination .owl-page:eq(1)').removeClass("active");
// Here's where I want to change the owl carousel 'page' ...to page '1'
};
toClick.trigger('click');
}, 6000);
I'm able to accomplish most of what I want, however, when the '.active' '.owl-item' is the 5th item or above (i.e. on the another owl carousel 'page') that the owl carousel 'page' updates as well. There are 4 items per owl carousel 'page.' Currently, the way I have it, if the '.owl-item' cycles through past the 5th item, the owl carousel page stays on the first one.
Thanks in advance for any insights!
Not sure, but i think the problem is the way you're determining the indexNum..
I had to reconfig how to find current index, but this could work.
working example.
function animationLoop() {
// Increment Active IDX each Loop
activeIdx++;
// Reset Active IDX if > tabs.length
if ( isEnd( activeIdx, tabs ) ) setIdx( 0 );
console.log("Current IDX", activeIdx);
// Click on the current active index
$(carouselItems[ activeIdx ]).find('a').trigger('click');
// console.log("Clicking This", carouselItems[ activeIdx ].innerText);
// Reset Loop
setTimeout(animationLoop, 3000);
}
I want to have client side paging.
But for some reason, I only seem to get back the first page? Even though I know I have two pages worth of data (IE... I step through my code, and I definitely have two...)... What is more baffling is that my links to navigate through the pages never seem to be correct... For instance I would expect the following screen to say 1 of 2...
Also I would expect the bottom right hand side to say View 1-15 of 21?
My feeling is that I am doing something wrong in my data layer to give this pager it's info.
So It only returns the first page.
public static string JsonifyEnc(IEnumerable<TemplateModel> model, int popId, int page, int rows) {
TemplateModel variable = model.ToArray()[0];
ArrayList al = new ArrayList();
//foreach (PatientACOModel patMod in variable.Template) {
int i = 1;
int rowstart = (page * rows + 1) - rows;
int rowend = page * rows;
//Here is where I create the rows... nothing special here
var griddata = new {
total = variable.Template.Count % rows > 0 ? (variable.Template.Count / rows) + 1 : (variable.Template.Count / rows),
page = page,
records = al.Count,
rows = al.ToArray()
};
When I quick wath the total variable it says two?
This would be the first part of my json string that is returned...
{"total":2,"page":1,"records":15,"rows":
So it's there. Also, this is how I am building up my jqGrid...
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '/Encounters/GetAjaxPagedGridData/', //'Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//
postData: { popId: '#TempData["POPULATIONID"]'},
pager: '#pager',
jsonReader: {repeatitems: false},
loadonce: true,
height: 'auto',
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
If you use loadonce: true on the client side you should change the server code so that it ignores page and rows options and returns all data. You should just sort the data corresponds to sidx and sord parameter (see sortname and sortorder in jqGrid). You don't need to fill total, page and records parts in the response.
If you use loadonce: true jqGrid load the data and save it in internal data and _index parameters. After that jqGrid change datatype option of jqGrid to "local". So all later sorting, filtering (searching) and paging of data will be done locally.
I have a enhancedgrid and used on two pages. When check box (component of data enhanced grid) is checked on page1, the equivalent row(s) on pg 2 are then ticked. My enhancedgrid code is
grid = new dojox.grid.EnhancedGrid({
loadingMessage:"Please wait",
store:newStore,
structure:layoutQL,
autoWidth:false,
autoHeight:true,
columnReordering:false,
rowsPerPage:3,
indirectSelection: true,
//noDataMessage:"No transactions have been processed for posting.",
//selectionMode:'single',
plugins: {
pagination: {
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 6,
/*position of the pagination bar*/
position: "bottom",
indirectSelection: true
},
filter : {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "records"
}
}
I am using EnhancedDataGrid as in dojo framework. Any help will be appreciated.
Try "grid.selection.deselectAll()" when you move from one page to the next.