Is it possible to change user's phone orientation using react? - reactjs

I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.

It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

Related

Weebly Lightbox/fancy box close button layered behind image Weebly

Weebly Fancybox/Lightbox Mobile Issues- X layered behind image and Images too high
Can anyone assist with the following issues:
1- How can I make the close X button in fancybox/lightbox layer in front of the image? In mobile view the X is often partly or fully hidden behind the image and can't be clicked, this happens when the image is quite wide.
On mobile, the images in the fancybox/lightbox appear toward the top of the image screen on mobile, do you know how to centre these on the mobile screen?

Media query issues when resizing to mobile and then back to Desktop

I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!

About the application with the i icon at the bottom of the screen

I searched for this and couldn't find any references to this.
In my iOS universal app, I wanted to display the information icon (same as the utility application) at the bottom right of my main view controller and use the same both for iPhone and iPad to flip over to display information about my app and other things. On the iPadd Utility application template with XCode 4.6, the information icon is displayed as a button on the navigation bar and a UIPopOver control is used to display information.
In my case, I don't want to use a UIPopOver on the iPad but use the same flip over effect both for iPhone and iPad when clicking the information icon. Is this a valid as per Apple's guidelines or guaranteed for rejection?.
I do exactly what you're thinking of doing in my app. I used the flip transition to display my info page using the information icon as the button image. I had no problems with Apple regarding this when I submitted.

Facebook Like with Send on a mobile Web page

My experience is that Facebook Like works fine on mobile pages in general, but I now also want to add the Send/Share button.
When I click on the Send button the window being opened is so large (clearly more than 320 pixels wide) that it instead is shown almost completely outside of the display to the left (the right edge of the window being just beside the Send button).
Is there a way via the Social Plugins or via the API to create a Send/Share form that would fit inside of 320 pixels?
I've worked with the Graph API before, so that would not be a show-stopper.
Thanks in advance,
Anders
Try this send dialog.
http://developers.facebook.com/docs/reference/dialogs/send/
And try forcing the display mode to wap
http://developers.facebook.com/docs/reference/dialogs/#display

javascript image gallery with adjusted navigation for mobile platforms

I want to make a javascript image gallery
(with 6 thumbnails in a row and as many rows as fit the page.
clicking the thumbnails will bring up a popup box with images and a video)
At the bottom of the page there is a numbered pagination.
However, I would like to make it so that on a mobile platform (android/iphone)
the user can paginate by swiping the pages to go forward or backward.
How do I adjust the pagination for a mobile platform?
Should I use a specific crossplatform tool like sencha to make this gallery?
Have you thought about using JQuery Mobile ?
http://jquerymobile.com/

Resources