0

I have made a script: http://jsfiddle.net/radar24/XZgh4/ which scales the given dimension into the outer div. everything seems fine, until I enter a dimension such as 200 x 99. then the box grows outside.

I really cannot find the cause of this, can anyone help?

Ryandell
  • 23
  • 4

3 Answers3

1

The problem is that you're not restricting your proportions along both axes. Your box has a height:width proportion of 5:3. If you don't restrict along both axes, you can have bleeding outside of the boxes. An example might show this best.

Take the case of the height being the bigger of the two dimensions. Your code is only restricting it along the 500px axis. Consequently, if we throw a box in there with 5: >3 proportions, you get a creeping edge.

For instance, put "3" and "5" in your boxes. Fits perfectly. Now make it 3.1 and 5. Ruh roh.

You'll need to add another if statement in each section that THEN determines if the dimension ratio goes outside this boundary. In the above case, you'll need to make it so that the height of the 5:3.1 is not 500px, but rather, the height (less than 500px) that would make 3.1 to be equal to 300px. That would be 483px.

Does that makes sense?

If not, I'll try to rephrase again:

Put another set of if statements in the two if statements you already have. These check if, upon setting the LARGER dimension, it makes the SMALLER dimension go outside the bounds of the box in that direction. in pseudocode

if (height > width)
    calculate the height
    calculate the width
    if (width > div.width)
       width = div.width
       height = div.width * aspect;

Just ask me if this isn't clear enough!

Edit: Here's a JSFiddle that gets it right. You'll need to add further code if you want a white border along each edge.

Edit2: Here's the white border come back!

Edit3: You can also try prettying it up and using just aspects to do this. I did the first one for you. Three to go!

jamesplease
  • 12,547
  • 6
  • 47
  • 73
  • Thank you, what I don't understand is with my original fiddle. if I enter 200 x 99 i get unintended results, but if I increase the height by 1 pixel to 200 x 100 it works! this is where I'm getting really confused. I'm sorry, but I'm a little out of my comfort zone with this. but anyway great work, thanks again! – Ryandell Oct 09 '12 at 09:22
  • It has to do with the ratios. There are 'critical values' that change how the code behaves. Firstly, 200x99 was handled by one of the IF statements (the bottom one), while 200x100 was handled by the top. This is an artificial critical point determined by your IF statement structure. Inherent critical points are when the ratios of the aspect and reciprocal of the aspect cross over the aspect and reciprocal aspect of the parent div. Just in principle, if you cross any of those 'critical points' and have code with errors, you should expect that would be the time when the errors reveal themselves! – jamesplease Oct 09 '12 at 14:41
  • Hi James, Its been a long day and I have only just seen that you asked me to put more conditions in the script. I'm sorry but I really can't see what I need to add as an else if. – Ryandell Oct 09 '12 at 22:54
  • No, unfortunately if I enter 45 x 200 it moves out the bottom of the box. I will sit down this evening and try to get a result. I basically need to get this working with other outer box sizes. – Ryandell Oct 10 '12 at 09:59
  • Well, I think we have it sorted, with help from everyone here, it gave me enough info to dig around. this is the fiddle that works: http://jsfiddle.net/radar24/bvLdH/ and info from this old question sorted it code slightly modified from best answer: http://stackoverflow.com/questions/1682495/jquery-resize-to-aspect-ratio – Ryandell Oct 10 '12 at 11:58
0

It's a pretty small mistake. You forgot to convert the width and height to integers before comparing them. So you would need to change if (width >= height) to if (parseInt(width) >= parseInt(height)).

Sidharth Mudgal
  • 4,234
  • 19
  • 25
0

jQuery .val() always return a string you should parse it into integer

changed jsfiddle

....

        height = parseInt($('#height').val()) || 0;// making 0 as default value.
        width = parseInt($('#width').val()) || 0;
....
Anoop
  • 23,044
  • 10
  • 62
  • 76
  • Oh perfect thanks, this looks like I had the logic right. just the wrong datatype I guess? – Ryandell Oct 09 '12 at 09:26
  • Nah man, this doesn't fix the problem. Type 2 and 3 into the boxes. Like I said, there's a problem with your logic. – jamesplease Oct 09 '12 at 15:17
  • @JamesSmith, Yes there was a problem in logic check new jsfiddle http://jsfiddle.net/XZgh4/256/. You were calculating the height using parent width and width using parent height. Let me know Changes I made are correct ? – Anoop Oct 09 '12 at 16:22
  • No, that still isn't correct. Youre not keeping the right aspect with your code. The solution is in my answer. – jamesplease Oct 09 '12 at 16:39
  • what do you want, if enter 2 and 2 then height and width should be same or height and width both should cover entire space of parent? in second case width may exceed the parent width as you are calculating width based on height which is much greater than height. if you want we can chat – Anoop Oct 09 '12 at 16:43
  • As I understand it, the user inputs a proportion that must be expanded or shrunk to fit in a bounding box. In either case, the result cannot flow out of the edges of the bounding box. To do this, you need to compare the proportions and inverse proportions to make sure you don't change the dimensions of the child to shoot out of the parent. The original code, and your solution, only check one of the dimensions. – jamesplease Oct 09 '12 at 18:44
  • Again, the solution I put in my answer already solved the problem. What you just now added is code I wrote yesterday, except provides a worse solution. My code permits users to input `decimal` values, like 3.1, whereas your code forces it to an `integer`. All you've done is first answer the question incorrectly, then use the code in my solution to make it more correct. I haven't fully tested your most recent JSFiddle, but by the looks of it it appears that it still isn't a solution to the problem. – jamesplease Oct 10 '12 at 02:47