Develop Reference

equate html element with inner height

Sorry, I'm new to using the Javascript DOM and after my research I couldn't find anything. then i decided to post here
For example:
When I type
console.log(window.innerHeight);
it outputs 633.
then I create an html element and give its height a value of 633px look like:
width: 100%;
height: 633px;
I want this html element to look like a full page, but I cannot
height: 100%
because a different html element will come under it.
When the page height changes, the html element whose height I set as 633px is broken
the main question: Is there a way to equalize the window.innerHeight output with the height of the html element?

I'm not sure why you have two html elements on the same page but setting that aside... How does the second one come in? Does it get loaded via JavaScript? If so, you could make sure the first html id has an id like "" and use javascript to do something like this after the new one gets loaded:
var element = document.getElementById('whatever');
element.style.height = window.innerHeight + 'px';

This can be more easily solved using CSS using the relative units vw and vh. This unit is relative to the viewport. It can be used like this:
.fullscreen {
width: 100vw;
height: 100vh;
}
This example will always remain 100% of both width and height of the viewport and will therefor also scale responsively.

How do I Change image size using flux slider

I want to use flux slider for the website I am building... Everything works fine except that I am not able to change Image size... I have tried the following jquery
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: true,
width: 300,
height: 300,
transitions: ['bars3d']
});
});
but this crops the image to the size i specify insted of scaling.
is there any solution? please help.

Changing the height to 0 and setting your width to negative should do it.
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: true,
width: -300,
height: 0,
transitions: ['bars3d']
});
});

There are three possible problems (not sure as you not added html/css r fiddle);
1) You are resizing image container where as you have set height and width to images as well e.g. <img src="blahblah.jgp" height="900" width="500" /> removing height/width will fix the issue.
2) Secondly, check if you some css not making js to override i.e. you areusing !important with images css (height/width) applied on images.
3) Last but not the least, try this in addition setting images container height/width through js that you are already doing, this will make images to automatically fit to their container.
img{
max-width: 100% !important;
height:auto 100% !important;
display:block 100% !important;
}
Also try adding !important with your js too. hopefully any of them will work for you.
good luck

Height of the embedded object HTML

I encountered small problem with Height of embedded object in html.
I want to set the height and with of the object as per height and width of the browser. I am using following code Width sets properly but when i am trying to set height 100% it will not.
<object type="application/x-shockwave-flash" data="book.swf" width=100% height=100%>
it is working properly for width but not for height.
Is there any possible solution?

You need to set e.g.
html, body { height: 100%; }
Otherwise, there’s really nothing that the percentage in setting the height of the object would relate to. You may also wish to set
html, body { margin: 0; padding: 0; }

Try to write the actual Values of the width and height instead of procents for example :
<object type="application/x-shockwave-flash" data="../Desktop/final.swf" width="349" height="171">
Updated due to comment
If you want full browser size try this links:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.webdesign.org/flash-swish/flash-tutorials/making-flash-taking-the-size-of-browser.15847.html

CSS/Javascript toggle height with animation?

I need to toggle full height to defined height, this is my current code:
<div style="height: 20px; overflow: hidden; display: block;" onclick="if (this.style.height == '20px') { $(this).animate({height:'auto'} } else { $(this).animate({height:'20px'}); }">
The problem is that:
$(this).animate({height:'auto'} - Animating to 'auto' height, doesn't work
Using plain JS this.style.height = 'auto' does work:
How can I either animate it with jQuery or add an animation to the javascript? (either on JS or with CSS) I understand the problem lies in animating to a unknown height, is there a way to get the full height somehow? or idk, how can this be solved?

Here's an animateAuto plugin that addresses this limitation of the .animate() API:
http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/

How to set div height to 100% of user's monitor resolution?

height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.

'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}

So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}

No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}

With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');

Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}

My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});

I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.