We Keep Coding

Vary height of hero image with browser window size

I am trying to achieve an effect which can be seen on the https://lexus.com.au website where
no matter what the browser screen height (desktop or laptop etc) the hero image and the cta bar always fill the browser screen.
The height of the hero image varies as the browser height changes.
The image also centres on the main content as the screen changes.
The CTA bar at the bottom of the screen always remains the same height and location.
Is this done with JS using window.InnerHeight or some other method?

TL:DR:
Is this done with JS using window.InnerHeight or some other method? No
There are 2 reasons that contribute to this and while there are likely more, these are the ones I can see without rebuilding what was done just to give you the answer.
They use the background-position: % % to position the image. The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% https://www.w3schools.com/cssref/pr_background-position.asp
This is what gives the image that look of squeezing under the top banner.
Then these were done to position the element itself within the above div. background-size: cover; display: table; https://mattboldt.com/kicking-ass-with-display-table/
It's important to understand that throughout this the reason for it taking up the full width is simple; width was set to 100%. That is actually the easiest part of the whole effort. However combining the above elements to get the correct effect will take some playing with on a codepen. That being said what I've given you is what you need to know to succeed.
Links below are good links to get you started on fully understanding how to complete this task.

HTML : page development like g mail with out browser vertical scroll bar

I am developing CRM project using HTML and CSS. I need to fit my project for all screens without vertical scroll bar same like g mail. If we observe g mail we have scroll bar only for mail section not for browser. I need too implement same like that. Can anyone please help me how to implement. the page should be fit for all screens means if it is in small screen or big screen or medium screen. Is there any tutorials or any script for calculating height for main content based on browser height.
I attached image. In that header and main content section is there. So I need to set body height based on browser height and as well as I need to calculate each section height each time based on browser as well as inside divisions.
we should not give any fixed height , why because we need to fit the screen for all resolutions like 1366*768 and 1400*968 and 1680*1050 and 1920*1080. So when we are increasing the browser height the DOM height also should be increase as well as decrease.
Please help me to find this type of development with HTML, CSS , JavaScript and Jquery.

First you check how the default height of your element is. With JQuery this can be done like this: var height = $('.classOfYourElement').height(); var currentBrowserHeight = $(window).height(); Then you need to attach a listener to resize Event $(window).resize(function() { // Inside here you are now calculating the difference of the height of the window to the default height of window which you set earlier. this difference you should then apply to the div height :) hope that helps. }); –

You need to have a wrapper around the 5th section and give it a fixed height.
Then you have to specify the overflow-y value to scroll i guess.

Parallax background image that fills container

I'm using stellar.js to apply a parallax effect to a background image. The height of the container around the background image is set by javascript to the window height minus the height of the header. I have the background image set to cover in css and want it to fill the container regardless of the screen size. This works fine with no parallax effect, but once I apply the parallax effect the positioning changes, so when the container is tall the image doesn't fill it.
I spoke to Mark Dalgleish, the creator of stellar.js to see if he had any ideas, and he said that the background image has to be taller than the container for it to fill it, which is pretty much the conclusion I had come to. So I'm wondering if there is a different way I can accomplish this. Does anyone have any ideas?
Here's the site I'm trying to make it work on. If you resize the browser window by pulling it in from the side and reload the page you will see what I mean. There's a gap below the image.
http://sonomarinwebdesign.com/agnitio

I'm not quite sure if this would work but something to try is to add javascript that runs when the page resizes:
$(function() {
$(window).resize(function() {
// replace "100" with whatever makes it the best height:
var newHeight = ($(window).height() - 100);
var pictureHeight = 823;
if (newHeight > pictureHeight) newHeight = pictureHeight;
$(".an-yee-tsee-o.parallax.panel-pane").height(newHeight + "px");
});
});
The point here is that you want to resize the parallax background panel when the window is resized. Even if this isn't quite right, hopefully it gets you on the right track. Best of luck!
Note - I was trying to fix the way the site looks when you load it on a "short" screen and then resize the browser larger. For your issue of the background not filling you can scale your background image up for that in a tool such as gimp for larger screens (or get a larger image to start with).
EDIT - Added code to make sure the div never ends up larger than the picture. You can also run this same code on load. It might not look as originally intended but it should work at least.

I finally solved this by using skrollr.js instead of stellar.js, and then setting the background image to "background-attachment: fixed" in the css. The scripts give a similar effect, but scrollr.js starts with the top offset at 0 so it doesn't leave a gap below the image.

100% height and CSS on mobile

I would be certain that this question has been asked before, but I couldn't find anything very similar (there were questions slightly similar)
A trend in mobile browsers is to hide the address bar as you scroll down, which is great, but has problems for websites that are heavily dependent on percentage based element heights, like the responsive website I'm making now.
The problem is, the viewport size changes depending on the visibility of the address bar. Meaning, 100% height is bigger when the address bar is invisible than the size of it when it is visible. This results in a jerky reconfiguration of the website when you scroll. This is especially problematic on mobile Google Chrome as the address bar comes back whenever you scroll up wherever you are in the page. Lots of jerky reconfigurations.
I want 100% to mean 100% in terms of the browser without the address bar. Whatever solution I take, it will require some Javascript but I can't seem to find a way to get this information. One option that comes to mind is screen height, but that means the notification bar of the mobile OS or any other permanent browser UI elements will not be taken into account. So I guess that's the first step, and the next step is finding the most eloquent way to introduce this height to all of the percentage based height elements (I know it could all be done through Javascript, would be nice if I could keep that to a minimum though and not do heaps of element readjustment on resize events).
Answers are very much appreciated.

I had a similar problem on my website, that I solved by hiding the address bar on page load, and setting the elements that I wanted to be 100% height in jQuery. Short answer, is that I don't think you can do it with CSS alone. Here's my jQuery:
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
Here's the jQuery for setting 100% height:
// Set the height of the element
$('#selector').css('height', $(window).height());
// Continuously set the height of the window when screen resizes
$(window).resize(function() {
var theHeight = $(window).height();
$('#selector').css('height', theHeight);
});
Hope this was helpful!
P.S - That code needs to be inside your $(document).ready(function(){ ... });
Oh, also.. it's important to note, that if you scroll all the way to the top, it will make the address bar show again, and push the 100% height stuff down temporarily. I haven't found a workaround for this yet, but it worked for what I needed it for.

Detect page scaling

I'm writing a web page with Javascript. I have to somehow work with my DIV layer properties refer to page scaling.
How can I do this? You can find the example at apple page. Try to scale it and look at top menu.

EDIT: I thought scaling meant re-sizing the window. You meant zooming in and out, my bad.
The top menu on the apple site is a fixed with and will not scale with the re-sizing of the browser window. If you wanted to have that feature, you would have to assign a:
div {
width: %; //percentage value you want
min-width: px; //the minimum pixel value you want
}
This way it expands and decreases with the page width, yet maintains a min width for readability
Also, using em as a font-size will help keep the text size dynamic as well.

You will encounter this (or similar) behavior on virtually any site. Havent tested it in any other browsers but here is my answer to the same question concerning firefox.

You should use EM's for all you dimensions, so all you elements will scale (when font-size only scaling is enabled). So you can measure the font-size on elements to know it the text-zoom was modified or not.
There is no way to know if the page was zoomed by the browser or not (as i wrote, only if the text zoom is used)
here is a workaroud: it will only work if the font-size is zoomed
http://jsfiddle.net/gGdAq/4/
Basically if the width in Pixel of the element your interested in, is not the base font size * the width in em the page was zoomed.
Maybe this question helps:
Catch browser's "zoom" event in JavaScript