0

EDIT: sorry about the inconsistencies with width and height in my question, it applies to both though.

EDIT 2: I still get an innaccurate value regardless of the zoom, doing this

$('#selector').css('width',$('#selector').css('width')); actually resizes the element.

I have a page element measured in inches. The firefox property inspector states the correct height (8.5in) but using $('selctor').css('width') it returns it in pixels ("815.66666px"). This is problematic for me.

My use case is that I am toggling the size at one point in my script, and I want to be able to set it back to its default size later. In between toggling the size, and setting back to the default, the user may have zoomed the page. Due to firefox (and I think other browsers as well) less-than-perfect unit conversions, I get different round off errors based on the zoom level. For example, changing the zoom to various levels between 25% and 300% on my page yields the following results for the css('width') on the same element:

    >>>   $('#templateDiv0').css('width')
    "815.66666px"
    >>>  $('#templateDiv0').css('width')
    "815.76666px"
    >>>  $('#templateDiv0').css('width')
    "816.33334px"
    >>>  $('#templateDiv0').css('width')
    "816.13334px"

And so when I need to reset it back to the default size later, I have no guarantee that this is the correct size. I really would like it to just return (8.5in) to me. I guess the issue is that jQuery is retrieving it in its own way, and I would want to retrieve it in the way the property inspector does, which is by looking at the style sheet directly. Is there any way to do this?

The stylesheet for the page changes often, so hardcoding the value is not a good solution for me.

chiliNUT
  • 18,989
  • 14
  • 66
  • 106
  • Browser zoom is there for convenience and is not intended to preserve layouts at 100% accuracy. – Diodeus - James MacFarlane Dec 04 '13 at 17:50
  • So how do I work around that? – chiliNUT Dec 04 '13 at 17:53
  • Don't use inches at all. http://css-tricks.com/the-lengths-of-css/ Inches are for print design, not web. – Diodeus - James MacFarlane Dec 04 '13 at 17:57
  • Its a web tool designed to template a printable document, so using inches for all elements and sub elements makes sure the preview is exactly proportional...I guess I could just convert everything to pixels before hand to preserve the proportions... – chiliNUT Dec 04 '13 at 18:00
  • If you want web pages to print perfectly, you're better off generating them as a PDF on the server. Print fidelity varies widely across browsers. – Diodeus - James MacFarlane Dec 04 '13 at 18:09
  • It actually has nothing to do with printing, the print copy is rendered independantly, this simply lets them template it and passes on their values to the renderer. Its just that the web tool must look as close to the print copy as possible – chiliNUT Dec 04 '13 at 18:31
  • I figured out a way to do this without using the width and height. I was using it to move the elements out of view, I am using .show() and .hide() instead. – chiliNUT Dec 04 '13 at 19:44

2 Answers2

1

Have you thought about storing the width of the element onReady, then when you click return to default, set the width back to the width you stored onReady.

Nemesis02
  • 292
  • 2
  • 9
  • thats exactly what I'm doing, the problem is that the width that jQuery reports is unusable. Setting it back to the width from onready results in a differently sized element than the original. – chiliNUT Dec 04 '13 at 17:53
  • Is that before or after a zoom? Cause you could possibly disable the browser zoom functionality http://stackoverflow.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery – Nemesis02 Dec 04 '13 at 17:57
  • I need the user to be able to zoom. Also, I just found out it happens regardless of zooming. – chiliNUT Dec 04 '13 at 17:59
  • You maybe running into margin/padding issues in your html/css. – Nemesis02 Dec 04 '13 at 18:07
1

I have 1366*768pixels on my 13inch screen so 1inch = (1366*768pixels/13)px = 80699.07px; 1px = 13/(1366*768) inches = 1/80699.07 inches

unfortunately screen size is not given by api, so if you know the screen size then you can: 

var size = 13;
var width =  $('#templateDiv0');
var widthInches = width * size/(window.screen.width * window.screen.height)
Saad Ahmed
  • 1,077
  • 9
  • 9