eval

Syntax

eval: {= (javascript) =} [every (time)] [after (time)][, (javascript)...];

Perform raw JavaScript in the global window scope.

Example:

body:init {
    eval: {=
        alert('Hi! I'm a popup!');
    =};
}

Under the hood it does this:

window.eval("your javascript...");

This command performs a straight-up JavaScript eval. Use it wisely.

No variable substitution is allowed on this command for security reasons. Ie. you cannot use {blah} or {@data-attribute} within the JavaScript.

The rule is: Try to not use eval - try to always use an alternative. As well as performance issues, there are real "dangers". Search the web to understand what the dangers are. You can use it when you are aware of all the dangers and are confident in using it. We are not going to tell you not to use it ever. But what happens if you do use it is completely on you. If you want to get hacked, or give a demonstration on how to not code sensibly, then feel free to use it recklessly.

Don't forget to put the semi-colon at the end of your command after the final "=}" or it won't run.

Alternatives

Both of the following commands are safer than using eval:

create-command - creates your own Active CSS action command, like all the other Active CSS commands, which is scoped to the "ActiveCSS" global variable and not the window scope.

func - calls an external function that you have already pre-written in a JavaScript file.

run - the closest equivalent to eval, except it runs in a natively recommended form.

Note: Eval usually isn't allowed in browser extension JavaScript files due to browser security policies, but it works fine on websites.

This example below is something we could have used for this website, but the "run" command was used instead. It makes the heading bar on mobile at the top of the screen smaller or larger when any page is scrolled.

eval

embedded:loaded {
    eval: {=
        var lastScrollTop = 0;
        window.requestScroll = o => {
            let st = window.pageYOffset || document.documentElement.scrollTop;
            let menuBar = document.getElementById('adm-NavigBar');
            if (st > lastScrollTop) {
                menuBar.classList.add('mobMenuSlid');
            } else {
                menuBar.classList.remove('mobMenuSlid');
            }
            lastScrollTop = (st <= 0) ? 0 : st;
        };
    =};
}

@media (max-width: 1020px) {
    body:scroll {
        func: requestScroll;
    }
}

Action commands: empty Action commands: fade-in