No id property and where to save images?

Saola Animate Support Questions
1

Problem: No id property and where to save images?
Saola Animate version: v3.0.1
OS: win10
Notes:

Q1) How do I set “id” property to an element?
I ask this because I cannot see an option named “id” on the Properties pane.
and I have some JavaScript code that all work with “id” property.
;;
For example, I have a div as: <div id="cat"></div>
and set a background-image to it, please tell me how to?
;;
Thank you very much,
Afei

2

Hi Afei,

Users don’t have to know about ID since Saola Animate creates it automatically in HTML5.
To set a background image, you can use the background image element: Click the drop-down arrow on the Image button > Background Image.

or set a background image by using Image Fill for DIV elements.
image

Regards,
Hang

1 Like
3

Q1) What code can I get this object of this cat.png with JavaScript?
for example, I give it a name “catty” on the Properties pane.

Q2) Where can I see and edit the CSS “position” property?
I want to modify the CSS position like: absolute, relative, static.
for example, I have a div named “Div_1”.

Thank you

4

Hi afei,

Q1) I’ve mentioned several times in your other questions:

// Saola Animate element
var cat = doc.getElement('catty');
// HTML element
var catNode = cat.dom;

Q2) All Saola Animate elements have an absolute position.
You can change a CSS property (including position) by using JavaScript or CSS.

// JavaScript
catNode.style.position = 'relative';

/* CSS
 - Set a class name for your element (e.g. catty-class)
 - Add CSS rules to Document > Edit CSS
*/
.catty-class {
  /* use !important to overwrite what Saola Animate set */
  position: relative !important; 
}

You may need to take a look at the following tutorial on using CSS with Class Name in Saola Animate:

Regards

1 Like
5

I’ve read your link
Using CSS to Create Text Effects

There are two statements which I don’t understand:
Q1) What does the {$systemFonts} mean?
;;
Q2) What does the “div” behind the viewport-unit mean?
.viewport-unit div { font-size: 40vw !important; }
as I know that .viewport-unit means a class name.
but I don’t know why “div” is added behind it.

Thank you very much

6

Hi afei,

Q1) It’s the place holder for embedding systems fonts, please keep it intact.

Q2) It’s a CSS descendant selector. It’ll select all div elements having an ancesstor with viewport-unit class.
In Saola Animate, a descendant div is created inside an element to display text so we must use this selector.

Regards

1 Like