Flyout

A flyout

$('.ui.flyout') .flyout('toggle') ;

On a mobile viewport, flyout will always be shown fullscreen.

A flyout can specify its width.

Width can also be defined like the ui grid system.

Flyout's width should be defined only with left and right classes.

A flyout can specify its display position.

$('.ui.flyout') .flyout('toggle') ;

top and bottom flyout's height is automatically defined.

A flyout can take all the entire screen if needed.

$('.ui.fullscreen.flyout') .flyout('toggle') ;

A flyout can have a scrolling content

$('.ui.longer.flyout') .flyout('show') ;

You can center align the header, the content or even actions individually

$('#centerexample') .flyout('show') ;

You can also place the action buttons to the left

$('#leftactionsexample') .flyout('show') ;

Header and/or Actions can also appear on the same basic background as the content

$('#basicheaderactionsexample') .flyout('show') ;

A flyout can be initialized inside any element, not just a page's body.

A flyout's context cannot have any padding. You can solve this by padding its inner content, or using an additional containing element

// using context $('.context.example .ui.flyout') .flyout({ context: $('.context.example .bottom.segment') }) .flyout('attach events', '.context.example .menu .item') ;

Using a flyout requires a specific page structure. For optimal performance your page should be already set-up with this structure before initializing a flyout.

Flyout will automatically add the correct layout on first load if it is not set-up, however fixing your page's layout on load will reduce performance and is not recommended.

<body> <div class="ui flyout"> ... </div> <div class="pusher"> Your site's actual content </div> </body>

The pusher is the element that will be pushed away by the flyout and should contain your site content.
If your pusher contains overflowing content, you might use overflowing pusher to prevent possible undesired side effects (for example when using native sticky somewhere)

A flyout can be included anywhere on the page. On initialization a flyout's current size will be cached, and the element will be detached from the DOM and moved inside a dimmer.

$('.ui.flyout') .flyout() ;

You can create temporary flyouts without the need to create markup on your own. Temporary flyouts will be removed from the DOM once closed by default if there isn't a custom onHidden callback given.

$.flyout({ debug: true, verbose: true, autoShow: true, title: 'Important Notice', class: 'wide', closeIcon: true, content: 'You will be logged out in 5 Minutes', actions: [{ text: 'Alright, got it', class: 'green', icon: 'save' }] });

All the following behaviors can be called using the syntax:

$('.ui.flyout') .flyout('behavior name', argumentOne, argumentTwo) ;

Behavior	Description
attach events(selector, event)	Attaches flyout action to given selector. Default event if none specified is toggle
show	Shows the flyout
hide	Hides the flyout
toggle	Toggles the flyout
hide others	Hides all other displayed flyouts
is visible	Returns whether the flyout is visible
is hidden	Returns whether the flyout is hidden
get direction	Returns direction of current flyout
get settings	Returns current flyout's settings
destroy	Destroys instance and removes all events

A config template is a special behavior to immediately show preconfigured temporary flyouts. Three basic templates are included: alert, confirm, prompt as equivalents to existing vanilla JS variants, but with more possibilities to customize the look & feel.

Config template flyouts will be always autoshown, so no manual show is needed)

$.flyout('alert','hello') $.flyout('confirm','Are you sure?',function(value){}) $.flyout('prompt','Enter Code', function(value){})

Possible parameters are: title, content, handler (in that order to stay nearly identical to vanilla js usage) or a given object {title:'',content:'',handler:function(){}} where as title and content can contain HTML.

If you don't trust the content set the global flyout setting for preserveHTML to false.

$.flyout('alert','hello');

$.flyout('alert','Watch out','This is an important message!');

$.flyout('alert',{ title: 'Listen to me', content: 'I love Fomantic-UI', handler: function() { $.toast({message:'Great!'}); } });

The parameter list and logic is the same as for alert. The selected boolean choice will be provided to a given callback handler.

// title and content $.flyout('confirm','Attention!','Ready?');

// title, content and handler $.flyout('confirm','Attention!','Ready?', function(choice){ $.toast({message:'You '+ (choice ? 'Accepted':'Declined')}); });

// content and handler $.flyout('confirm','Ready?', function(choice){ $.toast({message:'You '+ (choice ? 'Accepted':'Declined')}); });

// title and handler $.flyout('confirm',{ title: 'Ready?', handler: function(choice){ $.toast({message:'You '+ (choice ? 'Accepted':'Declined')}); } });

The call for prompt is basically identical to alert and confirm. There are 2 more options available when an object is given placeholder and defaultValue. If you provide HTML Code for the content and this contains an input, this will be used as the inputfield. Otherwise it creates one dynamically for you.

// provide a placeholder $.flyout('prompt',{ title: 'Enter your name', placeholder: 'Do not enter your mothers name!', handler: function(name){ $.toast({message: 'Your name is ' + (name || 'CANCELLED')}); } });

// set a defaultValue $.flyout('prompt',{ title: 'Enter your name', defaultValue: 'mommy', handler: function(name){ $.toast({message: 'Your name is ' + (name || 'CANCELLED')}); } });

// custom input $.flyout('prompt', 'Custom Input', '

Nickname

', function(name) { $.toast({message: 'Your name is ' + (name || 'CANCELLED')}); });

By extending the flyouts templates object once, you can define your own custom config templates. It has to return an object which will be merged into the flyouts settings prior to creating/showing the flyout.

$.fn.flyout.settings.templates.greet = function(username) { // do something according to flyouts settings and/or given parameters var settings = this.get.settings(); // "this" is the flyout instance return { title: 'Greetings to ' + username + '!', content: ''+ username.toUpperCase() + '
is the best!', closeIcon: true, class: 'inverted', classContent: 'centered' } }

Reuse this whenever you need

$.flyout('greet','mom')

$.flyout('greet','dad')

Setting	Default	Description
context	`'body'`	Selector or jquery object specifying the area to dim
exclusive	`false`	Opening another flyout will dismiss the one displayed. Set to `true` to allow multiple flyout at the same time.
closable	`true`	Setting to `false` will not allow you to close the flyout by clicking on the dimmer.
dimPage	`true`	Whether to dim `context` contents when flyout is visible.
blurring	`false`	If dimmer should blur background
autofocus	`true`	When true, the first form input inside the flyout will receive focus when shown. Set this to false to prevent this behavior.
restoreFocus	`true`	When false, the last focused element, before the flyout was shown, will not get refocused again when the flyout hides. This could prevent unwanted scrolling behaviors after closing a flyout.
keyboardShortcuts	`true`	Whether to automatically bind keyboard shortcuts. This will close the flyout when the ESC-key is pressed.
scrollLock	`false`	Whether to lock page scroll when flyout is visible.
returnScroll	`false`	Whether to return to original scroll position when flyout is hidden.
delaySetup	`false`	When flyout is initialized without the proper HTML, using this option will defer creation of DOM to use `requestAnimationFrame`.
autoShow	`false`	When true, immediately shows the flyout at instantiation time.

Setting	Context	Description
onChange	Flyout	Is called when a flyout is either shown or hidden.
onShow	Flyout	Is called when a flyout starts to show.
onHide	Flyout	Is called after a flyout starts to hide.
onVisible	Flyout	Is called after a flyout has finished showing animating.
onHidden	Flyout	Is called after a flyout has finished hiding animation.
onApprove	Flyout	Is called after a positive, approve or ok button is pressed. If the function returns `false`, the flyout will not hide.
onDeny	Flyout	Is called after a negative, deny or cancel button is pressed. If the function returns `false`, the flyout will not hide.

Setting	Default	Description
namespace	flyout	Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector	selector : { fixed : '.fixed', omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed', pusher : '.pusher', flyout : '.ui.flyout', header : '.ui.header', content : '.content', actions : '.actions', close : '.close', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' }
className	className : { flyout : 'ui flyout', close : 'close icon', header : 'ui header', content : 'content', actions : 'actions', active : 'active', animating : 'animating', dimmed : 'dimmed', pushable : 'pushable', pushed : 'pushed', right : 'right', top : 'top', left : 'left', bottom : 'bottom', visible : 'visible', overlay : 'overlay', fullscreen : 'fullscreen', template : 'ui flyout', button : 'ui button', ok : 'positive', cancel : 'negative', prompt : 'ui fluid input' }
regExp	regExp : { mobile : /Mobile\|iP(hone\|od\|ad)\|Android\|BlackBerry\|IEMobile\|Kindle\|NetFront\|Silk-Accelerated\|(hpw\|web)OS\|Fennec\|Minimo\|Opera M(obi\|ini)\|Blazer\|Dolfin\|Dolphin\|Skyfire\|Zune/g }

Setting	Default	Description
title	`''`	Content of the flyout header.
content	`''`	Content of the flyout content.
class	`''`	Can hold a string to be added to the flyout class to control its appearance.
classTitle	`''`	Can hold a string to be added to the title class to control its appearance.
classContent	`''`	Can hold a string to be added to the content class to control its appearance.
classActions	`''`	Can hold a string to be added to the actions class to control its appearance.
closeIcon	`false`	Whether the flyout should include a close icon.
actions	`false`	An array of objects. Each object defines an action with properties `text`,`class`,`icon` and `click`. Actions will close the flyout by default. Return false from the click handler to prevent that. If you use any of the approve (approve, ok, positive) or deny (deny, cancel, negative) classnames for the `class` property, a `click` handler will be ignored. In such cases use the `onApprove` and `onDeny` callbacks instead. actions: [{ text : 'Wait', class : 'red', icon : 'exclamation', click : function() {} }]
preserveHTML	`true`	Whether HTML included in given title, content or actions should be preserved. Set to `false` in case you work with untrusted 3rd party content.
fields	fields : { class : 'class', text : 'text', icon : 'icon', click : 'click' }
text	text: { ok : 'Ok', cancel: 'Cancel' }

Setting	Default	Description
name	`Flyout`	Name used in debug logs.
silent	`false`	Silences all console output including error messages, regardless of other debug settings.
debug	`false`	Provides standard debug output to console.
performance	`true`	Show `console.table` output with performance metrics.
verbose	`true`	Debug output includes all internal behaviors.
error	error : { method : 'The method you called is not defined.', pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element', movedFlyout : 'Had to move flyout. For optimal performance make sure flyout and pusher are direct children of your body tag', notFound : 'There were no elements that matched the specified selector' }

Flyout BETA
A flyout is an overlay container that displays content from the edge of a viewport

Types

Variations

Width

Position

Fullscreen

Scrolling Content

Center Aligned

Left Actions

Basic Header and Actions

Examples

Using a custom context

Application Content

Set-up

Page Structure

Initializing a flyout

Via existing DOM node

Via Javascript properties

Behavior

Config Templates

Alert

Confirm

Prompt

Create your own template

Settings

Flyout Settings
Flyout settings modify the flyout's behavior.

Callbacks
Callbacks specify a function to occur after a specific behavior.

DOM Settings
DOM settings specify how this module should interface with the DOM.

Config Template Settings
Config Template Settings define default content for dynamically created flyouts.

Debug Settings
Debug settings controls debug output to the console.

Dimmer Message
Dimmer sub-header