Develop Reference

Calculating a responsive header's height and using the result in the style of another div's height

Please bear with me as I attempt to explain the issue I'm having. It's kinda tricky!
I have a fixed header that includes a responsive image, because of this, the height of the header depends on the width of the device. I also have a fixed footer sitting on the bottom of the screen. In-between the header and footer I have a fixed div with scrollable overflow positioned towards the left side of the screen. I need the fixed div in-between the header and footer to have a HEIGHT that is the following:
calc(100% - the header's height in px - the footer's height in px)
To do this, I know I need to use Javascript or jQuery, but I'm unsure how to go about setting that up. Furthermore, I need that styling to only be applied on a specific media query.
I have similar code that adds padding to the top and bottom of another div that is centered between the header and footer. This is the code that I'm using and it works perfectly (in the fiddle I've provided at the bottom, I don't use "DOMContentLoaded" because it doesn't quite work with JSFiddle like it should. same idea slightly different syntax in the fiddle) :
document.addEventListener("DOMContentLoaded", function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight+ "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
I need to use code similar to that, but instead of styling the div "content", I need to be styling a div titled "description" and instead of styling the padding, I need to be styling the height. The last difference is that the styling should only be applied to this media query:
#media screen and (orientation: landscape)
I've created a JSFiddle: http://jsfiddle.net/yg7mjhvn/
Thank you guys so much! I really appreciate it.

If I get it correctly, you just need to set the height of content/description div calc(100% - <header-height> - <footer-height>) with javascript.
So, to do that add a function setDescriptionHeight to your js code which sets the height of description div and add it as a load and resize event handler. All this will be done like this.
function setContentHeight() {
if (window.innerWidth > window.innerHeight) { // window.orientation === 90 for checking the real orientation
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("description").style.height = `calc(100% - ${headerHeight}px - ${footerHeight}px)`;
} else{
document.getElementById("description").style.height = "";
}
document.getElementById("description").style.top = `${headerHeight}px`;
}
window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);
Now, you see that it has a condition window.orientation === 90. That is there to check whether the device is in landscape orientation, and if it is then the styling is done.
note that window.innerHeight < window.innerWidth simply detects whether the width is greater than the height. And, window.orientation === 90 checks the device orientation and it won't be 90 for a laptop or a dekstop screen. Moreover, it is deprecated now and you can see more about it here

Calculating Height of Sidebar Dynamically

I'm trying to work out the algorithm for a fixed div that grows in height (while scrolling) until it's equal to the height of the viewport or div with fixed position relative to another div and the bottom of the viewport
I am using Twitter Bootstrap affix to lock my secondary navigation bar (yellow) and my sidebar (black) to the top of the screen when the user scrolls that far. 
This works fine. The sidebar is the piece that's giving me trouble.  When it is in its in its starting position (as shown in the diagram belorw), I want the top of the bar to sit 30px
down from the secondary navigation bar (yellow) and 30px up from the bottom of the page. 
As the user scrolls, the bar should grow in height so that it remains 30px beneath the secondary navigation bar and 30px above the bottom of the screen (As shown in the diagram below)
After the bar is fixed position, I am able to do what I need to do.  
.sidebar { 
position:fixed;
top:100px;  
bottom:30px;
left:30px;
}
What I can't figure out is how to position the TOP of the sidebar relative to my
secondary navigation bar and the BOTTOM of my sidebar relative to the bottom
of the screen. I've tried calculating the height of the sidebar at the beginning and the end of the
scroll but this causes issues.
I've also tried calculating the final height of the sidebar and letting the bottom of
the sidebar just run off the edge of the screen (when it's in its initial position), but
if there's not enough content on the right side to warrant scrolling, I have no way
of getting to the bottom items in the scroll bar.  Plus my screen starts bouncing
in a really un­attractive way.
below is the current code in use:
ShelvesSideBar.prototype._resize_sidebar = function(_this) {
var PADDING = 50;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
sidebar_height = window_height - nav_bar_height - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);
/* reset the nanoscroller */
_this.$container.nanoScroller();
};
   
this code is called on page load and again on window resize. Any help would be greatly appreciated!

I've been trying to do something similar (minus the fixed elements and navbars). What I found was in order to do any sort of relative height scaling every element above the element I wished to scale all the way up to the opening html tags had to have a relative height set, even if it was just height:100%;. (here's my original question Variable height, scrollable div, contents floating)
My goal was to have the body height fixed to window size like a native full screen application would be with my content subareas scrolling, so this is a bit off topic for what you're wanting to accomplish. But I tried using JS/JQ to start off with as you're trying to do currently and found that I simply couldn't get the window height because the default behaviour for height management is to expand the page height until everything on the page fits. And all the getHeight methods I tried we're getting the page height not window/viewport height as promised. So you may wish to try fixing your body's height to the window and going from there using overflow:scroll; to scroll the page.
A quick note on overflow:scroll; if you have users who use WP8 IE (and probably other versions of IE) it may be advantageous to implement FTscroller to handle all your scroll elements as the overflow property defaults to hidden and is a fixed browser property. The only problem with FTscroller is because it uses CSS offsets to move the content container it may wreak havoc on elements that are designed to switched to fix when they reach x height from top of page because technically the top of page (or rather the top of the container they're in) isn't at the top of the page anymore it's beyond it. Just something to be aware of if you do need to cater for this browser.
And apologies for the complexity of my sentence structure. :/

so I was able to figure this out, for anyone still looking. What I ended up doing was binding to the window scroll event and - whenever the scroll occurred - I check if the class "affix" has been added to the sidebar. If it has, then I perform one set of calculations to determine sidebar height. Otherwise, I perform the other set of calculations. Code below:
/* called on window scroll */
var PADDING = 70;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
header_height = $('.prof_block').height() - nav_bar_height,
sidebar_height = _this.$container.hasClass("affix") ? window_height - nav_bar_height - PADDING : window_height - (header_height + nav_bar_height) - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);

How to center image with full height and variable width

I'm trying to show an image (of arbitrary width/height) in full screen when the screen (also of arbitrary width/height). I'm using HTML/CSS/JS. I want the image to always take up the full screen. If the image is a lower aspect ratio than the screen then I should clip the top and bottom. If the image is a higher aspect ratio than the screen then I should clip the left and right. I never want to see black around the edges.
I can do it using background-image (and background-position, etc.) but I'm having an issue with that (the image flashes as I update it). So I'd like to use an tag. Does anyone know how I'd do that?

I think the question is nice and clear and obviously the OP doesn't have any code... that's why he's asking the question.
I've run into that exact issue before. I don't think there's a way to do it using HTML/CSS if you want the image to end up larger than the containing element with the excess clipped unless you can put the image in the background. If you need to use the tag as you state, then a good solution is to do this imperatively. Here's what I did.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
}
}
Let me explain...
The outerWidth/outerHeight results in the aspect ratio of the window. The img.naturalWidth/img.naturalHeight is the aspect ratio of the image. If the first is greater then we need to set the width of the image to the width of the window and calculate the top value to center the image vertically. If the second is greater then we need to set the height of the image and then use the left to center the image horizontally.
Hope that helps! You can find a bunch of Windows 8 HTML/JS related help in my codeSHOW project at codeshow.codeplex.com and in the Windows Store at aka.ms/codeshowapp.

If you are using jQuery, have a look at these:
http://vegas.jaysalvat.com/
or more lightweight:
http://srobbin.com/jquery-plugins/backstretch/

if you want it to stretch use background-size, or if it has to be a tag, use max-width:100%; in order to center use display:block; and margin:0 auto;
Im not quite sure what youre after though...
How do you update the image so it flashes? When does it occure? It sounds like a job for background-position:center.

Cross Browser: How Can I Adjust the Vertical Position of an Element, Based on Viewport Height?

I've got a dock of icons that I would like vertically centered. This of course would vary, based on screen resolution, etc. What I've currently done, is got the height of a parent DIV, which is sized at 100% of the viewport:
var pageHeight = $('#sidebar').height();
Then, I get the height of the icon container, as this is not predetermined in CSS:
var socialDockHeight = (document.getElementById('social_dock_container').offsetHeight * numberOfIcons);
Note: this only retrieves the height of one icon, for some reason, perhaps because they are coded in an array? I then calculate the new position, and assign it to the element, via jQuery:
var y = (pageHeight / 2) - (socialDockHeight / 2);
$("#social_dock_container").css({
top: y + "px"
}).show();
This works great in Chrome, but not IE, FF, or Safari.

If you're not going to use $(window).height(), then use $('#sidebar').outerHeight();, so you get all the other good stuff like paddings and margins on the element.
Also don't forget about when a user resizes their window. Use .resize(); for that.

You want to have your icons always beeing positioned in the middle of the screen? If your Icons are not that big, why not do:
#social_dock_container
{
position: absolute;
top: 50%;
}
EDIT
As Zee Tee mentioned, of course you need to set margin-top as followed:
$("#social_dock_container").css('margin-top', '-' + socialDockHeight / 2 + 'px' );

Programmatically Clip/Cut image using Javascript

Are there any documents/tutorials on how to clip or cut a large image so that the user only sees a small portion of this image? Let's say the source image is 10 frames of animation, stacked end-on-end so that it's really wide. What could I do with Javascript to only display 1 arbitrary frame of animation at a time?
I've looked into this "CSS Spriting" technique but I don't think I can use that here. The source image is produced dynamically from the server; I won't know the total length, or the size of each frame, until it comes back from the server. I'm hoping that I can do something like:
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;

This can be done by enclosing your image in a "viewport" div. Set a width and height on the div (according to your needs), then set position: relative and overflow: hidden on it. Absolutely position your image inside of it and change the position to change which portions are displayed.
To display a 30x40 section of an image starting at (10,20):
<style type="text/css">
div.viewport {
overflow: hidden;
position: relative;
}
img.clipped {
display: block;
position: absolute;
}
</style>
<script type="text/javascript">
function setViewport(img, x, y, width, height) {
img.style.left = "-" + x + "px";
img.style.top = "-" + y + "px";
if (width !== undefined) {
img.parentNode.style.width = width + "px";
img.parentNode.style.height = height + "px";
}
}
setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>
<div class="viewport">
<img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>
The common CSS properties are associated with classes so that you can have multiple viewports / clipped images on your page. The setViewport(…) function can be called at any time to change what part of the image is displayed.

In answer to :
Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML element combined with a bit of server-side scripting.
...
< ? (open php)
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >
This can be done in Javascript, just google a bit :
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
This generates a new image from an existing one and captures this way in java script the original height and width properties of the original image (not the one id'ed as background.
In answer to :
The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.
...
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';
and if wanted :
newimage.setAttribute('height','200px');
The doubled newimage.style.height and newimage.height is needed in certain circumstances in order to make sure that a IE will understand in time that the image is resized (you are going to render the thing immediately after, and the internal IE processing is too slow for that.)
Thanks for the above script I altered and implemented on http://morethanvoice.net/m1/reader13.php (right click menu... mouseover zoom lent) correct even in IE , but as you will notice the on mousemove image processing is too fast for the old styled IE, renders the position but only once the image. In any case any good idea is welcome.
Thanks to all for your attention, hope that the above codes can help someone...
Claudio Klemp
http://morethanvoice.net/m1/reader13.php

CSS also defines a style for clipping. See the clip property in the CSS specs.

The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.

What spriting does is essentially position a absolutely-positioned DIV inside another DIV that has overflow:hidden. You can do the same, all you need to do is resize the outer DIV depending on the size of each frame of the larger image. You can do that in code easily.
You can just set the inner DIV's style:
left: (your x-position = 0 or a negative integer * frame width)px
Most JavaScript Frameworks make this quite easy.

Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML <canvas> element combined with a bit of server-side scripting.
PHP code to go about extracting the width and height of the really large image:
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
From here, you'd then load the image into a <canvas> element, an example of which is documented here. Now, my theory was that you may be able to extract pixel data from a <canvas> element; assuming that you can, you would simply make sure to have some form of definite divider between the frames of the large image and then search for it within the canvas. Let's say you found the divider 110 pixels from the left of the image; you would then know that each "frame" was 110 pixels wide, and you've already got the full width stored in a PHP variable, so deciphering how much image you're working with would be a breeze.
The only speculative aspect to this method is whether or not JavaScript is capable of extracting color data from a specified location within an image loaded into a <canvas> element; if this is possible, then what you're trying to accomplish is entirely feasible.

I suppose you want to take a thumbnail for your image. You can use ImageThumbnail.js that created from prototype library in this way:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
<!--
new Image.Thumbnail('thumbnail', 'photo');
//-->
</script>
for more information

try use haxcv library haxcv js by simple functions
go to https://docs.haxcv.org/Methods/cutImage to read more about his library
var Pixels = _("img").cutImage (x , y , width , height );
_("img").src (Pixels.src);
// return cut image
but try to include library first