Forum Academy Marketplace Showcase Pricing Features

CSS/JS Timing + best practices

Hello Bubbles,

could anybody kindly explain to me how should I work with CSS styles while creating the plugin? I’m writing the second plugin and i’m experiencing the behaviour like, all what has to be printed is printed but not every time the elements take its styles(classes or id styles) asigned to them.

For example now am building simple dynamic menu plugin. The structure is done, so the basic functionality is, all I’m fighting with is CSS. Everytime I refresh the page the menu changes. Sometimes it has all styles, sometimes it has nothing, sometimes it has just something. I’m not a coder, anyway I work in IT and am fast learning in pretty any logical thing. I assume the problem is in timing or rendering. Everything is printed as expected but it’s not just applied. Of course I can use direct styles on the element(which works as expected), but once I want to add hover function I have to append it to style node and here starts my problem. I know I can add it as mouseOver attribute directly on element, but this is really dirty work with very ugly code. Also using the header of plugin could be the solution, but that’s not dynamic.

So please what is wrong? or what are the best practices? I tried to slow down the code, but nothing help. Am not getting even bubbles preloading data. Even I preload it to instance.data, those are not accesible from INITIALIZE (ok, they are, but only on later action like user interaction with object), so in second plugin am using one-run time function in UPDATE. Which makes me feel am not doing aything properly.

My first plugin (Iconify Plugin) fails in it too. I’ve add the posibility make the icon rotate (for getting wide pallet of spinners accesible), but this solution simply does not work. The animation is staticly preset, but there is one dynamic value I need to add to style which is SCALE (scale is transform same as rotate, It has to be in one property). And because you can have several icons on the page the style should be asigned to corect one. In this plugin I had also the problem with rendering Icons in repeating group. Once the icons are dynamic, rendering is unpredictiable.

Thank you for all suggestions or clarifications.

Even simple code like this one do not render always properly. The problem is with hover.

/* INITIALIZE */ 
function(instance, context) {
    id = Math.random().toString(36).substr(2, 5);

    init = true;
    buttonCount = 0;

}   
/* UPDATE */
function(instance, properties) {
    currentButtonCount = properties.options.length();

    if (init) {
         let idStyle = `
#${id} li {
    border-top: solid 3px rgba(255, 255, 255, 0%);
    border-bottom: solid 3px rgba(255, 255, 255, 0%);
    transition: all 200ms ease;
}
#${id} li:hover {border-bottom: solid 3px #009688;}
		`;
        
        $('#dynamic-menu-plugin-stylesheet').append(idStyle);

        createMenu();

        buttonCount = currentButtonCount;
        init = false;

    } else if (buttonCount != currentButtonCount) {
        $('nav').remove('#'+id);

        createMenu();

        buttonCount = currentButtonCount;
    }

    function createMenu() {
        let nav = document.createElement('nav');
        $(nav).attr({id:id, class:'dynamic-menu-plugin'});

        let ul = document.createElement('ul');
        $(ul).css('float', properties.float);

        let i
        for (i = 0; i < currentButtonCount; i++) {
            let li = document.createElement('li');
            $(li).attr('onclick', `location.href='${properties.pages.get(i, 1)}'`);
            $(li).append(`<span>${properties.options.get(i, 1)}</span>`);

            $(ul).append(li);
        }

        $(nav).append(ul);

        instance.canvas.append(nav);
    }
}

I personnaly have no issue with CSS in plugin. Maybe you should inspect to be sure there’s no confusion with other CSS styling that may explain your issue.

I also see that you have an init condition but for CSS, you should just load it.
And you should but your “init” var value into an instance.data.init = true instead and grab it in update using instance.data.init

Ok, thank you, will do the test tomorrow. The init variable prevent to run the code more than once, the element can run while role change its value, but the style should be printed only once. I wanted to but the style to init function, but I can reach the properties.data there even if they are written in instance.data.

You can also take a look on my iconify test page. If all icons are rotating, you are lucky. I always see rotate about 90% of them and they are not always the same. It did test in Chrome PC, Chrome Android and Safari MacOS, Safari IOS.

What I think actually is that you seem to attach the CSS to the div and svg created but you should attach the CSS to the head
I’m using this into one of my plugin $(cssadd).appendTo($(‘head’));
cssadd is the idStyle for you

Well actually I do attache it to the head (in my second plugin). There’s style in it only for my plugin with ID am Searching for. But even if the style is in the head or append to canvas. I have the same result. My ids are unique, same as the classes are, so if it works once and second time it does not, am feeling like the problem is Somewhere else.

Well I was not successful again.

@Bubble am I the only one experiencing this behaviour?

The issue in this thread is very simple in the end and is caused by wrong user code. The main problem comes from the ID variable, which is filled with random string. But once the string starts by number, CSS ignore it. Unfortunately it was not me who discovered this, I had to bother the support with it, so I want to apologize one more time and thank you guys again for your work, specially big thanks to Alessandro Jeanteaur! @Bubble has very kind engineers.

2 Likes

Ah! So you @dave.kolaja is the developer of plugin I’ve been enjoying a lot recently.

Hi! :wave:

Some ideas:

  1. You should somehow link to your profile here. It currently says user @pticon.
  2. On the element code, I think you can upgrade to <script src="https://code.iconify.design/2/2.0.0-rc.4/iconify.min.js"></script> (I believe the plugin still is on 1)
  3. On the shared tab, you’re still using v1 instead of v2. (mind you I have no idea what this means, but upgrading to the latest version seems like a good idea.)

I’m getting this bug if I try to load an icon dynamically (via a repeating group)

copy-paste of the code:

    at eval (PLUGIN_Iconify-update--Iconify-.js:11:32)
    at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/6397c908c75edcf79bcfa58d920eeb02c66d921df0847c0b2ef73df0ba3e39e1/xfalse/x10:15:477137

I don’t (yet) know Javascript, but let me take a wild guess: is it a timing issue? Trying to fire the Iconify call before Bubble has retrieved data from the database?