View Full Version : redraw layout after hiding address bar

28 Jul 2010, 11:37 PM
I have a carousel-based project which successfully hides the address bar. Unfortunately the height of the card is set when the address bar is visible, but once it is moved there is empty space underneath my content.

This is the code I am using to do the hiding:

<body onorientationchange="setTimeout(function(){window.scrollTo(0,1)},100);updateOrientation();"
onload ="setTimeout(function() {window.scrollTo(0,1)},100);">

I understand I can use onlayout (?) to re-render everything after the address bar has been hidden, but where do I put it?

Ideally I would perform the disappearing act and then redraw everything to the proper scale, but I haven't a clue how or where to do this. If I could do everything in javascript, that would be wonderful.

Thank you for your help.

29 Jul 2010, 12:00 AM
I found that placing the following code just before the 'new Ext.Panel({' call worked. (At the end of my javascript file)

/* hide the address bar */
window.scrollTo(0, 1);

29 Jul 2010, 12:21 AM
Spoke too soon. The prior fix only works when the page is being rendered when the idevice is being held portrait. Changing the orientation and back again makes it too short again.

Any help as to where or how to call onorientation would be greatly appreciated.

29 Jul 2010, 12:30 AM
Set monitorOrientation: true in the component config.

29 Jul 2010, 1:31 AM
i'm interesting to hide the address bar

but i don't understand how to put window.scrollTo(0,1); instruction

i try before new Ext.Setup, after new Ext.Setup, before new Ext.Panel, inside the event 'beforeactivate' of Ext.Panel
but none of this works...!

Thank you

29 Jul 2010, 1:47 AM
Set monitorOrientation: true in the component config.

I've tried that, but it doesn't seem to work.

I have been using css tricks to change the shape and size of different elements on my page. Should I be building two separate carousels, and reading the orientation to decide which one to display? (landscape or portrait) Will doing so make the transition from one orientation to another smoother (right now there is significant delay as the screen is 'rebuilt')

29 Jul 2010, 6:46 PM
If that's what you want to do, there isn't really a right or wrong answer. If you do need to show different content when the orientation changes, then using a card layout with 2 items is probably the best way to go.

29 Jul 2010, 7:24 PM
Thank you Evant.

My project involves not so much different content between orientations but a different 'flow' for content (narrower viewport, different widths for text and resized background/images) but the content stays the same from one orientation to another.

I suspect the resizing of the various items (css layout, overall dimensions, scaling of inline images and backgrounds of floating divs) are all hitting the hardware and causing the slowdowns I am experiencing, not to mention the odd offset of the carousels (they are not always fully within the viewport after all elements are redrawn)

I am going to try playing with dual orientation layouts. Hopefully I will be able to make the transition from portrait to landscape smoother...