Trying to mock the "swipe between page" feature of iPads using jQuery UI.
I have these two full-screen divs:
<div id="introLayer" class="layer"></div>
<div id="gameLayer" class="layer" style="display:none;"></div>
At some point, the introLayer must hide sliding to the left, being replaced by the gameLayer, following its slide motion.
I tried the following:
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').show(
'slide',
{ direction: "left" },
1000);
It results in the introLayer sliding out nicely, but the gameLayer only appears afterwards and without any effect.
Hide the gameLayer first by calling $('#gameLayer').hide() instead of putting it in inline style: style="display:none;"
$('#gameLayer').hide();
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').show(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').hide();
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000 , function(){ $('#gameLayer').show(
'slide',
{ direction: "left" },
1000);});
try like this or try below
$('#gameLayer').hide();
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').show(
'slide',
{ direction: "right" },
1000);
Related
I have a revolution slider carousel with a bullets navigation, that's the js configuration:
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"libs/revolutionSlider/js/",
dottedOverlay:"none",
sliderLayout: "auto",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"",
enable:true,
hide_onmobile:false,
hide_under:300,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
},
touch:{
touchenabled:"off",
swipe_treshold : 75,
swipe_min_touches : 1,
drag_block_vertical:true,
swipe_direction:"horizontal"
}
,
bullets: {
enable: true,
container:"slider",
hide_onmobile: false,
style: "ares",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "bottom",
h_offset: 20,
v_offset: 20,
space: 0,
rtl:false,
tmp: ''
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 3,
infinity: "on",
space: 0,
stretch: "off"
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,320],
gridwidth:[1240,1024,778,320],
gridheight:[600,600,500,300],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"on",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
The bullets appears over my carousel but what i can see is a strange behaviour. During navigation beetween slides, the .selected class is applied correctly to the right index only at the beginning of the sliding process. At the end , when the slide is stopped and loaded, the .selected class is automatic cleared from the correct index and applied to the index 0. I'll try to be more clear in my explaination:
slider with 4 element -> i click on the 3° bullet (the index 2)-> my image begin to slide in the view e my 3° bullet is red (red is the color that i have assigned to the .selected class)-> when the image slide animation is complete my 3° bullet return gray and my 1° bullet became red.
I have tried to intercept the event that cause this automatic change, but i have tried to log every events i have found in docs, and nothing is launched at the same time of my strange behaviour. It's a bug? How i can solve it?
I am using the following side slide menu for my project :-
http://www.mywork.com.au/blog/demos/facebook-sidebar-menu/
I've changed the left slide-in to right slide-in. It works very well for me on the desktop but in ipad and phone the page wrapper has a lagging-behind/scrolling effect. It seems like that the page wrapper scrolls from right to the left under the side menu container after the menu has appeared.
I've tried using "fast", "slow" and other properties of animate but don't seem to figure out what exactly needs to be done.
$(".m-menu").toggle(function() {
$('#mobile-menu-bg').animate(
{ right: '0', speed: '1500' },
1500
//{ duration: 500, queue: false },
);
$('#page-wrapper').animate(
{ 'margin-left': '-80%', speed: '1000' },
1000
//{ duration: 500, queue: false }
);
}, function() {
$('#mobile-menu-bg').animate(
{ right: '-80%' }
//{ duration: 500, queue: false }
);
$('#page-wrapper').animate(
{ 'margin-left': '0' }
//{ duration: 500, queue: false }
);
}
);
Please help
I have set up a caroufredsel, and have items inside of it. But when I click on my next and previous buttons, the first time it appears to shift 1 item, every click after that it shifts the entire width of the content and back to the beginning.
I have set my scroll items to 3. Does it have something to do with the width of the container?
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : 'auto',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
It also seems that on slide, the height of the carousel changes for some reason. maybe this is related
I would also refactor your selector to be simpler as you are using IDs and there should only be one per page anyway:
Instead of:
jQuery('#tab-1').find('#carousel').carouFredSel();
Use this:
jQuery('#carousel').carouFredSel();
Switching the caroufredsel width to 100% did the trick.
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : '100%',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).
And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I need immediately when mouse over, out at next,prev button and set those configuration. I can't find issue.
My code:
$(".sponsors-slider-slide").carouFredSel({
scroll: {
items: 1,
duration: 2000,
queue: true,
timeoutDuration: 0,
easing: "linear",
pauseOnHover: "immediate-resume",
fx: "scroll"
},
responsive: false,
circular: true,
infinite: false,
swipe: {
onTouch: true,
onMouse: true
},
width: "variable",
height: "variable",
items: {
visible: 4,
minimum: 0,
width: "variable",
height: "variable"
},
align: false,
debug: false
});
and example of next button:
$("#sponsors-slider-next").on("mouseover mouseout", function(e){
if(e.type == "mouseover")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 1000, true]);
}
if(e.type == "mouseout")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 2500, true]);
}
return false;
});
The question is, how to set scroll.duration when mouseover immediately on next button, not when carousel is finish slide ?
Thanks in advice.
It has to finish the transition before it can change configurations. To finish the transition immediately, trigger the finish event.
$(".sponsors-slider-slide").trigger('finish');
Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.
BTW, it would be more efficient to chain multiple methods rather than repeat selectors:
$(".sponsors-slider-slide")
.trigger("finish")
.trigger("configuration", {
direction: "left",
scroll: {
duration: 1000
},
reInit: true //not sure that you need this
});
I'm having trouble with a carousel.
I want to add a pause or a stop event to a carousel.
I already have built a slider, on the left side you have a navigation page for the sliders.
The slider starts automatically, I want it to stop if I choose a slide manually
Here's my code:
Thanks for any hints.
jQuery(this).parent().find('.navigation>ul>li').eq(0).addClass('active').end().each(function(){
jQuery(this).on('click', function(){
jQuery(this).parents('.csc-slider').find('.pager>a').eq(jQuery(this).index()).trigger('click');
return false;
});
});
var swidth = jQuery(this).width();
jQuery(this).find('img')
.width(swidth +'px !important')
.eq(0)
.imagesLoaded()
.done(function($images){
jQuery($images).parents('.slideshow')
.find('.item')
.css({display:'block', float:'left'})
.end()
.carouFredSel({
width: "100%",
height: "variable",
items: {
visible: 1,
height: "auto"
},
scroll: {
fx : "crossfade",
duration : 5000,
onAfter:function(data) {
var p = jQuery(this).parents('.csc-slider');
var i = p.find('.pager>a.selected').index();
p.find('li.active').removeClass('active');
p.find('.navigation>ul>li').eq(i).addClass('active');
}},
auto: {
pauseOnHover: "resume",
pauseOnEvent: true,
timeoutDuration: 5000,
},
prev: {
button: jQuery($images).parents('.csc-slider').find('.prev'),
},
next: {
button: jQuery($images).parents('.csc-slider').find('.next'),
},
pagination: jQuery($images).parents('.csc-slider').find('.pager'),
});
You can add a click event to navigation buttons to stop the auto scrolling:
$(".slider-pages .prev, .slider-pages .next, .slider-nav a").click(function(){
carouFredselObject.trigger("configuration", {auto: false});
});