A very rough JS-Hack to embed CSS (incl. Goggle Fonts)

[Arnie]

Hi all,

first of all, I’am a Javascript Noob.
I added an old Version of loadCSS.js in Saola Animate.

Created with Saola Animate V.1.1.0.
http://www.experimente.bplaced.net/saola/css-test/CSS-Test.html

Setup:

• Make a Normal Function (In the small Functions-window at the bottom right)

function loadCSS(href, before, media) {
“use strict”;
// Arguments explained:
// href is the URL for your CSS file.
// before optionally defines the element we’ll use as a reference for injecting our
// By default, before uses the first element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the before argument and it’ll insert before that instead
// note: insertBefore is used instead of appendChild, for safety re: Surefire DOM Element insertion - Paul Irish
var ss = window.document.createElement( “link” );
var ref = before || window.document.getElementsByTagName( “script” )[ 0 ];
ss.rel = “stylesheet”;
ss.href = href;
// temporarily, set media to something non-matching to ensure it’ll fetch without blocking render
ss.media = “only x”;
// inject link
ref.parentNode.insertBefore( ss, ref );
// set media back to all so that the styleshet applies once it loads
setTimeout( function(){
ss.media = media || “all”;
} );
}

• Make an EventHandler in the Document Window. (On the left side)

function mycss(doc, e) {
loadCSS( “style.css” );
}

• Export to HTML5

• Copy your style.css in the HTML5-Folder.

• Insert Text in Saola Animate, double click, but don’t write anything.
  Click on the “Edit InnerHTML” Button (the second button from the right)
  and paste your HTML e.g.

  <p class="google-font">Hi, I'am PT Sans Narrow'</p>

This hack is very rough and of course only meant as a temporary solution until the professionals of Atomi have installed CSS support.
But for little things like a headline it is good to use.
For more complex things it is much too cumbersome, since one can not see the CSS formatting in Saola.

Best regards
Arnie

[resdesign (Marie Goodwyn)]

Sweet! This is a great example on how to add stuff. I am hoping that they will allow loading any js libraries in next update.