problem with converting Pixel to Viewport units using Javascript - javascript

I want to convert px to the viewport units (vh and vw). So I used these with no success?
var newWidth = yourElement.outerWidth / document.documentElement.clientWidth *100;
var newHeight = yourElement.outerHeight / document.documentElement.clientHeight *100;
I just get NaN.
I put my calculation in a timeout to be sure I'm selecting the element only when it's rendered.
How can I convert px to viewport units correctly?

yourElement.offsetWidth should work for you
Check out this answer to identify the sizes properly: How do I retrieve an HTML element's actual width and height?

Related

How can I measure the width and height of a rotated element on Javascript?

There is a bug with my design interface where the width and height of my selected div are false when rotated.
Here's a schema of what I have and another one of what I want.
I want to find the formula using Javascript, how can I possibly write it ?
PS : I already have the angle, the width and the height of the first schema, no need to calculate it again.
Width and height are not changing, when rotate the element .its also the same see the snippet .get the value via dom use with
offsetWidth
offsetHeight
var rot =document.getElementById("rot");
console.log(rot.offsetWidth,rot.offsetHeight)
#rot{
width:100px;
height:40px;
background-color:pink;
transform:rotate(30deg)
}
<div id="rot"></div>
If it is equations you need, Then here you go.
w-y*sin(theta) = x*cos(theta)
h-y*cos(theta) = x*sin(theta)
Where,
w = given width
h = given height
x = width you need
y = height you need
theta = angle
A little trigonometry goes a long way.
Solving this simultaneous equation gives me -
2x = (w+h)/(cos(theta)+sin(theta)) + (w-h)/(cos(theta)-sin(theta))
2y = (w+h)/(cos(theta)+sin(theta)) - (w-h)/(cos(theta)-sin(theta))
Feel free to convert to Math functions.

Trying to get div dimensions in vh/vw instead of pixels

I'm trying to have resizable divs in my app. To do so I have to persist the changes that the user specified in my database.
My question is how do I change the units given to me from px to something else? When I do:
console.log(event.target.style.width)
it shows me the width in px. Is there any way to get it in, say, % or vh/vw?
How about:
event.target.style.width / document.documentElement.clientWidth * 100
Divide the width in pixels by the total viewport width, then multiply by 100 to get a percentage.

Find size for container with x rows, y columns defined maxWidth and defined maxHeight

I am trying to find the best dimmensions for a container.
I have to work with these values:
Window max width
Window max height
Items to fit in each column
Items to fit in each row
Each item needs to be a square, and the container has to fit the items exactly. I also need the container to be as big as possible, without it getting larger than max width in x direction, and max height in y direction.
My current code, (Which does not really work), looks like this:
[dWidth, dHeight] = [window.innerWidth, window.innerHeight];
// Adjust sizes, for the tiles
var tiles = (width + height) / 2;
dSize = (dWidth / tiles) > (dHeight / tiles) ?
(dHeight / tiles) : (dWidth / tiles);
dSize |= 0,
dWidth = width * dSize,
dHeight = height * dSize,
dWidth is the width for the container I want to create
dHeight is the height for the container I want to create
width is the amount of columns I have
height is the amount of rows I have
dSize is the height and width of every item.
No need to worry about the weird dWidth assignment, it's temporary.
No need to worry about dSize |= 0, I will not get negative values.
No need to worry about the snippet ending with a comma, the next lines is just assigning the dWidth and dHeight to a canvas.
The number of squares you can fit horizontally is dWidth/width and the number you can fit vertically is dHeight/height. Therefore you can work out the maximum number that will fit like so:
var dSize = Math.min(dWidth/width, dHeight/height);
If you need an absolute value, go ahead and use Math.floor on the result.

How is the window.innerHeight derived of the minimal view?

This is about the minimal view (ie., when you touch-drag enter "fullscreen"):
When viewport width is 320, then window.innerHeight is 529.
When viewport width is 640, then window.innerHeight is 1057.
Notice that viewport increased twice, but window.innerHeight did not (it should have been 1058 = 529 * 2).
I do not have an in-depth understanding of the issue, but I am guessing it has to do with mapping of logical pixels to physical pixels. I'd like to share my findings/solution, in case anyone else stumbles across a related issue.
I am using proportion to deduct the innerHeight at a specific viewport width.
To build the proportion, I am using an arbitrary third viewport that is greater
than the other two. The innerHeight of the viewport in the proportion is derived through trial.
When viewport width is 1280 (320 * 4), then innerHeight is 2114.
1280; 2114
320; x = Math.round(528.5) = 529
1280; 2114
640; x = 1057
This allows us to get the innerHeight of the fullscreen page for an arbitrary viewport width.

How to apply the ratio of document.height / window.height on a scale from 1 to 100.

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/

Categories

Resources