Zappos-like split view possible?


#1

Is it possible to create a split view that (in landscape) would allow me to tap on a link from the main view (in this case the right) and load the page using the entire view rather than just main as in the Zappos’ iPad app? I’m assuming I need 3 views loading left and right views inside a main view. I’m attaching two images of Zappos iPad app on landscape mode that shows what I mean. Thanks!


#2

Thinking about it now. It may be easier on init for the product page above to remove the left view completely and reload it on beforeout?


#3

This is an ugly hack but it seems to do the trick for now. Hoping someone has a better suggestion.

$$(document).on('page:init', '.page[data-name="productinfo"]', function (e) {
    $$('.panel-left').css('left', '-25%x');
    $$('.view-main').css('width', '100%').css('left', '-25%');
});

$$(document).on('page:beforeout', '.page[data-name="productinfo"]', function (e) {
    $$('.panel-left').css('left', '0');
    $$('.view-main').css('width', '75%').css('left', '0');
});