I am trying to make a webpage that resizes based on the size of the window and the code below seems to be the solution.
var scale = Math.min( availableWidth / contentWidth, availableHeight / contentHeight );
Could Somebody Tell me why this works and what exactly are we doing with this?
Plz refer this for More Info.
The code you posted is taking the percentage ratio between the width of a certain component and the width of the whole page and the height of the same component with the height of the whole page, but it only gets the smaller proportion between the two calculated to consider whether the page is in landscape or portrait layout.
Apparently this number resulting from this line you posted is to be used for you to be able to calculate the value you want to get given the change in the default screen you used to draw. Assuming the canvas you are drawing the default layout on is 1024px by 768px, we would do it like this:
var scale = Math.min(
availableWidth / /*1024px*/
contentWidth, /*500px => (100 / 2048) = 48.82% of available height */
availableHeight / /*768px/*
contentHeight /*145px (100 / 5.2965) = 19.02% of available height*/
);
In this case your line would bring 19.02%, because the Math.min method brings the smallest of the array. So you would use the height of this object as a reference to determine its width too, in order to try to maintain the aspect ratio of the page. But the ideal thing, in my opinion, is that you learn to deal with flex layout, maybe even with bootstrap, to build responsive grids with less work, since the CSS will scale for you according to the screen size natively , without the need for calculations.
;D
I think this code is trying calculate the scale proportion that it should adjust the content based on the different window.size.
For example, you design the website at the window of size 1600* 960px , but some of the content could not fully showed when you go to a window at 300*200, so you need to have a proportion to scale to make the content could be shown in the right style
The availableHeight and availableWidth is the size of the window.
The contentWidth and contentHeight is the size of a specific content (div in the doc)
You divide the size of window to the size of content and get the smaller one of them using Math.min() will make sure you use the most space of the window, but won't make the content oversize or doesn't follow the effect you want.
Related
beginner programmer so apologies if this is really obvious!
How can i get my website to open at a specific point on the page (in HTML)?
I can't find what this is called anywhere! Not Anchor etc. The website will be wider and longer than most screens. I want the screen/viewport to open at the very centre of a 2500x2500 pixel background.
I am working in DreamWeaver CC on Mac OS X 10
Thanks in advance!!
p.s no code to post, this is my first port of call in putting this together
You can get the client's screen with $(window).width() & $(window).height() , it's jQuery code so you'll have to add a balise script to the jQuery lib on your web page. Can you tell me more about what you want to do ? I have trouble understanding. You don't want any anchor but you want ? Apoligies for not understanding.
Try this bit of Javascript to fire when the page loads
window.onload = function(){
window.scrollTo(1250, 1250);
}
The window.scrollTo(x-coord,y-coord) function takes two parameters, x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left and y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
I picked 1250, because that's 2500 divided by 2, but you may have to tweak that a little if you want that spot in the middle of the screen. You will have to get the screen's viewport and do some math.
(hint: window.innerWidth & window.innerHeight gives you the dimensions including the scroll bar; document.documentElement.clientWidth and document.documentElement.clientHeight is without the scrollbar)
The documentation for window.scrollTo() is here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Some info about the viewport dimensions can be found here: http://ryanve.com/lab/dimensions/
As bryguy said, you can calculate the center of your screen and use scrollTo(). Alternatively, if you have a particular element that you want to scroll to, give the element an id and use the scrollIntoView() function. You can also center an invisible div positioning the div absolutely and setting the top and left values to 50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};
You can do this without jQuery. You can use the native JavaScript function window.scrollTo() to scroll to the center.
To calculate the center of the screen all you have to do is:
For vertical center
Determine the height of the viewport: The height of the viewport is stored at document.documentElement.clientHeight.
Determine the height of the entire document: You can use document.documentElement.offsetHeight or document.body.scrollHeight to get the height of the entire document.
Calculate: Now simply subtract the viewport height from the document height and divide it by two like this:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
For horizontal center
Determine the width of the viewport: The width of the viewport is stored at document.documentElement.clientWidth.
Determine the width of the entire document: You can use document.body.scrollWidth to accomplish this.
Calculate: Now simply subtract the viewport width from the document width and divide it by two like this:
(document.body.scrollWidth - document.documentElement.clientWidth)/2
Now time to scroll
Finally, you'll want to make the window scroll to the calculated point.
window.scrollTo(centerWidth, centerHeight);
If you want to do all of it in one step, you'd do:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
Please note that we've used document.documentElement.clientHeight (and clientWidth) and they give you the viewport size without the scrollbars. If you wish to include the scrollbars you'll have to use other variables. You can find examples of how to get those measurements on the internet.
For more information: Center a one page horizontally scrolling site in browser (not centering a div)
This is all mobile browser related, not desktop.
I'm trying to make a certain div to maintain its dimensions relative to device screen.
So when the user zoom in/out, the DIV and its content (image) will stay the same, nor blurry, not pixelated.
It's very hard to do it XBrowser. I thought that I was almost there but then I saw it on iPhone 5S and every time I used my method, it came out blurry.
I wish it could look like they did it on this website. Please try it on mobile and wait for the footer splash to appear.
They made it so well, no matter which device you have, the splash in the footer remains the same.
Could you please help me on establishing a similar splash behavior?
I am this close to give up :(
Here's what I tried so far. A bit of code and pseudo code:
I get the current viewport width and height
I get the scaleW and scaleH by dividing the vpWidth and vpHeight by screen.availWidht and screen.acailheight accordingly.
I have a problem on choosing which scale to put in the CSS so if it's portrait, i use the scaleW or else, scaleH (Is this a good method?).
I calculate the left and top of the element in this way:
left = (vpWidth-width*scale)/2; top = (vpHeight-height*scale)/2; where width and height are the div's width and height
I calculate the 'translate' like this: translate = -((1 - scale) / 2) * 100; I saw it in the website that I talked about and frankly, it makes sense.
I then apply this code to the div style: -webkit-transform:translate(<%= translate + '%' + ',' + translate + '%' %>) scale(<%= scale %>) translateZ(0px); and of course add the left and top properties.
I'm pretty novice in CSS :( so i learn from code and examples. Not novice in coding at all.
I'm having trouble with a CSS layout - the key part is that I'd like a box to grow in height as its width decreases.
Now, I've started with the 'fixed aspect ratio' technique on an element - where you set the height to 0, and the padding-top to a percentage, say 50%. The padding value is calculated as 50% of the width of the parent element (not the height, as you might guess), so what you end up with is a box with a fixed 2:1 aspect ratio, but otherwise is fluid in size.
The next step (in my half-baked solution) is to modify the padding percentage so it increases as the width decreases (the width is 100% of the page). I'm pretty sure this can't happen in straight CSS, and I'm happy with a small piece of Javascript to update the value when the window is resized.
Can anyone help me with the formula to adjust that percentage inversely to the width?
A few other notes:
The element is a 'spacer' - it will be invisible, so if it takes two elements, etc. that's OK.
The whole layout is fluid and responsive from 2500+ px wide down to 320px, so there's no 'max value' we can use (I don't think).
Thanks in advance.
Perhaps the jQuery .resize() function might be of assistance? it binds a function to whenever the element (or window) is resized.
For example, if you wanted the area of an element #el to always be 50,000 pixels-squared
$(window).resize(function() {
area = 50000;
width = $('#el').width();
$('#el').height(Math.ceil(area/width));
});
Working Example: http://jsfiddle.net/asifrc/T8HrW/embedded/result/
Example Code: http://jsfiddle.net/asifrc/T8HrW/
jQuery .resize() Documentation: http://api.jquery.com/resize/
Let me know if this is what you were looking for :)
I want to calculate the dimensions of certain elements (img, ul, div, etc.) based on screen size. I can't to use percent values. I need pixel values. I also don't want to 'hardcode' everything using media queries and a new set of images for every resolution or screen size.
I thought about making this using screen size. I only need width calculation. So I add the initial width of my images and some initial space between them -> total width, and I then get scaling factor using: screenwidth / totalwidth
Now I scale all of my images and also the space between with this factor.
It's a very simple layout, only a few images and HTML elements. So this scaling should not be expensive.
It would work if the devices gave me reliable width measure for the screen. But depending of the device, I get a different meaning of this value. I'm using screen.width
In some cases screen.width is what the currently width is - in portrait it's a small value, in landscape a large one. But in other ones, width is always the same - the value which is defined as device's width.
So how do I scale my layout according to what's currently screen width in a consistent way with rotation, and without CSS % values? Is this an acceptable way to do layout scaling or am doing no-go?
Edit: I have to add more details after trying Jasper's solution. The images are used in a slider. The slider is basically an UL and each LI contains an image with float:left - so all the images are appended horizontally one after the other. With overflow hidden and stuff only the current slide is visible. Now, the official width of the UL is the sum of the width of all contained LIs. And this means, at least with my current state of knowledge, that I can't use percentage size for the LI elements, because if I did, this will be % of this total width of the UL, which is very large, and I end with immense LI elements/images.
Isn't there any reliable way to get current screen width for all devices ? I already have working code, I only need that the value of screen width is correct.
New update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011 "One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....
This is most likely accomplish-able with CSS alone (which is usually good for performance):
img {
width : 100%;
height : auto;
}
That will keep all the image's aspect ratios but re-size them to 100% width. Now that width is set based on the image's parent element(s) width. If you are using jQuery Mobile then the data-role="content" elements have a 15px padding, so to remove that you can just add a container to the image elements that removes the padding:
HTML --
<div class="remove-page-margins">
<img src="http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />
</div>
CSS --
.remove-page-margins {
margin : 0 -15px;
}
And walaa, you've got responsive images without loads of code or overhead.
Here is a demo using a container and not using a container: http://jsfiddle.net/EVF4w/
Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.
I'm using Blueprint CSS to create a 3 column layout:
LEFT COLUMN: span-6
CENTER COLUMN: span-12
RIGHT COLUMN: span-6
In the center column I want to place an SWF object which needs a fixed size upon initialization:
swfobject.embedSWF(url, "flashDiv", flashWidth, flashHeight, params);
I could calculate the initial size relative to the browser window:
var flashWidth = window.innerWidth*0.50;
var flashHeight = window.innerHeight*0.50;
And resize with jQuery:
$(window).height()
But if a Blueprint layout does change based on the browser, then this would seem unnecessary.
In that case, how would I calculate the initial width and height relative to the column-width of the center column in this layout (span-12)?
You'd make an HTML element that behaves in the way you want, then embed the Flash in the HTML element sized at 100% x 100%
Firstly I'd suggest thinking a little more about your flashHeight value as is it really likely to be 50% of the height of the page?
Secondly, resizing flash dynamically I don't believe is possible and I wouldn't think it's a good idea if you can. Keep your graphical elements a fixed size and allow the text and freeform elements to flow around them as the page size changes.