Archive Old Messages

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

No
Yes
I'm on top
I'm on bottom
I'm on left
I'm on right
Fullscreen !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lorem nec purus tempus cursus. Ut consequat suscipit felis ac accumsan. Donec consequat venenatis ex nec fringilla. Vestibulum ac lectus non orci convallis efficitur eget non sem. Nunc tempus risus mi. Duis finibus, nunc ut dictum pretium, leo sapien luctus arcu, ac commodo augue leo et sem. Ut ut metus in turpis aliquam vestibulum. Aenean in tincidunt purus, ac consequat lacus. Nam iaculis enim eu arcu cursus, eu venenatis lacus posuere. Vivamus mattis pulvinar mi, sit amet lacinia purus ornare non. Fusce mattis magna libero. Curabitur a efficitur mauris. Morbi tempor at lectus nec gravida. Duis fermentum risus vel fringilla rhoncus. Maecenas consequat neque nibh, viverra tempor dolor semper quis.

Ut efficitur lectus ac venenatis congue. Morbi sagittis massa sed arcu fringilla, sed consectetur purus pellentesque. Ut sed metus quam. Cras sit amet feugiat ipsum. Vestibulum sed diam porta, bibendum quam ac, pretium dui. Quisque iaculis gravida lorem, vitae maximus nunc bibendum in. Quisque eleifend purus mauris, non rhoncus lorem euismod eget. Suspendisse vehicula ante at ipsum posuere, id elementum leo finibus. Quisque sed mattis ipsum. Donec tincidunt, ex ac suscipit dignissim, massa justo efficitur nunc, at maximus sem lacus vel arcu. Fusce laoreet at erat eu tempus. Fusce condimentum ac purus a lacinia. Cras rhoncus accumsan diam, id tempus quam egestas quis. Praesent eget feugiat arcu. Proin mattis dignissim mi in feugiat.

Vivamus hendrerit eleifend pharetra. Pellentesque nec maximus risus. In hac habitasse platea dictumst. Nulla sit amet ex sed risus imperdiet porta at ac odio. Suspendisse in fringilla risus, ac dapibus turpis. Cras pulvinar lorem in convallis mattis. Sed velit nisi, efficitur id hendrerit nec, imperdiet sit amet ante. Praesent est dui, finibus vel egestas dictum, dignissim quis nibh. Aliquam nisi ipsum, tempus vitae nulla non, posuere vulputate mi. Sed lobortis risus in neque vehicula, non tempor nulla lacinia. Cras non euismod ipsum.

Duis sodales lobortis hendrerit. Fusce id nisi maximus lorem dapibus dignissim. Etiam sollicitudin maximus dapibus. Fusce aliquet massa dui, quis cursus tortor mattis sit amet. Morbi eu sagittis metus. Nunc et mi facilisis, venenatis urna a, euismod elit. Vivamus pulvinar nunc risus, sit amet sollicitudin diam elementum id. Cras ut ultrices lacus.

Vestibulum et mi quis dolor ultrices maximus tincidunt ac nulla. Duis ex turpis, finibus ut volutpat ac, posuere nec mauris. Fusce vitae mollis orci. Suspendisse vitae vulputate nulla. In eu enim quis tortor euismod placerat. Nulla imperdiet tempor arcu, at molestie neque iaculis vitae. Phasellus sit amet interdum tellus. Duis ultrices rutrum felis, ac aliquet ante aliquam non. Mauris placerat tellus eu dolor tristique sodales.

Done !
Header is centered

Content is centered

Look at the Actions

They are aligned to the left

Basic Header

Basic actions below

Menu

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

Types

Flyout

A flyout

Archive Old Messages

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

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

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

Variations

Width

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.

Position

A flyout can specify its display position.

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

top and bottom flyout's height is automatically defined.

Fullscreen

A flyout can take all the entire screen if needed.

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

Center Aligned

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

Header is centered

Content is centered

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

Left Actions

You can also place the action buttons to the left

Look at the Actions

They are aligned to the left

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

Basic Header and Actions

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

Basic Header

Basic Actions below

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

Examples

Using a custom context

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
Archive Old Messages

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

No
Yes

Application Content

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

Set-up

Page Structure

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)

Initializing a flyout

Via existing DOM node

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() ;
Flyout Title
An image can appear on left or an icon
A description can appear on the right
Cancel
OK

Via Javascript properties

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' }] });

Behavior

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

Config Templates

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){})

Alert

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!'}); } });

Confirm

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')}); } });

Prompt

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')}); });

Create your own template

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!', class: 'inverted', classContent: 'centered' } }

Reuse this whenever you need

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

Settings

Flyout Settings
Flyout settings modify the flyout's behavior.

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.

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

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.

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

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', ios : 'ios', 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 : { ios : /(iPad|iPhone|iPod)/g, mobileChrome : /(CriOS)/g, 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 }

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

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' }

Debug Settings
Debug settings controls debug output to the console.

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' }

Dimmer Message
Dimmer sub-header