search

intelliweather / IntelliWeather.js

A jQuery plugin for building robust weather pages using the IntelliWeather Image API.
0 stars 0 forks source link

Popup Window Lacking Scroll Capability #8

Open IWXMon opened 9 years ago

IWXMon commented 9 years ago

If the descriptor invokes a popup window that exceeds the deskstop resolution, there's no way to scroll/pan to view the rest of the image. This also leaves you with an inability to close the popup window since the "X" is offscreen. You have to click the back button to close the window & return to the calling page. The scroll function stil works on the calling page, but will not apply to the popup window. The behavior was observed in Chrome & Firefox browsers.

A simple solution would be to add scroll bars to the popup window, but perhaps a method of extracting the viewer's desktop res, then applying a max window size would work better. Better yet, can the popup window functionality provide zoom & pan functionality?

I would envision the default display to do a "best fit" showing the full image scaled to fit within the desktop bounds. If the image exceeded the desktop bounds, then a magnifying glass with "zoom to actual size" functionality would pop up. If the magnifier was clicked, then scroll bars would show up at window bottom & window right as needed. Optionally, the wheel on the mouse would have the same zoom-in/zoom-out functionality. I imagine this kind of lightbox functionality already exists, correct?

As it stands, we are setting max 4:3 window size to 800x600 & 16:9 to 960x540, which limits our "wow factor" ability,... so we need to be able to show some true HD imagery at 1920x1080 or greater res.

Your thoughts?

dragan commented 9 years ago

The width and height of the modal is the same as the displayWidth and the displayHeight specified in the descriptor plus the top bar, which is 20px and includes the close button. Therefore, inside the expand key, setting the displayWidth and displayHeight will determine the size of the modal. I did it this way to allow you to control how big the modal is based on the resolution you will be displaying the modal on. The bigger the resolution you're targeting, the bigger you can make the modal.

Given the above information, for smaller resolution screens showing hi-res images, I'll look into centering the modal and then allow scrolling inside the modal. Will that work for your needs?