I'm currently stuck on a little bit of math for my project. I'm trying to scale a div in my page based on how close it is to the center of the browser window, so when it is in the center of the window it is full size, but as you scroll down or up it scales down as if to disappear. I'm just struggling on how to calculate this value.
Thanks in advanced,
Harry.
let x and y be the position of your div relative to the browser window
window.innerHeight and window.innerWidth will give you the current visible window height and width.
var w = window.innerWidth;
var h = window.innerHeight;
The center would be
var center = (w/2, h/2);
the distance from the center is:
var distance = Math.sqrt((w/2 - x)*(w/2 - x), (h/2 - y)*(h/2 - y));
Now you want to scale the div so that it's maximum size when its distance from the center is 0 and smaller when it's further away.
The simplest thing to do is to use a width of w - distance and a height of h - distance. That will give you a linear scale, you can use other scaling functions as well, but I'll leave that to you to play with for now. :)
Related
I have seen a few related posts on here but, from what I can understand, non that really fit my use case.
I have been reading this post on how to make a responsive canvas game and have followed the logic in step 1 and 2 and have positioned my canvas in the centre of the screen using the following:
<div id='game-screen'></div>
#game-screen {
position: absolute;
top: 50%;
left: 50%;
translate: transform(-50%, -50%);
}
The div is what contains the canvas created in my Javascript.
I have my canvas width and height different to the "styled" width and height as per this tutorial. My canvas width and height is 1280 x 1024 pixels.
Now the problem I am having is that when binding my mouse move event to the canvas, the event.pageX and event.pageY variables are not proportionate to the scaled canvas. I have taken into consideration the offset left and top but I am unsure as to how I could "scale" the mouse x and y to relate to the canvas aspect ratio?
There seems to be around a 5-20px difference based on the stretched canvas size.
Thank you in advance, I hope this makes sense.
You can use getBoundingClientRect() to get the game screen position into the document. So with a substraction, you can get the relative mouse position.
var gameScreen = document.getElementById('game-screen');
gameScreen.addEventListener('click', function(event) {
var gameScreenPosition = gameScreen.getBoundingClientRect();
var x = event.clientX - gameScreenPosition.left;
var y = event.clientY - gameScreenPosition.top;
alert(x + ' ' + y);
})
Example : https://jsfiddle.net/tzi/2cj8n8xt/
So I have a bunch of divs that are absolute to an overlay. The user creates a square div by dragging on the overlay. If you were to create a div and then zoom in and out, the div stays positioned in the same spot since it is absolute to the overlay as mentioned before.
However here's where the problem is. You are able to save the div location (top, left, height, width) to a .json and load the .json to show all of your previously saved divs. This works fine.... if you save and load on the same browser zoom percentage.
If you were to draw divs on 150% zoom, for example, and try to load the div's position on 100% zoom, the position is altered (as to make up for the zoom I presume).
I tried forcing the window zoom to 100% on save, but that didn't work, and I am kind of stuck now. Does anyone have any suggestions?
Following Alex's advice to use percentages, I was able to come up with a solution that works perfectly.
In the method that sets the top and left of the div - I changed that from pixels relative to the parent to percentage relative to the parent.
So this
{
width = endX - startX;
left = startX;
height = endY - startY;
top = startY;
}
Became this
{
width = endX - startX;
var percentageLeft = startX / parent.offsetWidth * 100;
left = percentageLeft;
height = endY - startY;
var percentageTop = startY / parent.offsetHeight * 100;
top = percentageTop;
}
and then by changing the saving/loading to look for percentages instead of pixels, I was able to make this work!
I want to make scroll bar using two divs with heights of 110px and 10px. The smaller one is inside the tallest one. That gives me room to change the margin-height of the smaller one from 0 to 100px and it will still fit inside the taller one.
In case you wonder, the 0 to 100px is what I meant on the question title by fitting on a scale from 1 to a 100.
What I want to do now, is to figure out how to calculate the ratio to make my 10px height position in relation to the taller div proportional to the document.height ratio to the window.height.
I've been experimenting all night long but haven't got anything functional. Here is some of the code that I have, but I'm erasing all related to what I'm questioning here because I want to hear pure ideas.
Please advice.
var wheight = $(window).height();
var dheight = $(document).height();
document.getElementById("wheight").innerHTML=wheight;
document.getElementById("dheight").innerHTML=dheight;
document.getElementById("sidescrollbtn").style.marginTop = '70px';
http://jsfiddle.net/vinicius5581/2y63xnxa/4/
Calculating to a percentage is pretty easy.
Then scaling the percentage up to the size of the scrollbar is trivial.
var offset = $(window).scrollTop();
$(window).scrollTop(offset + 20);
var wheight = $(window).height();
var dheight = $(document).height();
//yep, this is all there is to it.
var percentualOffset = (offset / wheight) * 100;
//or use dheight. i'm not sure which applies to you
//var percentualOffset = (offset / dheight) * 100;
$("#sidescrollbtn").css("top", percentualOffset);
for a working implementation, see http://jsfiddle.net/2y63xnxa/9/
How do I retain an elements default size when a browser is zoomed in. My goal
is to retain an elements default size and position, no matter how many percentages the users has zoomed in or out.
I have encountered a few useful css properties, transform scale and transform-origin, but I haven't been able to achieve my goal. The scale doesn't match up with the zoom level.
Can someone give me some pointers.
var defaultScale = 1.0;
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
var scale = defaultScale - (zoomLevel - defaultScale);
$('.popup-overlay').css('-webkit-transform', 'scale(' + scale + ')');
When the popup appears, you could measure the width of the browser window, and the popup, then do some math to set the popup's percentage width to the screen. The percentage should be maintained when zoomed.
var popwidth = $('.popup-overlay').width();
var windowWidth = window.innerWidth;
var popercentage = (parseInt(popwidth)/parseInt(windowWidth))*100;
$('.popup-overlay').css('width',popercentage+'%');
I'm trying to create a zoom able image upon click of a button, however the image should be zoomed centered on the view able area, as the image may be bigger than the container.
I've created a fiddle here to illustrate what I want, I'd obviously usually hide the image outside the container, I'm not bothered about that part just now, also put in a border overlay to show the bounds of the container.
I've done the zoom part based on the image ratio, I just need to work out the new top and left css values and apply it to the image after the zoom. Also the image is draggable, so once you move the image it must take into account the position of the image.
Basically, the centrol point of the image within the red container must remain the same after the zoom, so you are effectly zooming in on whatever is at the middle of the container.
http://jsfiddle.net/wFaFg/1/
why do you we need code to link to jsfiddle?
Thanks
edit:
http://jsfiddle.net/FU55w/
getting close with the above fiddle, but still not zooming completely on central point
So I found the solution,
It is slightly more complex than just finding out how much the image increased in size.
I work out the x & y value of the center point of the image within the container, by taking the left and top value, turning it positive then adding half the container width and height.
var x = Math.abs(image.position().left) + container.width() / 2
var y = Math.abs(image.position().top) + container.height() / 2
I work out the ratio of the image scale by dividing the new width by the old width, then I can multiply the x & y value by the ratio.
Then take the difference between the new x and y away from the current left and top.
image.position().left - (newX - x)
image.position().top - (newY - y)
Complete fiddle:
http://jsfiddle.net/fbd2mk5q/
Try the new fiddle based on your comment:
http://jsfiddle.net/wFaFg/6/
$("#zoom").on("click", function(e)
{
var container = $("#container");
var image = $("#container img");
var curLeft = image.position().left;
var curTop = image.position().top;
var ratio = image.height() / image.width();
image.css({
height: image.height() + (20 * ratio),
width: image.width() + (20 * ratio),
left: curLeft - ((20 * ratio)/2),
top: curTop - ((20 * ratio)/2)
});
});