jquery.minimap
jquery.minimap copied to clipboard
goldenapples
minimap initialized but hidden from view
Hi Nathaniel.
I've added the minimap plugin and have activated it with:
$(document).ready( function() {
$('.body_column').minimap();
// I have even tried adding:
$.minimap.show();
});
This creates the aside in the DOM, but when inspecting the page, the element has no height and doesn't show anything in itself, even when adding an absolute height. I think this may have to do with html or body not having min-height set to 100% as I've been able to recreate it when forking your demo page.
You can see my broken demo here: http://www.mybema.com/the-ultimate-customer-service-cheatsheet
Cheers.
Yeah, I see the issue you're having.
This plugin depends on both the minimap and the column that it clones having a containing element with a fixed height and overflow scrolling set. In the demo, that works because the body is set to 100% of the height of the viewport, and the default overflow: scroll value allows the body content to scroll within that box.
It will be harder to make this work in a setup like your page, where the element you want the minimap attached to is far down the page, and flows with other content. You could do it by wrapping the <div class="mybema-insights-feature-description..."> in a containing div that was set to the height of the viewport. I'm not sure how well that would actually work across browsers, though. "position: sticky" would make it easy on iOS/Safari, but I think you would need to polyfill that behavior with Javascript for other browsers.
I haven't figured a good way of addressing these kinds of cases in the plugin. If you have any ideas, let me know.
Not sure I follow. To simplify everything (same link above is now applicable), I've moved the body_column class so that the structure is now:
<body>
<div id='container'>
<div class='body_column'>
The #container element has min-height: 100% and is the wrapper to the body_column div which is being targeted. This still doesn't work.
Are you able to view the minimap on this page by manipulating properties in developer tools?