We Keep Coding

Show the button at the table bottom even when the window is very small

I have a table sorter html page, the sample is here.
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'scroller'],
widgetOptions: {
scroller_height: 400
}
});
How can I make the bottom button visible even when the windows height is very small (say, can only show one or two rows)? Ideally scroller_height can be some type like $(window).height()/2 and it can automatically update when the window is resized.
The expected is that even when the window is small, the bottom button appears in the screen without scroll action.

If you want to make the scroller window dynamically adjust its height, there are two demos on the main wiki page under Widgets > Scroller.
http://jsfiddle.net/Mottie/txLp4xuk/2/
http://jsfiddle.net/Mottie/abkNM/8037/
Essentially, all you need to do is adjust the outer scroll window height
$('.tablesorter-scroller-table').css({
height: '',
'max-height': height + 'px'
});
Here is the demo you shared updated, and has a minimum height set to 100px.

I'd say that there are a few ways to achieve what you want, and one easy way is to:
create a function that checks the visibility of your table versus the viewport;
Code below:
function checkVisible() {
var bottom_of_table = $("#mytable").offset().top + $("#mytable").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
if(bottom_of_screen > bottom_of_table){
$("#buttons-container").removeClass('bottom-fixed');
}
else {
$("#buttons-container").addClass('bottom-fixed');
}
}
If it exceeds the viewport, add a CSS class to your buttons container that fixes it to the bottom of the screen. Otherwise, remove this class and display the button container normally, at the bottom of the table.
You'd want to run this function-check on load and on window resize, as follows:
$(document).ready(function() {
checkVisible();
$(window).on('resize', checkVisible);
});
I've updated your fiddle: http://jsfiddle.net/12nt19vg/12/show/
Try resizing the window and let me know if this is the behavior you're looking for.
EDIT: Incorporating your additional spec in the comments, I've added an outer div to your buttons container and modified your CSS to visually create the effect that I think you're looking for.
Please take a look at this fiddle: http://jsfiddle.net/12nt19vg/27/show/

How to synchronize two scrollbars for divs with different style overflow

I have a problem trying sync scroll in divs, I have a two divs, the first div has a style with overflow: hidden and the second div has the style with overflow:scroll,then i found a several answers for sync scroll in divs using jquery for example :
$("#div2").scroll(function () {
$("#div1").scrollTop($(this).scrollTop());
});
http://jsfiddle.net/gqHyW/43/
but i have a problem with that solution because at the bottom of scroll the divs are desynchronized , see the image .
Someone has an idea how to solve this error.
Thank you in advance

Your horizontal scroll is showing despite not needing to be there. You can target your horizontal scroll and hide it, while keeping your vertical scroll:
.bottom {
left : 50%;
overflow-y : scroll;
overflow-x : hidden;
}

My bad on my previous answer.
I see what you're after now.
You need to rifle through your P tags and sync the heights depending on the content heights in each.
Here's a function that ought to work in either direction:
var topPs = $(".top p");
var bottomPs = $(".bottom p");
for(var i=0; i< topPs.length;i++){
var topPHeight = $(topPs[i]).height();
var bottomPHeight = $(bottomPs[i]).height();
console.log(bottomPHeight);
if(bottomPHeight>topPHeight){
$(topPs[i]).height(bottomPHeight);
}else{
$(bottomPs[i]).height(topPHeight);
}
}
You still need the horizontal scroll fix I mentioned in my other answers.
I rolled it into a single fiddle: http://jsfiddle.net/op9nddoq/1/
Edit: since this isn't a layout hack, it's perfectly acceptable to use a table here, as it's a table, and the cell heights will adjust all by themselves.

jQuery UI tabbed widget add scrollbar when to many tabs

Hi I am using the jquery UI tabbed widget and I am trying to create a horizontal scroll bar for the tabs.I have created the code to add new tabs on click when the tabs total width is bigger then the containers.The problem is that the tabs move to the second line witch is not what I want.I want them all to stay on the same line and later I will add 2 buttons to scroll from left to right.Here is the code I created:
jsfiddle
As you can see from what I posted the tabs move on the second line even if I added on the container overflow:scroll.

To get you started, checkout this fiddle.
Here's the additional JS:
(function() {
var $tabsCont = $('#tabs_container'),
$tabs = $tabsCont.children(),
widthOffset = 10; // The width calculated below is a bit too large...
$tabsCont.wrap('<div class="tab_cont_wrapper"></div>');
$tabsCont.width($tabs.length * $tabs.first().width() - widthOffset);
$tabsCont.height($tabs.first().height());
})();​
I'll leave it to you to find a better tabs width calculation.
The CSS:
#tabs_container {overflow:hidden !important;}
.tab_cont_wrapper {overflow:auto;}
​

The overflow cannot apply because the height is not set. If you limit the height then it will class the other tabs as overflown.
Just simply add some styling, as so...
<style type='text/css'>
#tabs_container{
max-height:70px;
overflow:scroll;
}
</style>
Hope this helped :)

achieving equal height columns in a responsive / flexible layout

I'm trying to achieve equal height columns on a 'responsive' website.
That means I'm using media queries to provide several layouts for one website depending on the size of the device and window.
I have 2 columns which need to have the same height. It's easy to achieve when the layout is fixed. I found dozens of scripts that do it and it works well.
However when I resize the browser window, that generated height doesn't change. So if the window is smaller, the height of the columns stays the same as before and the contents of the columns overflows. It's ugly.
Is there a way that generated height could change as I resize the window ?
Note : because of what's inside the columns I cannot use any CSS trick with backgrounds images etc. I really REALLY need both columns to truly have the same height at all times.

This question is already pretty old, but I didn't stumble upon a good solution for this myself until now.
A working solution would be a jQuery plugin that does something like setting the height of the columns to 'auto', measuring which one is the highest and set the columns to that height. Something along the lines of this:
$.fn.eqHeights = function (options) {
var $el = $(this),
$window = $(window),
opts = $.extend({}, $.fn.eqHeights.defaults, options);
if ($el.length > 0 && !$el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function () {
$el.eqHeights(opts);
});
$el.data('eqHeights', true);
}
return $el.each(function () {
var children = $(this).find(opts.childrenSelector);
if (!(opts.minWidth) || opts.minWidth < $window.width()) {
var curHighest = 0;
children.each(function () {
var $el = $(this),
elHeight = $el.height('auto').height();
if (elHeight > curHighest) {
curHighest = elHeight;
}
}).height(curHighest);
} else {
children.height('auto');
}
});
};
$.fn.eqHeights.defaults = {
childrenSelector: '*',
minWidth: ''
};
You can see this in action here: demo#codepen.io
The plugin supports two options:
childrenSelector: (Optional) The selector by which children that should get equal height are picked. Defaults to *, so everything in your parent is brought to equal height. Set to > to pick only direct children or something else to get the desired effect.
minWidth: (Optional) The minimum viewport width above width the Plugin is working and calculates equal heights for the seleted children. Below their height is set to auto. This comes in handy if at some point your containers are laid out below each other and shouldn't have an equal height. Empty and inactive by default.
While this is working very good in all browser with which I tested, it is a very hackish solution, so maybe someone here can propose something better. I thought about copying the columns and their wrapper to hidden container in the document, but this isn't any less clean and produces a way bigger footprint.

My favorite trick to creating equal height columns that work almost everywhere is to set "overflow:hidden" on a wrapper div, and setting a huge positive bottom padding and a negative bottom margin on the columns themselves. Now the columns will always be the full height of the wrapper, whatever the height of the wrapper is.
Viz -
<div class="wrapper">
<div class="column"> Column one content </div>
<div class="column"> Column two content </div>
</div>
<style type="text/css">
.wrapper {
overflow:hidden;
}
.column {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
Here's a JSFiddle example - http://jsfiddle.net/yJYTT/

I wrote a small jQuery plugin for this: http://github.com/jsliang/eqHeight.coffee/
Tested it on Chrome, Firefox and IE9 and it works for me.

This works great! To make it work inside of a responsive layout you'll need to add the # media query so it's only used on screen sizes "larger than" your break point. Otherwise, the sidebar color extends down into the main content on the tablet and phone views. Here's how it looks in a responsive stylesheet:
div.wrapper {
overflow:hidden;
}
.column {
background-color: rgba(193,204,164,.5);
padding:2%;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#media screen and (max-width:960px){
.column {padding-bottom:2%; margin-bottom:0px;}
}

I hacked the solution even further from boundaryfunctions's answer to take into consideration responsive layouts where the panels reflow above each other.
By checking each one against the first one's offset.top I was able to detect the orientation of the panels and resize their .panel-body element or assign an auto heigh for reflowed panels.
(function($) {
$.fn.eqHeights = function() {
var el = $(this);
if (el.length > 0 && !el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function() {
el.eqHeights();
});
el.data('eqHeights', true);
}
var panels = el.find(".panel-body");
var fistoffset = panels.first().offset();
var curHighest = 0;
return panels.each(function() {
var thisoffset = $(this).offset();
var elHeight = $(this).height('auto').height();
if(thisoffset.top==fistoffset.top){
if (elHeight > curHighest) {
curHighest = elHeight;
}
}else{
curHighest = "auto";
}
}).height(curHighest);
};
}(jQuery));
$('.match_all').eqHeights();
Example here: http://bootply.com/render/104399

Some time after the question I know - but for reference - last time I had to solve this problem I hacked this jquery code to a plugin:
http://css-tricks.com/equal-height-blocks-in-rows/
obviously $(window).resize is the crucial part - as it'll re-conform the heights once the re-size has taken place. Taking it a step further I always meant to look into 'de-bouncing' the column reconform to help with performance:
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
but never got that far.

I had the same problem. After some research I selected the faux column technique. Check this blog post that I wrote on how to make it work in a responsive design.
Responsive full height (equal height) columns using the faux columns technique

Javascript - table within scrolling div

So I've got a table within a scrolling div. Right now, I resize the div every time the window is resized to allow the user to see as much of the table as possible.
function resizeTable() {
document.getElementById('table-container').style.height =
(window.innerHeight-60)+'px';
};
The only issue is that sometimes the table height becomes smaller than the encompassing div so I get some wasted space at the bottom. So what I would like to have is for the div to resize to the window height unless the height of the table is less than the window height. I've tried this...
function resizeTable() {
var tableContainer = document.getElementById('table-container');
var table = tableContainer.childNodes[0];
if (table.offsetHeight < (window.innerHeight-60))
{ tableContainer.style.height = table.offsetHeight; }
else
{ tableContainer.style.height = (window.innerHeight-60)+'px'; }
};
...but it doesn't work right and cuts off more and more of the table as the window is resized over time. So I come to you for help.

Try using style.maxHeight instead of style.height.