CODEWITHSUNDEEP
javascripthtml
fearofawhackplanet
fearofawhackplanet

Reputation: 53466

html/javascript precision on numeric style values

see the following example:

<script language="javascript" type="text/JavaScript">
function testPrecision() {
    document.getElementById("test").style.left = "30.176283764px";  
    alert(document.getElementById("test").style.left);
}
</script>

<div id="test" style="left:20px; width:100px; height:100px; background-color:Red;" onclick="testPrecision();"></div>

why does the style number get rounded, and is there any way to avoid this?

Edit - to clarify: I'm not trying to display 0.1 of a pixel, I'm not that stupid :) The values are set on the server and represent very precise numbers in the data. It doesn't matter that they aren't displayed exactly, but the user can interact with the data clientside by manipulating various DOM elements, and I need to be able to retrieve these precise numbers on postback. I was hoping I could avoid rewriting the app to use lots of hidden fields instead, but it looks like maybe not.

Upvotes: 0

Views: 276

Answers (2)

MillsJROSS
MillsJROSS

Reputation: 1239

Technically speaking, a pixel is the smallest available image on your screen. The only way, I can think of to avoid your problem, is to round the pixel to a whole number before you set it as the css left. That way, at least, all browsers will be given the same value.

EDIT ->

Given your updated information. You don't necessarily have to add hidden fields. Just make a JavaScript object that stores your data and the stores which element your data represents.

var divs = [
    {number: 3.3333949, id: "some_id"},
    {number: 1.23456, id: "some_id2"}];

This is an array of objects that contain your precise number, and the id of the div you want an association with. There's many other ways you can store the data, though, this is just a quick example. That said, there's nothing wrong with using hidden elements, if it makes it easier to send back information to the server through a form.

Upvotes: 3

AutomatedTester
AutomatedTester

Reputation: 22438

Each browser seems to do its own rounding on this. John Resig, of jQuery fame, explains it really well here.

http://ejohn.org/blog/sub-pixel-problems-in-css/

Upvotes: 1

Related Questions