Fix Elementor Widget ID

March 26, 2025 · AI Conversations

User
<style>
@font-face {
	src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2');
	font-family:'Compressa VF';
	font-style: normal;
}


#fit h1 {
	font-family:'Compressa VF';
	text-rendering: optimizeSpeed;
	color: #b6e925;
/*	width: 100%;*/
	user-select: none;
	line-height: 0.8em;
	margin: 0 auto;
	text-transform: uppercase;
	font-weight: 100;
	text-align: center;
/*	width: 100vw;*/
}
#fit h1 span {
	transform: translateY(-10px);
	user-select: none;
	font-family:'Compressa VF';

}
#fit h1.flex {
	display: flex;
	justify-content: space-between;
	
}
#fit h1.stroke span {
	position: relative;
	color: #211D26;
	line-height: inherit;
}
#fit h1.stroke span:after {
	content: attr(data-char);
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #FE6730;
	position: absolute;
	left: 0;
	line-height: inherit;
	color: transparent;
	z-index: -1;
}
</style>
<script>

</script>
<script>
var maxDist;
var mouse = { x: 0, y: 0 };
var cursor = {
    x: window.innerWidth,
    y: window.innerHeight
};

Math.dist = function(a, b) {
    var dx = b.x - a.x;
    var dy = b.y - a.y;
    return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
}

window.addEventListener("mousemove", function(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;
});

window.addEventListener("touchmove", function(e) {
    var t = e.touches[0];
    cursor.x = t.clientX;
    cursor.y = t.clientY;
}, {
    passive: false
});

var Char = function(container, char) {
    var span = document.createElement("span");
    span.setAttribute('data-char', char);
    span.innerText = char;
    container.appendChild(span);
    this.getDist = function() {
        this.pos = span.getBoundingClientRect();
        return Math.dist(mouse, {
            x: this.pos.x + (this.pos.width / 1.75),
            y: this.pos.y
        });
    }
    this.getAttr = function(dist, min, max) {
        var wght = max - Math.abs((max * dist / maxDist));
        return Math.max(min, wght + min);
    }
    this.update = function(args) {
        var dist = this.getDist();
        this.wdth = args.wdth ? ~~this.getAttr(dist, 5, 200) : 100;
        this.wght = args.wght ? ~~this.getAttr(dist, 100, 800) : 400;
        this.alpha = args.alpha ? this.getAttr(dist, 0, 1).toFixed(2) : 1;
        this.ital = args.ital ? this.getAttr(dist, 0, 1).toFixed(2) : 0;
        this.draw();
    }
    this.draw = function() {
        var style = "";
        style += "opacity: " + this.alpha + ";";
        style += "font-variation-settings: 'wght' " + this.wght + ", 'wdth' " + this.wdth + ", 'ital' " + this.ital + ";";
        span.style = style;
    }
    return this;
}

var VFont = function() {
    this.scale = false;
    this.flex = true;
    this.alpha = false;
    this.stroke = false;
    this.width = true;
    this.weight = true;
    this.italic = true;
    var title, str, chars = [];

    this.init = function() {
        title = document.getElementById("title");
        str = title.innerText;
        title.innerHTML = "";
        for (var i = 0; i < str.length; i++) {
            var _char = new Char(title, str[i]);
            chars.push(_char);
        }
        this.set();
        window.addEventListener("resize", this.setSize.bind(this));
    }

    this.set = function() {
        title.className = "";
        title.className += this.flex ? " flex" : "";
        title.className += this.stroke ? " stroke" : "";
        this.setSize();
    }

    this.setSize = function() {
        var mainDiv = document.getElementById("fit"); // assuming the outer div has an id "main"
        var fontSize = mainDiv.clientWidth / (str.length / 2);
        title.style = "font-size: " + fontSize + "px;";
        if (this.scale) {
            var scaleY = (window.innerHeight / title.getBoundingClientRect().height).toFixed(2);
            var lineHeight = scaleY * 0.8;
            title.style = "font-size: " + fontSize + "px; transform: scale(1," + scaleY + "); line-height: " + lineHeight + "em;"
        }
    }

    this.animate = function() {
        mouse.x += (cursor.x - mouse.x) / 20;
        mouse.y += (cursor.y - mouse.y) / 20;
        requestAnimationFrame(this.animate.bind(this));
        this.render();
    }

    this.render = function() {
        maxDist = title.getBoundingClientRect().width / 2;
        for (var i = 0; i < chars.length; i++) {
            chars[i].update({
                wght: this.weight,
                wdth: this.width,
                ital: this.italic,
                alpha: this.alpha
            });
        }
    }
    this.init();
    this.animate();
    return this;
}

var txt = new VFont();

// Start animation
txt.animate();
</script>
Assistant
You're running into an issue where **multiple Elementor widgets of your custom “Variable Font” widget do not behave independently**—only the first or last works correctly, or the JS doesn’t apply correctly to each instance.

This happens primarily because your widget uses **hardcoded IDs** like `#fit` and `#title`, which are duplicated in every widget instance, violating unique ID rules and causing conflicts in rendering and JavaScript logic.

—

### ✅ Fix Summary:
You must:
1. Use **unique IDs** for each widget instance.
2. Modify the **JavaScript and CSS selectors** to work with these unique IDs.
3. Instantiate the JS **per widget instance**.

—

### 🔧 Fix Implementation Steps

#### ✅ 1. Update PHP `render()` method:
Update your HTML to include **unique IDs** (already partially handled with `$unique_id` but not properly used):

$unique_id = 'effect-text-' . sprintf('%02d', $custom_text_shortcode_counter) . '-page-' . $current_page_id;
$container_id = 'fit-' . $unique_id;
$title_id = 'title-' . $unique_id;

Replace HTML output with:

$output = "<div id='$container_id' class='variable-font-wrapper' data-page-id='$current_page_id'>";
$output .= "<h1 id='$title_id'>$text</h1>";
$output .= "</div>";
echo $output;

#### ✅ 2. Update JavaScript: Wrap inside a “ with `data-uid`

After the `echo $output`, output inline JS **scoped to that instance**:

?>
<script>
(function() {
    const container = document.getElementById('<?php echo $container_id; ?>');
    const title = document.getElementById('<?php echo $title_id; ?>');
    if (!container || !title) return;

    const mouse = { x: 0, y: 0 };
    const cursor = { x: window.innerWidth, y: window.innerHeight };

    Math.dist = function(a, b) {
        var dx = b.x - a.x;
        var dy = b.y - a.y;
        return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    }

    window.addEventListener("mousemove", function(e) {
        cursor.x = e.clientX;
        cursor.y = e.clientY;
    });

    window.addEventListener("touchmove", function(e) {
        var t = e.touches[0];
        cursor.x = t.clientX;
        cursor.y = t.clientY;
    }, { passive: false });

    function Char(container, char) {
        const span = document.createElement("span");
        span.setAttribute('data-char', char);
        span.innerText = char;
        container.appendChild(span);

        this.getDist = function() {
            const pos = span.getBoundingClientRect();
            return Math.dist(mouse, {
                x: pos.x + (pos.width / 1.75),
                y: pos.y
            });
        }

        this.getAttr = function(dist, min, max) {
            const wght = max - Math.abs((max * dist / (title.getBoundingClientRect().width / 2)));
            return Math.max(min, wght + min);
        }

        this.update = function(args) {
            const dist = this.getDist();
            this.wdth = args.wdth ? ~~this.getAttr(dist, 5, 200) : 100;
            this.wght = args.wght ? ~~this.getAttr(dist, 100, 800) : 400;
            this.alpha = args.alpha ? this.getAttr(dist, 0, 1).toFixed(2) : 1;
            this.ital = args.ital ? this.getAttr(dist, 0, 1).toFixed(2) : 0;
            this.draw();
        }

        this.draw = function() {
            span.style.opacity = this.alpha;
            span.style.fontVariationSettings = `'wght' ${this.wght}, 'wdth' ${this.wdth}, 'ital' ${this.ital}`;
        }
    }

    function VFont() {
        this.scale = false;
        this.flex = true;
        this.alpha = false;
        this.stroke = false;
        this.width = true;
        this.weight = true;
        this.italic = true;

        const str = title.innerText;
        title.innerHTML = '';
        const chars = [];

        for (let i = 0; i < str.length; i++) {
            const _char = new Char(title, str[i]);
            chars.push(_char);
        }

        title.className = '';
        title.classList.add(this.flex ? 'flex' : '');
        title.classList.add(this.stroke ? 'stroke' : '');

        const setSize = () => {
            const fontSize = container.clientWidth / (str.length / 2);
            title.style.fontSize = fontSize + 'px';
            if (this.scale) {
                const scaleY = (window.innerHeight / title.getBoundingClientRect().height).toFixed(2);
                const lineHeight = scaleY * 0.8;
                title.style.transform = `scale(1, ${scaleY})`;
                title.style.lineHeight = lineHeight + 'em';
            }
        }

        setSize();
        window.addEventListener("resize", setSize);

        this.animate = () => {
            mouse.x += (cursor.x - mouse.x) / 20;
            mouse.y += (cursor.y - mouse.y) / 20;
            requestAnimationFrame(this.animate);
            this.render();
        }

        this.render = () => {
            for (let i = 0; i < chars.length; i++) {
                chars[i].update({
                    wght: this.weight,
                    wdth: this.width,
                    ital: this.italic,
                    alpha: this.alpha
                });
            }
        }

        this.animate();
    }

    new VFont();
})();
</script>
<?php

—

### 🧼 Optional CSS Fix:
Avoid using `#fit` or `#title` in your CSS block—either:
– Output the CSS inside `style` tags using `#` selectors
– OR just define generic classes like `.variable-font-wrapper h1` to avoid duplicate ID conflicts.

—

### ✅ Result:
Each widget instance will:
– Use unique IDs
– Have independently running JS logic
– Animate text variation properly

—

Would you like me to rewrite your full widget class with these fixes integrated?

Leave a Comment

Your email address will not be published. Required fields are marked *