It seems like my JavaScript code does nothing to my HTML code

Need help
1

Hello guys, I’m here because I need help.
what I want is to display this page, that I created in html and JavaScript, every time a user click on an image:

This effect should be triggered on display and on click, like this:
2021-04-01-1041-39.mp4

This is the setting for the HTML:

image
image441×828 29.9 KB

I tried to play with the iFrame but it makes no difference.

and, this is the JavaScript settings:

image
image866×777 61.7 KB

The output is this:
2021-04-01-1106-15.mp4
The JavaScript coding doesn’t take any effect. What I can confirm is that there is no problem with the coding, because I have tried it on the normal html page, not in bubble.io, and it works like a charm.

ouh and I tried putting the JavaScript inside the HTML element, still, it does not work. Maybe I should use plugin? or something?

I will appreciate any help. Thank u.

2

Hey @rugading08

Where are the animateText() and animateBlob() functions defined?

3

Hi,
There are numerous discussions on this topic within the Forum. You have to check out Bubble documentation - it explicitely says that Bubble doesn’t support custom CSS styles. It has to do with the way Bubble-based page is rendered. Bubble’s rendering logic overrules any styles and elements you might place on the page. If you go to plugin’s marketplace you’ll see that very few deal with custom CSS. The reason - Bubbe implements little changes quite often and all CSS-reated plugins that used to work, just don’t anymore. There have been some over the time, the lates one in December, I belive. It’s already pretty much useless.

4

Check you console log. From your screenshot, seem that you have an error. Check if there’s nothing related to this.

5

This is not accurate. You can definitely use CSS and JavaScript to spice up your page and add some flair.

4 Likes
6

Hai @robhblake this is my full code

`/ Click "Congratulations!" to play animation

    $(function () {
    var numberOfStars = 20;
    for (var i = 0; i < numberOfStars; i++) {
    $(".congrats").append('<div class="blob fa fa-star ' + i + '"></div>');
    }

    animateText();
    animateBlobs();

    });

    $(".congrats").click(function () {
    reset();
    animateText();
    animateBlobs();
    });

    $(".congrats").display(function () {
    reset();
    animateText();
    animateBlobs();

    });
    function reset() {
    $.each($(".blob"), function (i) {
    TweenMax.set($(this), { x: 0, y: 0, opacity: 1 });
    });

    TweenMax.set($("h1"), { scale: 1, opacity: 1, rotation: 0 });

    }
    function animateText() {
    TweenMax.from($("h1"), 0.8, {
    scale: 0.4,
    opacity: 0,
    rotation: 15,
    ease: Back.easeOut.config(4)
    });

    }
    function animateBlobs() {
    var xSeed = _.random(350, 380);
    var ySeed = _.random(120, 170);
    $.each($(".blob"), function (i) {
    var $blob = $(this);
    var speed = _.random(1, 5);
    var rotation = _.random(5, 100);
    var scale = _.random(0.8, 1.5);
    var x = _.random(-xSeed, xSeed);
    var y = _.random(-ySeed, ySeed);
    TweenMax.to($blob, speed, {
    x: x,
    y: y,
    ease: Power1.easeOut,
    opacity: 0,
    rotation: rotation,
    scale: scale,
    onStartParams: [$blob],
    onStart: function ($element) {
    $element.css("display", "block");
    },

    onCompleteParams: [$blob],
    onComplete: function ($element) {
    $element.css("display", "none");

    }
    });
    });
    }
7

i did, nothing is related to this

8

Not 100% sure on this but from the code it looks like you have font awesome. “fa-star”. Now this is usually loaded by a script in the header and I think bubble blocks this on free plans if that is what you are on. Just a potential avenue to investigate.

9

I would stick in a few "console.log"s in each function to test out if any of the script is being executed and work backwards to debug.

10

This topic was automatically closed after 70 days. New replies are no longer allowed.