There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

Initialization events

When the page is loaded afresh and after Active CSS has loaded, several Active CSS events get checked for and run in the config. These are the initialization events.

You can populate these events as you need to. You can also leave them out completely.

The events that are checked in the config and run are as follows, in the sequence that they are run:

1. The Active CSS "body:preInit " event

Before the init event runs, there is a preInit event. This can be useful if you have a bunch of variables you want to set up and want to keep them separate to any init functionality you got going on. It's also a good place to declare any custom HTML tags that you've created with the create-element command.

Note for dynamically loading embedded Active CSS. The equivalent event is "embedded:loaded" which runs as soon as the config has been been loaded into memory. Use this event for things like setting variables, creating commands, etc. that you want to happen before everything else.

2. The Active CSS "body:init " event

Normally you would write any initialization functionality for your config in here.

Disabling pointer events until fully loaded

If you want to disable pointer events on the page until the DOM fully loads, set "body { pointer-events: none; }" in your CSS, then in the body:init event of your Active CSS config, set "body { style: pointer-events auto; }", and then put "<noscript><style>body { pointer-events: auto; }</style></noscript>" in your HTML header tag so all the page links will still work if JavaScript is disabled. This is a practical tip for a smoother UX if you have a heavily loaded page and really don't want people clicking on things until the page has fully loaded. Bear in mind though, that if Active CSS is not supported on a browser this approach will just stop all the pointer events working :)

3. Initial draw events

If your elements have any :draw events set up to run when they are first drawn, the events will get run at this point.

4. body:scroll

This is useful if you have any actions happening on a page scroll just after the page is refreshed and the browser has natively moved the user down the page. This is set up to run by default. If you find that you don't want this, let us know and we'll put something in Active CSS so that it can be disabled. Internally Active CSS will just look and run any body:scroll event set up in your config as part of initialization.

5. Lazy-loaded config

Any lazy-loaded config you are loading will be loaded at this point.