I am creating an html presentation using slidify (which in turn uses knitr) in which I am incorporating an animation displayed via scianimator (i.e. by setting the knitr options opts_knit$set(animation.fun = hook_scianimator)). This all works perfectly. However, the animation starts autoplaying as soon as the html is loaded. This is caused by the generated javascript code .scianimator("play");. Of course, I can delete this manually from the html file. But my goal is to generate the complete html presentation automatically without the need for manual corrections in the html file. Is it possible to set knitr options, redefine the hook_scianimator function, or some other approach in order for this to work?
So that others can reproduce this: I've put my source package here http://www.let.rug.nl/wieling/statscourse/lecture5/lecture5.7z
If it is unzipped and the html file is opened in a browser (Chrome, Firefox), the animation op slide 16 is already playing (it starts when the html file is loaded). The original markdown/slidify source is index.Rmd in the same archive.
Note that if I upload the data to a webserver: http://www.let.rug.nl/~wieling/statscourse/lecture5/#16, the Scianimator animation does not play at all.
Any help would be very much appreciated!
Related
I am watching invisionapp website some time ago and i like his website animation, now i want to apply that animation in my html page so, that i am try to find how it's work.
But i am not able to find out how that animation work and which javascripts used by devloper for apply that html page svg animation.(I am asking about invisionapp's website svg animation not invisionapp animation). i am also try by saving web page in local but not work.
if any one know how all that animation work or what js they use then help me to understand that animation.
Here is the link for invisionapp website
You can use your browser's developer tools to dig into the scripts loaded on the page.
Here is what i could gather:
Graphics/animations made in Adobe AfterEffects, exported to JSON with https://aescripts.com/bodymovin/
Greensock Animation Platform (GSAP) with plugins:
Animation
ScrollMagic
EasePack
TimelineLite
TweenLite
CSSPlugin
AttrPlugin
Also jQuery
Then the code controlling all this seems to be in https://www.invisionapp.com/subsystems/landing/assets/js/freehand.min.js
The Developer tools in the web browsers have a 'Performance', you can use it record the events happening the page and try to figure out what script is triggering the event/animation.
It will be still be difficult, because scripts are probably minified and obfuscated.
I am using Shopify and a script located at https://app.cjdropshipping.com/static/shopify/pod/pod.js to generate mockups for a necklace product. You basically need to upload a photo and then it takes it and sends it to the server to generate a front and back side cover.
Well, this script does not always work on mobile.
You can try the mockup tool at https://purfectgifts.com/products/petnecklace as well as analyze it.
It does not always capture the whole area of the uploaded image dimensions and does not put the generated image instead of the original product image.
I need to have this fixed for mobile (iPhone & Android). It works better on Desktop.
I think this issue about the script has to do with how it loads itself...
Please help me out with this. You can make me the happiest person in the world if you can help me with that.
I am not a programmer but I tried to change how the script loads.
I think the issue is about how the script is loaded.
I appended the following code right above the closing body tag:
<script type='text/javascript' async=false defer=false src='https://app.cjdropshipping.com/static/shopify/pod/pod.js'></script>
Hi,
I have a banner on my site made in flash. Its an animation that ends with a sequence showing buttons which the user can click to navigate to inner pages. Since flash seems to be dead soon I would like to replace that with html5 friendly code. Is it possible to have a program such as Adobe Flash CS5 to convert the full movie for me into javascript code? Or I have to write the javascript all by myself from scratch?
Thank you.
You can use Flash CC to publish you flash file into HTML canvas base structure. Steps -
Open file in Flash CC select commands->Convert to other Documents.
Folder Select HTML 5 Canvas from Dropdown and press OK. Now open
newly created Flash file and publish. It will give you the canvas
base html file.
The html and javascript you get is in organized format and you can even edit code as well.
Hope it solve your problem.
On a clients webpage, the page uses js/css to style a tree-style view to the desired look of the client. But on some of the pages with many objects it takes some time for the styles to load. So I suggested adding a loading screen.
Here is an example of the issue: http://zamozuan.com/content/16-search-auto-parts-by-vehicle-chevrolet
My client purchased a little animated icon they like that fits the theme of their site nicely.
I have a very simple addition to the script to add a loading icon, and then on $(document).ready, hiding the load element and showing the main element.
All works fine except the loading gif is not animating until AFTER the page has completely loaded.
It seems that the loop for the js is too intensive so the gif is not animating.
Before anyone chops my head off, I did view the similar questions on here, but those solutions do not work for me - the majority of issues are in IE and my issue is in chrome (not IE), and most of the other options are work-arounds based on clicking buttons to enable/disable, but in my case this is when the page initially loads so that is not viable.
I am wondering, is there any work-around to fix this? Is it possible to pre-load the gif in to an animated status and somehow prevent JS from interfering? Or is there a way to make the js loop not be so intensive that it completely freezes the browser?
As for the code, it is the exact as the link above, with only this added at the end:
$('#loading').hide();
$('.mainsearch').first().css('display', 'block');
The loading element just contains:
<img src="img/loading.gif" class="img-responsive">
<p class="centertext">Loading, please wait...</p>
But as mentioned, the gif does not load, just freezes.
For the javascript that is styling the tree, you can view it here:
http://zamozuan.com/js/tree.js
Any help would be greatly appreciated, as my client would not want to waste this loading icon they bought.
Thanks.
No, there is no work-around. It's not a problem with how the image is loaded, it simply won't be animated while the script is running.
Javascript is single threaded. As long as a script is running, there is no visual updates in the browser. This includes GIF animations, while the script is running animations won't move.
Without being able to work on the actual code and try it, I would suggest trying to break up your looping into separate callbacks. Maybe using setTimeout or requestAnimationFrame for every few recursions to give the browser a chance to update/paint.
I got the Media Element JS player to work, but when I tried to get it to play in a pop-up, I noticed that it breaks the popup. It looks like I can't call JavaScript inside a JavaScript. My popup is pretty simple, it just does window.open and uses document.write with code to build a new page with its own style sheet. However, I can't load the mediaelement.js stuff inside that. Maybe I should just load the Flash that comes with it? There's also a silverlight file.
Can someone please help? I need a player that doesn't require an XML file for the playlist, works in all browsers, plays MP3s and has a timer on it. I've been working on it all day to no avail!
if you're document.writing into a new window you should be able to write a call to an external js file and that should run. Can you post the code you're using?
also why not just window.open('http://yoursite.com/path/to/an/html/file.html') instead of document.writing to it. This would be cleaner and would maintain the separation of structure and behavior.