Develop Reference

JS / jQuery How to get height of dynamic (responsive) div?

I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing

You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});

You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)

Highcharts - how to have a chart with dynamic height?

I want to have a chart that resizes with the browser window, but the problem is that the height is fixed to 400px. This JSFiddle example has the same problem.
How can I do that? I tried using the chart.events.redraw event handler to resize the chart (using .setSize), but I guess it starts a never-ending loop (fire event handler, which calls setSize, which fires another event handler, etc.).

Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.
Highcharts docs:
By default the height is calculated from the offset height of the
containing element
Example: http://jsfiddle.net/wkkAd/149/
#container {
height:100%;
width:100%;
position:absolute;
}

What if you hooked the window resize event:
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
});
See example fiddle here.
Highcharts API Reference : setSize().

When using percentage, the height it relative to the width and will dynamically change along with it:
chart: {
height: (9 / 16 * 100) + '%' // 16:9 ratio
},
JSFiddle Highcharts with percentage height

Remove the height will fix your problem because highchart is responsive by design if you adjust your screen it will also re-size.

Alternatively, you can directly use javascript's window.onresize
As example, my code (using scriptaculos) is :
window.onresize = function (){
var w = $("form").getWidth() + "px";
$('gfx').setStyle( { width : w } );
}
Where form is an html form on my webpage and gfx the highchart graphics.

Another good option is, to pass a renderTo HTML reference.
If it is a string, the element by that id is used.
Otherwise you can do:
chart: {
renderTo: document.getElementById('container')
},
or with jquery:
chart: {
renderTo: $('#container')[0]
},
Further information can be found here:
https://api.highcharts.com/highstock/chart.renderTo

I had the same problem and I fixed it with:
<div id="container" style="width: 100%; height: 100%; position:absolute"></div>
The chart fits perfect to the browser even if I resize it. You can change the percentage according to your needs.

jquery (or js general) splitter with dynamic height

There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?

You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.

Why does this javascript (jquery) function seem to run out of order?

I'm having a nightmare with a simple function!
I want it to:
read the height of a div with existing content in it
Update the div with the new content (supplied to the function)
Read the height the div should be, but set it to the original height.
Animate the div's height to adjust and fit the new content.
Code is as follows:
// function to display status content by animating the height of the status message
function slideStatus(content){
// get current height
var status_origheight = $("#status-message").height();
// insert new content
$("#status-message").html(content);
// get new height
var status_newheight = $("#status-message").height();
// set the height to the orig value, hiding overflow content
$("#status-message").height(status_origheight).css("overflow","hidden");
// animate the div to the new height
$("#status-message").animate({height:"+="+(status_newheight - status_origheight)+""}, 1000);
}
When i run this, it appears to ignore the fact that the content has changed, and just use the original height (therefore do no animation as it thinks the height has not changed).
Please help if you can!! It's driving me nuts.

Work for me. Your bug is likely elsewhere... http://jsfiddle.net/6aBfD/
UPDATE
http://jsfiddle.net/6aBfD/3/
But that only works once. The problem is that you are relying on an element to set it's own height and read from that. But after the first run, you lock the height to a specific value. The updated link has the correct working clode, click it multiple times. I added the following:
$("#status-message")
.css("overflow","visible")
.css("height", "auto");
Now when you read the height it will be it's natural height. Then set the oveflow and height again later to lock it back down to what you want.

Rob,
Try the following instead of .height():
var status_origheight = $("#status-message").css('height');

FancyBox resize width

I'm able to resize the height with the $.fancybox.resize(); part, but the width just doesn't update according to the new content. Thoughts?

From the fancybox api docs:
$.fancybox.resize: "Auto-resizes FancyBox height to match height of content."
So it looks like it is not intended to adjust the width.
If you wish to adjust the width, you can do it by manually resizing the #fancybox-wrap and #fancybox-inner elements. After some very quick checking, it looks like #fancybox-wrap is set to 20px wider than #fancybox-inner:
$('#fancybox-inner').width(400);
$('#fancybox-wrap').width(420);
You can also control the width when you first register fancybox using the width option:
$('#somelink').fancybox({ width: '100px' });

In newer versions of fancybox (1.3.4 in my case) use
$('#fancybox-content').width(600);
instead of
$('#fancybox-inner').width(400);
for manually adjusting the width

Here's what worked for me:
$('#fancybox-wrap, #fancybox-outer, #fancybox-content').css('width', 'auto');
$.fancybox.center();

make some changes in jquery.fancybox.js near about line nubmer:837 change
current.width = loadingBay.width();
to
current.width = loadingBay.width() + 2*current.padding;
it worked fine to me.

Just open jquery.fancybox.js and add your own width. Here is my code with width = 72%.
// Reset dimensions so we could re-check actual size
wrap.add(skin).add(inner).width('72%').height('auto').removeClass('fancybox-tmp');