I am new to swiffy.
It works great the first time an animation is called but I need to reuse the animation later in the same page (a web app). How should I do?
To isolate the problem, I have tried something very basic that does not work:
<button onclick="stage.start();">Start</button>
<div id="swiffycontainer" style="width: 400px; height: 400px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
</script>
Pressing on the button for the first time does start the animation
When the animation is complete, pressing again does nothing.
Any help?
TIA
From memory you need to do some gotoandplay stuff in your flash file to send the animation back to the start and call into some flag to trigger that with stage.setFlashVars('flag=' + value);
However a quicker solution is to reload the swiffy object.
make your onclick point to a replay function
<script>
var stage;
var swiffyobject = "....whatever";
//your initial load goes here
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
function replay(){
if(stage)
stage.destroy();
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.start();
}
</script>
<button onclick="replay()">Start</button>
Related
It's been a REALLY long time since using Flash and now have to use Adobe Animate for an HTML 5 Canvas project. I created the animation, set all the actions on the timeline to stop the timeline where I need it to be but now I need to know how to play the animation again from outside of another JS file (custom.js) inside my Animate JS file (animate.js)
I've read a ton of articles and most reference the scope of this being the problem.
Here's how I would imagine this would work.
// On scroll of div
<div onscroll="myFunction()">
// inside my custom.js
myFunction() {
this.gotoAndPlay(2);
};
Some have said to set a var of
var that=this;
And then calling that.gotoAndPlay(2);
Many thanks
Animate declares a global (window) variable exportRoot on publish that points to the root timeline.
As a demonstration, if you put this code on the root timeline:
alert(exportRoot === this);
You should see "true".
Thanks to ClayUUID
<script type="text/javascript">
function playTimeLine () {
//alert ("working");
exportRoot.gotoAndPlay(30);
}
</script>
<button onclick="playTimeLine()">PRESS</button>
Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
Recently I successfully integrate vertical iScroll to my mobile web. It has pull to refresh feature. However, Im currently stack at the part which I need to implement the same feature into a horizontal iScroll. Does anyone knows where can I see any sample that uses the same feature? I really need the help. All I need is to know how to do it because as of now, i have no idea with it.
Regards,
Askhole :)
iScroll by default does not support Pull to Refresh from a horizontal standpoint. I'm sure it could be done with some CSS and code tweaks, but you might be better off asking in the iScroll forums: https://groups.google.com/forum/#!forum/iscroll
i guess you implement vertical refresh by using a non-official iscroll.js (i.e., a modified-for-refresh iscroll). If this is your situation, this answer may helps:
i implemented vertical refresh with the official iscroll.js, by adding a little trick:
1. keep sth very very tiny at the next-bottom, use its position().top to detect the actual height of ur page
keep you "onloading" ath the bottom, set it invisible
Math.abs(myScroll.y) + wrapper.height === $(yourTiny).position().top
when scroll starts, if scroll upwards, check the condition in 3.
for tolerance in 4, you may use, for example: if(Math.abs(myScroll.y - wrapper.height + $(yourTiny).position().top) < 11){ //your code to refresh}
Here are the sample codes:
1.html
<sapn id="theTinyThing"> </span>
<table id="bottomRefreshImg" style="display:none">
<tr><td><img src="refreshGreen.gif" /></td></tr>
<tr><td>loading...</td></tr>
</table>
</div> //close scroller
</div> //close wrapper
<div id="footer"></div>
<script src="./jquery-2.2.3.min.js"></script>
<script src="./iscroll.js"></script>
<script src="./mrPage.js"></script>
</body>
2.css
#theTinyThing{
height:1px; //it's ivisible
font-size:1px;
}
3.js
var myScroll;
var myScroolHasCausedAddNew=0;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollbars: true,
scrollbars: 'custom',
mouseWheel: true,
click:true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
snap:true,
snap:'table',
});
myScroll.on('scrollStart',function(){
if($("#theTinyThing").position().top + myScroll.y-myScroll.wrapperHeight<11){
if(myScroll.directionY==1){
$("#bottomRefreshImg").show();
myScroolHasCausedAddNew=1;
}
}
return false;
});
myScroll.on('scrollEnd',function(){
if(myScroolHasCausedAddNew==1){
myScroolHasCausedAddNew=0;
$("#bottomRefreshImg").hide();
loadMore();
}
return false;
});
}
I would like to resize a dijit borderContainer on the onClick event of a titlePane but the resize function behavior is very strange (Resize() works only after the second click). This is the code I use :
<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer">
<div data-dojo-type="dijit.TitlePane" region="top" id="titlePane" title="Title">
<script type="dojo/method">
dojo.connect(dijit.byId("titlePane"), "onClick", function(){dijit.byId("borderContainer").resize()});
</script>
</div>
<div data-dojo-type="dijit.layout.TabContainer" region="center" id="tabContainer">
<div data-dojo-type="dijit.layout.ContentPane" id="contentPane" title="content" selected="true">
This is the content
</div>
</div>
Have you already seen this behavior? Your expertise would be very appreciated. Thanks
Actually, resize() works also the first time, but you cannot see anything happening because you should call resize() not immediately after onClick occurs, but after the titlePane's resize animation finishes (200 ms later by default), because otherwise borderContainer resizes to the same size.
This is what I suggest:
dijit.byId("titlePane").watch("open", function(param, oldValue, newValue) {
var animation = newValue ? this._wipeIn : this._wipeOut;
var handler = dojo.connect(animation, "onEnd", this, function() {
dijit.byId("borderContainer").resize();
dojo.disconnect(handler);
});
});
See a working example at jsFiddle: http://jsfiddle.net/phusick/E5CwV/
EDIT: On second thought, you can also create permanent connections on those two animations, but in my opinion it will lead to less readable code:
var titlePane = dijit.byId("titlePane");
var borderContainer = dijit.byId("borderContainer");
dojo.connect(titlePane._wipeIn, "onEnd", borderContainer, "resize");
dojo.connect(titlePane._wipeOut, "onEnd", borderContainer, "resize");
It'd be simple to add var myFx = new Fx.Slide(element); to window.addEvent('domready'...), but because I am loading "sub-pages" using AJAX, the mootools objects of these elements inside these pages need to be instantiated after have loaded fully. If I tried using domready, the element would not be found, simple because it doesn't exist yet.
I've been working around this with setTimeout(function() { ... }, 500);, but this leaves a 500ms delay between page load and element effect creation.
i.e.
<div id="foo">TextTextText</div>
<script type="text/javascript">
setTimeout(function() {
var myFx = new Fx.Slide('foo').slideOut();
}, 500);
</script>
When the page is loaded, there is a clunky 500 ms before the element goes to its default state of... erm... "slided in". (slidded in?)
A workaround exists for .hide() and .show() effects, though, since I can simply write in the html <div id="foo" style="display: none;">
I've tried approximating the "slid in" state of an element with <div id="foo" style="height: 0px; overflow: hidden;">, but then the element stays hidden like that forever, and slide() doesn't do a damn thing on it.
I feel as though I am missing something simple.
Have you tried putting the Fx.Slide instantiation in the onComplete method of your XHR call ?
Example :
var myRequest = new Request({
method: 'get',
url: 'requestHandler.php',
onComplete : function() {
var myFx = new Fx.Slide(element);
// etc ...
}
});
I ended up resolving (to my satisfaction, anyway) the problem with a quick workaround.
<div id="foo" style="display: none;">TextTextText</div>
Click me!
<script type="text/javascript">
setTimeout(function() {
var myFx = new Fx.Slide('foo').slideOut();
$('toggler').addEvent('click', function() {
if ($('foo').getStyle('display') == 'none') $('foo').setStyle('display', 'block');
myFx.slideIn();
});
}, 500);
</script>
Element is hidden in initial state, and the slideOut() effect is run after the delay, but user won't notice since element is hidden. When called, element display is set to block (if not set already), and slideIn() is called.
Set initial state:
var myFx = new Fx.Slide('foo').hide();
Then later, when you want it to appear:
myFx.show().slideIn();