I have a hamburger menu that has a full screen menu that’s underneath the “main” page. WHen I click the menu, it should slide the “main” page out of the screen to the RIGHT.
This works on the current iPhone 5 size… but when I go to 6S it doesnt go out of the screen to the right. I wonder why this is the case. Shouldnt it retain its aspect ratio when scaling up to fit another screen since the Flexible Layout is on stretch and fully centered?
As you can see on the video, the last part when I switch to 6s Plus, the main page doesnt slide completely out of the screen. Please help.
Thank You for the file - but I do not see your 6 & 6 Plus layouts - just the 5. There is not a Hype preset for these phones (at least in my Hype version) so I do not know what your set-up is.
Here in California it is now my sign off time - but your showing 6/6+ layout will be useful info for any others that want to help (I will be back on in 14 hours).
Yeah I didnt make one. I started from the smallest one for iPhone 5. But if you saw my video above, on my first post, I am testing the responsive layouts on firefox developer mode.
I’m not trying to set something up for 6 / 6+ because since it’s supposed to be responsive, i thought it should be smart enough to know that once an object is out of screen, it should stay locked out of screen since the original viewport was set to scale 100%… anything exceeding the current viewport should ALSO scale.
You’ve told the group named “Main Page” to move 320 pixels to the left - “Origin (left)” - in the timeline 'timeInvokeMenu" - so that’s as far as its going to move. As I trial I told it to move 800 pixels and the 6s screen was clear.
The following may not be perfect for You as I’ve written it - but it should at least be a good start towards helping You utilize percentage based values instead of fixed pixels.
Overview:
The “deviceWidthAdj” function reads the screen width of the device it is being opened on, and adjusts the left animated property of the specified element to travel the full width of the device. This works in the “Responsive Design” mode of Safari - and on my “iPad 4” & “Desktop”.
The “deviceWidthAdj” function is triggered by “btnHamb” button (user click) which runs the “timeInvokeMenu” timeline. At the beginning of this timeline the following JavaScript is triggered:
var mainPageEl = hypeDocument.getElementById('mainPage');
var whatDeviceWidth = window.screen.width;
hypeDocument.setElementProperty(mainPageEl, 'left', whatDeviceWidth, 2, 'easeinout' );
Notes:
There is no reason now to have a timeline for this effect - but I’ve left it in.
I have not created~adjusted the code for the “close box” (large “X”) used to reset the sliding “Main Page” group. I believe this code to be straightforward - the above script should be a guide to do this part.