I am building a caroufredsel for a responsive website (with only 3 states: 960px, 720px and 320px).
It's working great when you load the page in one of these states. It shows the correct number of items (3, 2 and 1 respectively).
But, when you resize the window, the number of visible items doesn't change. I was thinking about a $(window).resize() call, but I can't find how you can adjust the Caroufredsel settings after it is initialized.
$('#caroufredsel').carouFredSel({
infinite: true,
auto: false,
pagination: false,
prev: {
button: '#prev',
key: 'left'
},
swipe: {
onTouch: true,
onMouse: true
},
next: {
button: '#next',
key: 'right'
},
items: {
visible: 'variable'
}
});
What you need to do in your resize-callback is the following:
var $carouselContainer = $('#caroufredsel');
var resizeCallback = function() {
var showThatManyItems = 3; // determine the number of items to be shown depending on viewport size
$carouselContainer.trigger('configuration', [
'items', {
visible : showThatManyItems
}
], true);
}
If I'm not mistaken, don't you need "responsive:true," as one of the parameters?
Related
Based on this comment from mitchellsimoens at sencha forums i tried to implement an infinite scrolling combobox in extjs 6.5.2 modern.
The thing is that setting the combobox store to a virtual store produces this error: Uncaught TypeError: a.setExtraKeys is not a function.
I also set the floatedPicker to:
{
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
disabled: true
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null
}
Is there a way to implement an infinite scrolling combobox in extjs 6 modern without changing the default picker to a grid?
OK this actually works:
floatedPicker: {
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
disabled: true
},
plugins: {
listpaging: {
autoPaging: true,
loadMoreText: 'More records..',
noMoreRecordsText: 'No more records.'
}
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null,
variableHeights: true
}
It's a bit ugly when loading but it works.
Also i used an Ext.data.store. Virtual store don't work with comboboxes.
Currently, It scrolls 3 items on both next-previous button click and on mouse scroll.
My setting is as below:
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
nav: true,
margin: 10,
slideBy: 'page',
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
960: {
items: 5
},
1200: {
items: 3
}
}
});
owl.on('mousewheel', '.owl-stage', function(e) {
if (e.deltaY < 0) {
owl.trigger('next.owl.carousel');
} else {
owl.trigger('prev.owl.carousel');
}
e.preventDefault();
});
});
Basically, it scrolls 3 items because of my setting slideBy: 'page'. But, I want single item scroll on mousescroll.
Only a hint will be fine.
#Dharmesh
You can use owl.trigger('to.owl.carousel', [0, 500]); to replace owl.trigger('next.owl.carousel'); owl.trigger('prev.owl.carousel');
Custom owl.carousel.js. find Navigation.prototype.getPosition Navigation.prototype.next Navigation.prototype.prev method and custom the
params;
This is my custom demo page:
https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-mousewheel.html
I use owl carousel 2 for sliders.
Responsive works fine on window resize, but I need to make carousel resize while changing block-container width. (Container width changes when opening sidebar.)
This is how it looks when sidebar is closed
And this when sidebar is opened
I've tried using responsiveBaseElement:
// Initialize news slider
var $owl = $("#news-list").owlCarousel({
dots: false,
nav: true,
navText: false,
loop: true,
responsiveBaseElement: ".box-to-check",
responsive : {
0: {
items: 1
},
480: {
items: 2
},
768: {
items: 3
}
}
});
Also I've tried using refresh.owl.carousel:
$owl.trigger('refresh.owl.carousel');
Then I've found out that there is a bug in refreshing owl carousel and I've tried to destroy it completely and build once more:
$owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$owl.find('.owl-stage-outer').children().unwrap();
$owl.owlCarousel({
dots: false,
nav: true,
navText: false,
loop: true,
responsiveBaseElement: ".box-to-check",
responsive : {
0: {
items: 1
},
480: {
items: 2
},
768: {
items: 3
}
}
});
And partially it worked. But it adjusts to a new width when I close sidebar.
(I mean I have to open sidebar (BONUS/ACCENT buttons on top left) and then to close it reinit slider.)
You can see live example here - ttomoday(dot)github(dot)io/v/upc/
function ShowMsg(mensaje) {
if (!msgWnd) {
var okBtn = Ext.create('Ext.button.Button', {
text : 'Aceptar',
id : 'okBtn',
icon : 'images/ok.png',
height : 25,
scope : this,
handler : function() {
ShowMsg('');
}
});
msgWnd = new Ext.Window({
layout:'fit',
id: 'msgWindow',
title: 'DigiDoc',
width: 300,
height: 180,
closable: false,
resizable: true,
autoScroll: true,
plain: true,
border: false,
items: [
{
html: '<div>' + mensaje + '</div>',
id: 'myMsgText',
autoHeight: false,
autoWidth: false
},
okBtn
]
});
}
}
This should show a Message and a ACCEPT button, but the MESSAGE size is fitting ALL the space of the window, leaving the ACCEPT button out of visual. Shouldn't ExtJS make this element size the same of the Window's one minus the other elements?
Thanks!
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html:
Ext.layout.container.Fit
A very simple layout that simply fills the
container with a single panel. This is usually the best default layout
choice when you have no other specific layout requirements.
What are you trying to achieve? If it's simply to show a message box to alert the user of something, try Ext.Msg instead. Here are several examples of usage. In any other case, you might want to be using the vbox layout instead.
I have the following carousel code [fiddle] that returns a different number of items to display based on screen size.
$(function() {
var mini = 1000;
var big = 1280;
if (window.screen.availWidth < mini) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
}
});
I want to add a .resize function to it so the number of items will also change on window resize. I followed this example but couldn't get it to work. Would anyone please tell me how to add the resize function to my example?
My failed attempt (demo):
function screen_resize() {
var h = parseInt(window.innerHeight);
var w = parseInt(window.innerWidth);
if (w <= 800) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
}
}
// if window resize call responsive function
$(window).resize(function(e) {
screen_resize();
});
// call responsive function on default :)
$(document).ready(function(e) {
screen_resize();
});
You can write it like this:
window.onresize = screen_resize;
Edit: Your carousel looks good if you call screen_resize once, but breaks if you call it more than once. screen_resize is called in your code though and works as programmed.