Can vunit overcome the problems that surround treating a page segment as a viewport?

[johnsq]

There is an issue that I have been trying to overcome which is that VW/VH units become completely useless as soon as you are working with any kind of split screen/pane. I've been looking for a solution where one segment of this split can be treated as it's own viewport, but the only real solution is using iframes. See a question about this on Stack Overflow.

jsFiddle use the iFrames approach, which is how they able to have their screen area split 4 ways, but still be able to correctly display elements sized with vw and vh in the bottom right hand preview window see here.

Although the jsFiddle approach is precisely the behavior I want, splitting my application up into separate pages, so that they can be windowed separately within iFrames, just so I can use viewport measurements in each, seems rather extreme.. and so my question is...

Does vunit offer the flexibility to calculate it's units from a specific DIV container, or does it only calculate from the entire viewport?

Thanks

[joaocunha]

No, the vUnit does not offer that feature, unfortunately. It's quite out of the scope of the lib.

But it looks like something you'd be able to achieve with a combination of percentages, calc and position absolute.

On a side note, this could be also useful for you: http://kumailht.com/responsive-elements/

Good luck!

[johnsq]

Hi @joaocunha, Thanks for your quick response.

With a little play around in jsfiddle, I have successful managed to tweak the behaviour of your library so that it does exactly what I need (I might folk this because, with the additional functionality, it is incredibly powerful).

All I have changed is your calculateViewportSize function, so it gets the height and width from my DIV instead of the window.

And now all of your great resizing functionality works, but relative to the specified DIV.

Please check out my crude, but affective, jsfiddle.

At first glance, if you resize the preview window, you'll get the exact same functionality as your library would give alone, but now, for test purposes, I have added jQuery Resizeable to the main DIV. So, grab the bottom right corner of the DIV and resize it.

This is exactly the functionality I need. The means to size elements in a VW / VH type of way, even when working within DIVs/windows, within the main viewport!

Many thanks to you!

[joaocunha]

I quite like that approach. I'd be willing to take a PR if we can make it simple to define on the options.

[johnsq]

Hi @joaocunha, I've updated my fiddle. Check it out and you'll see that I've modified your libraries code to achieve the following edition functionality.

1. Pass in containerID in the options.
2. New condition added in viewportHasChanged function to determine if a container ID has been passed in and is an existing HTML element.
3. If container has been passed in and it is a valid HTML element, use new function called calculateContainerSize.
4. Otherwise, fallback to using calculateViewportSize.

For my current usage, this is now in a useable state. I have the choice between selecting one specific container, or letting it run as vunit currently does by simply omitting a containerID.

However, in the future, it could be taken to the next logical step of allowing to except multiple IDs like..

containerIDs: ['main','sidebar']

..but then we would need to do something like scope the generated CSS. Something like..

#main.vw_width1{width:6px} #main.vw_width2{width:12px} #main.vw_width3{width:18px} #main.vw_width4{width:24px} #main.vw_width5{width:30px}

and

#sidebar.vw_width1{width:6px} #sidebar.vw_width2{width:12px} #sidebar.vw_width3{width:18px} #sidebar.vw_width4{width:24px} #sidebar.vw_width5{width:30px}

..but it would then mean you could use it independently in as many DIVs as you like.

[joaocunha]

Right. I'll digest it for a while to see if it's a fit.

Thanks for that!

[masarius]

I tested the solution from johnsq to size an iFrame and it worked great for me, IE11 Windows 10.