# Calculate text dynamic width Javascript

**URL:** <https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058>\
**Category:** Need help\
**Created:** [September 28, 2019, 3:41am UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058 "2019-09-28T03:41:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon57860117](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@anon57860117](https://forum.bubble.io/u/anon57860117)\
**Post date:** [September 28, 2019, 3:41am UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/1 "2019-09-28T03:41:04Z")

</div>

Hello, can someone show me how to change this into javascript to bubble element function. so I can use the published value to set dynamic margin for group focus targeting div inside of html element.

> \<script $.fn.textWidth = function(text, font) { if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('').hide().appendTo(document.body); $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); return $.fn.textWidth.fakeEl.width(); }; $('#inpt').on('input', function() { $('#'+this.id+'-width').html($(this).textWidth() + 'px'); }).trigger('input');

![image](https://us1.discourse-cdn.com/bubble/original/3X/6/6/663de60caebc5ef775fea2e646cbfac398c70a21.png)  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/9/2/92ae220c438c332e9551e5b3804c9e27dba20f6c.png)

> **[Bubble Editor - Width](https://bubble.io/page?name=index&id=width&tab=tabs-1)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

---

<div class="post-metadata">

**Author:** ![pork1977gm](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pork1977gm/32/245627_2.png) [@pork1977gm](https://forum.bubble.io/u/pork1977gm)\
**Post date:** [September 28, 2019, 8:09am UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/2 "2019-09-28T08:09:34Z")

</div>

Well, it looks like it might be like the below, but don’t quote me on this!  
Where are you getting it from anyway? Have you pulled out the console or something?  
It doesn’t look like it’s complete as you’re missing the end \< /script\> tag.

```
$.fn.textWidth = function (text, font) {

	if (!$.fn.textWidth.fakeEl) {
		$.fn.textWidth.fakeEl = $('').hide().appendTo(document.body);
	}

	$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
	return $.fn.textWidth.fakeEl.width();
};

$('#inpt').on('input', function () {
	$('#' + this.id + '-width').html($(this).textWidth() + 'px');
}).trigger('input');

```

Untested!

---

<div class="post-metadata">

**Author:** ![anon57860117](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@anon57860117](https://forum.bubble.io/u/anon57860117)\
**Post date:** [September 28, 2019, 8:26am UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/3 "2019-09-28T08:26:51Z")

</div>

I found it on stackoverflow. it does work (look at the app) it’s missing script tag because discourse think im trying to make code injection. There are much better ways to prevent that… oh well.

edit: I need to use bubble\_fn\_functionname to use the value elsewhere. right?

---

<div class="post-metadata">

**Author:** ![meyerhd2](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@meyerhd2](https://forum.bubble.io/u/meyerhd2)\
**Post date:** [September 28, 2019, 11:59am UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/4 "2019-09-28T11:59:05Z")

</div>

In your script, you need to insert a command with this syntax: “bubble\_fn\_suffix( _value goes here_ );” in order to pass the value back to a JavascripttoBubble element. In order for this to work, you also have to have “Publish value” checked for the JavascripttoBubble element.

In your case, you have:

JavascripttoBubble Element A  
bubble\_fn\_suffix: textWidth  
Publish value?: checked

Try inserting this line:

bubble\_fn\_textWidth($.fn.textWidth.fakeEl.width());

In your code right before this line:

return $.fn.textWidth.fakeEl.width();

I do not know JS, but if that doesn’t work, others on this forum may be able to help fix the JS for the ( _value goes here_ ) part

---

<div class="post-metadata">

**Author:** ![anon57860117](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@anon57860117](https://forum.bubble.io/u/anon57860117)\
**Post date:** [September 28, 2019, 12:20pm UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/6 "2019-09-28T12:20:02Z")

</div>

Cheers but Its not working

> [@meyerhd2](#):
>
> In your code right before this line:
> 
> return $.fn.textWidth.fakeEl.width();

---

<div class="post-metadata">

**Author:** ![Taiheta](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/taiheta/32/65061_2.png) [@Taiheta](https://forum.bubble.io/u/Taiheta)\
**Post date:** [September 28, 2019, 12:21pm UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/7 "2019-09-28T12:21:11Z")

</div>

What about using canvas  
[https://www.w3schools.com/Tags/canvas\_measuretext.asp](https://www.w3schools.com/Tags/canvas_measuretext.asp)

---

<div class="post-metadata">

**Author:** ![anon57860117](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@anon57860117](https://forum.bubble.io/u/anon57860117)\
**Post date:** [September 28, 2019, 12:22pm UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/8 "2019-09-28T12:22:43Z")

</div>

Thanks but problem is still not sure how to get the value into bubble\_fn

---

<div class="post-metadata">

**Author:** ![anon57860117](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@anon57860117](https://forum.bubble.io/u/anon57860117)\
**Post date:** [September 28, 2019, 12:49pm UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/9 "2019-09-28T12:49:57Z")

</div>

@Taiheta i nearly have it, use this expression, check app updated.

`86 + $.fn.textWidth.fakeEl.width();`  
Just need to figure out how to update the value when the text changes.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [December 7, 2019, 3:41am UTC](https://forum.bubble.io/t/calculate-text-dynamic-width-javascript/68058/10 "2019-12-07T03:41:07Z")

</div>

Closed on December 7, 2019, 3:41am UTC

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