Basically, I have a div that contains my entire website. it has a height of 625px and a width of 1250px. Is there any way to resize this while keeping the scale when the browser window is resized or its used on a mobile/tablet? I know someones gonna say use % instead of px but I have a very controlled UI.
Also is there anyway to bring up a pop up when the websites used in a certain browser?
Thanks
The best and most straightforward answer is to use %, simply because this is the intended use. I'd really advise you to rework your layout so the percentage sign can be used.
If this does not work for you, there is always Media Queries http://www.w3.org/TR/css3-mediaqueries/ or Javascript as pointed out by #sable-foste and #abdul-malik.
For whatever reason you are doing it you can use this (using JQuery):
$(window).resize(function() {
resizeSite();
});
function resizeSite(){
var winH = $(window).height();
var winW = $(window).width();
// you will want to do some stuff here for deciding what to do and when...
// when the window size is too small shrink the site using your ratio
// when the window is larger increase the size of your site i.e.
// Height = Width / 2
// Width = Height * 2
var tgtW = winH * ratio;
var tgtW = winH * ratio;
$("#siteContainer").height(tgtH).width(tgtW);
}
And add a call to the function on load as well. I think doing this would probably create you even more issues though as this would just shrink the size of the containing element, what happens to the content of it? If it was scaled down to fit on a mobile phone in portrait the display would be tiny and pointless, what would the layout inside it be?
Related
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);
I have set the height and width of my parent div to:
width:1060px;
height:650px;
Which gives me an appearance as far as its size in Chrome on my 720 laptop but when I plug the 1080 TV through the HDMI it's too little on the screen.
I wonder if there is a way to resize the parent div to keep the same distance I get from top/bottom/right/left for 16:9 ratio.
Yes, you need to trigger a resize on the container each time on orientation change with js, then calculate your designed width height aspect ratio, then resize your container to screen.height, then multiply your screen height * your desired aspect, then that result is your width, then check if your width is not minor than screen width, if not is good, if true make the same but in backwards, dividing screen width / desired aspect ratio. lastly center your container in the screen with js or css.
that is the idea, i know works because i ve done it, probably there will be an easy way to accomplish the same.
In this way you can build percentually inside the container and will allways look the same in any kind of stuff, the only change will be a strip on the width or height depending your aspect ratio and your device specs, but it will be allways at biggest possible way.
EDIT,
Is something like;
var ratio = 1060/650;
$(window).on('resize', function() {
$('#container')
.css({width: screen.width + 'px', height: screen.width*ratio + 'px'});
if ($('#container').height() > screen.height) {
$('#container')
.css({width: screen.height/ratio + 'px',height: screen.height+'px'});
}
$('#container').css({left: (screen.width - $('#container').width()) / 2+'px',
top: (screen.height - $('#container').height()) / 2+'px'});
});
In jsfiddle wont be nice as this is using screenwidth (you could also use innerHeight, depends if you are going full screen).
Didnt test it but thats the general idea
What you want is a responsive design. In order for your page to resize, you have to start using percentages instead of fixed widths.
For example, change your width:1060px; to width:90%;. The height can stay the same, but if you wanted it to get taller, you can set height:100% and that adjusts according to the content on the page.
Also, instead of using px for text-size, use em. em is like percentages for text.
Here is a great tutorial that helped me a lot with responsive design.
Use CSS media Queries to specify styles for different screen resolutions & sizes. Your browser will choose the respective style depending on the size of the view port.
Read more about that here -> https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I want to insert an image in a webpage and I want it to fit in a 120*40 space.
The problem is, original images can have about any size (400*40, 30*220, etc.)
so if I set height attribute to 40, I might find myself with images larger than 120 width. The same goes if I set a 120px width.
If I set both width to 120 and height to 40, well it fits, but the original ratio is lost, and I don't want that.
What would you suggest ?
Get the original properties of the image in javascript and then set one of them (either to 120 width or 40 height) so that the other fits in 120*40 ?
There are a lot images like that in one page so I think this method is a bit heavy...
PHP solution :
<?php
list($width, $height, $type, $attr) = getimagesize($image);
if($width/$height>3)
$height *= 120/$width;
else
$height = 40;
?>
<img src="<?=$image?>" height=<?=$height?>>
see below for a javascript solution and a CSS solution
css properties max-width and max-height are what you need.
My guess is that it will resize itself if it reaches one of these.
I have used this alot in previous web projects.
But i havent used the combination of both yet.
EDIT: I've sais this in a comment, but setting both those properties does work in my tests. It keeps the ratio and resizes by the limit it reaches first. Do not set any width or height properties, these might cause problems
JavaScript is quite fast, so why not try it?
I'd just stick to finding the aspect ratio and adding some checks:
var width = image.width;
var height = image.height;
var ratio = width / height;
if (width > 120) {
width = 120;
height = 120 * ratio;
} else if (height > 80) {
height = 80;
width = 80 * ratio;
}
image.width = width + 'px';
image.height = height + 'px';
As you seem to be using PHP, ImageMagick can resize an image to fit inside of a predefined box. I only know how to do it via CLI, as I don't use PHP, but I bet the PHP code would be simple.
I was actually searching for an answer to a different query but came across yours.
I use this to resize images which I am finding is very handy in a number of my scripts, but what I would suggest is that you resize the image to a little bigger than the longest side of the container and then use css to center the image both horizontally and vertically and set the container with overflow:hidden;
You lose a small bit of the image around the edges but at least they are all inserted without any stretching or squashing.
Hope that helps you or anyone else trying something similar.
Using a combination of HTML and JS, how could I detect whether a device is in landscape or portrait and then change the size of an embedded video accordingly?
I know a fairly easy way to detect the screen orientation is to compare the width to the height and see which is larger. But how could I then use these variables in the code for embedding the video? The code is from Vimeo:
<iframe src="http://player.vimeo.com/video/15813517?title=0&byline=0&portrait=0" width="320" height="480" frameborder="0"></iframe><p>RCE: A Different Kind of Experience from John D. Low on Vimeo.</p>
You can actually do it without JS by resizing the iFrame windows using CSS. Look into CSS3 media queries. They allow you to set different layouts based on browser size, and work with most modern browsers.
W3C spec: http://www.w3.org/TR/css3-mediaqueries/
Good ALA Article: http://www.alistapart.com/articles/responsive-web-design/
Another resource: http://www.thecssninja.com/css/iphone-orientation-css
An easy way to get started with them is to use something like the Less Framework: http://lessframework.com/
I would reference the window height and width in javascript.
var h = window.innerHeight;
var w = window.innerWidth;
When the height is larger the device is portrait and vice versa. Then size the video width to 100% and grab the actual pixels of the width of the video in javascript then divide the width by the ratio wanted to get the height.
I would use something like to detect change.
(function oriChange(window){
var h = window.innerHeight;
var w = window.innerWidth;
if(h > w){
//portait
}else{
//landscape
}
setTimeout(function(){oriChange},500)
}(window))