Avoid changing the orientation

Despite having a similar title, my question is not a duplicate of Prevent orientation change in iOS Safari. I have modified the code provided below.

I have written the following code to automatically rotate the content when a user rotates their iPad/iPhone/iPod, forcing them to rotate the device to view the content correctly.

if(window.orientation==90)
{
    document.getElementById("orient").style.webkitTransform="rotate("+window.orientation+"deg)";
    document.getElementById("orient").style.webkitTransformOrigin="0px 0px";
    document.getElementById("orient").style.top=screen.height+"px";
}

However, when I rotate my device, the content disappears. Can someone assist me in getting this code to function correctly?

javascripthtmlcsssmartphone

Answer №1

Your issue may stem from the transform origin being set to the top corner instead of the center of your content. This causes the div to rotate outside the visible area, resulting in nothing being displayed. To achieve the desired effect, you will need to make additional modifications to your div.

Below is a simple example that should address the problem:

<div id="all" style="-webkit-transform: rotate(90deg); -webkit-transform-origin: 50% 50%; position:absolute; width: 100%; height: 100%;">
    Lorem ipsum dolor sit amet ...
</div>

<script type="text/javascript">
    var all = document.getElementById("all");

    all.style.height = window.innerWidth + "px";
    all.style.width = window.innerHeight + "px";
    all.style.top = (window.innerHeight - window.innerWidth) / 2 + "px";
    all.style.left = (window.innerWidth - window.innerHeight) / 2 + "px";
</script>

Please note: While this may not directly pertain to your current issue, consider using Math.abs(window.orientation) instead of window.orientation, as the orientation could be either -90 or 90.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically apply the "active" class to a link when it is clicked

Here is how my vue component looks: <template> <div> ... <div class="list-group"> <a :href="baseUrl+'/message/inbox'" class="list-group-item"> Message </a> ...

javascriptvue.jsvuejs2vue-component

Beware of UTF-8 Decoding Problems: Avoid using "0"-prefixed octal literals and octal escape sequences as they are outdated. For octal literals, opt for the "0o" prefix

I've hit a roadblock trying to achieve this task, any assistance would be greatly appreciated. I have a string that looks like this "jas\303\241nek" and I need to convert it to look like "jasánek". After using [this web ...

javascriptreactjsnpmutf-8

What is the process for sending a selected option using AJAX?

Using Ajax within Laravel to save data involves a form with input fields and a select option. Here is the form structure: <form class="forms" method="get" action=""> {{ csrf_field() }} <div class="form-group row ...

javascriptphpajaxlaravel

Page reloads are disabled when Chrome devtools debugger is paused in a React app

Currently, I am in the process of troubleshooting a React application that was created using create-react-app. Whenever I attempt to reload the page while paused on a breakpoint, it results in the page stalling. The screen goes blank and is unresponsive t ...

javascriptreactjsgoogle-chromegoogle-chrome-devtools

Modifying the data of an HTML form using Javascript, encrypting the information, and transferring it to PHP

I am new to PHP and have a simple code management question. I would like to create an input box in HTML where someone can enter their name, and with the use of Javascript, generate a link with an encoded version of the name preceded by a website string. Wh ...

phpjavascriptjqueryvariablesencoding

What is the reason for the blank first page when printing with vue-html2pdf, a tool that utilizes html2pdf.js internally?

Hey there, I'm currently experiencing issues with printing using a Vue component named vue-html2pdf. Here are the problems I'm facing: The pagination doesn't break the page when content is added, resulting in a 3-page printout. The first p ...

javascriptvue.js

How can I place an Object in front of an Array in JavaScript?

Currently, I am working on an Angular project where I need to modify a JSON array in order to display it as a tree structure. To achieve this, the objects in the array must be nested within another object. Desired format / output: this.nodes = [ { id ...

javascriptarraysangular

What is the best way to implement dynamic comment display similar to Stack Overflow using Asp.net and Jquery?

I have created a small web application using Asp.net and C#. Currently, I am able to retrieve comments by refreshing the entire page. However, I would like to achieve this functionality without having to do a full refresh. For instance Let's say the ...

javascriptjqueryasp.net.netangularjs

Tips for connecting a href to a div id using JQuery for a parallax slider

I'm currently working on the jQuery slider known as Sequence Master Parallax. My goal is to incorporate a menu at the top that allows users to navigate to each slide. However, I am encountering difficulties in linking the href to the div id. I am unsu ...

javascriptjqueryhtmlcssslider

Tips for using JavaScript to set images from Flickr API as img src

I've been attempting to populate a table with images fetched from flickr. The array I'm using consists of urls like: ["https://www.flickr.com/photos/113081696@N07/24695273486", "https://www.flickr.com/photos/113081696@N07/24565358002", "https:// ...

javascripthtmlflickr

Styling an active link in Next.js using Styled Components

Looking for a way to customize the active link style using styled components. I have a navigation bar where the currently active link should have a specific style applied. Any suggestions are appreciated! import React from 'react' import Link f ...

javascriptnext.jsstyled-components

Is it possible to adjust the height of the navbar in Bootstrap?

Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...

htmlcssmacosbootstrap-4navbar

Leverage the retrieved configuration within the forRoot function

Currently working on an Angular app that uses @ngx-translate. In my implementation, I am using TranslateModule.forRoot(...) to set up a TranslateLoader: @NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoade ...

javascriptangularngx-translate

"An issue has arisen in MongoDB when attempting to save data, resulting in an error message

Having trouble inserting data into MongoDB with Node.js. Encountering an error in the final line of code. Here are the execution logs: { _id: 56e90c1292e69900190954f5, nfs: [ 'ebdp1', 'ebdp2', 'ebdp3', 'ebdp4' ], s ...

javascriptnode.jsmongodb

The multi.js library is not causing the <select> to refresh appropriately after an AJAX request

I have integrated a multi-select feature to my Django form using the multi.js library for enhanced visual representation. Additionally, I am utilizing the Django Bootstrap Modal Forms package to enable users to add new options seamlessly without page refre ...

javascriptjquerydjangoajaxmulti.js

"Items within mui Grid do not properly align within the Grid container

I'm struggling to fit two large Grid items inside a Grid container. The Grid container needs to be 100% of the screen's height (or parent container) Grid items are large and need to fill the container while remaining scrollable Image #1 shows t ...

cssreactjsmaterial-uiflexbox

Attempting to design a layout with flexible elements for the header, main content, and footer

https://i.sstatic.net/PURno.png I'm currently working on creating a layout that has specific boundaries for each section. The header and footer need to be centered vertically, while the content should extend to the bottom of the viewport. Please keep ...

htmlcssflexbox

JavaScript pop-up that appears across all applications

An ASP.NET page I've developed in IE is responsible for monitoring multiple server jobs that run overnight. Whenever an error occurs on one of these jobs, a popup window opens using javascript's window.open() function. However, employees often ha ...

javascriptasp.netinternet-explorer

What is the best way to display multiple sets of table data on a single page without any connections between them?

Is there a way to combine data from two tables (dept_db, role_db) and display it on my createUsers page? I am looking for a solution where the page only needs to be rendered once to retain the previous query results. Thank you. exports.createUsers = func ...

javascriptpostgresqlexpresssequelize.js

Building basic objects in TypeScript

My current project involves utilizing an interface for vehicles. export interface Vehicle { IdNumber: number; isNew: boolean; contact: { firstName: string; lastName: string; cellPhoneNumber: number; ...

javascripttypescript