• 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

    • dBpoweramp Music Converter 2025-06-05 by Razvan Serea Audio conversion perfected, effortlessly convert between formats. dBpoweramp contains a multitude of audio tools in one: CD Ripper, Music Converter, Batch Converter, ID Tag Editor and Windows audio shell enhancements. Preloaded with essential codecs (mp3, wave, FLAC, m4a, Apple Lossless, AIFF), additional codecs can be installed from [Codec Central], as well as Utility Codecs which perform actions on audio files. After 21 days the trial will end, reverting to dBpoweramp Free edition (learn the difference between Reference and dBpoweramp Free, here). dBpoweramp is compatible with Windows 10, 8, 7, Vista, both 32 and 64 bit. dBpoweramp Music Converter features: Convert audio files with elegant simplicity. mp3, mp4, m4a (iTunes / iPod), Windows Media Audio (WMA), Ogg Vorbis, AAC, Monkeys Audio, FLAC, Apple Lossless (ALAC) to name a few! Multi CPU Encoding Support Rip digitally record audio CDs (with CD Ripper) Batch Convert large numbers of files with 1 click Windows Integration popup info tips, audio properties, columns, edit ID-Tags DSP Effects such as Volume Normalize, or Graphic EQ [Power Pack Option] Command Line Encoding: invoke the encoder from the command line DSP Effects - process the audio with Volume Normalize, or Sample / Bit Rate Conversion, with over 30 effects dBpoweramp is a fully featured mp3 Converter dBpoweramp integrates into Windows Explorer, an mp3 converter that is as simple as right clicking on the source file >> Convert To. Popup info tips, Edit ID-Tags are all provided. dBpoweramp Music Converter 2025.06.05 changelog: Darkmode added Core Converter Debug log dumps ID Tags written VST Effect Folders dialog fixed missing InitCommonControls would not show correctly FLAC/Ogg/Opus/etc - allows editing of CDTOC ID Tag CD Ripper secure ripping log where shows TOC was not showing CD Extra correctly CD Ripper was incorrectly setting data track length on main display (for certain drives) CD Ripper internally better handling of corrupt TOCs CD TOC to Tag was incorrectly adding 150 to CD Extra disc CD Ripper shows "AccurateRip Unconfigured" in rip status rather than "not in accuraterip" if unconfigured CD Ripper art paste accepts https CueSheet added as standard - log file written to same folder as cue and folder.jpg AIFF internal code merge (macos >> windows) Download: dBpoweramp Music Converter R2025.06.05 | 82.2 MB (Shareware) View: dBpowerAMP Music Converter Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Staged. It's a requirement that vehicles are strapped down to the bed. Usually wheel and/or chassis tie downs are used. That appears to just be on the winch.
    • I feel Apple's big problem is the lack of big data to train any AI LLM model. They have statistics on usage, but they don't have the written social media, messaging (they were early adopters of end-to-end encryption), they didn't scrape the Internet before the book companies and new sources were wise. So they have no choice but to use a third party LLM provider. Which ties them in knots with their own stance on security and privacy. In short, they are royally stuffed when it comes to developing an in-house AI.
    • Nothing is black and white. Democracy can suck, just as communism can. The risk is people who blindly think one is vastly superior over the other. Democracy needs a lot to make it work well, and there are many examples around the world of it. Good education, mandatory voting, accessible voting, and removing money from politics are just a few elements that need to be sorted for a functional democracy. The USA is the playbook on what not to do with democracy.
  • Recent Achievements

    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
    • Week One Done
      daelos earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      494
    2. 2
      snowy owl
      255
    3. 3
      +FloatingFatMan
      252
    4. 4
      ATLien_0
      225
    5. 5
      +Edouard
      187
  • Tell a friend

    Love Neowin? Tell a friend!