We Keep Coding

Find the common height for 3 (or x number) images that their widths equal the set width of container element

Similar to Flickr's photo layout (https://www.flickr.com/search/?text=iceland%20westfjords) I am trying to find the common height that any given, for simplicity's sake, 3 photos in one container row would have to be in order for them to maintain their aspect ratio and fill a fixed width exactly. There is a common height that all images can grow to so that when their widths are added together equal an exact desired amount.
One easy way I achieved this was just guessing and checking in the browser. Incrementing the style height of the images using one decimal place such as 416.6px. The browser calculated the correct widths for each image without distorting them and eventually fit the width of the container (1200px).
But my problem is I have thousands of images of inconsistent aspect ratios and combinations of those in each set of 3, otherwise I'd just use css to set the height of 3 photo combinations (9 styles).
So I think what I need to do is in Javascript I need to test the 3 photos, find their aspect ratio (i have the original dimensions of each photo as data from the API), and find the common height given the clientWidth of the container row they share. I need to do this for each row (set of 3 images).
The best solution I've come up with so far is to take the original dimensions of each photo, multiple height by width to get the aspect ratio. Then guess at a common height for all the photos, say 500.5px, and divide that by each photo's aspect ratio to get the new widths of each photo. Then add the widths up to see if they total the container width, say 1200px. But this seems like I'd need to do some kind of binary search to find the common height quickly.
Can anyone think of a better algorithm that can solve directly for the common height of 3 photos, given their aspect ratios, that they would need to be in order to fill a fixed width exactly? Height has no constraints.
Thanks!

Given an image of original height h and original width w, the resulting width w* for a given height h* (preserving aspect ratio) is:
w* = w/h * h*
Here, w/h is the aspect ratio of the image. Then, it's just a matter of solving the equation:
w_total = w1* + w2* + w3*
= (aspect1 + aspect2 + aspect3) * h*
And you get the optimal height for all images:
h* = w_total / (aspect1 + aspect2 + aspect3)

How to recalculate x,y coordinates based on screensize

I'm have a heat map application and store I store the x,y coordinates of a click and also the viewport width and height. Real data for 2 clicks:
x, y, width, height
433, 343, 1257, 959
331, 823, 1257, 959
The issue is when I resize the screen on the responsive site, the displayed clicks are now all off. I'm coming up empty on my searches but is there a formula or algorithm to recalculate the x and y coordinates for different resolutions. For example, the first click, if the width goes from 1257 to 990 and the height goes from 959 to 400, how to I recalculate the x and y so they line up in the same spot?
EDIT:
I added 2 fields to the database, width_percentage and height percentage
to store the x percentage of the width and the y percentage of the height. So if x was 433 and the width of the screen was 1257 then x was 35% from the left edge of the screen. I then used the same theory for the height and ran the calculations but it did not scale the click dot to the same spot as I though the percentages would do for scaling resolutions. I testing this by clicking on full resolution 1257 width then reopening at 900 width. See below for code to display click dots at lower resolution.
Ajax PHP
while ($row = mysql_fetch_array($results)) {
if( $_GET['w'] < $row['width'] ) {
$xcorr = $row['width_percentage'] * $_GET['w'];
$ycorr = $row['y'];
}
}
This uses the $_GET variable, passing the width and height of the screen resolution on page load. Then it gets the click dots from the database as $results. Since I only scale the resolution width from 1257 to 900 I did not put in calculation for height and its the same pixel as the initial click. The new width I multiplied by the percentage and set the dot that percentage margin from the left of the screen. Since the percentage is 35%
the new x coordinate becomes 900 *.35 = 315px from the left edge. It did not work and I'm still scratching my head on head to keep click in the same spot for responsive sites.

Have you tried this mathematical formula to change the range of a number?
And also instead of storing this:
x, y, width, height
433, 343, 1257, 959
331, 823, 1257, 959
You could store it normalized between 0 and 1 so it works for any width/height (calculated by dividing each x by its width and each y by its height):
x, y
0.344, 0.357
0.263, 0.858
Then you don't need to know the width/height you used when you stored them, and when you want to translate them to the size of the current screen you just multiply each one by the current width/height

You can acheive this by jquery:
$( window ).resize(function() {
//ur code
});
javascript
window.onresize = resize;
function resize()
{
alert("resize event detected!");
}
if you are working on mobile devices use this one also
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});

I think you are on the right track with the percentages. Are you including the offset of the map image. I wonder if your algo is working but the visual representation appears wrong because the offset is changing in the viewport.
$(window).resize(function() {
var offset = yourMap.offset();
myLeft = offset.left();
myTop = offset.top();
});
You need to add the offsets every time to get the proper placement.

This is what you should do. Sometimes the resize event fires when the document is being parsed. It is a good idea to put the code inside an onload event function. The orientation change function is taken from #Arun answer.
window.onload = function() {
$(window).on("orientationchange", function(event) {
alert("Orientation is: " + event.orientation);
});
window.onresize = function() {
alert('window resized; recalculate');
};
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

for this you need to do some calculation. Here is the function which will return new x and y potion based on the height and width
function getNewX(xVlaue, oldWidth, newWidth){
return xVlaue * newWidth / oldWidth;
}
newX = getNewX(10, 150, 100); // Use
You can use the common function for height and width calc.
DEMO

The whole question highly depends on the page you want to use this on.
Most pages have a centered block and/or some self-resizing (read "responsive") elements. If the page is not very responsive, e.g. having a fixed width, you have an easier job. If the page is centered, you might want to save the cursor's X-position relative to the center of the page. this way the window width doesn't matter. The same also applies to left- and right aligned pages of course - in this case you would save the X-pos relative to the left or right edge of the window respectively.
The following image shows a center-oriented click position. Note that the x- and y properties of the click don't change here if you resize the window.
Now to the more generic methods
If you save the window dimensions, the cursor position AND the scroll offsets on every click, you will most probably be able to reproduce it alongside the layout, but you'll need to reproduce it for every unique dimensions set. If you used the trick from above you might be able to overlay all layouts and find a common denominator. For example, if your page is centered in the window, has a max-width, and you saved the X-pos relative to the center of the window, you can overlay all clicks that happened in windows that were at least that width.
You could do some trickery however, and save the clicked elements alongside the informations you already do save. If you also save the click position relative to the element, you can evaluate this data to something like "the submit button is rather pressed on the bottom right side" or "people often click on the far end of that drop-down and sometimes mis-click by a few pixels".

Try both of the following:
1. Padding and margins might not scale. Use "* {padding:0;margin:0}" at the end of your stylesheet and check if that fixes it.
2. Ensure outer and inner (that means all) elements scale. Any single element failing to scale will make many other elements fall out of place. This generally happens with text inputs. Use "*{border:solid 2}" at the end of your stylesheet to visually observe the effect of scaling on each element.
I'm sure your problem will be resolved.

Raphael JS detect canvas size when set as %

I am using Raphael JS, and create a canvas with width set at 100% of the container like so...
// there is a `div` with id `paper`
paper = Raphael('paper', '100%', '100%')
paper.circle(50, 40, 100)
Now I want to know how big the canvas is. how can I reliably find out the canvas size on all platforms?
I am not using jQuery.
Update: Potential workaround
Bonus points will be awarded for a solution that makes getting pixel width unnecessary, by making cavas scale proportionally. I am fairly sure this is possible with canvas so assume it is possible with Raphael, so that if I create all elements to a set width (say 100 pixel wide canvas) then I should be able to scale the canvas to 100% of the screen, and the canvas should fill the screen, with all elements stretched appropriately, and keeping their proportions.

You can use the viewbox in order to scale to fit in full screen mode.
http://raphaeljs.com/reference.html#Paper.setViewBox
You define a physical region (x, y, width, height) that contains your svg data, and everything will be scaled up while maintaining the proportions. The viewbox region is upscaled proportionally (when you specify false for fit) to the maximum size it can be inside the container.
paper.setViewBox(0, 0, 100, 100, false);​
Unfortunately, Raphael doesn't seem to give you the option of specifying how the overflow is handled. For example, you might wish to centre the view box so that any excess is spread evenly. If you have a 100 x 200 container and you have a 100 x 100 viewbox, then you have 100 pixels in height below the upscaled viewport, when you may wish for the viewport to have 50 pixels above and 50 pixels below.
In SVG these options are defined on the SVG container's preserveAspectRatio property. If you are not supporting the VML (lte ie8) option then you could change this property to affect the alignment.
http://premsobel.info/notes/ml/svg/viewports.html
As for detecting width and height in general, you are better off detecting the width or height of the parent node using element.clientWidth and element.clientHeight. I tend to avoid using body as the parent node and add my own inner container for detecting the size. Your canvas is 100% width/height of some container, so I would go looking for that container to find out what size it is.

Stretching a Graph to Fill the Canvas Element in JavaScript

Quick question involving javascript canvas... I have a set points (connected with a line) I want to graph on a 400x300 canvas element. I will constantly be adding more points. I need the line to stretch to fill the entire canvas (leaving no unnecessary space).
Example:
into this:
Thanks! C.Ruhl

You want to find the step by doing canvasWidth / (number of points - 1)
and adding X += step each time.
Example here:
http://jsfiddle.net/pDDTQ/

Distinguish between internal canvas size and visible size. 400x300 is your visible size and set by style="width:400px; height:300px". Everytime there is new point (e.g. 400,500) you set canvas.width=400; canvas.height=500; and replot the whole graph. From a certain point you might want to adjust the width of the line.

Adding a scroll-bar to the raphael canvas

I am able to generate the raphael diagram , but it is exceeding the specified width and height of the Raphael canvas.
How can i add a scroll-bar to the Raphael canvas to accommodate the entire diagram within the given width and height of the Raphael canvas?
Are there any other ways or workarounds to handle the above case?
Please help. Thanks in Advance.

I was running into a similar case, and I found a way that works, although it's a bit kludgy. My first try was setting a height and overflow:auto on the container div, along with setting the Raphael paper height to 100%. However, this didn't work; it appears that if you set the paper to 100%, it grabs the height of the div as it is before the chart is inserted, so that's no good.
However, a workaround is to do the following, assuming that the container div has an id of "holder", that I need the scrollable area to be 100px high, and that the Raphael paper object should be 800px wide:
var paper = Raphael('holder', 800, '100%');
// add your graphics to the paper object here
var height = $(paper.canvas).outerHeight();
paper.setSize(800, height);
$(paper.canvas).parent().height("100px");
I used jQuery to get and set the heights, but you could do that however you wish. The important point is to not set any restrictions on the height until after you've already created all the Raphael objects, then set the height of the paper object and the containing div to whatever you wish.
Note that if you simply want everything to show up, and don't need to fit the graphic into a specific height using scroll bars, you can just pass 100% as the height to the paper constructor, and forget everything after the first line of the sample above.