I have a Google Map that displays just fine on a phone and when it was defined in the Tiggzi environment, it took on the size of a phone in portrait mode.
I want to be able to take advantage of more room on the screen for larger resolution tablets and even landscape orientation. I know how much room I need for non-map items (logo, buttons, etc) - how do I resize the map so it takes advantage of the larger screen?
Hello!
$("[dsid='googlemap1']").width(500)
googlemap1 - component name
The same for height
then make refresh Tiggr('googlemap1').refresh
As always - right on the money - thanks!
Your method is correct, but there's a small side effect in the Tiggzi environment. That is, when I want to test the app via the browser, the phone screen is shown with an overlay and it's just an iframe inside that (to emulate what you would see on a phone/tablet in portrait/landscape modes).
The problem is that the screen.availHeight method I'm using reads my PC's browser height and concludes that the screen is really large - so it's distorted in the Tiggzi browser-based Tester.
Suggestions? I could disable it for browser testing... or is there a method that gets the size of the screen (iframe in the case of the Tiggzi browser tester) and still the proper size on a mobile device?
Or is this just a side effect to live with?
There are methods window.innerWidth and window.innerHeight, but not sure how it would work on device.
Those didn't work as well as outerWidth and just width - I believe I have to use availWidth and just live with the side effect when testing (or just modify the javascript during the test period).
Anyway - my main question above was answered - thanks.
Actually - I can now fix myself.
In both the Tiggzi test environment AND on the device, we should be using
$(window).height()
For example, I wanted to allow for 220 pixels above and below the Google map for graphics, buttons, etc. So I just calculate:
Code: Select all
var myHeight = $(window).height() - 220; and then resize the Google map's height to be:
Code: Select all
$("[dsid='googlemap1']").height(myHeight); Silly of me to use other "screen" methods.
Marina - thanks for your help...
That helped me. Thks