{"action":"created","issue":{"url":"https://api.github.com/repos/HubSpot/odometer/issues/106","repository_url":"https://api.github.com/repos/HubSpot/odometer","labels_url":"https://api.github.com/repos/HubSpot/odometer/issues/106/labels{/name}","comments_url":"https://api.github.com/repos/HubSpot/odometer/issues/106/comments","events_url":"https://api.github.com/repos/HubSpot/odometer/issues/106/events","html_url":"https://github.com/HubSpot/odometer/issues/106","id":104970629,"number":106,"title":"Animating currency with leading or trailing 0s (Includes workaround)","user":{"login":"adamschwartz","id":154613,"avatar_url":"https://avatars0.githubusercontent.com/u/154613?v=3","gravatar_id":"","url":"https://api.github.com/users/adamschwartz","html_url":"https://github.com/adamschwartz","followers_url":"https://api.github.com/users/adamschwartz/followers","following_url":"https://api.github.com/users/adamschwartz/following{/other_user}","gists_url":"https://api.github.com/users/adamschwartz/gists{/gist_id}","starred_url":"https://api.github.com/users/adamschwartz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adamschwartz/subscriptions","organizations_url":"https://api.github.com/users/adamschwartz/orgs","repos_url":"https://api.github.com/users/adamschwartz/repos","events_url":"https://api.github.com/users/adamschwartz/events{/privacy}","received_events_url":"https://api.github.com/users/adamschwartz/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2015-09-04T21:09:48Z","updated_at":"2017-03-28T07:55:55Z","closed_at":null,"body":"We get a lot of questions about currency formatting, leading and trailing 0s, etc.\n- How can I animate from  **$000.00** to **$012.30**?\n- How can I animate from **0.00** to **0.50**?\n- How can I animate from **00000** to **01234**?\n- How about other currency symbols?\n- etc.\n\nThe workaround below seeks to temporarily address all of these concerns and more.\n\n---\n### [Here’s the result.](http://jsfiddle.net/adamschwartz/ooa69qfu/)\n\n<img width=\"100\" alt=\"screen shot 2015-09-04 at 5 03 04 pm\" src=\"https://cloud.githubusercontent.com/assets/154613/9694455/d78e9cce-5326-11e5-8a59-8d65ebbaee01.png\"> &nbsp;&nbsp; <img width=\"100\" alt=\"screen shot 2015-09-04 at 5 02 17 pm\" src=\"https://cloud.githubusercontent.com/assets/154613/9694454/d78d0d00-5326-11e5-93af-575790e1ce1a.png\">\n### How does this work?\n\nThere are a number CSS tricks involved to make this work, but the basic idea is simple: add digits before and after the number you want to animate, and hide them with CSS.\n\n_Here’s how the example above works:_\n\nThe goal is to animate from **$000.00** to **$012.30**, so instead we add a digit to the front and back, telling Odometer to animate from **1000.001** to **1012.301**.\n\nTo get the third decimal point to show, we change the default formatting option from `'(,ddd).dd'` to `'(,ddd).ddd'`, with this JS:\n\n``` JS\nwindow.odometerOptions = {\n  format: '(,ddd).ddd'\n};\n```\n\nNext, we hide the first and last digits, and the formatting comma, with this CSS:\n\n``` CSS\n.odometer .odometer-inside .odometer-digit:first-child,\n.odometer .odometer-inside .odometer-formatting-mark:nth-child(2),\n.odometer .odometer-inside .odometer-digit:last-child {\n    display: none\n}\n```\n\nFinally, we add the trailing “$” with a CSS pseudo element:\n\n``` CSS\n.odometer .odometer-inside:before {\n    content: \"$\"\n}\n```\n\nAdditional, in this particular example, we added these styles for a large-green-money aesthetic (although none of this was required):\n\n``` CSS\n.odometer {\n    font-size: 100px;\n    color: #27B157\n}\n\n.odometer .odometer-inside:before {\n    display: inline-block;\n    vertical-align: sup;\n    opacity: .6;\n    font-size: .85em;\n    margin-right: .12em\n}\n```\n\n**And that’s it!**\n\nAgain, please note, this is implemented entirely using CSS tricks and is not the official solution to these issues. It is only intended as a temporary workaround until we can solve these formatting issues in a better way. But I sincerely I hope it helps people out in the meantime.\n"},"comment":{"url":"https://api.github.com/repos/HubSpot/odometer/issues/comments/289692472","html_url":"https://github.com/HubSpot/odometer/issues/106#issuecomment-289692472","issue_url":"https://api.github.com/repos/HubSpot/odometer/issues/106","id":289692472,"user":{"login":"dynamitemedia","id":6036145,"avatar_url":"https://avatars3.githubusercontent.com/u/6036145?v=3","gravatar_id":"","url":"https://api.github.com/users/dynamitemedia","html_url":"https://github.com/dynamitemedia","followers_url":"https://api.github.com/users/dynamitemedia/followers","following_url":"https://api.github.com/users/dynamitemedia/following{/other_user}","gists_url":"https://api.github.com/users/dynamitemedia/gists{/gist_id}","starred_url":"https://api.github.com/users/dynamitemedia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dynamitemedia/subscriptions","organizations_url":"https://api.github.com/users/dynamitemedia/orgs","repos_url":"https://api.github.com/users/dynamitemedia/repos","events_url":"https://api.github.com/users/dynamitemedia/events{/privacy}","received_events_url":"https://api.github.com/users/dynamitemedia/received_events","type":"User","site_admin":false},"created_at":"2017-03-28T07:55:55Z","updated_at":"2017-03-28T07:55:55Z","body":"i cant get this to work...  i just want to do 00.00   to say 56.20\r\n\r\nhow can i keep the zero on the end?"}}
{"actor":{"display_login":"dynamitemedia"}}