• 0

Javascript - Determine length of text in pixels


Question

Hi all,

A while ago I had someone create a sliding bar effect for a website I was working on. If you check out the site linked below, you will see the sliding bar thingy that I am talking about where it says "Tona Boards" on a sort of green arrow, then it slides back and forth to reveal different text.

http://www.tonaboards.com/

Now there is just one small problem with it. There is always this unnecessary amount of extra space after the text if the line of text is quite long. This is a result of a poor calculation for the width of the arrow. Currently this is how the width of the arrow is calculated:

var width = titles[title_id][0].length * 15;

Basically, he is just multiplying the number of characters by 15 to get a close (but not accurate) pixel width that will fit the text.

Is there a better way to work out the exact amount of pixels a line of text takes up? I did some googling and it seems possible but I am a javascript noob and can't figure out how to incorporate any of the examples in to my particular code.

Here is the full javascript for the sliding arrow.

http://www.tonaboards.com/wp-content/themes/TonaLife/arrow.js

Cheers for any help.

Jordan

8 answers to this question

Recommended Posts

  • 0

You could try setting the tag holding the text as inline-block and check the width. Display block, float left is the other setting you could use to determine its width. I had to do this once to set the width on the fly for a menu that had to be centered at all times.

  • 0

Would I use something like this for determining the width?

var arrowlink = document.getElementByClass("arrow_link");

var width = arrowlink.style.width;

Like I said, I am a js noob. I tried this and it didn't work.

  • 0

Its easier to do it with jQuery. You could collect all the elements with a certain class loop through them, detect and store the width as below.

var $links = $('.arrow_links');

for(i=0; i<$links.length; i++){
       var $obj = $links.eq(i);
       var len = $obj.width();
       $obj.data('wden);
}

Now that the widths have been stored you can access at the time of animation. Like I mentioned earlier you will need to either set the display type to inline-block or a combo of display block and float left, whichever suits your circumstances.

  • 0

You could just wrap the text with a <span> and use jQuery's .width() method to get the width of that element.

JS:

$('h2 span').width());

HTML:

&lt;h2&gt;&lt;span&gt;Pellentesque habitant morbi tristique&lt;/span&gt;&lt;/h2&gt;

It should work :)

  • 0

The only problem I see with your implementation is that you need the width before adding the text in the DOM. Something like jQuery.width() will only work with elements inside the DOM, they need to be added on the page. Now, a solution to work around this would be to calculate all text widths beforehand, store the results and use those later. During the calculation, the texts can be appended to an element which is absolutely positioned outside the visible screen area. After all texts are measured, this element can be removed and the results can be used for the animations afterwards.

I see you're using MooTools for this script. I don't want to force you to convert to jQuery, but since you're working in a WordPress environment I believe you should choose jQuery for this. WordPress already loads jQuery for its own scripts (e.g. threaded comment reply form) and most WordPress plug-in developers tend to use jQuery as well. Also, it's best practice to stick with one JavaScript library and not mix them. (Although you could say WordPress is to blame here... perhaps this could be a valid exception.) If you're only going to use MooTools for its DOM capabilities and not use its OOP functionality, jQuery is the preferred library anyway.

Anyway, here's how you could implement text width calculation in jQuery:

jQuery(document).ready(function($) {
	// Title element structure: [ titleText, linkUrl, titleWidth ]
	var titles = [
		['Tona Boards', '', 0],
		['Check Out The New Driftwood Wakeskate', 'http://www.tonaboards.com/driftwood', 0],
		['Read The Driftwood Blog', 'http://www.tonaboards.com/blog', 0],
		['Learn More About TONA', 'http://www.tonaboards.com/130/wake-skate-project', 0]
	];

	// Create temporary element to test widths in
	var textdiv = $('&lt;div /&gt;').css({
		// position it off the page (in a land far, far away)
		position: absolute,
		left: -9999,
		top: -9999,
		// reset styles so that we only measure the text
                // if you need these to be added in your calculation, just remove these four lines and the comma on the previous line
		border: 0,
		margin: 0,
		padding: 0,
		outline: 0
	}).appendTo('#arrow_content'); // by appending to #arrow_content, we can inherit its font styling as well (yay!)
	// Loop through the titles array
	for(var i=0, len=titles.length; i &lt; len; ++i) {
		// Set text, retrieve width and store it (all on one line, thanks to chaining!)
		titles[i][2] = textdiv.html(titles[i][0]).width();
	}
	textdiv.remove(); // remove temporary element
	textdiv = null; // garbage collection for IE (don't know whether it really helps though...)

	/* ------------------------------ */

	// Now, whenever you need to animate your texts, use something like this:
	$('#arrow_content').width(0).animate({
		width: titles[i][2]	// make sure you got a valid i here!
	});
	// This would first set the width to 0px and then animate ('morph') to the calculated text width
});

Once again: if you prefer another library, feel free to replicate this in your desired library.

(On a side note, you're including MooTools twice in your <head> - better fix that :p)

  • 0

Thanks a lot Calculator. I would like to switch over to jQuery from MooTools (it was the guy who wrote the initial script that choose MooTools in the first place) so I will try out your code. Hopefully this works.

One question though, should your code work as is? I replaced my arrow.js with this and nothing is happening. Does the .animate part need to be expanded on before anything will happen?

  • 0

It looks like there's indeed a small error in my snippet above, the word absolute is meant to be a string value and should be wrapped in quotes, like so:

        // Create temporary element to test widths in
        var textdiv = $('&lt;div /&gt;').css({
                // position it off the page (in a land far, far away)
                position: 'absolute', // now with added quotes!
                left: -9999,
                top: -9999,

Basically, you want to start editing below the /* ----- */. Below that line, there's some example code of how you could start the animation, the reason why this doesn't work straight away is that the value of i is invalid there (after the loop, it will have exceeded the titles array index bounds). You can remove that and start recoding the rest of your script from there. First, you animate the arrow to the width of the first item in the titles array, then you set the link's text and href using the data from the title item and then you set a timeout to animate and set the next item after x seconds. This should be pretty straightforward in jQuery, have a look at the jQuery Docs and start experimenting! :D

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I don't care about browser benchmarks. It's loads pages nearly instantly and doesn't really feel slow at all to me. Anyway I care more about features and stability and so far I'm satisfied. Plus I wouldn't use Edge if Microsoft paid me.
    • And the big problem we have seen with government organizations is the incredibly slow accountability. In the private space, the need to turn a profit forces the issue. That may not always be healthy, but it is swift. The best working example of a government organization is the USPS, but that is in part because it was created to operate like a business, with its own budget and revenue. That model may not work in every case, for example, I wouldn't want law enforcement under pressure to find revenue, but in some cases it does work.
    • Hell Let Loose, and A Little to the Left, and more join Xbox Free Play Days this weekend by Pulasthi Ariyasinghe Microsoft lets every Game Pass subscriber jump into fresh games every weekend for no extra cost, and it's time for another bunch of games to join the fray. The latest update offers Xbox Game Pass Ultimate, Standard, and Core subscribers access to three games: Dragon Ball Xenoverse 2, Hell Let Loose, and A Little to the Left. As usual, any progress made during the weekend also carries over automatically if you decide to purchase a game afterward. From the trio, Hell Let Loose is for shooter fans, offering 50 versus 50 PVP battles across various realistic World War II fronts. However, the gameplay is a much more hardcore experience compared to other shooters on the market. The title features infantry, tanks, and artillery warfare, with 14 roles available that offer different weapons and teamwork-related equipment. Next, Dragon Ball Xenoverse 2 comes in, touting its ties to the massive anime franchise. The title has players time-traveling to the past as a custom Dragon Ball character to make sure historical moments from the storyline happen just as fans remember. While the world itself is a massive one, fights happen in 3D arenas, taking cues from notable locations in the anime universe. If both those games are a bit too action-heavy, A Little to the Left is a cozy puzzle experience that aims to settle your perfectionist needs. The game has you sorting, stacking, and organizing household items from their awkward locations to more pleasing and organized placements. The controls mostly involve drag-and-drop operations, and some puzzles even have multiple solutions for neatness. Here are the three latest Free Play Days games and their supported platforms: Hell Let Loose - $24.99 (Xbox Series X|S, PC) DRAGON BALL XENOVERSE 2 - $5.99 (Xbox Series X|S, Xbox One, PC) A Little to the Left - $7.49 (Xbox Series X|S, Xbox One, PC) This Free Play Days promotion will end on Sunday, June 8, at 11:59 pm PT. Following this, expect another round of games to enter the program next Thursday.
    • AMD 25.6.1 driver out with RX 9060 XT support and a lot more FSR 4 games by Pulasthi Ariyasinghe A brand-new hardware launch is happening today for AMD, and to make sure its new GPUs are running properly, a new graphics driver has also landed right alongside it. The AMD Software: Adrenalin Edition 25.6.1 driver lands with support for the RX 9060 XT and the AMD Radeon AI PRO R9700, while also finally updating the number of games that support its AMD FidelityFX Super Resolution 4 upscaling technology. The consumer space-targeted RX 9060 XT graphics card comes in 8GB and 16GB flavors starting at $300 and $350 price points, respectively. Check out our launch coverage for this RDNA 4 GPU for more details here. At the same time, the AMD Radeon AI PRO R9700 comes in for handling professional workloads with a whopping 32GB of VRAM. While support for this card has already arrived with the latest driver, AMD is expecting to ship the product sometime in July 2025. The driver has also added official support for Onimusha 2: Samurai's Destiny Remaster as well, the Capcom-developed action game from last month. As for fixes, AMD has said that it has resolved reversed Quality and Performance selections in the Radeon Boost UI, as well as Le Mans Ultimate performance issues on RX 9070 series GPUs. There are quite a few known issues AMD is still working on: Stutter and lower than expected performance may be observed when using alt-tab and streaming to Discord with multiple monitors. Intermittent application crash or driver timeout may be observed while playing Marvel Spiderman 2 with Ray Tracing enabled on Radeon™ RX 9060 XT. Intermittent application crash may be observed when first launching The Last of Us Part 1 on Radeon™ RX 9060 XT graphics products. Stutter may be observed while playing games with some VR headsets at 80Hz or 90Hz refresh rate on some AMD Radeon™ Graphics Products such as the Radeon™ RX 7000 series. Users experiencing this issue are recommended to change the refresh rate as a temporary workaround. Intermittent system or application crash may be observed while playing Cyberpunk 2077 on some AMD Radeon™ Graphics Products such as the Radeon™ RX 7000 series. Intermittent application crash or driver timeout may be observed while playing Monster Hunter Wilds with Radeon™ Anti-Lag and Instant Replay enabled. Artifacts or corruption may appear while playing Battlefield™ V on Radeon™ RX 7000 series graphics products. Stutter may be observed while playing Call of Duty®: Warzone™ Season 03 ‘Verdansk’ map on some AMD Graphics Products. Stutter and lower than expected performance may be observed while playing 4K resolution YouTube videos in Chromium. Users experiencing this issue are recommended to play videos in full screen as a temporary workaround. Texture flickering or corruption may appear while playing The Elder Scrolls IV: Oblivion Remastered with AMD FidelityFX™ Super Resolution enabled on Radeon™ RX 9070 XT. Users experiencing this issue are recommended to disable AMD FidelityFX™ Super Resolution as a temporary workaround. As for FSR 4, these games are now supported by the popular upscaling tech for gaining more frames: Deadzone: Rogue Rem Survival F1 25 Runescape: Dragonwilds Frostpunk 2 Star Wars Outlaws Legacy: Steel & Sorcery Steel Seed Lords of the Fallen Stellar Blade Planetaries Virtua Fighter 5 R.E.V.O QANGA Wild Assault The complete list of games with FSR 4 support, as well as upcoming implementations, can be found on AMD's support page here. The WHQL-certified AMD Software: Adrenalin Edition 25.6.1 driver can now be downloaded from the AMD Software app as well as the changelog page on its official website here.
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      406
    2. 2
      +FloatingFatMan
      181
    3. 3
      snowy owl
      176
    4. 4
      ATLien_0
      170
    5. 5
      Xenon
      135
  • Tell a friend

    Love Neowin? Tell a friend!