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.
Related
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.
quick question. I would like to add a JS program to control the height of one of my bootstrap divs (it's a decorative border on both sides of the page - see picture)
I don't want to have to set the height manually (i.e 2000px;)
I was trying something like this, but I couldn't manage it
css("max-height", $(window).height());
except this just fills up the screen, anyway of filling the body?
Here is the site - davidcodes.co.uk/vintarnBurmese/index.html –
David
If you are targeting modern browsers, or using modernizr, then using 'vh' units generally works better than %. When trying to size something relative to the screen height, then percentage units require that the heights of the tree going from your element up through its parents to the body all have predetermined heights. But the 'vh' units exactly capture what you want.
.yourdiv { height:100vh; }
Replace window with 'body':
$el.css('height', $('body').height());
This worked in the end (though Safari doesn't like it, FF and Chrome find it ok)
<script>
var mainSectionHeight = $(".mainSection").height();
$(".sideBar").height(mainSectionHeight + 100 + "px");
</script>
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)
I wish for certain sections of a page to fill out at least 100% of the viewport height regardless of the screen size. I also want the content and background of sections to scroll with a parallax effect.
I have jQuery on the page and use the following to resize the section .parallax to full viewport height:
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight);
};
$(document).ready(imageFit);
$(window).resize(imageFit);
I'm aware of the units vh and vw but I don't want to use them because of poor browser support. (By the way, I'm really bad at javascript so please help me improve this if possible).
Here's a pen with the 100% viewport height section: http://codepen.io/Mest/full/GpycL (If unfamiliar with Codepen; click Edit in the bottom left corner to edit the code).
This works fine, however I'm not how to implement the parallax effect. I've tried using Skrollr to modify CSS properties in order to create the parallax effect. However since my section gets it's full viewport height height-value from the script above it seems like Skrollr doesn't consider it to have any height and thus makes the parallax "transition" to occur instantly as I scroll. It works great without the resizing script above.
Sadly I'm unable to set up an example with Skrollr for you, but I confirmed this is what happens by giving my section a height value of X px in my CSS and then Skrollr functioned as it should while scrolling for the first X px.
Thus, my question is the following:
How can I make Skrollr recognize the height set by the script above?
or,
Is there a better/easier way to create the effect I want? Either through another scrolling animation library or with a different approach to fill out the viewport height?
Don't forget to call refresh() at the end of imageFit.
If you include https://gist.github.com/Prinzhorn/5796546 as well, it would be as simple as
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight).refresh();
};
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.