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 Amend Javascript object property

I'm using a responsive style hamburger menu on my webpage, however the resize width of the menu does not match the CSS media queries break point (I suspect this is because it does not take into account the scroll bars)
To avoid this problem, i'm using modernizer to detect the media query break points. Is it possible to change the resize width of the object below?
In short I want to make the resize width = 768 if (Modernizr.mq('(min-width: 768px)')) ?
var pluginName = "slimmenu",
defaults =
{
resizeWidth: '768', // use modernizer to align with MQ breakpoint
collapserTitle: 'Main Menu',
animSpeed: 'medium',
easingEffect: null,
indentChildren: false,
childrenIndenter: ' '
};
Many thanks,

Using flickity to resize as tabs

So I have a project now that is basically defusing bugs and this one in particular is a very annoying case. Flickity is supposed to be "resizing" a specific elements within <div> and working as tabs in the bottom to scroll to the specific informational element. However, all the text is just mashing together.
.
I have figured out, though, when you resize the browser, it works correctly and puts everything in its place by showing one <div> at a time and using buttons at the bottom to switch between <div>.
Here is the flickity part of the jQuery:
modalPopup(e, function() {
if ($(".key .active").not("#resetFilters").length) {
$(".button-group").find($(".key .active").data("filter"));
}
else {
$('.button-group li:first-child').addClass('is-selected');
}
$('.button-group').on( 'click', 'li', function() {
var index = $(this).index();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
gallery.flickity( 'select', index );
});
var gallery = $('.chapters').flickity({
// options
//imagesLoaded: true,
//percentPosition: false,
cellAlign: 'center',
contain: true,
prevNextButtons: false,
pageDots: false,
resize: true
});
});
Where modalPopup() is a function that loads in the information.
Any help or suggestions, are highly appreciated!

I have figured out the issue. The issue is that the width of the element I was using flickity on was at 0px width initially using CCS transitions. Flickity thought the width of the parent element was at 0px and therefore didn't expand out its width elements.
So if you use CSS transitions with flickity resize, make sure you have a width defined.

Slickgrid force columns to fit viewport size when enablecolumnorder equals false and resizable equals false?

I have created numerous slickgrids, but this is the first one that I am creating that I need to have the columns not be resizable and reorderable (draggable). What I really need is for my columns to fit my viewport at all times but not be resizable/reorderable, and not extend horizontally during a screen resize (increase or decrease).
I have found that if I put this into the column options. :'
resizable: false
This will stop them from being resized but upon doing this it resizes my columns on page load to width I specified per column. Which is normally what I would want, but I have a specific width of 1300px for my viewport. So, if I set my pixels just right the grid will behave nicely in the viewport and look great. However, this application that I am working on requires the ability to minimize or maximize the screen, upon doing so my columns which are now set to a specific width remain that width and a horizontal scrollbar appears pushing my columns past the 1300px range.
If I remove column widths and keep forcefitcolumns and then my columns are really tiny and it just looks terrible.
Example of one of my columns. :
{ id: "Mode", name: "Mode", field: "Mode", width: 125, sortable: true, formatter: TaskNameFormatter, editor: Slick.Editors.Text, resizable: false },
Example of my grid options. :
var GridOptions = {
showHeaderRow: true,
showHeaderRow: true,
headerRowHeight: 30,
explicitInitialization: true,
enableCellNavigation: true,
enableTextSelectionOnCells: true,
forceFitColumns: true,
multiColumnSort: true,
topPanelHeight: 25,
autoHeight: true,
enableColumnReorder: false
};
Example of my grid div. :
<div id="slickGrid" class="grid-body" style="min-width: 800px; max-width: 1300px; height: auto;"></div>
And obviously I have the grid resize. :
$(window).resize(function () {
Grid.resizeCanvas();
});
I am just wondering how you handle this situation, basically I need my columns to fill the viewport horizontally and maintain that size even during a window resize. Thoughts? Has anyone defeated this issue before? If I could just figure out how to dynamically keep my columns the appropriate size for the viewport I could call that again during a window resize.
***Note I have also tried the Grid.autosizeColumns and setting the min-width of each column and these do not work either.

https://github.com/mleibman/SlickGrid/issues/17
Found this seems to be doing the trick. :
You need to change the conditional for column resize attribute:
!c.resizable
to:
(!c.resizable && options.forceFitColumns !== true)
Per user tobiasstrebitzer

Programmatically Created AccordionContainer in a BorderContainer having sizing issues

I am trying to programmatically create an AccordionContainer within a BorderContainer. I am able to get the accordion container to show up, however, it appears that it incorrectly computes it's initial size. When the screen draws, the second accordion panel is off the bottom of the screen. If you resize the screen, or press the 'Resize' button on the page, everything fixes itself. It's the strangest thing.
Here is the offending code:
// Create outer div
var node = dojo.byId('columnLayoutDiv');
var bc = new dijit.layout.BorderContainer({id:'brdr' ,design:'sidebar', style:'border: 0px; height: 400px;' });
node.appendChild(bc.domNode);
var widget1 = new dijit.layout.ContentPane({id: "center", region: "center", style:"padding: 0px;"});
widget1.attr('content', 'Left Pane')
bc.addChild(widget1);
var widget2 = new dijit.layout.ContentPane({id: "right", region: "right", style:"padding: 0px;"});
widget2.attr('content', 'Right Pane');
bc.addChild(widget2);
bc.startup();
bc.layout();
// Create the accordion and add it to the container
var resourcesAccordion = new dijit.layout.AccordionContainer({id:'accordionCtr'});
bc.getChildren()[0].attr('content', resourcesAccordion);
resourcesAccordion.startup();
// Create Accordion Panes and add them
var linksPane = new dijit.layout.ContentPane({
title: "Accordion 1",
style: "padding:0px; margin:0px;",
content: "Hello there!<br/>Hello there!<br/>Hello there!<br/>Hello there!<br/>"
});
var experiencePane = new dijit.layout.ContentPane({
title: "Accordion 2",
style: "padding:0px; margin:0px;",
content: "World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>"
});
resourcesAccordion.addChild(linksPane);
resourcesAccordion.addChild(experiencePane);
resourcesAccordion.layout();
bc.layout();
You can see a sample page that I created here: http://www.quimbik.com/sample/accordion.html
Any help would be greatly appreciated!

First off, the way BorderContainer is specified to work, you're supposed to declare height and width on the border container, then width (only) on all of your left/right regions and height (only) on your top and bottom regions. Center should not have any dimensions specified, which is correct in the example above. Your right region does not have a width in its style declaration, so the behavior in that case is unspecified. Try putting in a total width on 'brdr' and a width on your "right" region.
Also, you should be able to just plop your AccordionContainer directly in as your 'right' part of the border container, without the extra contentpane. Just put the region:'right' attribute on AccordionContainer and add it to the bordercontainer instead of the contentpane, or replace the contentpane if for some reason your app is written such that it needs to swap in the content later on.
HTH