box to keep proportion when scaling with javascript - javascript

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?

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!

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)).

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;
....

Related

How to set minimum width/height on a fabricjs object?

I've been seen a lot of questions and answers about this but i didn't find anything doing the exact same thing as questioned.
I need a fabricjs object to can be transformed freely anytime but also set a minimum width and height (for example 50px) where the user can't reduce the size more than those parameters.
I've been trying this:
rect.minScaleLimit = 0.5;
But the canvas does not interpret the code line as wanted. If you stablish the minScaleLimit as "2", the rectangle will be setted as double size when you try to move it (and so with numbers bigger than 1, it just multiplies the size with the variable value). And if you set the variable to less than 1 it just does nothing...
Anyone with soulitions?
Thank you

Javascript - Get real letter width and height (without line-height)

In Adobe Illustrator (or Photoshop)
Letter A
Font-family: Arial
Font-Size: 396.55pt
Measures:
- Width: 93.8mm (266px)
- Height: 100.2mm (284px)
Measuring in Javascript:
- Width: 265px (matches, is correct)
- Height: 456px (NOT match, grabs the line height, and it is wrong)
How I can get the EXACT height of the letter?
// 6pt ---------------- 8px
// 96px --------------- 25.4mm
var arial_A_upper_pt = jQuery("#arial_A_upper_pt").html();
jQuery("#arial_A_upper").html("A");
jQuery("#arial_A_upper").css("font-size", arial_A_upper_pt + "px");
var arial_A_upper_width_on_px = jQuery("#arial_A_upper").width(); // on PX
// var arial_A_upper_width_on_mm = ((arial_A_upper_width_on_px * 25.4) / 96);
// arial_A_upper_width_on_mm = arial_A_upper_width_on_mm.toFixed(2);
jQuery("#arial_A_upper_width").html(arial_A_upper_width_on_px + "px");
var arial_A_upper_height_on_px = jQuery("#arial_A_upper").height(); // on PX
// var arial_A_upper_height_on_mm = ((arial_A_upper_height_on_px * 25.4) / 96);
// arial_A_upper_height_on_mm = arial_A_upper_height_on_mm.toFixed(2);
jQuery("#arial_A_upper_height").html(arial_A_upper_height_on_px + "px");
Example: http://jsfiddle.net/7Cunp/6/
I need this: http://www.javiscript.es/desarrollo/letrascortadas/img/letter_size.jpg
That is a question, that is not easily answered. I can pretty much guarantee that there isn't a property you can call to get the value.
First off, the data is embedded in the font-file, and is probably not accessible by JS (please correct me if i'm wrong). Second the value differs in just about every font-file.
However, you can use a little math to get a close approximation on the size.
The size of a letter is measured from the ascenders top to the descenders bottom. Also called the EM. This is both used horizontally and vertically. The size of the uppercase letters are sometimes generalized as being 2/3 of the EM.
So, since jQuery returns the height wrongly, but the width correctly.(the EM-size, not the actual width of the letter, if you measure it :D) I would do something like this:
var EM_height = jQuery("#arial_A_upper").width()
var uppercase_height = Math.floor(EM_height / 3 * 2)
JS isn't my strong side, so someone can probably tell, if there is a better way.
You can get a better value, if you know it will only be used on a specific font such as Arial.
For example. 72pt Arial measures 51.37pt on the uppercase A on my computer.
51,37/72 = 0,713472222 so that is the ratio you need to come up with. so 7/10 is probably a good suggestion.
Hope that helps a bit.
Actually you'll never get the exact results in browser as in Photoshop or Illustrator.
Every browser renders fonts in its own way. (http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari).
In your case the most closer variant will be to put the line height the same as the font size.
jQuery("#arial_A_upper").css("line-height", arial_A_upper_pt + "px");
Because browser sets by default "normal" line height that is bigger than the font size so the height is much more bigger than it should be. But even if you'll put the line-height the same as font size you'll get the bigger result then it should be. (397px)

Zoom-in and Zoom-out image when Mouse Scroll

I want to zoom-in and zoom-out image on mouse scroll in HTML. There are multiple img tag without ID. So how can I do it using JavaScript or Ajax?
Just throwing the answer for the ones that will search for an answer to this question.
First, you will need to find a system to detect the mouse scroll.
If you are courageous, you can develop it yourself.
If you're not, you can find some pretty good libraries (ex : MouseWheel with JQuery).
Next, you will find another two ways to zoom in and out.
Easy way
First, let's cheat a bit.
When you will have to zoom, just multiply the height and width of your image by a factor you will decide.
To have height and width into a variable (JQuery)
var height = $('#image').height();
var width = $('#image').width();
For each scroll you will receive, you will only have 2 choices.
Once you are able to know if the mousewheel goes up or down, you will just have to do something like this (JQuery)
height *= 2;
width *= 2;
This way, by doubling the size of your image, you will have the impression to zoom in.
Less easy way
If you want to zoom in as you would do in a GMap object, you can do something like that.
var firstHeight = $('#image').height();
height *= 2;
width *= 2;
scalechange = (actualHeight / firstHeight) - 1;
offsetX = -(coordX * scalechange);
offsetY = -(coordY * scalechange);
$("#image").css('top', offsetY + 'px');
$("#image").css('left', offsetX + 'px');
First, you have to have the first height of your image.
Next, you will double the size of your image (zoom effect).
Next step is to calculate the scalechange. You will be able to find multiple explanations and many way to calculate it, my method is as good as another.
The two offsets presented are the new positions that your image will adopt (simple factor calculation, it's like making x percent on a price).
Last part is to set the new values of your image.
In the end, you will be able to zoom and unzoom with ou without centering the image at your mouse position.
Be careful : The calculation above in only to zoom-in. You will have to do some maths to get the zoom-out!
Go further ?
Another way to go further would be to place your image in a div.
<div id="imageContainer" style="overflow:hidden;">
<img id="image" src="YourImage">
</div>
By setting
"overflow:hidden;"
to your div, your image will zoom.
But everything that will overflow your div will be hidden.
If you set your div to the original size of your image, like this (JQuery)
$("#imageContainer").css('height', $('#image').height());
$("#imageContainer").css('width', $('#image').width());
Then you will have an image displayed that will always be at the same size, but your zoom will be effective.
If you combine this to a drag'n'drop method, you have a GMap object-like (zoom in-out, moove the zoomed image, ...)
Hope it will help someone!

How to create CSS/JavaScript circles grid

I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.

Convert HTML element non-px dimensions to px in (IE issue)

I'm trying to get border width of a particular element.
Getting border width style setting is pretty easy by simply reading if from current calculated style of an element:
var styles = (
document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(de, null) :
de.currentStyle
);
Reading a particular border value is then rather simple by:
var top = styles.borderTopWidth;
var value = parseFloat(top);
This is all fine and dandy (as long as you don't use IE) and I can get top border width in the value variable. But this number relates to pixels only when border width was set in pixels. If it wasn't (was em for instance) than value has the number of that particular dimension.
I have to get an answer to any of these two questions:
How do I always get border width in pixels?
How do I calculate different units into pixels?
Example
I've prepared a jsFiddle example where you can see various dimensions reported by DOM and jQuery. Run it in different browsers and you'll see the difference in IE. All dimansions in Crome are in integer values while Firefox calculates margin and padding in floats while border in integers.
BTW: Margin, border and padding are all set to 2mm.
Most libraries solve this problem for you, as does YUI3 for example.
If you don't want to use those libraries, then at least you can peak at how they do it ;)
http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html
Awnser contained therein.
You can generally get computed pixel sizes using element.offsetWidth and element.offsetHeight. This is somewhat sensitive if you want to support a range of browsers. In that case, use a library. For example, using jQuery you can get guaranteed pixel dimensions with something like this: jQuery("#theID").width().

Categories

Resources