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.
Related
How do I get a nested horizontal slider to work with click controls by show/hiding them.
I'm using Swiper which I have almost working except if you click / transition into the nested slider, you can't go back from that first slide without first transition one slide. If you click all the way to the end and back, it works perfectly. There are many callbacks in the Swiper api available.
My progress so far: Nested slider Fiddle
$(document).ready(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
console.log('nested');
$('.h-prev, .h-next').hide();
} else {
console.log('notnested');
$('.h-prev, .h-next').show();
}
},
onReachBeginning: function() {},
onReachEnd: function() {}
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'horizontal',
spaceBetween: 0,
nextButton: '.v-next',
prevButton: '.v-prev',
nested: true,
onReachBeginning: function() {
$('.h-prev').show();
},
onReachEnd: function() {
$('.h-next').show();
},
onSlideChangeStart: function(slides) {
if (slides.activeIndex === 1) {
console.log('slide 2');
}
}
});
});
EDIT:
Cleaned up fiddle using #TheOnlyError 's answer here and here:
$(document).ready(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
$('.h-prev, .h-next').hide();
} else {
$('.h-prev, .h-next').show();
}
},
onSlideNextStart: function() {
$('.h-prev').show();
}
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'horizontal',
spaceBetween: 0,
nextButton: '.v-next',
prevButton: '.v-prev',
nested: true,
onReachBeginning: function() {
$('.h-prev').show();
},
onReachEnd: function() {
$('.h-next').show();
},
});
});
Edit2:
Just encountered that if the first slide is nested, this doesn't work. To solve this prob you will also need to add:
onInit: function(){
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-h-inner')) {
$('.prev, .next').hide();
}
},
to the first slider: Fiddle
The problem is that Swiper won't detect the transition between seperate Swiper objects. The solution would be checking when one has swiped to the next slide from the first horizontal one, to show the previous button.
So add this function to your first Swiper object:
onSlideNextStart: function(swiper) {
$('.h-prev').show();
}
Check the fiddle.
I would appreciate it if someone could combine the two scripts found below. I would like to be able to combine the smooth collapsing functionality of the first script with the single-tab-expanding-at-a-time functionality from the second script. I couldn't add the the code completely so please refer to the link if needed.
I would really appreciate this!
Script 1: (complete -http://jsfiddle.net/HcJJZ/3/)
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('.mytabs').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
selected: -1
});
Script 2: (complete - http://jsfiddle.net/fb0z3ezd/4/)
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
Try this:
Here is JSFIDDLE: enter link description here
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "fade",
pauseOnHover: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "fade",
slideshow: false,
pauseOnHover: true,
useCSS: false,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
});
});
Hope it helps
I'm running some tests with a basic slider (RoyalSlider) whereby I'm prepending/appending some of the slider content on load using the sliders event functions.
I've an issue with IE8 only, the functions simply aren't working! I've read some issues with IE8 and appendTo()/prependTo(), however, the conditions where these occur aren't similar to mine.
jQuery
(function($) {
$(document).ready(function() {
var homeSlider = $('#js-slider');
if (homeSlider.length) {
var slider = homeSlider.royalSlider({
imageScaleMode: 'fill',
controlNavigation: 'tabs',
thumbs: {
fitInViewport: false,
autoCenter: false
},
arrowsNavAutoHide: false,
slidesSpacing: 0,
loop: true,
transitionSpeed: 250,
navigateByClick: true,
sliderTouch: true,
keyboardNavEnabled: true,
addActiveClass: true,
autoPlay: {
enabled: true,
pauseOnHover: false,
delay: 6000
},
block: {
moveOffset: 200,
speed: 600,
moveEffect: 'bottom',
delay: 600
}
}).data("royalSlider");
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsNav').prependTo( $('#js-slider') );
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
});
}
});
})( jQuery );
HTML
<div class="container container--home">
<div class="container slider-slideTitleWrapper" id="js-homeSliderElements"></div>
<div class="royalSlider slider slider--home rsMinW" id="js-slider">
...
</div>
</div>
try to use native JS methods
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
var parent = homeSlider.find('.rsNav');
parent.insertBefore($('#js-slider'), parent.firstChild);
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsABlock').appendChild($('#js-homeSliderElements'));
});
Changed things around slightly and found a working method:
var ready = false;
var readyHandler = function() {
homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
};
slider.ev.on('rsAfterSlideChange', readyHandler);
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
if (!ready) {
readyHandler();
ready = true;
}
});
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?
I've read many posts about this but still settimeout doesn't work. I suspect it's because of the "this" in the code, and probably because of local/global variable scope. How can I set correctly settimeout to close after 3 seconds the ext.window?, thanks, pls help
action = new Ext.Action({
handler: function(){
if (this.pressed){
if (!this.panelWin){
this.panelWin = new Ext.Window({
border: false,
resizable: false,
draggable: false,
closable: false,
layout: 'fit',
autoWidth: true,
autoHeight: true,
items: [newPanel],
listeners:{
show: function() {
setTimeout("this.panelWin.destroy()", 3000);
}
}
});
}
this.panelWin.show();
}
else
{
this.panelWin.hide();
}
}
});
Try this:
this.panelWin = new Ext.Window({
border: false,
resizable: false,
draggable: false,
closable: false,
layout: 'fit',
autoWidth: true,
autoHeight: true,
items: [newPanel],
listeners:{
show: function() {
var self = this;
setTimeout(function() {
self.destroy()
},3000);
},
scope: this
}
});
with setTimeout and this you need something like this:
var self = this;
setTimeout(function () { self.panelWin.destroy(); }, 3000);
Other than setTimeout(), you can use Ext.TaskMgr or Ext.util.TaskRunner to execute task after specific inteval of time. Use Start and Stop methods according to your need.
Ext.util.TaskRunner
Ext.TaskMgr