Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 7 CREATING RESPONSIVE WEB APPSstatements that drive the individual layouts in their own function and register that function as asubscriber to changes in the view model:function performScreenSetup(smallScreen) {$('div.cheesegroup').not("#basket").css("width", smallScreen ? "" : "50%");};cheeseModel.device.smallScreen.subscribe(performScreenSetup);The function will be called only when the value changes, so I call the function explicitly to get theright behavior when the document is first loaded, like this:performScreenSetup(cheeseModel.device.smallScreen());In effect, I toggle the CSS width property of the div elements in the cheesegroup class based on thesize of the screen. You could ignore this approach and just leave the layout in its initial state, but I thinkthat is a lost opportunity to provide a nice experience for desktop users.Removing Elements from the DocumentFor the most part, I simply hide and show elements in the document based on the size of the screen.However, there are occasions when the if and ifnot bindings are required to ensure that elements arecompletely removed from the document. A simple example of this can be seen in the listing where I usethe if binding for the one-line total summary:Total:$I have used the if binding here because tucked away in the styles.css file is a CSS style that appliesrounded corners:div.groupcontent:last-child {border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}The browser doesn’t take into account the visibility of elements when working out which is the lastchild of its parent. If I had used the visible binding, then I don’t get the rounded corners I want in thelarge screen layout. The if binding forces the behavior I want by removing the elements entirely,ensuring that the rounded corners are applied correctly.Responding to Screen OrientationMany mobile devices respond to the way that the user is holding the device by changing the screenorientation between landscape and portrait modes. Keeping informed of the display mode turns out tobe quite tricky, but it is worth doing to make sure that your web app responds appropriately when theorientation changes. There are several ways to approach this issue.Some devices support a window.orientation property and an orientationchange event to make iteasier to keep track of the screen orientation, but this feature isn’t universal, and even when it isimplemented, the event tends to be fired when it shouldn’t be (and isn’t fired when it should be).184www.it-ebooks.info