bootstrap popover responsive layout

As i was working on solving some problems with Bootstrap's popovers and our responsive webapp design, I came up w/ this simple snippet to change the location of the popover using placement option using the current window's width.

Example of how to set placement using function:

$('.show-details').popover({
  placement: function(tip, ele) {
    var width = $(window).width();
    return width >= 975 ? 'left' : ( width < 600 ? 'top' : 'right' );
  }
});

In the long run i think it would make more sense to setup those location options in a map or site wide setting object along the lines of: 

var superapp = {};

superapp.popover_layouts = {
   full:  { width: 975, pos: 'left'},
   mid:   { width: 600: pos: 'right'},
   micro: { width: 320: pos:  'top' }
};

function determine_placement(tip, ele) {
   var width = $(window).width();
   var map   = superapp.popover_layouts;

   .... TBD .... :)
}

I'm not sure I'm crazy about that. I wonder if using media queries is a better option. In our situation we will need to adjust the class on each popover.

Probably need a bit more thought on it all.

 __END__

Comments

  1. UnknownMay 3, 2016 at 6:09 AM

    WP SMS Marketing are available dedicated to help to SMS Marketing is the latest form of engaging with your customers,,visit site

    ReplyDelete

Post a Comment

Popular posts from this blog

BootstrapX clickover

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse...
Read more

2 ways to get SQLite to put dates into columns

2 ways to get SQLite to put dates into a column. insert into mytable values( null, datetime('now') ); insert into mytable values( null, strftime('%s', 'now')); The first one inserts a row somewhat like this: 1|2009-03-10 18:47:46 The second inserts an unix timestamp: 2|1236711411 It might be best to use that unix timestamp with an integer column type for dates since SQLite doesn't support a datetime one. It makes comparisons and ordering much easier: select * from dt where lu > strftime('%s', '2009-03-10'); Output of: id|lu 6|1236643200 2|1236711411 3|1236711516 4|1236711518 5|1236711519 But the formatting is pretty ugly. :-/ Hey what about formatting it within the select with the SQLite datetime function: select id, datetime(lu, 'unixepoch') lu from dt order by lu; id|lu 6|2009-03-10 00:00:00 2|2009-03-10 18:56:51 3|2009-03-10 18:58:36 4|2009-03-10 18:58:38 5|2009-03-10 18:58:39 Better but having to add that to each select is kin...
Read more

Please don't create tests like this in Perl

I just came across a test like: And of course, it was silently doing something/nothing/everything. I'd guess most experience Perl coders will notice that the eval will only run the test if the request doesn't throw an exception. Which might be kind of ok but there is no catch or check of the $@ later. If a check is added for $@ later, it will make the test pattern pretty messy Please don't write this type of test. Please. Instead use Test::Exception and drop into a sub. Something along the lines of: This is better for a couple of reasons: test will show some output in case of exception test will stop instead of just pushing on with a bunch of mostly false error (unless the test wants to this to check bad input :) test is simpler to understand (no response, give up) __END__
Read more