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.
Related
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.
I want to create a gallery grid slider responsive with equal height boxes.
Example
650px wide and above 3 columns and 2 rows.
550px wide and below 2 columns and 3 rows.
450px wide and below 1 column and 1 row.
I have been using this jQuery plugin https://github.com/liabru/jquery-match-height for now.
Can I use this with an other plugin slider or there's another alternative?
(function() {
/* matchHeight example */
$(function() {
// apply your matchHeight on DOM ready (they will be automatically re-applied on load or resize)
var byRow = $('.item-wrapper').hasClass('match-rows');
// apply matchHeight to each item container's items
$('.item-container').each(function() {
$(this).children('.item-query').matchHeight({
byRow: byRow
});
});
});
})();
https://jsfiddle.net/76cx7roy/
Here: I used bxslider.
But the problem is not responsive changing 2 columns and 3 rows to 1 column and 1 row. It only works when its load.
(function() {
/* matchHeight example */
$(function() {
// apply your matchHeight on DOM ready (they will be automatically re-applied on load or resize)
var byRow = $('.item-wrapper').hasClass('match-rows');
// apply matchHeight to each item container's items
$('.item-container').each(function() {
$(this).children('.item-query').matchHeight({
byRow: byRow
});
});
if($(window).width() > 450 && !$(".bx-s").length){
var divs = jQuery(".item-container .item-query");
for(var i = 0; i < divs.length; i+=6) {
divs.slice(i, i+6).wrapAll("<div class='bx-s'></div>");
}
}else{
$(".bx-s .item-query").unwrap();
}
$('.item-container').bxSlider({
nextSelector: '#item-nav-right',
prevSelector: '#item-nav-left',
pager: false,
nextText: 'next',
prevText: 'prev'
});
});
})();
https://jsfiddle.net/k55y6c9h/
So if you check out: http://uniplaces.micrositesonline.info/blog/cities/ you'll see the isotope masonry plugin in action. The entire theme is from https://themetrust.com/demos/swell/. The issue is, on our site, the isotope plugin loads in a strange manner, the div that contains the masonry images fails to adjust the height properly and thus, it sometimes gets cut off. You can typically replicate this by reloading the page once it has loaded.
The code containing the js is in 'themetrust.js':
///////////////////////////////
// Project Filtering
///////////////////////////////
function projectFilterInit() {
if( jQuery('#filter-nav a').length > 0 ) {
jQuery('#filter-nav a').click(function(){
var selector = jQuery(this).attr('data-filter');
jQuery('#projects.thumbs').isotope({
filter: selector,
hiddenStyle : {
opacity: 0,
scale : 1
}
});
if ( !jQuery(this).hasClass('selected') ) {
jQuery(this).parents('#filter-nav').find('.selected').removeClass('selected');
jQuery(this).addClass('selected');
}
return false;
});
} // if() - Don't have this element on every page on which we call Isotope
}
///////////////////////////////
// Project thumbs
///////////////////////////////
function isotopeInit() {
setColumns();
gridContainer.isotope({
resizable: true,
layoutMode: 'masonry',
masonry: {
columnWidth: colW
}
});
jQuery(".thumbs .small").css("visibility", "visible");
}
///////////////////////////////
// Isotope Grid Resize
///////////////////////////////
function setColumns()
{
var columns;
var gw = gridContainer.width();
var ww = jQuery(window).width()
if(ww<=700){
columns = 1;
}else if(ww<=870){
columns = 2;
}else{
columns = 3;
}
colW = Math.floor(gw / columns);
jQuery('.thumbs .small').each(function(id){
jQuery(this).css('width',colW+'px');
});
jQuery('.thumbs .small').show();
}
function gridResize() {
setColumns();
gridContainer.isotope({
resizable: false,
layoutMode: 'masonry',
masonry: {
columnWidth: colW
}
});
}
///////////////////////////////
// Center Home Banner Text
///////////////////////////////
function centerHomeBannerContent() {
var bannerContent = jQuery('.home #banner-content');
var bannerContentTop = (windowHeightAdjusted/2) - (jQuery('.home #banner-content').actual('height')/2);
bannerContent.css('margin-top', bannerContentTop+'px');
bannerContent.show();
}
///////////////////////////////
// Initialize
///////////////////////////////
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".content-area").fitVids();
mmenu_nav();
jQuery('#video-background').height(windowHeight);
video_resize();
if(!isMobile()){
getVideoBGs();
}
jQuery('body').imagesLoaded(function(){
projectFilterInit();
isotopeInit();
centerHomeBannerContent();
});
jQuery(window).smartresize(function(){
gridResize();
//full_width_images();
video_resize();
mmenu_nav();
centerHomeBannerContent()
});
//Set Down Arrow Button
jQuery('#down-button').click(function(){
jQuery.scrollTo( ".middle", {easing: 'easeInOutExpo', duration: 1000} );
});
//pull_out_the_quote();
//full_width_images();
});
We've tried modifying it to no avail, removing and tweeking, but nothing seems to work. At this point we think it make be the css transition initialized by the class isotope-item, so we removed it, which seems to work but we are not entirely sure why. Is it possible to retain the transitions and get the isotope plugin to behave with them reliably?
WOOOO that theme is mental to say the least.
There are so many HTTP request's it's not surprising it's failing to load some scripts within the exec time.
Right because this is a theme and we don't want to mess about with stuff to much for updating sake's I would recommend using autoptomize
It will compress and conjoin all your scripts and css files into one nice neat and easy to download file so that no render blocking or partial loading occur's
Just reviewed your site on http://uniplaces.micrositesonline.info/blog/cities/, probably "jquery.isotope.js" file is missing on your directly. Make sure the presence of "jquery.isotope.js" at JS folder. lets try
masonry site
masonry.js
The masonry.js plug in works fine on window resize (it re-grid the divs well)
but I need it to re-grid when I press a button that resize the #container div. While the screen screen resolution is still same.
var $container = $('#container');
// initialize
$container.masonry({ columnWidth: 200, itemSelector: '.item'});
$container.masonry('bindResize')//resize on window resize
//=========================
eventie.bind( '#resize_button', 'click', function() {
//
document.getElementById('#container').style.width='70%';
//...................................
// do the rearrangement
//...................................
}
You need to trigger masonry's layout() method after you change the width of the container.
Check out this fiddle
JSCODE
$('document').ready(function () {
var container = document.querySelector('.masonry');
var msnry = new Masonry(container, {
columnWidth: 60
});
$('#btn').on('click', function () {
$('.masonry').css('width', '50%');
msnry.layout();
})
});
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());
});