Develop Reference

JQuery: Equal Heights not working

I'm trying to equalise the heights of some content in a div. When I load the page, it looks like this:
I get this output in the console:
Content loop no.0
177
Content loop no.1
177
Content loop no.2
177
DONE
In the above output im logging the heights of each element when they loop. However, the second and third elements are 203px tall, not 177. When I resize my browser window, it corrects itself, and all works as expected. When I set breakpoints and step through the code, it works as expected. It only seems to happen when I refresh my browser???
I'm trying to only equalise the heights if the column is NOT full width.
Here is my code:
var c,
Cards = {
//Settings
settings: {
row: $('.row'),
card: $('.card')
},
//Initialising Function
init: function() {
c = this.settings;
this.resizeCard();
},
resize: function() {
c = this.settings;
this.resizeCard();
},
resizeCard: function() {
// Reset height
$('.card-content').css('height','');
// Iterate through each "Row" element
c.row.each(function(i) {
var rowWidth = c.row.width(),
columns = $(this).find('.grid-column'),
cards = $(this).find('.card'),
contentHeight = 0;
// If there's more than one card in this row...
if(cards.length > 1) {
// Iterate through each column, check the width
columns.each(function() {
if(rowWidth > $(this).outerWidth()) {// If the card is in a row of cards
$(this).find('.card').addClass('equal-height'); // Add the equal height class
}
});
}
// Iterate through each content div under "Equal Height" cards
$(this).find('.equal-height .card-content').each(function(i) {
console.log("Content loop no." + i)
if($(this).height() > contentHeight) {
contentHeight = $(this).height();
}
console.log(contentHeight)
})
// Set the final height of the content
if(contentHeight > 0) {
console.log("DONE");
$(this).find('.equal-height .card-content').css('height',contentHeight);
}
});
}
}

tablesorter (mottie fork) / restore tbody scroll pos - properly?

I search for a better or official way to restore the scroll position of my tbody table content.
tablesorter 2.26.6
jquery 2.2.3
I do not use tablesorter plugin pager, because all my content is scrollable (not with pages) and I have scroll bars without the scroller plugin. Maybe this is my problem?
Code for tablesorter:
$(document).ready(function () {
$("#fsi_srvovtable")
.tablesorter({
theme: "bootstrap",
widthFixed: true,
showProcessing : true,
headerTemplate: '{content} {icon}',
widgets: ["storage", "saveSort", "uitheme", "filter"],
headers: { 0: {
sorter: false,
filter: false
}
},
widgetOptions: {
filter_reset : 'button.reset',
filter_hideFilters: false,
filter_ignoreCase: true,
filter_saveFilters: true,
filter_cssFilter: "form-control",
}
})
});
The table body has a height of 663px and the content is scrollable.
To save the scroll position I found some tips on stackoverflow:
$("#fsi_srvoverview").on("scroll", function() {
$("#fsi_scroll").html($("#fsi_srvoverview")[0].scrollTop);
if (localStorage) {
var posOverview = localStorage["fsi_srvoverview_scroll"];
if (posOverview) {
localStorage.removeItem("fsi_srvoverview_scroll");
}
localStorage["fsi_srvoverview_scroll"] = $("#fsi_srvoverview")[0].scrollTop;
return true;
}
else {
return false;
}
});
After all resorting or filtering I want to restore the scroll position of my table.
I try .bind("updateComplete",... and $(window).load(function(){ or $(window).ready(function(){ to restore the scroll position of my table body. But this does not work, only if I insert a window.alert popup message before the restore function (I think now it is sure that it is the last call).
On the website http://callmenick.com/post/check-if-everything-loaded-with-javascript I found a hint and build this:
$(window).load(function(){
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
var posOverview = localStorage["fsi_srvoverview_scroll"];
if (posOverview) {
$("#fsi_srvoverview")[0].scrollTop = posOverview;
}
}
}, 10);
});
That works - but the table is jumping to the start/beginning and than to the position.
I look for a parameter to disable this jump or is there a better way to restore the scroll position with tablesorter?
Regards
Jochen

The reason the scroll position changes is because during sorting, the tbody is detached, so the table height is automatically adjusted by the browser. Once the tbody is restored, the scrollbar doesn't revert back to it's previous value.
I haven't tested this method, but if you save the scroll position in a "scrollStart" and "filterStart" event, then restore it on "filterEnd" and "sortEnd", it should work. Here is the sample code:
var top, left,
$win = $(window);
$('table')
.on('sortStart filterStart', function() {
left = $win.scrollLeft();
top = $win.scrollTop();
})
.on('sortEnd filterEnd', function() {
$win.scrollLeft(left);
$win.scrollTop(top);
})
.tablesorter();
The "updateComplete" event should only be firing after the table gets updated ("update" event); if the sortEnd filterEnd combo doesn't seem to be working, try replacing it with tablesorter-ready.

Smooth jScrollPane scrollbar length adjustment with dynamic content

Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.

There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});

center single column in Masonry layout

I'm using the jquery/css masonry layout for a menu layout. Some menu pages only have one column so I need to centre the column, any idea how to do this? Currently using the following javascript:
<script>
var msnry;
function triggerMasonry() {
// don't proceed if masonry has not been initialized
if ( !msnry ) {
return;
}
msnry.layout();
}
// initialize masonry on document ready
docReady( function() {
var container = document.querySelector('.menu-columns');
msnry = new Masonry( container, {
gutter: 10
});
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
</script>

You can add empty or hidden bricks to replace the wanted column.

Jquery tabs: autoHeight for expanding content

I am using jquery sliding tabs from this SITE, which work very nice. The only problem is that the autoHeight jquery function does not adjust to expanding content. Rephrase: The tab container will ajust to the height of the inactive content but the issue is that once the content inside container becomes active and expands vertically it will no longer fit and not be seen <--- It fails to adjust to that. Here is the example JSFFIDLE
I try doing this to adjust the height to expanding content but it is not working:
<script>
var height = 50 // Set to the height you want
$('.st_view').css('height', height+'px')
});​
</script>
Overall Jquery
<script>
$(document).ready(function() {
$('div#st_horizontal').slideTabs({
// Options
contentAnim: 'slideH',
autoHeight: true,
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
tabsAnimTime: 300
});
var height = 50 // Set to the height you want
$('.st_view').css('height', height+'px')
});​
</script>

If it is only togglers that cause the content to expand, you can modify your toggler code like this:
$('#title').click(function() {
$(this).toggleClass('active');
$('#content').toggle();
var $tab = $(this).closest('.st_tab_view');
$tab.closest('.st_view').css('height', $tab.height());
});
For a more general solution, get the jQuery resize plugin, and add this code:
$('.st_tab_view').resize(function() {
var $this = $(this);
$this.closest('.st_view').css('height', $this.height());
});