jQuery in Xpages #16 – Avgrund (dialog depth perception)

In this article I will describe how to implement and use the Avgrund modal dialog which uses CSS transitions to give the effect of depth between the dialog and the page.

It is hard to believe that it has been two months since the last jQuery in XPages article – and for that I apologize. My current project requires most of my time to be away from the XPages DDE and as such the opportunity to find new and exciting plugins is decreased. But I came across this one today and figured I would take the time to write it up.

Demonstration

The XPages integration of avgrund.js is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Avgrund.js

Introduction

Avgrund is a very simple 2k jQuery plugin which uses a CSS transition to shrink the visible page while displaying a modal dialog to the user. This gives the perception of depth between the page and dialog and a neat visual transition between the two. The plugin also uses IE alpha filters to fail back for IE<10 browsers which do not have CSS transition support (nice touch).

Avgrund dialog
Avgrund dialog

How does it work

We add the jQuery library and the avgrund.js library file to the database by adding them to the Web-Contents folder accessible via the package explorer.  (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder.

We add the libraries to our XPages like this in the source panel – the avgrund.js also comes with two sample CSS files for the demonstration.

	<script type="text/javascript" src="/xomino/jQinX.nsf/jquery-1.7.1.min.js"></script>
	<link rel="stylesheet" href="avgrund/style/style.css"></link>
	<link rel="stylesheet" href="avgrund/style/avgrund.css"></link>
	<script src="avgrund/js/jquery.avgrund.js"></script>

The plugin itself is very simple to instantiate and use, and the properties are self explanatory and well explained in the demo file:

	$('element').avgrund({
		width: 380, // max is 640px
		height: 280, // max is 350px
		showClose: false, // switch to 'true' for enabling close button
		showCloseText: '', // type your text for close button
		holderClass: '', // lets you name custom class for popin holder..
		overlayClass: '', // ..and overlay block
		enableStackAnimation: false, // another animation type
		onBlurContainer: '', // enables blur filter for specified block
		template: 'Your content goes here..'
	});

The CSS transition is contained within the avgrund.css file and amongst other things scales the page to 0.9 of it’s size when active. A blur effect is also applied for greater visual effect.

body.avgrund-active {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
 /* overflow: hidden;  TIP: disables scrolling for long documents */
}
.avgrund-active .avgrund-blur {
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-ms-filter: blur(1px);
	-o-filter: blur(1px);
	filter: blur(1px);
}

In this case the element in question is the Show button.

Demonstration

The XPages integration of avgrund.js is demonstrated here

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s