Develop Reference

Window height jquery function returns undefined value

$(window).height(); returns no values says its undefined.
var modalHeight = $(window).height();
$('.inside-body-wrapper').css("max-height",modalHeight);
$('.overlay').css("height",modalHeight);
$('.modal').css({
display: "block",
height: modalHeight
});

You can use..
$(document).ready(function() {
var wt = $(window).width();
var ht = $(window).height();
....
....
});

The reason is clear if you think about what jquery actually does, it's returning the height style property for whatever you give the selector. As window doesn't have that it will be undefined.
You could instead try using window.outerHeight or window.innerHeight to get those properties instead which could be useful.

You can make you body tag 100% height and after get the height of the body not the height of the window.

how to get html content width not window's width

I want to retrieve the html content width. Suppose when we resize the window to smaller size then scrollbar comes, so I want to get the width of the entire html content content that is visible and also the content the that is not visible due to the vertical scrollbar.

You can use window.outerWidth and window.innerWidth.

You may try this:-
var width = document.getElementById('foo').offsetWidth;
Try this code:
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
var navButtonsEtcHeight = screen.height - window.innerHeight;
var navButtonsEtcWidth = screen.width - window.innerWidth;

Here's a Fiddle
<div></div>
$(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').append('<h2>'+dWth+'px X '+dHgt+'px</h2>');
$(window).resize(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').html('<h2>'+dWth+'px X '+dHgt+'px</h2>');
});
});
$(window).width(); // Returns width of browser viewport
$(document).width(); // Returns width of HTML document

You want the Element.clientWidth property. It gives the content width of the element.
Here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Setting width and height as a percentage in JavaScript

Here is my JavaScript code:
a.width = a.width ? a.width : 640;
a.height = a.height ? a.height : 360;
How can I make the 640px and 360px percentages instead? I want them both to be 70% of the windows size.

If the container of the element have sizing specified already, then you can simply use percentages in CSS. For instance:
.#my-el {
width: 70%;
height: 70%;
}
<div id="my-el"></div>
However, if you have to use JavaScript for some reason, you could do something like:
el.style.width = Math.round(document.documentElement.clientWidth * .70) + 'px';
You may have to use a more complex approach to determine the viewport size for cross-browser support however, but this question was already answered.

percentage is a relative value.
you need to have relative value like screenWidth (for suppose) 1240px so that you will get percentage of that value.
Example
var pixels = 100;
var screenWidth = window.screen.width;
var percentage = ( screenWidth - pixels ) / screenWidth ; // 0.92%

To set an element's width or height as a percentage, there are a couple of options available.
Firstly, you can set the element's dimensions as a percentage of its container like this:
element.width = "70%";
element.height = "70%";
Alternatively, you can set the dimensions as a percentage of the screen size instead like this:
element.width = "70vw";
element.height = "70vh";
These values stand for "viewport height" and "viewport width".
However, since both of these options use basic CSS values, it may be preferable to add a CSS class dynamically to the element instead of setting its style properties directly in JavaScript. For example:
element.classList.add("my-class");
Then, define the .my-class selector in a stylesheet like this:
.my-class {
width: 70%;
height: 70%;
}

jQuery calculate img's real height / width values which coming from server

I am in a situation that; need to calculate image's original width and heigth values when one of them defined 0 on css. I can't change CSS with jQuery, need to solve like this:
Here is example link.
CSS:
img { width:0px; }​
jQuery:
var imgHeight = $('img').height();
alert(imgHeight);//which returning 0 ofcourse
I hope this is possible with less code, thanks,

Try this:
var img = $("img")[0];
alert( img.naturalWidth + "x" + img.naturalHeight );
http://jsfiddle.net/mjaA3/50/

You could clone the element to a new hidden DOM node (I assume you want to hide it here). Then remove the CSS, then measure the dimensions.

var img = $('img'),
imgHeight = img.css("width","auto").height();
img.css("width","0");
alert(imgHeight);
Here is a fiddle. All we do is temporarily set the height to it's automatic value (which is the image's 100% width), grab the height, and reset the image to width:0;.
EDIT: Since you can't manipulate CSS directly, you can change the class:
var img = $('img'),
imgHeight = img.addClass("auto").height();
img.removeClass("auto");
alert(imgHeight);​
And the CSS:
img {width:0;}
img.auto {width:auto;}​

Get image width/height units in JavaScript

I am creating an image object in JavaScript as
myImg = document.createElement('<img id=preview_image src="src/myImage.jpg" align="baseline" width="50%" height="80%"/>');
The image HTML will be obtained from database as in the given form.
Now, how can I get the height and width with the units (i.e. 50% for width in this case)?

var width = myImg.width, // width = '50%'
height = myImg.height; // height = '80%'
// or
width = myImg.getAttribute('width'),
height = myImg.getAttribute('height');

As documented every DOMElement has a ClientHeight and ClientWidth property, those will have the values you need.
https://developer.mozilla.org/en/DOM/element