How can I upload / view HTML5 animations in confluence - html

Currently we are posting .swf animation (interactive) on our confluence. We just upload them as attachement to a pag and use {multimedia:name=animation.swf } to display them. But we want to make it usable for apple owners and are switching to making these interactive animations in HTML5 in stead of .swf.
But generating the same animation in HTML5 in stead of .swf gives use in stead of 1 swf file a couple of directories with css, javascript, images and html files.
How can I upload these to confluence and display the animation on a page in confluence?

It might matter which version of confluence you're working on.
To use the javascript and css you need, you can go to edit -> Administration -> Edit Layout and edit the space-wide css and js in the appropriate tabs.
As for html, you can use the {html} tags to include html code on your confluence pages like this:
{html}<p>Insert your html here</p>{html}
Do you know which version of confluence you have?
You might also want to look into the gliffy add-on for confluence. I believe it has the capability to accomplish what you want.
http://www.gliffy.com/products/confluence-plugin/

Related

Can I embed an A-Frame scene into Squarespace?

I want to embed this a-frame project to my portfolio on Squarespace (most basic plan) like what a-frame shows in their embedded page but I'm not even sure if it's possible? I'm also super new to coding so let me know if I should provide more info. If people can also explain things in baby language that would be awesome thanks
embedding remote a-scene?
if you want to link your existing project to a different page then... I don't think it's possible. Look:
the documentation page uses a real a-scene there, with a-boxes and stuff.
It may be possible via iframes but I don't know if it works. There is something like this in the documentation:
For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device. - source
embedded
embedded is used to create a smaller window of a-scene inside a standard HTML page. As far as I know, it just sets or changes some CSS values. Unfortunately, there is nothing like a magical src attribute that would allow you to fetch a different scene from another page
If you can upload a static HTML file onto Squarespace then by all means you can embed it there. But remember that
Only one <a-scene> can exist on a page - same source
You would need to copy your entire project a-scene and paste it into your Squarespace page. Add A-Frame script in header or link a js file and all standard stuff.
link
this may not be what you are looking for but you could potentially create an embeded a-frame scene that would have a link inisde that would "teleport" you (change location) to your project. link - A-Frame

Lord icon not rendering in browser

I am trying to use lordicon in my website, I added it successfully as gif and png. but i need to make it animate on hover only, I used its editor and download it as JSON and added this code in my html page:
<lord-icon src="/627-brezel-outline.json" animation="hover"></lord-icon>
but nothing show in the browser. Can you help me please.
Did you include the project files of the GitHub repository? There are some implementation examples in there. An easier way is just to embed the HTML code with the settings you want from their website! Is the easiest way in fact!
Just select an icon, choose your settings and in the download window, instead of downloading a file, select "EMBED HTML".

C# control / code to display local HTML file with image tags and CSS

I am developing an application and part of the design is there is a local folder with HTML files and a folder for images that the HTML files use.
The HTML files can have in-line CSS declaration which will also need to be displayed / rendered. The CSS will be VERY basic like font size , color, padding, etc, but nothing advanced like CSS 3.0 or even advance CSS 2.0 features.
The HTML files are not complicated, just text in tags with a few image tags in there with some CSS to style on some tags. There will be NO JavaScript, NO PHP, etc.. and all the files are local and not loaded from the web.
I can't seem to find a control or code online to display this kind of file contents. I have found some code that will display HTML code but it does not render CSS or render images. This control needs to be read only so the user can not edit the view.
I am using Visual Studio 2010 and my application uses WPF WinForms in .NET 4.0.
Just to clarify what I want, I want code to render the above HTML files on my form or a control that allows me to render those HTML files. The control needs to be able to support a scroll bar if the HTML file contents don't fit the control. The control also needs to be able to resize if the form is resized.
Thank you, I look forward to seeing some solutions to this problem! I have never done this before and am excited to see what is available and what you have done in the past to solve this problem!
Use the WebBrowser control and call the Navigate method with Uri pointing to your local file path of your HTML files. The browser control can be displayed inside any Wpf container (grid/border/stackpanel etc).
Reference example is available at msdn.

Can you embed an HTML webpage in a PDF file?

A flash file can be embedded in a PDF document. Does anyone know if it is also possible to embed an HTML webpage?
Added:
I don't mean just a plain HTML document, but a webpage with Javascript too.
The answer is no.
While you can embed videos, sounds and SWF files in a PDF, dynamic HTML files aren't supported. (Adobe AIR is more suitable to package and distribute HTML files).
The best you can do in a PDF is to use the ATTACH option in Adobe Acrobat. This will "attach" any file with the PDF document similar to how you add an attachment with an email. But the attachment can't be viewed within the PDF document, and has to be opened separately.
More info:
Javascript can be added to PDF files and used to manipulate various elements within the PDF file.
Not directly. Depending on what you're looking for, however, you can use something like dompdf (PHP) to generate a PDF file from an HTML document, then merge that document with your original. It even supports JavaScript, up to the level Adobe Reader supports JavaScript.
That said, the PDF file format is really for things you want to print (i.e. want to look the same everywhere), not things you want to click on (i.e. look sensible everywhere). Adobe's decision to include Flash support was probably made from a marketing standpoint, not a technical one.
The best workaround would be to create a web/html viewer in Adobe Flash and embed that in a PDF as an SWF. There is an option to "Add SWF" in Acrobat under "Rich Media."
Created a NPM module that allows you to add custom HTML and CSS to PDF's.
const pdf = require('add-html-to-pdf');
var options = {
input: 'sample.pdf',
output: 'done.pdf',
html: "<div style='color:red'>This is awesome!</div>",
useDocker: true
}
pdf.insertHTMLInPDF(options);
You could reconstruct the html, css and js on the web page using php.
Im using a plugin with a wordpress site that is pretty outdated but works very well for creating pdfs with html, css and javascript.
it's called tcpdf
plugins/tcpdf/tcpdf.php
https://tcpdf.org/examples/
the pdf is made on the fly as a function.

Improve load time for a html page with flash

I have a basic html page and a big flash file I need to embed. I would like to allow the user to click on the links until the flash files loads.
I was thinking of two ways to do this
1. use an iframe and put the flash file in there
2. use jquery to load and append the flash file to an internal div
Is this the way to go ? Are there better solutions ?
I would suggest that jQuery is the best way to add the element to the page.
There are many plugins for jQuery which make it easy to achieve. One of the better ones I have found can be found at http://jquery.thewikies.com/swfobject/