Multiple options can be passed in when calling a new instance of a toggle switch. Some options can be modified after instantiation.
Assign a name to the popout on creation. This must be unique as an id is generated for the new popout from this parameter. If a name is not provided, incremental numbers are assigned.
Default: '1'$('#trigger').popout( { 'sName' : 'more-info' } );Assign additional classes to the popout on creation.
Default: null$('#trigger').popout( { 'asClasses' : [ 'extra-class-1' , 'extra-class-2' ] } );Pass a string of text, html, or a jQuery object into this parameter to generate the popout's contents
Default: 'Please add content to your popout.'$('#trigger').popout( { 'sContent' : $('<span>').addClass('awesome').html('This example was generated with an object.') } );Turn animation on or off for modern browsers (Chrome, Safari, Opera, Firefox and IE10 +). If 'Modernizr.csstransforms3d' does not pass, animation is not utilized.
Default: true$('#trigger').toggleswitch( { 'bAnimate' : false } );If your popout trigger element is positioned inside of a fixed position element (position: fixed;), set this flag to true to ensure accurate calculation of the popout's Y offset.
Default: false$('#trigger').popout( { 'bFixedWrapper' : false } );Supply custom pixel, em or % width for your popout. For the consistent results, supply a width to ensure your popout is positioned correctly. Reflowing content within a popout may cause the dimensions to change if a width is not specified. Another option is to style your popout in an external stylesheet by supplying a static id with the "sName" configuration option.
Default: "auto"$('#trigger').popout( { 'sWidth' : '50%' } );Supply custom pixel, em or % height for your popout
Default: "auto"$('#trigger').popout( { 'sHeight' : '200px' } );Supply custom location to append popout. This is useful for keeping the DOM uncluttered if you're attaching/removing elements frequently.
Default: "body"$('#trigger').popout( { 'sAppendTo' : '#popout-container' } );Supply function to be called on completion of popout creation. This is useful for binding contents within your popout.
Default: null$('#trigger').popout( { 'fnInitComplete' : function(){ alert('Popout initialized successfully!'); } } );Supply function to be called when a popout is shown/opened
Default: null$('#trigger').popout( { 'fnOnShow' : function(){ alert('Popout opened') } } );Supply function to be called when a popout is hidden/closed
Default: null$('#trigger').popout( { 'fnOnHide' : function(){ alert('Popout closed') } } );Calculate where the popout should be drawn based on the position of the triggering element as well as the size if 'sWidth' and 'sHeight' are not specified. By default, this is bound to browser resize, device orientation change and on initial creation of a popout.
$('#trigger').popout('position');Close all popouts. This is useful when triggering visibility of other UI elements in the interest of preventing collisions/overlapping.
$('#trigger').popout('hide');Remove all traces of an instance of a popout
$('#trigger').popout('destroy');The popout plugin's styles have been generated from a single SASS (mlb-popout.scss) file. If the triggering element is closer to the top or middle of the viewport, the popout is generated below. If the triggering element is closer to the bottom of the viewport, the popout is generated above. There are separate styles for each behavior.