Search Results

Search found 774 results on 31 pages for 'landscape'.

Page 7/31 | < Previous Page | 3 4 5 6 7 8 9 10 11 12 13 14  | Next Page >

  • Gallery items become off-center when switching into landscape orientation.

    - by Sandile
    Hey Guys, Thanks for your time. I'm writing an application for android 2.2 and I'm using a gallery to circulate through a list of images that the user can then click to navigate other portions of the application. In portrait orientation, everything is kosher: the images are displaying correctly (completely in the center of the screen as I intended); however, in landscape orientation, all the images in the gallery are strangely displaced a fixed distance to the left of the center of the screen. I've been researching this issue for hours now and haven't found a solution. I'm hoping that some android guru can aid me in the resolution of this bizarre rendering issue. MainMenuActivity.java relevant code snippet (the activity in which the gallery resides) Gallery optionList = (Gallery)findViewById(R.id.mainMenuOptionList); GalleryItem[] optionListItemIdArray = new GalleryItem[] { new GalleryItem(R.drawable.icon_main_menu_option_list_blackboard, "Start Next Lesson", "Start the next planned vocab lesson."), new GalleryItem(R.drawable.icon_main_menu_option_list_index_cards, "Review Words", "Manually look over old words."), new GalleryItem(R.drawable.icon_main_menu_option_list_dice, "Play Vocab Games", "Play games to reinforce knowledge."), new GalleryItem(R.drawable.icon_main_menu_option_list_calendar, "View Lesson Plan", "View the schedule for coming lessons."), new GalleryItem(R.drawable.icon_main_menu_option_list_pie_chart, "View Performance Report", "Evaluate your overall performance statistics."), new GalleryItem(R.drawable.icon_main_menu_option_list_settings, "Manage Settings", "Change and modify application settings.") }; optionList.setAdapter(new GalleryImageAdapter(this, optionListItemIdArray)); NOTE: A GalleryItem is a POJO with an image resource id, title and description. GalleryImageAdapter.java: public class GalleryImageAdapter extends BaseAdapter { private Context context; private GalleryItem[] galleryItemArray; public GalleryImageAdapter(Context context, GalleryItem[] galleryItemArray) { this.context = context; this.galleryItemArray = galleryItemArray; } @Override public int getCount() { return galleryItemArray.length; } @Override public Object getItem(int position) { return position; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView = new ImageView(context); imageView.setImageResource(galleryItemArray[position].getImageId()); imageView.setScaleType(ImageView.ScaleType.FIT_START); imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.WRAP_CONTENT, Gallery.LayoutParams.WRAP_CONTENT)); return imageView; } } Portrait version of main_menu.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainMenuLinearLayout" android:background="#3067a8" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/mainMenuHeadingTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dip" android:textColor="#ffffff" android:textSize="50sp" android:text="@string/main_menu_heading" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> <TextView android:id="@+id/mainMenuSubHeadingTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="15dip" android:textColor="#ffffff" android:textSize="15sp" android:text="@string/main_menu_sub_heading" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> <Gallery xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainMenuOptionList" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="20dip" android:paddingBottom="10dip" android:spacing="40dip" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainMenuOptionListDetailLinearLayout" android:gravity="center_vertical|center_horizontal" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/mainMenuOptionListLabelTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:textSize="25sp" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> <TextView android:id="@+id/mainMenuOptionListDescriptionTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:textSize="15sp" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> </LinearLayout> </LinearLayout> Landscape version of main_menu.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainMenuLinearLayout" android:background="#3067a8" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/mainMenuHeadingTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dip" android:textColor="#ffffff" android:textSize="50sp" android:text="@string/main_menu_heading" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> <TextView android:id="@+id/mainMenuSubHeadingTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="15dip" android:textColor="#ffffff" android:textSize="15sp" android:text="@string/main_menu_sub_heading" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> <Gallery xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainMenuOptionList" android:layout_width="fill_parent" android:layout_height="128dip" android:paddingLeft="0dip" android:paddingTop="5dip" android:spacing="10dip" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainMenuOptionListDetailLinearLayout" android:gravity="center_vertical|center_horizontal" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/mainMenuOptionListLabelTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:textSize="25sp" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> <TextView android:id="@+id/mainMenuOptionListDescriptionTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:textSize="15sp" android:shadowColor="#555555" android:shadowDx="0" android:shadowDy="0" android:shadowRadius="2" /> </LinearLayout> </LinearLayout> Thank you for your time!

    Read the article

  • Why in landscape orientation in simulator all the subviews appear out of order?

    - by wolverine
    I was doing a sample app in ipad. I added about 4 to 5 imageviews to the left side of the view vertically. This view will appear when we select the corresponding entry in the splitviewcontroller. In ipad simulator too, all the images were loading and all are working fine in portrait orientation. But when I rotate the simulator to landscape orientation, these imageviews doesnt appear where i placed them. Some of them overlapping each other, some have half of their part in the navigation bar and all. Has gone completely out of order. I am confused why is all this happening. Can anyone help me solve this issue?

    Read the article

  • How to render a texture partly transparent?

    - by megamoustache
    Good Morning StackOverflow, I'm having a bit of a problem right now as I can't seem to find a way to render part of a texture transparently with openGL. Here is my setting : I have a quad, representing a wall, covered with this texture (converted to PNG for uploading purposes). Obviously, I want the wall to be opaque, except for the panes of glass. There is another plane behind the wall which is supposed to show a landscape. I want to see the landscape from behind the window. Each texture is a TGA with alpha channel. The "landscape" is rendered first, then the wall. I thought it would be sufficient to achieve this effect but apparently it's not the case. The part of the window supposed to be transparent is black and the landscape only appears when I move past the wall. I tried to fiddle with GLBlendFunc() after having enabled it but it doesn't seem to do the trick. Am i forgetting an important step ? Thank you :)

    Read the article

  • How can I render an in-memory UIViewController's view Landscape?

    - by Aaron
    I'm trying to render an in-memory (but not in hierarchy, yet) UIViewController's view into an in-memory image buffer so I can do some interesting transition animations. However, when I render the UIViewController's view into that buffer, it is always rendering as though the controller is in Portrait orientation, no matter the orientation of the rest of the app. How do I clue this controller in? My code in RootViewController looks like this: MyUIViewController* controller = [[MyUIViewController alloc] init]; int width = self.view.frame.size.width; int height = self.view.frame.size.height; int bitmapBytesPerRow = width * 4; unsigned char *offscreenData = calloc(bitmapBytesPerRow * height, sizeof(unsigned char)); CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGContextRef offscreenContext = CGBitmapContextCreate(offscreenData, width, height, 8, bitmapBytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast); CGContextTranslateCTM(offscreenContext, 0.0f, height); CGContextScaleCTM(offscreenContext, 1.0f, -1.0f); [(CALayer*)[controller.view layer] renderInContext:offscreenContext]; At that point, the offscreen memory buffers contents are portrait-oriented, even when the window is in landscape orientation. Ideas?

    Read the article

  • Changing UIViews during UIInterfaceOrientation on iPad

    - by FreeAppl3
    I am trying to change views on rotation because my views have to be significantly different from portrait to landscape. Now the code I am using works once then the app freezes when trying to rotate back. Either direction does not make a difference. For example: If I am in Landscape and rotate to portrait everything works great until I rotate back to landscape then it freezes and does absolutely nothing. Here is the code I am using to achieve this In my "viewDidLoad" method [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didRotate:) name:UIDeviceOrientationDidChangeNotification object:nil]; Then I call this for the rotation: - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { // Return YES for supported orientations return YES; } - (void)didRotate:(NSNotification *)notification { UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation]; if ((orientation == UIDeviceOrientationLandscapeLeft) || (orientation == UIDeviceOrientationLandscapeLeft)) { // present the other viewController, it's only viewable in landscape [self.view addSubview:landScapeView]; } if ((orientation == UIDeviceOrientationLandscapeRight) || (orientation == UIDeviceOrientationLandscapeRight)) { // present the other viewController, it's only viewable in landscape [self.view addSubview:landScapeView]; } else if ((orientation == UIDeviceOrientationPortrait || (orientation == UIDeviceOrientationPortrait)) { // get rid of the landscape controller [self.view addSubview:portrait]; } else if ((orientation == UIDeviceOrientationPortraitUpsideDown || (orientation == UIDeviceOrientationPortraitUpsideDown)) { // get rid of the landscape controller [self.view addSubview:portrait]; } }

    Read the article

  • Windows 7 Picture Printing. All pictures are landscape, when they should be Portrait

    - by JamesM
    I have recently upgraded from XP to 7 and I am having trouble printing out some pictures. In XP, if I were to select some pictures for printing the program would keep their orientation, and print them no problem. Now with Windows 7, even if I select 1 picture to print in the same (wallet size (35)) it rotates the picture. Is there anyway to rectify this within Windows? I did take a screenshot, but as a new user I can't post it.

    Read the article

  • My code doesn't recognize layout-xlarge-land?

    - by Justice Bauer
    I am trying to create a landscape and portrait mode only for tablets. For portrait mode I added the files under layout-xlarge and for landscape in tablets I added files under layout-xlarge-land, but just to test if its working I tried switching the background color under landscape to green, but it didnt seem to work. Is there anything else I need to alter for code to recognize landscape mode for tablets?

    Read the article

  • Which are the most important media queries to use in creating mobile responsive design?

    - by Matt
    There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/. /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

    Read the article

  • why does the gingerbread emulator orientation gets stuck in apps?

    - by tabjsina
    At first I thought this was a problem with my app, but it seems to be happening in any app (though interestingly, not the home screen) in the gingerbread emulator. To replicate my issue, open eclipse and fire up the android emulator for gingerbread (I'm using the "Google APIs - API Level 9" as my target) So the procedure to duplicate once the emulator loads is press LCtrl-F11 to shift orientation to landscape, then again to switch to portrait Result: In the homescreen: The view rotates to landscape, and then back to portrait, as expected In any app (i've tried browser, calculator, maps, and the app i'm currently working on): the view rotates to landscape, and then nothing, it stays in landscape even the emulator is displaying the phone in landscape mode (see below) http://i54.tinypic.com/2ake06v.jpg Has anyone else had this issue, or have I installed the emulator in some incorrect way - this hasn't been an issue with any of the previous emulators

    Read the article

  • Problem after dismissing a modal view used in conjunction with a uisplitviewcontroller

    - by user336274
    I'm having a hard time understanding why the following is happening (and how to fix it). I've created an application using the split-view based application. I've added a UiBarButtonItem called showTheModal which calls this method found in RootViewController.m: - (IBAction)showTheModal:(id)sender { theModalController.modalPresentationStyle = UIModalPresentationFullScreen; theModalController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve; [self presentModalViewController:theModalController animated:YES]; if ([detailViewController popoverController] != nil) [[detailViewController popoverController] dismissPopoverAnimated:YES]; The BarButtonItem of course, is shown at the bottom of the Default Root Controller (left side of the of the split view in landscape) or at the bottom of the popup (if in landscape). The modal view is dismissed by a button placed in a toolbar. It calls the following: [self dismissModalViewControllerAnimated: YES]; The problem I'm having is if rotate the screen, while the modal is up. Here is what happens in different scenarios (start refers to the orientation when the showTheModal button is hit, end refers to the orientation when I hit the dismissModal button). 1)Start landscape, end landscape: Everything appears fine. willHideViewController and willShowViewController methods are not called in the RootViewController (as expected) 2) Start landscape, end portrait: UI appears fine. willHideViewController is run TWICE (WHY?) 3) Start portrait, end portrait: UI appears fine. willHideViewController is run once (as expected) 4) Start portrait, end landscape: The 'Root List' button remains in the detail view (right side of the split view. Neither willHideViewController and willShowViewController are invoked (WHY??) Any thoughts as to why #2 and #4 don't behave quite the expected way?

    Read the article

  • How to check in which position (landscape or portrait) os the iPhone now?

    - by Mike Rychev
    I have an app with a tab bar, and nav controllers in each tab. When user shakes the device, a UIImageView appears as a child view in the nav controller. But the UIImageView must contain a special image, depending on the device's current orientation. If I write just - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation) if (interfaceOrientation == UIInterfaceOrientationPortrait|| interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) { //Code } else if (interfaceOrientation == UIInterfaceOrientationLandscapeRight||interfaceOrientation == UIInterfaceOrientationLandscapeLeft) { //Code } } The view just goes crazy if user rotated the device before shaking. Is there a method to get iPhones current orientation?

    Read the article

  • How to check in which position (landscape or portrait) os the iPhone now?

    - by Knodel
    I have an app with a tab bar, and nav controllers in each tab. When user shakes the device, a UIImageView appears as a child view in the nav controller. But the UIImageView must contain a special image, depending on the device's current orientation. If I write just - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation) if (interfaceOrientation == UIInterfaceOrientationPortrait|| interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) { //Code } else if (interfaceOrientation == UIInterfaceOrientationLandscapeRight||interfaceOrientation == UIInterfaceOrientationLandscapeLeft) { //Code } } The view just goes crazy if user rotated the device before shaking. Is there a method to get iPhones current orientation?

    Read the article

  • Metro: Understanding CSS Media Queries

    - by Stephen.Walther
    If you are building a Metro style application then your application needs to look great when used on a wide variety of devices. Your application needs to work on tiny little phones, slates, desktop monitors, and the super high resolution displays of the future. Your application also must support portable devices used with different orientations. If someone tilts their phone from portrait to landscape mode then your application must still be usable. Finally, your Metro style application must look great in different states. For example, your Metro application can be in a “snapped state” when it is shrunk so it can share screen real estate with another application. In this blog post, you learn how to use Cascading Style Sheet media queries to support different devices, different device orientations, and different application states. First, you are provided with an overview of the W3C Media Query recommendation and you learn how to detect standard media features. Next, you learn about the Microsoft extensions to media queries which are supported in Metro style applications. For example, you learn how to use the –ms-view-state feature to detect whether an application is in a “snapped state” or “fill state”. Finally, you learn how to programmatically detect the features of a device and the state of an application. You learn how to use the msMatchMedia() method to execute a media query with JavaScript. Using CSS Media Queries Media queries enable you to apply different styles depending on the features of a device. Media queries are not only supported by Metro style applications, most modern web browsers now support media queries including Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+. Loading Different Style Sheets with Media Queries Imagine, for example, that you want to display different content depending on the horizontal resolution of a device. In that case, you can load different style sheets optimized for different sized devices. Consider the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>U.S. Robotics and Mechanical Men</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!-- Less than 1100px --> <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" /> <!-- Less than 800px --> <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> </head> <body> <div id="header"> <h1>U.S. Robotics and Mechanical Men</h1> </div> <!-- Advertisement Column --> <div id="leftColumn"> <img src="advertisement1.gif" alt="advertisement" /> <img src="advertisement2.jpg" alt="advertisement" /> </div> <!-- Product Search Form --> <div id="mainContentColumn"> <label>Search Products</label> <input id="search" /><button>Search</button> </div> <!-- Deal of the Day Column --> <div id="rightColumn"> <h1>Deal of the Day!</h1> <p> Buy two cameras and get a third camera for free! Offer is good for today only. </p> </div> </body> </html> The HTML page above contains three columns: a leftColumn, mainContentColumn, and rightColumn. When the page is displayed on a low resolution device, such as a phone, only the mainContentColumn appears: When the page is displayed in a medium resolution device, such as a slate, both the leftColumn and the mainContentColumns are displayed: Finally, when the page is displayed in a high-resolution device, such as a computer monitor, all three columns are displayed: Different content is displayed with the help of media queries. The page above contains three style sheet links. Two of the style links include a media attribute: <link href="main.css" rel="stylesheet" type="text/css" /> <!-- Less than 1100px --> <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" /> <!-- Less than 800px --> <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> The main.css style sheet contains default styles for the elements in the page. The medium.css style sheet is applied when the page width is less than 1100px. This style sheet hides the rightColumn and changes the page background color to lime: html { background-color: lime; } #rightColumn { display:none; } Finally, the small.css style sheet is loaded when the page width is less than 800px. This style sheet hides the leftColumn and changes the page background color to red: html { background-color: red; } #leftColumn { display:none; } The different style sheets are applied as you stretch and contract your browser window. You don’t need to refresh the page after changing the size of the page for a media query to be applied: Using the @media Rule You don’t need to divide your styles into separate files to take advantage of media queries. You can group styles by using the @media rule. For example, the following HTML page contains one set of styles which are applied when a device’s orientation is portrait and another set of styles when a device’s orientation is landscape: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Application1</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (orientation:landscape) { html { background-color: lime; } p.content { width: 50%; margin: auto; } } @media screen and (orientation:portrait) { html { background-color: red; } p.content { width: 90%; margin: auto; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When a device has a landscape orientation then the background color is set to the color lime and the text only takes up 50% of the available horizontal space: When the device has a portrait orientation then the background color is red and the text takes up 90% of the available horizontal space: Using Standard CSS Media Features The official list of standard media features is contained in the W3C CSS Media Query recommendation located here: http://www.w3.org/TR/css3-mediaqueries/ Here is the official list of the 13 media features described in the standard: · width – The current width of the viewport · height – The current height of the viewport · device-width – The width of the device · device-height – The height of the device · orientation – The value portrait or landscape · aspect-ratio – The ratio of width to height · device-aspect-ratio – The ratio of device width to device height · color – The number of bits per color supported by the device · color-index – The number of colors in the color lookup table of the device · monochrome – The number of bits in the monochrome frame buffer · resolution – The density of the pixels supported by the device · scan – The values progressive or interlace (used for TVs) · grid – The values 0 or 1 which indicate whether the device supports a grid or a bitmap Many of the media features in the list above support the min- and max- prefix. For example, you can test for the min-width using a query like this: (min-width:800px) You can use the logical and operator with media queries when you need to check whether a device supports more than one feature. For example, the following query returns true only when the width of the device is between 800 and 1,200 pixels: (min-width:800px) and (max-width:1200px) Finally, you can use the different media types – all, braille, embossed, handheld, print, projection, screen, speech, tty, tv — with a media query. For example, the following media query only applies to a page when a page is being printed in color: print and (color) If you don’t specify a media type then media type all is assumed. Using Metro Style Media Features Microsoft has extended the standard list of media features which you can include in a media query with two custom media features: · -ms-high-contrast – The values any, black-white, white-black · -ms-view-state – The values full-screen, fill, snapped, device-portrait You can take advantage of the –ms-high-contrast media feature to make your web application more accessible to individuals with disabilities. In high contrast mode, you should make your application easier to use for individuals with vision disabilities. The –ms-view-state media feature enables you to detect the state of an application. For example, when an application is snapped, the application only occupies part of the available screen real estate. The snapped application appears on the left or right side of the screen and the rest of the screen real estate is dominated by the fill application (Metro style applications can only be snapped on devices with a horizontal resolution of greater than 1,366 pixels). Here is a page which contains style rules for an application in both a snap and fill application state: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MyWinWebApp</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (-ms-view-state:snapped) { html { background-color: lime; } } @media screen and (-ms-view-state:fill) { html { background-color: red; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When the application is snapped, the application appears with a lime background color: When the application state is fill then the background color changes to red: When the application takes up the entire screen real estate – it is not in snapped or fill state – then no special style rules apply and the application appears with a white background color. Querying Media Features with JavaScript You can perform media queries using JavaScript by taking advantage of the window.msMatchMedia() method. This method returns a MSMediaQueryList which has a matches method that represents success or failure. For example, the following code checks whether the current device is in portrait mode: if (window.msMatchMedia("(orientation:portrait)").matches) { console.log("portrait"); } else { console.log("landscape"); } If the matches property returns true, then the device is in portrait mode and the message “portrait” is written to the Visual Studio JavaScript Console window. Otherwise, the message “landscape” is written to the JavaScript Console window. You can create an event listener which triggers code whenever the results of a media query changes. For example, the following code writes a message to the JavaScript Console whenever the current device is switched into or out of Portrait mode: window.msMatchMedia("(orientation:portrait)").addListener(function (mql) { if (mql.matches) { console.log("Switched to portrait"); } }); Be aware that the event listener is triggered whenever the result of the media query changes. So the event listener is triggered both when you switch from landscape to portrait and when you switch from portrait to landscape. For this reason, you need to verify that the matches property has the value true before writing the message. Summary The goal of this blog entry was to explain how CSS media queries work in the context of a Metro style application written with JavaScript. First, you were provided with an overview of the W3C CSS Media Query recommendation. You learned about the standard media features which you can query such as width and orientation. Next, we focused on the Microsoft extensions to media queries. You learned how to use –ms-view-state to detect whether a Metro style application is in “snapped” or “fill” state. You also learned how to use the msMatchMedia() method to perform a media query from JavaScript.

    Read the article

  • iphone - presenting an alertview with the right orientation

    - by Mike
    I have to present an alertview when my app starts. My app supports both landscape modes. Despite the landscape mode the device is when the app starts the alertview always shows in portrait. I have tried to use the accelerometer to detect the interface orientation before the orientation notification and I have the correct orientation 2 seconds before the alertview showing. Then, I use this code to set the status bar to a different orientation, hoping the alertview will follow... [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeRight]; or left, depending on the landscape mode. Nothing works. Is there a way to force the alertview to respect the orientation? The point here is this: I cannot set one landscape orientation in particular for the status bar, I have to detect the orientation the device is on and then set the status bar orientation. thanks for any help.

    Read the article

  • How to set the content size according to the size of UINavigation bar

    - by Deepika
    Hi all I am resizing the navigation bar when my application switches into landscape orientation. But i am not able to set the content size of navigation bar according to its height. Landscape image :- In this image the top left bar item and title of navigation bar are not resizing when it switches into landscape orientation....they should get re sized according to height of navigation bar. Please suggest me any idea for it? Thanks Deepika

    Read the article

  • iPhone status bar orientation with opengl

    - by sfider
    I have opengl only view that displays in portrait and landscape mode using projection matrix (view's transformation is identity all the time). I need to show status bar with proper orientation. I do this by setting status bar orientation property in UIApplication and changing frame of opengl view so the view won't go under status bar. When I change from landscape to portrait (landscape is the initial state) view's frame is set to (0, 20, 320, 460) and stays like this. However view appears to be translated by (-10, -10). It seems that I did change the size of view but couldn't move it. Weird things are: initialy view is full screen, I change it to (0, 0, 300, 480) (landscape with status bar) and it works then, it doesn't work when I try to chenge it for the second time (portrait with status bar) frame property of the view shows that view is placed correctly Any thoughts on what can by the problem?

    Read the article

  • Auto screen rotation in windows 7 mobile

    - by Nagaraj
    We have developed a application for HTC HD2 mobile, which has windows 7 CE. I have designed application to work for both the orientation (portrait, landscape) Now I wanted to achieve auto screen rotation (portrait to landscape and landscape to portrait) according to the device movement (some thing like iPhone). Can i able to achieve it? if yes how can I? It will be appreciable if you provide me link or sample code.

    Read the article

  • did you know some good web site about 'iphone css layouts' ,and can you help me to improve my code..

    - by zjm1126
    i want to create a webpage on iphone , but i can't complete it in a simple way, this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=5.0,user-scalable=yes"> </head> <body onorientationchange="updateOrientation();" onload=updateOrientation()> <div id="a"> <input id='ab' type="button" value="button" /> </div> <div id=b style="display: none">sssadwq dwqdqw</div> <style type="text/css"> *{ margin:0; padding:0; } /* Reposition on orientation change */ body.landscape{ height: 268px; } body.landscape #a{ height:134px; line-height:134px; } body.landscape #b{ height:114px; width:470px; } body{ height: 416px; } #a{ line-height:208px; height:208px; text-align:center; } #b{ height:198px; width:310px; background:red; border:5px solid black; } </style> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function updateOrientation() { var orientation = window.orientation; switch (orientation) { // If we're horizontal case 90: case -90: // Set orient to landscape $(document.body).addClass("landscape"); break; // If we're vertical default: // Set orient to portrait $(document.body).removeClass("landscape"); break; } } $('#ab').click(function(){ if($('#b').css('display')=='none')$('#b').css('display','block') else $('#b').css('display','none') }) </script> </body> </html> it use much more fixed number,this is not the best way ,i think the best way is to use the percentage more and more, can you do it fo me ,, thanks

    Read the article

  • Force orientation change in testcase with fragments

    - by user1202032
    I have an Android test project in which I wish to programatically change the orientation. My test: public class MainActivityLandscapeTest extends ActivityInstrumentationTestCase2<MainActivity> { public MainActivityLandscapeTest() { super(MainActivity.class); } private MainActivity mActivity; private Fragment mDetailFragment; private Fragment mListFragment; private Solo mSolo; @Override protected void setUp() throws Exception { super.setUp(); mSolo = new Solo(getInstrumentation(), getActivity()); mSolo.setActivityOrientation(Solo.LANDSCAPE); mActivity = getActivity(); mListFragment = (Fragment) mActivity.getSupportFragmentManager() .findFragmentById(R.id.listFragment); mDetailFragment = (Fragment) mActivity.getSupportFragmentManager() .findFragmentById(R.id.detailFragment); } public void testPreConditions() { assertTrue(mActivity != null); assertTrue(mSolo != null); assertTrue(mListFragment != null); assertTrue(getActivity().getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE); } /** * Only show detailFragment in landscape mode */ public void testOrientation() { assertTrue(mListFragment.isVisible()); assertTrue(mDetailFragment.isVisible()); } } The layouts for the activity is in seperate folders, layout-port and layout-land layout-port fragment_main.xml layout-land fragment_main.xml In landscape mode, the layout contains 2 fragments (Detail and list) while in portrait it contains 1(List only). If the device/emulator is already in landscape mode before testing begins, this test passes. If in portrait, it fails with a NullPointerException on mListFragment and mDetailFragment. Adding a delay (waitForIdleSync() and/or waitForActivity()) did NOT seem to solve my problem. How do i force the orientation to landscape in my test, while still being able to find the fragments using findFragmentById()?

    Read the article

  • Windows Mobile 6.x How to explicitly lock the app in one orientation?

    - by Stuart
    I'm trying to get an app on the WinMo App Store. As part of this, Microsoft App's Store has asked that I need to support landscape as well as portrait. What they've said is OK is: If dynamic switching is implicitly allowed, the app will be tested just as if it supports both portrait and landscape even if only a portrait or landscape resolution is checked. You may explicitly lock the app in one orientation (which means portrait mode if the app does not handle landscape mode functions), provided the default OS orientation is preserved once the app exits. I'd love to do answer 2 - but I can't find any way of doing it - and they won't provide me any other clues - they suggested I ask on the forums... so here I am on Stack Overflow - far better than on the forums :) Anyone got any suggestions?

    Read the article

  • How to detect image orientation (text)

    - by Maciej
    My program is working with fax documents stored as separate bitmaps I wonder if there is a way to detect automatically page orientation (vertical or horizontal) to show image preview for user in right order (meant rotate if neccesary) Any advices much appreciated! EDIT: Clarification: When Faxmachine receives multi-page document it saves each page as separate TIFF file. My app has built-in viewer displaying those files. All files are scaled to A4 format and saved in TIFF (so there is no change to detect orientation by height/width parameters) My viewer displays images in portrait mode by default What I'd like to do is automagically detect situation when org document was printed in landscape mode (eg wide Excel tables) then I'd like to show rotated preview for end user to speed up preview process Obviously there are 4 possible fax orientation portrait / landscape x 2 kind of rotations. I'm even interested simplified solution detecting when org doc was landscape or portrait (I've noticed most of landscape docs needs to be rotated clockwise)

    Read the article

  • how to rotate to current of Orientation?

    - by RAGOpoR
    according to my code when my device are use in Landscape when i pushViewController it will automatic show in UIDeviceOrientationPortrait. i need to rotate my device to Portrait and then rotate to Landscape, then it will present in Landscape mode. how can i rotate to current of Orientation with out use of private API(setOrientation)? - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return ((interfaceOrientation == UIInterfaceOrientationLandscapeLeft) || (interfaceOrientation == UIDeviceOrientationPortrait) || (interfaceOrientation == UIInterfaceOrientationLandscapeRight)); }

    Read the article

< Previous Page | 3 4 5 6 7 8 9 10 11 12 13 14  | Next Page >