I'm working in a webpage that i want to display on a digital signage screen which has a built-in web browser. Since the screen does not have a built in "turn screen 90 degrees (portrait)" mode i have to do a workaround.
I'm trying this using the following CSS:
body{
transform: rotate(-90deg);
...
}
I am using a liquid layout for this page (working in percentages) and this page is going to be displayed on a 1080x1920 screen (hanging vertically in portrait mode)
However when i display the page in my browser without rotating the screen everything seems fine.. When i rotate it, it falls out of the screen and elements don't align correctly and the page feels zoomed in instead of stretched in the browser.
Does anyone have an idea of how to fix/code this?
If you need more info or code please let me know i will post it here.
You need to switch the height and width values when you rotate the body, something like this:
$("body").click(function() {
var height = $(window).height();
var width = $(window).width();
if ($(this).css("transform").indexOf("-1") == -1){
$(this).css("transform", "rotate(-90deg)");
$(this).css("width", height + "px");
$(this).css("height", width + "px");}
else{
$(this).css("transform", "rotate(0deg)");
$(this).css("width", width + "px");
$(this).css("height", height + "px");}
});
Doing this in Fiddle positions the body so it is offset up and to the left, so you'll have to figure out how to fix that, here is my fiddle, I have also included a function to get the position of an element which might be helpful:
http://jsfiddle.net/jz0odbbz/3/
Related
I need to set a div height based on screen resolution. I am using angular 5 for coding. Even when the screen is zoomed in or zoomed out the div height should fit the place
This is my html part
<div [style.height.px]="divHeight">
</div>
And in my ts file
this.divHeight= window.innerHeight - 202;
This works only when my screen is 100% zoom. I need the div height adjusted even when the screen is zoomed in or zoomed out. Plz help me out.
Why not just use the vh property -- perhaps with calc?
div.thatShallNotBeNamed {
height: calc(100vh - 202px);
}
Edit:
vh stands for "view height." It also has a corresponding property for "view width" called vw
Window.innerHeight work for even zoom out and zoom in as well.
I assume the problem your are facing is you are not resetting height for div when you zoom in or out, you can use host listener for this purpose.
#HostListener("window:resize")
onResize() {
this.divHeight = window.innerHeight - 202;
}
A known problem if you are using percentage (or viewport unit) width and height for <body> is that when mobile keyboard invoke due to input the size of any percentage/viewport element will change .
I've searched a lot about this problem and nothing could really help.
I found one of the answer is to adjust the layout according to the new viewport :
mobile viewport resize due to keyboard
but this is not really practical.
Does anybody know how to manipulate mobile keyboard on web ?
After some test's I found a hack that i'll put in the answers, if there are better ways, please tell :)
Use JavaScript/jQuery to set the height and width of <body> in px.
Using this code:
$(function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
$("html, body").css({"width":w,"height":h});
});
In this case <body> will be set in px according to the viewport size and will stay constant with any changes to the viewport.
If the keyboard covers the input you can easily change the position of the input to fixed and top to 0.
I'm using the following script to adjust the height of a container div on my page relative to the browser window's height
function thirty_pc() {
var height = $(window).height();
var thirtypc = (50 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
var thirtypc2 = thirtypc * 2;
$("#slider").css('height',thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
The script works fine to scale the #slider div's height relative to the viewport's height. The problem is if I resize the browser window the inside div elements dimensions get distorted. However if I refresh the browser the inside div elements fix themselves. Also if I go into firebug while the inside div's are distorted and I un-check ANY even unrelated elements CSS properties, the inside div's fix themselves.
Would the solution be for javascript to somehow refresh CSS after a browser re-size? If so how do you do that? Or should I be tying in the effected inside div element's dimensions to the function to begin with? I have also tried to do that with no luck.
The fact that a browser or CSS refresh seems to fix the problem makes me lean towards the first solution if it's possible.
Thanks.
First off, I suggest you make a text space... a simplified version to learn with. Here is a jsFiddle as an example how you can make an example that doesn't have all the other site stuff in the way. CSS is read once. the js is writing inline CSS. So you don't want to refresh the CSS. You want to write new inline CSS over the stuff the js already wrote.
Here is an example of a function. Below is how you call it on DOM ready and then, also when the window is resized. Keep in mind that it is going to run that function many many many times while you resize - so this isn't great for all scenarios. Also, - while it's commendable that you want it to resize(I do the same) no one else is going to resize their browser... So pick your battles.
var your_functions_name = function() {
var windowHeight = $(window).height();
$('.box').css('height', windowHeight/2);
};
// run on document ready
$(document).ready(your_functions_name);
// run on window resize
$(window).resize(your_functions_name);
This is a continuation of CSS Display an Image Resized and Cropped. The answer there seems to be okay for that user but I need some help to improve upon that answer...
Q: how can the resize (scale) be related to the size of the image at runtime. i.e. I don't want to hard code something like "width: 320px; height: 221px;" in the style - that works if you know the dimensions of the image up front.
Here are some jsfiddles:
http://jsfiddle.net/VdX68/ - based on the original thread answer. Works if you know the dimension of the image up front.
http://jsfiddle.net/VdX68/4/ - you don't have to know the dimension of the image, but only works for 100% scale. (here I simply removed the width, hight from the .scalePan class.
http://jsfiddle.net/VdX68/2/ - using width and hight as %. This scales the image to the size of the containng div not the image original dimensions.
I'm looking for a way to scale the image to a % of the original dimensions, not a % of the container it is in.
Any help much appreciated.
I understand you want to do this, but I'm not completely sure.
$(document).ready(function() {
var wdth = $('img').width();
var hght = $('img').height();
$('img').css('width', wdth / 100 * 90 + "px"); // new width is 90% width of image
$('img').css('height', hght / 100 * 70 + "px"); // new height 70% height of image
});
Working example: http://jsfiddle.net/VdX68/18/
You don't have to use JQuery, you can do this with regular javascript also.
I am building a website for a client who wants their page to zoom perfectly in IE7. I have finally managed to get around most of the bugs, but one.
When you zoom in on the page, it centers fine, but then when you go to another page, the page renders and displays the top left of the page. I need to make it render centered. I know it is possible (the client keeps comparing it to bbc.co.uk which has this feature).
Does anyone know of a fix I can add to my body tag or something?! Let me know if you need to see any code.
Wrapping your site in a container div;
<div id="wrapper">
...
</div>
and the css;
#wrapper {
margin: 0 auto;
width: XXXpx;
}
applied to it has the desired effect.
(Where width represents the width of the layout).
Zooms centered, and when moving through pages in the zoomed state stays centered. Tested in ie7 on VMware XP.
When scale/zoom, the center point of IE seems at the top-left
I move to the center by scripts
$.browser.mozilla
? $container.css('-moz-transform', 'scale(' + scale + ')')
: $container.css('zoom', scale)
winW = $(window).width()
winH = $(window).height()
if ($.browser.msie) {
var offScale = (1 - scale) / 2
$container.css({
top : winH * offScale
, left : winW * offScale
})
You must know the scale number and my position of $container is "absolute"