jquery (or js general) splitter with dynamic height - javascript

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.

Related

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 get the actual width available for content on the browser window?

I'm positioning my elements using JavaScript. In order to do it perfectly I have to get the amount of horizontal space available. Badly, $(window).width() does not take in account the scrollbar width. The result is this:
bad http://dl.dropbox.com/u/62862049/Screenshots/fb.png
Here, "Pagina 1" is contained in a small div that was supposed to align with the right border of the window. Well, it does - literally - ignoring the scrollbar, which covers part of the div, throwing the "1" of "Página 1" to the next line.
use this function
function scrollbar_width() {
var calculation_content = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
jQuery('body').append(calculation_content);
var width_one = jQuery('div', calculation_content).innerWidth();
calculation_content.css('overflow-y', 'scroll');
var width_two = jQuery('div', calculation_content).innerWidth();
jQuery(calculation_content).remove();
return (width_one - width_two);
}
now calculate available with
var availableWidth = $(window).width() - scrollbar_width();
This is similar to two previous questions:
how to get innerWidth of an element in jquery WITHOUT scrollbar
and
How to get screen width without (minus) scrollbar?

javascript How to get dynamically height (when i resize browser)

I'm trying to get height from adjustable div because I'd like to add overflow style into css when height value will be greater than a set value. When you resize window height of this the div change. I'll explain this with some pictures:
The main problem is how to get it dynamically? I mean,when you resize your own window etc.?
In case you are able to use jQuery, I would suggest using the window.onresize method and compute the height of the div.
$(document).ready(function()
{
$(window).on("resize", function()
{
$("#myDiv").text("My height is " + $("#myDiv").height());
});
});​
Take a look at this fiddle I created for you: http://jsfiddle.net/9ftGe/
I hope this is what you wanted.
I think you're looking for monitoring the browser variables...
window.innerHeight
window.innerWidth
Whenever you check/call these variables you should get the exact window inner size and take it from there.
NB: These variables (constants to us) are case sensitive.

Get Default Height Of Element On Webpage after css height has been applied)

How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.

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');

Categories

Resources