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.
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.
RoboForm 9.7.5 by Razvan Serea
RoboForm is the top-rated Password Manager and Web Form Filler that completely automates password entering and form filling. RoboForm makes logging into Web sites and filling forms faster, easier, and more secure. RoboForm memorizes and securely stores each user name and password the first time you log into a site, then automatically supplies them when you return. RoboForm's powerful Logins feature eliminates the manual steps of logging into any online account. With just one click RoboForm will navigate to a Web site, enter your username and password and click the submit button for you.
Completing long registration or checkout forms is also a breeze. Simply click on your RoboForm Identity and RoboForm fills-in the entire form for you. You no longer need to remember all your passwords. You remember one Master Password, and RoboForm remembers the rest. This allows you to use stronger passwords, making your online experience more secure. RoboForm uses strong AES encryption for complete data security.
The all new RoboForm comes with Chrome and Safari browser support, iPhone/iPad and Android support, as well a brand new RoboForm Everywhere license for use on unlimited computers and mobile devices. RoboForm 9.7.5 changelog: Prepared for the upcoming RoboForm browser extension with New Auth.
Download: RoboForm 9.7.5 | 42.1 MB (Free, paid upgrade available)
View: RoboForm Website Get alerted to all of our Software updates on Twitter at @NeowinSoftware
I understand. I am not talking about benchmarks at all, even though I probably should look into those too - I just mean historically Vivaldi was a rather sluggish chromium browser when in use compared to other chromium browsers. I am always willing to give it additional tries whenever performance improvements are mentioned in the patch notes.
Question
jordan.
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
Link to comment
https://www.neowin.net/forum/topic/935436-javascript-determine-length-of-text-in-pixels/Share on other sites
8 answers to this question
Recommended Posts