We Keep Coding

How to resize an image to fit the remaining window below a container?

I've read through How to resize an image to fit in the browser window?
but it doesn't really fit my need. All there is written for the image to fill the entire browser window. But I want a container of varying height above the image. And a fixed height section below.
JavaScript can get the height of the container. I found:
var offsetHeight = document.getElementById('topsection').offsetHeight;
Andrew Beals's solution on that page looks like a start, but how to subtract the container height, and say 2em for under? I know no JavaScript, so I'd much appreciate some help.

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.

Responsively Scaled Image in CSS

I'm creating a slideshow with jQuery Cycle, and I need to be able to resize the images in the slideshow responsively with css. So far, cycle has been so controlling of the width and height of the images that I haven't been able to do it. I have been able to achieve the images resizing according to window width when I refresh the page, but the images won't dynamically resize when resizing the window. I'm trying to work out a solution in Javascript, but I'd really like to be able to get away with pure css.

jQuery Cycle is setting widths inline on the <img> tags. That's the first problem. I would try removing that, it looks like the options for Cycle has this value slideResize, try setting that to false or 0.
The next step would be setting a max-width on the container, and width: 100% on the imgs.

Just a suggestion - but you'll probably want to use something like JavaScript (or an AJAX service or something) to handle this because if you were to handle resizing the images within the browser that is going to put an incredible amount of strain on the browser to handle all of the resizing and scaling.
You may want to target specific resolutions and serve the images based on the "closest" viewport size accordingly.

you can set the width or height of the image related to a container
.container{width:200px}.container img {width:100%}
Hope this helps!

Set the img elements width to 100% and height to auto to take aspect ratio into account. If you don't want the image to be 100% of the browser, add a container element.

Your best bet to make a image responsive, this is without it being inside a container btw.
img {
width: 100%;
height: auto;
}
Now, it will stretch to the width of the page, but if its contained it will stretch to the width of the container, the thing to try is, making the container grow and shrink as well.

Want an iPhone / iPad / iOS Webpage that is 100% width/height

I'm trying to get a site that is simply 100% of the possible width/height of a device, after scrolling down far enough to get rid of the address bar. Hopefully that makes sense?
I just need the simple dimensions so I can scroll the device to 0,0 and see as much of my page as possible. e.g. simply 320x400 (320 width, 400 might = height - title bar - footer)
The reason for this is that I'm putting a single DIV on a page that is a "viewport" into content that moves around, think google maps. I just want this div to fill all available space.
The problem is that I can't seem to detect the available window height. I always seem to get the screen size - the title bar - the address bar - optional debug bar - footer. How do I detect the "largest possible size"?

Put html,body with height:100%; and the div as position:absolute;top:0;bottom:0;left:0;right:0; and then you dont need the exact width/height of the viewport, the div will already use the maximum possible space.
But if you still want to detect, jQuery got the $(element_you_want).width() and .height() also that might do the trick. Try with document or only body (with 100% height)

If you're using javascript, try alerting: 'innerWidth';
http://www.quirksmode.org/dom/w3c_cssom.html