Floaties

Snippets

	<button class="button floaty_trigger bc_red">Create Floaty</button>

	<script type="text/javascript">

		$('.button.floaty_trigger').click(function () {

			// Set floaty options
			var options= {
				type: 'warning',
				header_title: 'Title',
				content_data: 'Content'
			}

			// Create new floaty
			var new_floaty= basekit.components.floaties.create(options);

		});

	</script>
	
Methods


	// Set floaty options
	var options= {
		type: 'warning',
		header_title: 'Title',
		content_data: 'Content'
		[...]
	}

	// Create floaty
	basekit.components.floaties.create(options);
	
Options Value
type confirm, warning, message, notification, custom
dimensions_size none, tiny, small, default, medium, large huge
dimensions_x none, int
dimensions_y none, int
position none, center, top_left, top, top_right, right bottom_right bottom bottom_left left
color color
text_color color
header_title string
header_dismiss none, false, true
content_data string
content_data_color color
content_icon string
content_icon_color string
buttons_dismiss_color color
buttons_dismiss_text_color color
buttons_ok_color color
buttons_ok_label string
buttons_ok_action function
buttons_cancel_color color
buttons_cancel_label string
buttons_cancel_action function
shaded none, false, true
dismissable none, false, true
timeout none, false, true
timeout_duration int
timeout_action function Triggers on timeout
timeout_counter none, false, true
on_create function Triggers on creating
on_dismiss function Triggers on dismissing
on_hide function Triggers on hiding
on_destroy function Triggers on destruction

	// Set scope
	var scope= $('.floaty');

	// Center floaties
	basekit.components.floaties.center(scope);
	
Parameters Value
scope floaty

	// Set scope
	var scope= $('.floaty');

	// Center x floaties
	basekit.components.floaties.center_x(scope);
	
Parameters Value
scope floaty

	// Set scope
	var scope= $('.floaty');

	// Center y floaties
	basekit.components.floaties.center_y(scope);
	
Parameters Value
scope floaty

	// Set scope
	var scope= $('.floaty');

	// Hide floaties
	basekit.components.floaties.hide(scope);
	
Parameters Value
scope floaty

	// Set scope
	var scope= $('.floaty');

	// Destroy floaties
	basekit.components.floaties.destroy(scope);
	
Parameters Value
scope floaty

	// Set scope
	var scope= $('.floaty');

	// Dismiss floaties
	basekit.components.floaties.dismiss(scope);
	
Parameters Value
scope floaty
Positioning
Confirmations
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', dimensions_size: 'tiny'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', dimensions_size: 'small'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', dimensions_size: ''
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', dimensions_size: 'medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', dimensions_size: 'large'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', dimensions_size: 'huge'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'red'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'green'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'blue'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'orange'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'yellow'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'grey'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'black'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'white'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'red_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'green_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'blue_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'orange_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'yellow_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'grey_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'black_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'white_light'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'primary_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'secondary_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'red_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'green_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'blue_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'orange_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'yellow_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'grey_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'black_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'white_standard'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'red_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'green_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'blue_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'orange_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'yellow_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'grey_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'black_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'white_medium'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'red_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'green_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'blue_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'orange_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'yellow_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'grey_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'black_dark'
Confirm

Lorem ipsum dolor sit amet.

type: 'confirm', color: 'white_dark'
Warnings
Warning

Lorem ipsum dolor sit amet.

type: 'warning', dimensions_size: 'tiny'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', dimensions_size: 'small'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', dimensions_size: ''
Warning

Lorem ipsum dolor sit amet.

type: 'warning', dimensions_size: 'medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', dimensions_size: 'large'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', dimensions_size: 'huge'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: ''
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'red'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'green'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'blue'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'orange'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'yellow'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'grey'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'black'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'white'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'red_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'green_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'blue_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'orange_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'yellow_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'grey_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'black_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'white_light'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'red_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'green_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'blue_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'orange_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'yellow_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'grey_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'black_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'white_standard'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'red_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'green_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'blue_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'orange_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'yellow_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'grey_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'black_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'white_medium'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'red_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'green_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'blue_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'orange_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'yellow_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'grey_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'black_dark'
Warning

Lorem ipsum dolor sit amet.

type: 'warning', color: 'white_dark'
Messages
Message

Lorem ipsum dolor sit amet.

type: 'message', dimensions_size: 'tiny'
Message

Lorem ipsum dolor sit amet.

type: 'message', dimensions_size: 'small'
Message

Lorem ipsum dolor sit amet.

type: 'message', dimensions_size: ''
Message

Lorem ipsum dolor sit amet.

type: 'message', dimensions_size: 'medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', dimensions_size: 'large'
Message

Lorem ipsum dolor sit amet.

type: 'message', dimensions_size: 'huge'
Message

Lorem ipsum dolor sit amet.

type: 'message'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'red'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'green'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'blue'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'orange'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'yellow'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'grey'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'black'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'white'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'red_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'green_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'blue_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'orange_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'yellow_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'grey_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'black_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'white_light'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'primary_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'secondary_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'red_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'green_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'blue_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'orange_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'yellow_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'grey_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'black_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'white_standard'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'red_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'green_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'blue_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'orange_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'yellow_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'grey_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'black_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'white_medium'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'red_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'green_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'blue_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'orange_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'yellow_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'grey_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'black_dark'
Message

Lorem ipsum dolor sit amet.

type: 'message', color: 'white_dark'
Notifications

Lorem ipsum dolor sit amet.

type: 'notification', dimensions_size: 'tiny'

Lorem ipsum dolor sit amet.

type: 'notification', dimensions_size: 'small'

Lorem ipsum dolor sit amet.

type: 'notification', dimensions_size: ''

Lorem ipsum dolor sit amet.

type: 'notification', dimensions_size: 'medium'

Lorem ipsum dolor sit amet.

type: 'notification', dimensions_size: 'large'

Lorem ipsum dolor sit amet.

type: 'notification', dimensions_size: 'huge'

Lorem ipsum dolor sit amet.

type: 'notification', color: ''

Lorem ipsum dolor sit amet.

type: 'notification', color: 'red'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'green'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'blue'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'orange'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'yellow'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'grey'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'black'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'white'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'red_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'green_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'blue_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'orange_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'yellow_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'grey_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'black_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'white_light'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'primary_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'secondary_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'red_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'green_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'blue_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'orange_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'yellow_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'grey_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'black_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'white_standard'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'red_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'green_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'blue_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'orange_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'yellow_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'grey_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'black_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'white_medium'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'red_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'green_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'blue_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'orange_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'yellow_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'grey_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'black_dark'

Lorem ipsum dolor sit amet.

type: 'notification', color: 'white_dark'