Calculate and Display Width of Viewport and Elements
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need a bit of Javascript updated to calculate the size of the viewport, and the size of an individual element that's a percentage of the viewport, that will recalculate both on window resize. I'd like to keep it Vanilla Javascript (no jQuey).

You can see what I have so far at https://codepen.io/garyrozanc/pen/LQYxBL. The div with the class "viewport" calculates the size of the viewport, but doesn't recalculate it on window resize. The div with the class of "element" recalculates on window resize, but is measuring the width of the viewport, not the width of the element.

It also needs to work in all major browsers, and on Android and iOS.

I think chlegou's code is doing the way you want it to be.
Codeword 21 days ago
thank you for rewarding the bounty
Chlegou 21 days ago
awarded to Chlegou
Tags
javascript

Crowdsource coding tasks.

2 Solutions


Is this what you are looking for?

https://codepen.io/geiz123/pen/BYaVpQ

I awarded Chlegou, look at that solution as it worked exactly how I needed it too. In your solution, the div with the "element" class was still calculating the viewport, not the element within the viewport.
imokyourok 21 days ago
Winning solution

i have rectified your code

link: https://codepen.io/anon/pen/JpjZBg

thank you for rewarding the bounty
Chlegou 21 days ago
View Timeline