JSSOR - $Loop option doesn't seem to work - jssor

I am trying to use JSSOR slider to build a slider. I want the slides to play through one time, and then stop.
Reading the API documentation, I should be able to do this:
var options = {
$AutoPlay: true,
$Loop: 0,
$DragOrientation: 3
};
var jssor_slider = new $JssorSlider$("slider", options);
This doesn't work... it plays through, then scrolls back to the beginning and starts again. I've tried $Loop: false, $Loop: 1, $Loop: 2, and have no change in how it plays through... the idea is that when it stops, I would like to then have a handler for the $EVT_SLIDESHOW_END event that will load a new set of images and start the slideshow again, however, this event is never triggering because the slideshow is not stopping. Any help with this would be appreciated!

the $Loop option controls the behavior of carousel. If value of $Loop is 0, when drag or click next button, it won't go forward.
for your approach, please capture $JssorSlider$.$EVT_STATE_CHANGE event.
//Each slide will go through progress of progressBegin, idleBegin, idleEnd, progressEnd. Capture playing state change event then
jssor_slider.$On($JssorSlider$.$EVT_STATE_CHANGE, function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd)
{
if(slideIndex == [last slide] && progress == progressEnd)
{
//do something when last slide plays over
}
});

Related

Fire click event on button by code?

Simple enough just can't get it to work and see no info within the docs. How to fire click event on button by code?
I have tried:
btn.fireEvent('click');
The button already has an event listener, I want it to run the code within the listener when the app is in a certain state.
you have to add EventListner to check whether click event is fired or not,see below code ,it fires without clicking the button. you can replace commented if condition with your condition on which you want to fire btn's click event
var win= Titanium.UI.createWindow({ backgroundColor:'white'});
win.open();
var btn= Titanium.UI.createButton({ title :' fire by code'});
btn.addEventListener('click',function(){
alert('Click event fired ');
});
win.add(btn);
//if(appState)
btn.fireEvent('click');
I would probably approach this a different way. You want an application to do the same thing if the button is clicked or if the app is already in a certain state.
function doThisThing(){
alert('This thing happened');
}
var win = Titanium.UI.createWindow({ backgroundColor:'white'});
win.open();
var btn = Titanium.UI.createButton({ title :' fire by code'});
btn.addEventListener('click',function(){
doThisThing();
});
// could also be defined as btn.addEventListener('click', doThisThing());
win.add(btn);
//if(appState)
doThisThing();
+1 to adnan for providing the code example to change around.

target a slide with jquery cycle 2 plugin with callback

I'm using the following callback event with the jquery cycle 2 plugin, what it does at the moment is fade in .watch1 after the slideshow has completed transitioning to the next slide. But how do I target a specific slide, so the fadeIn only occurs after the slide 1 has completed transitioning?
$( '.cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
$( '.watch1' ).fadeIn(2000);
});
Thanks!
You need to bind a variable for your slide like this:
$('.cycle-slideshow').on('cycle-after',function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
var active = $(incomingSlideEl)
if (active.is('#slide1')) {
$( '.watch1' ).fadeIn(2000);
}
});
This means that after slide 1 is done animating in, your .watch1 element will fade in. I believe this is what you need.

With HTML5 SoundCloud player widget how do you programmatically skip to a different track without causing second unwanted track from playing?

I am using the HTML5 Soundcloud widget API to skip to another song on the sound finish event.
http://jsbin.com/axuzoj/4/edit
Unfortunately there appears to be a race condition bug in the finish event. The Soundcloud player ends up playing two songs simultaneously: the next song in the list and the song that was skipped to in the finish event handler.
var widget = null;
$(function() {
var iframe = document.querySelector('#soundcloud_player iframe');
widget = SC.Widget(iframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.bind(SC.Widget.Events.FINISH, function() {
widget.skip(3);
});
});
});
Is this a known bug?
Is there a better way to skip to a different track after a sound finishes?
Is there a way to turn off continuous play?
Adding a short wait before skipping in the finish event handler, gets around the problem. But doesn't seem like a good method.
window.setTimeout(function() { widget.skip(3); }, 300);
Another work around is to skip to a song just before the previous song finishes, using PLAY_PROGRESS event instead of on FINISH event.
widget.bind(SC.Widget.Events.READY, function() {
widget.bind(SC.Widget.Events.PLAY_PROGRESS, function(obj) {
if (obj.relativePosition > 0.999) {
widget.pause();
widget.skip(3);
}
});
});
Yes, there was a race-condition bug which is fixed now.

Mobile Safari: Disable scrolling pages "out of screen"

I want to block scrolling page "out of the iPhone screen" (when gray Safari's background behind the page border is visible). To do this, I'm cancelling touchmove event:
// Disables scrolling the page out of the screen.
function DisableTouchScrolling()
{
document.addEventListener("touchmove", function TouchHandler(e) { e.preventDefault(); }, true);
}
Unfortunately, this also disables mousemove event: when I tap on a button then move my finger out of it, then release the screen, the button's onclick event is triggered anyway.
I've tried mapping touch events on mouse events, as desribed here: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/, but to no avail (the same behavior).
Any ideas?
From what I understand of your question, you've attempted to combine the code you've presented above with the code snippet provided by Ross Boucher on Posterous. Attempting to combine these two snippets back-to-back won't work, because in disabling touchmove, you've also disabled the shim that allows mousemove to work via his sample.
This question and its answers sketch out a workable solution to your problem. You should try these two snippets to see if they resolve your issue:
This snippet, which disables the old scrolling behavior:
elementYouWantToScroll.ontouchmove = function(e) {
e.stopPropagation();
};
Or this one, from the same:
document.ontouchmove = function(e) {
var target = e.currentTarget;
while(target) {
if(checkIfElementShouldScroll(target))
return;
target = target.parentNode;
}
e.preventDefault();
};
Then, drop in the code on Posterous:
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
And that should do it for you. If it doesn't, something else isn't working with Mobile Safari.
Unfortunately I haven't had the time to check out to above yet but was working on an identical problem and found that the nesting of elements in the DOM and which relation you apply it to affects the handler a lot (guess the above solves that, too - 'var target = e.currentTarget').
I used a slightly different approach (I'd love feedback on) by basically using a class "locked" that I assign to every element which (including all its children) i don't want the site to scroll when someone touchmoves on it.
E.g. in HTML:
<header class="locked">...</header>
<div id="content">...</div>
<footer class="locked"></div>
Then I have an event-listener running on that class (excuse my lazy jquery-selector):
$('.ubq_locked').on('touchmove', function(e) {
e.preventDefault();
});
This works pretty well for me on iOs and Android and at least gives me the control to not attach the listener to an element which I know causes problems. You do need to watch your z-index values by the way.
Plus I only attach the listener if it is a touch-device, e.g. like this:
function has_touch() {
var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
return 'ontouchstart' in window && !isTouchPad;
}
This way non-touch devices will not be affected.
If you don't want to spam your HTML you could of course just write the selectors into an array and run through those ontouchmove, but I would expect that to be more costly in terms of performance (my knowledge there is limited though). Hope this can help.

How do you animate FB.Canvas.scrollTo?

I've created an app that is a set size (around 2,000 px tall) and have a menu that calls FB.Canvas.scrollTo in order to help the user navigate the long page.
Is there any way to add a smooth scrolling effect? Facebook does not offer any solution on its developer blog.
Using #Jonny's method, you can do this a little more simply with
function scrollTo(y){
FB.Canvas.getPageInfo(function(pageInfo){
$({y: pageInfo.scrollTop}).animate(
{y: y},
{duration: 1000, step: function(offset){
FB.Canvas.scrollTo(0, offset);
}
});
});
}
Just had the same problem today - I came up with a little bit of javascript which makes use of jQuery's animate method which provides some easing - the scroll is still a touch jerky (I'm guessing that's because of the FB.Canvas.scrollTo proxy). Anyway, here's the snippet:
function scrollToTop() {
// We must call getPageInfo() async otherwise we will get stale data.
FB.Canvas.getPageInfo(function (pageInfo) {
// The scroll position of your app's iFrame.
var iFrameScrollY = pageInfo.scrollTop;
// The y position of the div you want to scroll up to.
var targetDivY = $('#targetDiv').position().top;
// Only scroll if the user has scrolled the window beneath the target y position.
if (iFrameScrollY > targetDivY) {
var animOptions = {
// This function will be invoked each 'tick' of the animation.
step: function () {
// As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to
// perform the scroll for us.
FB.Canvas.scrollTo(0, this.y);
},
// How long you want the animation to last in ms.
duration: 200
};
// Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current
// scroll position) to the y position of your target div.
$({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions);
}
});
}
I just used Francis' technique and implemented a jQuery version
$('html,body').animate(
{scrollTop: $(".scroll_to_me").offset().top},
{duration: 1000, step: function(top_offset){
FB.Canvas.scrollTo(0, top_offset + 30);
}
});
You need to replace the .scroll_to_me with the selector you want to scroll to. Also I added in the + 30 to the offset as the iframe doesn't start at the top of the page, you may want to tweak this.
One way of doing it is by getting the current Y position, then getting the to Y position. Run a for loop with a setTimeout that will bring the user to the final Y position.