I'm just finalising a MPU banner which consists of three pages :
page1, page1_1, page1_2
At the end of page1 I have a button, which when clicked goes to page1_1 the event for this is as follows:
tap-area2 > action > GotoAndPlay > pagedeck
Configuration : page1_1
Transition: none
Duration: 1000
Easing: linear
Direction: top
That all works fine. Page1_1 appears and autoplays a short video. At the end of page1_1 I have a timeline event which loads page1_2. The event is as follows:
page1_1 > event7 > GotoPage > pagedeck
Configuration : page1_2
Transition: none
Duration: 1000
Easing: linear
Direction: top
This works as planned. Page1_2 loads and plays a short animation. At the end of the sequence I would like to return to the first frame of page1 so that the animation loops again. I am using the current event (similar to the previous event above) at the end of the timeline:
page1_2 > event8 > GotoPage > pagedeck
Configuration : page1
Transition: none
Duration: 1000
Easing: linear
Direction: top
On previewing the file the sequence does return to page1 but only at the end of the timeline - not frame 1.
Am I doing something wrong? I have tried using labels but it's still not working?
I come from a flash background so thought this would work similar to Scenes?
Any help gratefully received.
Thanks
Your last event will notify the pagedeck to go to page1, but page1 will resume timeline playback from its last state.
Additionally, you will need to notify the Timeline to start playing from the beginning of page1 by doing the following:
Add a Timeline label at the beginning of page1. Give it a name like 'page1_start'.
In addition to your existing event, add another event with the following info:
Target: page1_2
Event: Timeline/event8
Action: Timeline/gotoAndPlay
Receiver: page1
Configuration: Label: page1_start
Related
Dear SAPUI5 developers,
I have a sap.m.IconTabBar and I set the active tab by the code when the user switch between pages. I used the following code:
sap.ui.getCore().byId(this.createId("iconTabBar")).setSelectedKey("1");
The problem is that it switch the selected tab correctly to the first tab. But it does not show the blue line under the tab that shows it is selected.
Please look at the following images:
What shows when I select the first tab by code:
But what it shows when I press the tab by the mouse it shows a blue line under the icon like the following:
As #Ash said in the comments you need to call fireSelect but this works just if user the second tab at first. If the user is on the first tab and switches between the pages then fireSelect does not act properly. Thus you need to select the second tab at first then it will works almost all times.
sap.ui.getCore().byId(this.createId("iconTabBar")).setSelectedKey("2");
sap.ui.getCore().byId(this.createId("iconTabBar")).setSelectedKey("1");
sap.ui.getCore().byId(this.createId("iconTabBar")).fireSelect();
Ok I had a look into the IconTabBar source Code and theres something I dont really get why but here is how it proceeds :
when you call IconTabBar.setSelectedKey(key), it calls IconTabHeader.setSelectedKey(key)
then internally the IconTabBarHeader calls setSelectedItem(item, true)
the 'true' here is important, the parameter is named 'bAPIchange' in the setSelectedItem function, and it is used as condition for the fireSelect() :
if (!bAPIchange) {
// fire event on iconTabBar
if (bIsParentIconTabBar) {
oParent.fireSelect({
selectedItem: this.oSelectedItem,
selectedKey: sSelectedKey,
item: this.oSelectedItem,
key: sSelectedKey
});
} else {
// fire event on header
this.fireSelect({
selectedItem: this.oSelectedItem,
selectedKey: sSelectedKey,
item: this.oSelectedItem,
key: sSelectedKey
});
}
}
Which explains why the event is not fired in your case
I have a draggable modal window and users move it around. They want it to open at the original position, every time they close the window and reopen again. How can I do that? Thanks.
You can use bootstrap modal events
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
by default the bootstrap modal slide-down from top and if position of modal changes while dragging, it can be rest to original position with show.bs.modal when close and re-open next time.
$('selector').on('show.bs.modal', function () {
// do something...
});
Demo Fiddle modal slide and open in middle
In above fiddle, added a custom position to modal so modal slide and open in middle of the page
.modalnewposition {
-webkit-transform: translateX(-0%) translateY(25%);
-moz-transform: translateX(-0%) translateY(25%);
-ms-transform: translateX(-0%) translateY(25%);
transform: translateX(-0%) translateY(25%);
}
HTML
<div id="myModal" class="modal fade modalnewposition" role="dialog">
Then created another class
.original {
transform: translate(0px, 0px);
transition: transform 0.3s ease-out 0s;
transition: opacity 0.15s linear 0s;
}
Using show.bs.modal I added the original selector to modal so it adjust it's position before showing and override the modalnewposition selector so modal slide and open at top instead in middle of page.
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
$('.modal').addClass("original");
});
});
Demo Fiddle modal slide and open at top
Above example is just to demonstrate that what you asked is achievable with show.bs.modal function.
Add this code to js and execute it every time modal window closes:
var scrollableContentOfModal = document.getElementById(...);// change it accordingly
document.querySelector(scrollableContentOfModal).scrollTop = 0;
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
}
});
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.
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.