• 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

    • Amazon lays off more staff across Goodreads and Kindle divisions by Hamid Ganji Dozens of Amazon employees working on the retailer's book divisions have been laid off. As reported by Reuters, Amazon confirmed that it's cutting jobs across the Goodreads review site and Kindle units, which impacts fewer than 100 workers. Amazon says the recent layoffs across Goodreads and Kindle divisions are meant to improve efficiency and streamline operations. The giant retailer has constantly reduced staff across various divisions over the past few years. According to CEO Andy Jassy, reducing headcounts helps the company to eliminate bureaucracy. "As part of our ongoing work to make our teams and programs operate more efficiently and to better align with our business roadmap, we've made the difficult decision to eliminate a small number of roles within the Books organization," an Amazon spokesperson said. Layoffs recently impacted employees in Amazon's Wondery podcast division, devices and services units, communications, and in-store staff. However, Amazon's Q1 results show the retailer has added about 4,000 jobs compared to Q4 2024. After the Covid pandemic settled down, many companies began laying off thousands of staff they hired during the pandemic to respond to growing demands. The layoff trend among tech firms still exists today, and AI has amplified it. The latest data shows that in 2025, about 62,832 tech employees were laid off across 141 tech companies. Also, 152,922 tech employees across 551 companies were laid off in 2024. More layoffs are expected to occur due to declining economic growth, tariffs, and the expansion of AI across companies. Amazon is also gearing up to double down in AI investments and robotics. The company has recently announced the forming of a new agentic AI team to develop an agentic AI framework for use in robotics. Also, a new report by The Information indicates that Amazon has begun testing humanoid robots for package delivery.
    • Major Privacy 0.98.1.1 Beta by Razvan Serea MajorPrivacy is a cutting-edge privacy and security tool for Windows, offering unparalleled control over process behavior, file access, and network communication. It is a continuation of the PrivateWin10 project. By leveraging advanced kernel-level protections, MajorPrivacy creates a secure environment where user data and system integrity are fully safeguarded. Unlike traditional tools, MajorPrivacy introduces innovative protection methods that ensure mounted encrypted volumes are only accessible by authorized applications, making it the first and only encryption solution of its kind. MajorPrivacy – Ultimate Privacy & Security for Windows key features Process Protection – Isolate processes to block interference from unauthorized apps, even with admin privileges. Software Restriction – Block unwanted apps and DLLs to ensure only trusted software runs. Revolutionary Encrypted Volumes Secure Storage – Create encrypted disk images for sensitive data. Exclusive Access – Unlike traditional tools, only authorized apps can access mounted volumes—blocking all unauthorized processes. File & Folder Protection – Lock down sensitive files and prevent unauthorized access or modifications. Advanced Network Firewall – Control which apps can send or receive data online. DNS Monitoring & Filtering – Track domain access and block unwanted sites (Pi-hole compatible filtering coming soon). Tweak Engine – Disable telemetry, cloud integration, and invasive Windows features for better privacy. Why MajorPrivacy? Kernel-Level Security – Protects at the deepest system level. Unmatched Encryption Protection – Keeps mounted volumes safe from all unauthorized access. Full System Control – Block, isolate, or restrict processes as needed. Enhanced Privacy – Stops Windows & apps from collecting unnecessary data. Perfect for privacy-conscious users, IT pros, and anyone who wants total system control. Major Privacy 0.98.1.1 Beta changelog: The 0.98.1 release of MajorPrivacy introduces significant enhancements and a number of critical fixes aimed at improving usability, localization, and system integration. A major new feature is the introduction of full translation support, allowing the application interface and tweaks to be localized into multiple languages. Initial translations include AI-assisted German and Polish versions, a community-contributed Turkish translation, and Simplified Chinese. Users interested in contributing translations or adding new languages are encouraged to participate via the forum. This version also improves compatibility and deployment by bundling the Microsoft Visual C++ Redistributable with the installer, which is required for the ImDisk user interface. Several important bugs have been resolved. The installer now correctly removes the driver during uninstallation. Tweak definitions have been cleaned up for better consistency. A number of networking issues were addressed, including failures related to network shares and incorrect handling of mapped drive letters. It is now required to use full UNC paths for defining rules involving shared resources. Additionally, configuration persistence issues on system shutdown have been fixed, as well as problems affecting protected folder visibility and rule precedence involving enclave conditions. Finally, the underlying driver code has been refactored, laying the groundwork for better maintainability and future enhancements. MajorPrivacy-v0.98.1.1.exe (0.98.1a) hotfix for #71 Download: Major Privacy 0.98.1.1 Beta | 47.4 MB (Open Source) View: MajorPrivacy Home Page | Github Project page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • OpenAI responds to The New York Times' ChatGPT data demands by Pradeep Viswanathan The New York Times has sued OpenAI for the unauthorized use of its news articles to train large language models. As part of the ongoing lawsuit, the NYT recently asked the court to require OpenAI to retain all ChatGPT user content indefinitely. The NYT's argument is that they may find something in the data that supports their case. Brad Lightcap, COO of OpenAI, wrote the following regarding the NYT's sweeping demand: OpenAI has already filed a motion asking the Magistrate Judge to reconsider the preservation order, since indefinite retention of user data breaches industry norms and its own policies. Additionally, OpenAI has also appealed this order with the District Court Judge. Until OpenAI wins its appeal, it will be complying with the court order. The content defined by the court order will be stored separately in a secure system and will be accessed or used only for meeting legal obligations. Only a small, audited OpenAI legal and security team will be able to access this data as necessary to comply with our legal obligations. As of early 2025, ChatGPT has over 400 million weekly active users, and this data retention order will affect a significant number of them. OpenAI confirmed that ChatGPT Free, Plus, Pro, and Teams subscription users, and developers who use the OpenAI API (without a Zero Data Retention agreement) will be affected by this order. ChatGPT Enterprise, ChatGPT Edu, and API customers who are using Zero Data Retention endpoints will not be affected by this court change.
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      239
    3. 3
      snowy owl
      211
    4. 4
      ATLien_0
      211
    5. 5
      Xenon
      157
  • Tell a friend

    Love Neowin? Tell a friend!