I'm trying to call for a jQuery function when my Flash Canvas animation ends. I can't seem to figure out what code I need to add on that last keyframe in order to do that. I found something like this but it's not working:
this.stop();
ExternalInterface.call("javascript:start_website();");
Thanks in advance!
I managed to find a solution from browsing a few other websites. Basically at the end of my animation on the very last keyframe I added this bit of code:
this.animation_tracker = function() {
start_website();
return false; // prevent the function from being run over and over again
}
exportRoot.animation_tracker();
And within my website I created a jQuery function called start_website(); where I placed all the actions that I wanted to have happen once my animation was over.
in flash canvas you are already programming in javascript (and other js libraries flash uses), so you can't use and don't need the ExternalInterface.call and such.
You can and should call straight to the javascript function:
this.stop();
start_website();
Good luck!
Related
I have a Javascript imported a snow.js file that displays "Snow falling" across the screen for when it's winter. But If I choose a summer theme on the same page it will still display the Snow falling.
<script src="js/snow.js" type="text/javascript"><script>
Is their a way to create a Javascript code so if i click on a summer theme it will remove/comment the imported file and add/re-move commenting on the imported file when I click on a winter theme?
Edit:
I am using snowstorm.JS plugin realized I can call a function "snowStorm.toggleSnow()" via script. But I need to adjust it, so if they click on my css button "Summer" whilst on the theme summer it will do nothing.
I created this Jquery/JS code but it doesn't work. I believe it's the brackets but not sure. It should solve the problem.
Update:
I got it working, so If the user clicks a button it will "Toggle" the snowstorm effect on and off.
$("#Summer").click(function(){
snowStorm.toggleSnow()
});
$("#Winter").click(function(){
snowStorm.toggleSnow()
});
Is there a way of introducing if loops, so if the user clicks on the same button, eg: ID "Summer" whilst on the same ID/CSS "Summer" it will not toggle the snowstorm?
Use JS or jQuery to remove the tag.
For example, in jQuery:
$("#summerThemeButton").click(function() {
$("script[src=js/snow.js]").remove();
});
However, as #IgorRaush commented, there's probably a better way to change the theme (probably by a JS API) than to remove the script for it completely.
EDIT
As the comments suggest, it's not so easy to remove a JS file by removing the <script> tag. It is already executing code. The best way is to use the functions that came with it to stop it. Maybe you want to check if there are functions, such as:
var stopSnow = function() { /* ... */ };
var changeTheme = function(newTheme) { /* ... */ };
If there are truly no API functions (if you found an API; if you wrote it yourself just write a function!) then your best bet might be to remove all relevant/global variables and functions:
// for example, if you had a running function `snow()` or a global variable to make it snow:
snow = null;
theme = null;
Sorry there's no better way (I know of) to remove a script.
you can use $.getScript in jQuery to conditionally load the file. See more at http://api.jquery.com/jQuery.getScript/
I'm creating a Chrome extension for a website that has no open API, so I'm stuck reading Closure Compiled spaghetti code for a long time. I've made a lot of progress but I seem to be stuck. On the page's onload, this function executes:
function comments_initReply(){
var b=$("#ajax_comm div.com");
for(var a=0;a<b.length;a++){var d=$(b[a]);
var c=d.find(".commentReplyLink");
if(c.length){
d.on("dblclick",function(){$(this).closest("div.com").find(".commentReplyLink").click()}).find(".t")}
}
}
What it does is it takes a comment div on a website and it makes it into a large double-clickable area for you to open a reply. All I want to do is remove the double-clicking property so you can double-click text and highlight it instead of opening a reply modal dialog.
Since the function is anonymous, it cannot using removeEventListener to detach it. Any ideas? I prefer to not use jQuery.
Well, although you prefer not to use jQuery, it's much easier to use it, and my solution here will be jQuery-based, and feel free to convert it into a normal Javascript, if you want to.
function comments_endReply() {
$("#ajax_comm div.com").off("dblclick");
}
I made an animation, and i want to add a callback function at the end of the animation loop.
Do you know how I can do that ?
Thx.
Glad to read you found your solution :)
You can find a complete example on the cgscenegraph website:
http://gwennaelbuchet.github.com/cgSceneGraph/examples/03_Animation/animation_01_SRT/index.html
There are other examples related to animation also: http://gwennaelbuchet.github.com/cgSceneGraph/examples.html
What you have to understand with the animation engine is that a timeline is generated for each couple node+property you want to animate. And it is this timeline that provides events related to the animation.
Here is an example to get the onAnimationEnd of a timeline:
this.sceneGraph.getTimeline(myNode, "rotation.angle").onAnimationEnd = function (event) {
console.log("animation ended");
};
To get onAnimationStart or onAnimate events, it's exactly the same :)
Hope this can help.
okay i found what i want,
there is a property named "onAnimationEnd" into the CGSGTimeline class that is fired at the end of the animation, so i've got my callback function ;)
for information, there are other callback functions like "onAnimate" & "onAnimationStart" in the cgSceneGraph framework.
link to http://gwennaelbuchet.github.com/cgSceneGraph/api.html
best regards.
so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i've spent quite a while doing this now and i'm wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i'm only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!
specifically its this code thats seems not to work
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
that is only a snippet btw and won't make much sense without the rest!
jQuery is cool to write short scripts.
Your slider code in short:
var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));
$('.prev').click(function(){
$holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
$holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});
That's the complete code.
See this in action on http://jsfiddle.net/creativecouple/YPU2d/
Pretty cool little slider you have going here! You say you are a beginner? I'd say you've picked up on jQuery quite well! Also before I forget, addressing your comment: if you post something on stackoverflow...it WILL be viewed, likely by many people :). It's rare to come here and receive no help (albeit you may not always get an answer).
Fortunately for you, I've found your problem! It's right here:
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
You are checking whether or not to loop, setting the slider to active, setting the next slide to the last slide in the index (and subsequently pushing it to that at the same time), then you animate as you normally would. This results in two movements: first to the back of the index, then to the value of holderPos+$('.slider').width()+'px'...hence your strange behaviour. This should help:
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':"-1800px"
}, function(){
sliderActive=false;
})
};
The value "-1800px" is just the last slide in your buffer that I precalculated...you should be able to replace it with your clonePos variable without trouble.
*EDIT: You should also change your variable clonePos to look like this:
var clonePos = '-'+($('.item').index()-1)*($('.slider').width());
It will eliminate a bug when you swap between the last slide in the index and the first slide (a "smooth transition" if you will).
**
Part II
**
In order to achieve the illusion of infinite scrollability you will need to embed a callback "push back" function inside the "left pressed" animation call. It's late here so I haven't tested the code I am about to write but I'm fairly confident it will work for you.
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':clonePos
}, function(){
$(this).css('left':holderPos+$('.slider').width()+'px');
sliderActive=false;
})
};
If you take a look this isn't much different from the original answer I offered. All we have done is take the callback function for animate, and added a call to slip the position to the original index position. Again, untested, but the idea is that .animate() will slide to the clone, once that is done your callback will swap the clone with the original, and then deactivate the slider.
You weren't very far off! Here's a semantic rule of the animate function (to attempt to help your understanding of the way a callback works):
animate( params, [duration], [easing], [callback] )
params is our left call (to the cloned slide in this case)
duration is ignored here
easing is ignored here
callback is our function() call that does our little david copperfield swap
Hope this helps!
I'm using the PrettyPhoto jQuery plugin for an image gallery, and I'd like to make an API call with a basic text link using the following function to navigate to the next image in a series:
$.prettyPhoto.changePage('next');
Since I'll be making this call frequently throughout the site, I'd like to create a basic Javascript function "next" so that for each onclick instance, I can simply write "onclick=next();" rather than typing out the whole thing-- i.e. onClick="$.prettyPhoto.changePage('next');"-- each time. I've tried to write the function as follows, but it doesn't seem to be working:
$(document).ready(function(){
function next() {
$.prettyPhoto.changePage('next');
};
});
What am I doing wrong here? I'm obviously a novice at JS programming, but any direction here would be most appreciated; and please let me know if I should provide any more information.
There is no need to wrap your function in the document ready. Apart from that, you would be putting the next function in the global space which is something you should try to avoid. You could do something like:
$.nextPhoto = function() { $.prettyPhoto.changePage('next');}
and call it with
$.nextPhoto();
which puts it in the jQuery namespace but the better approach would be to use jquery event handlers .click() and bind the prettyPhoto function directly to the links rather than use inline javascript