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

November 18, 2012 Marky Roden CSS, jQuery in XPages, XPages

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).

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

Community Blogging and why you shouldn’t give a &^%$ what anyone thinks

November 15, 2012 Marky Roden Just Marky

Background

I have a Ph.D in Chemistry (yay me…). I spent 3 years making many previously undiscovered compounds and characterized them! What I created and the papers I published were no use to anyone as far as I knew at the time – but in the future if someone else who I will never know needs to create a chemical with specific properties, my papers are out there and will help. In the same way that my research depended on those who came before me – my research will help those who come after me. It was the purest form of research. There was no company sponsoring it, needing results to justify their investment. It was funded by a purpose and a desire to further knowledge – which is what I did………That mindset is how I approach blogging.

Community Blogging – why?

Why do people blog? There are many reasons…..and you know people who fit these categories:

Egotistical desire to let everyone else know how awesome they are
People who are insecure and need a voice……
People who are naturally sharing individuals who truly care about increasing the communal knowledge
People who are trying to get ahead and make themselves stand out in a tight job market
People who are all of the above in some way shape or form depending on day/mood/alcohol or caffeine intake

This post is aimed at the staggering amount of Notes/Domino people who are doing really cool &^%$ every day and want to share but have way to many inhibitions to do so. “Noone cares”, “I can’t write”, “I would be wasting my time” – whatever!

Don’t be selfish – you learned from others after all….

Don’t be so selfish and keep everything to yourself………after all you are reading this and you know the benefit of learning from others – give something back once in a while. Call be a raving socialist but I believe that we as a whole community can be better as a whole when everyone shares their knowledge. You learned from others and took their ideas and modified them to make it your own………….

I think (as the title suggests) you need to understand is that it doesn’t matter what anyone else thinks about your blogging – it is all about what you think and more importantly about what you do to share it.

Even if it is as simple as – I came across this cool idea the other day but I don’t know what to do with it, people will read it, people will contribute, people will benefit and people will make you better.

Blogging is easy

WordPress is free – takes 5 minutes to set up
PlanetLotus.org – takes a few minutes and an email to get registered – if you need help buzz me – marky @ thiswebsite.com

To all those people who have thought about it and wondered who cares? Stop giving a crap about who cares and start sharing………

Find a topic which interests YOU (for me jQuery and User Experience)
Write about it (Just like I tell my kids – the more you write, the better writer you will be)
Don’t stress – you are not going to get criticized about how you write
Do it (as the slogan goes)

Why my blog?

My blog is purposefully not full of business speak – I can do business speak but I think it is harder to read as a community blog. I started this blog for two reasons:

It forced me to learn XPages which is something I felt I needed to do to get ahead
I wanted it to help me get ahead! and it worked! – not because it made me any smarter, but it made more people aware of my skillset.

I don’t care if people read the blog or not (liar) and I more importantly want to give back to a community which I have been taking from for over 10 years and anything I can do to help another developer is time well spent.

There is no bigger rush than knowing that something you wrote about helped someone else – try it, you’ll be surprised!

Don’t worry about what other people think……..

If you want a voice but don’t want to manage a blog, let me know and I will help you publish.
If you have a voice – use it.

Stop giving a &^%$ what people think about what you say – you’ll be surprised how appreciative they are that you took the time to do something for them !

Do it !

How to always show OneUI action buttons with a simple CSS trick

November 7, 2012 Marky Roden CSS, Extension Library, OneUI, OpenNTF

In this article I will show how your ExtLib Application Layout Control action buttons (OneUI) can remain on the page at all times with a simple CSS Trick.

The following was created using the Extension Library Application Layout control – with OneUI v2.1 using the silver theme.

Introduction

OneUI is a great, simple layout for a nice clean application layout without too much worry about CSS and other complicated design things. There are some nice examples on the OpenNTF site about using the OneUI layout. The http://xpages.info/XPagesHome.nsf/Home.xsp website uses the same layout and you can see for yourself how the top bars scroll out of the screen as you move down the page.

The buttons in the PlaceBar stay put as the page scrolls down – as the page gets larger this becomes more of a pain for the user to have to scroll back to the top to get to the Save button.

The desired effect

My requirement in modernizing my current R5 web based application was to keep the look and feel as close to the original frameset as possible. The buttons were in the top frame and therefore visible on the page at all times. Without wanting to revert back 15 years and use frames in the XPage I had to come up with a way to keep the buttons on the page at all times.

The initial look

The initial buttons look like this in the placebar – nothing spectacular to see here

Using what else – FireBug

So I had to figure out first of all what the CSS was for the buttons and then if I could change them. Looking at the HTML in FireBug you can see that the buttons are in a DIV with two classes: .lotusPlaceBar and .lotusBtnContainer

Fixing the position

Fixing the position of the buttons is as simple as using “position: fixed” and then they stay in that place on the screen. I added some other styling to pad it a little, and move at away from the side of the screen like this

This is achieved by adding the following style to the XPage

		.lotusPlaceBar .lotusBtnContainer {
		    background: url("/xsp/.ibmxspres/dojoroot-1.6.1/dijit/themes/claro/images/titlebar.png") repeat scroll 0 0 #EEEEEE;
		    border: 1px solid #CCCCCC;
		    float: right;
		    padding-bottom: 0.3em;
		    padding-right: 0.3em;
		    padding-top: 0.3em;
		    position: fixed;
		    right: 20px;
		    z-index: 99999;
		}

There we have it – fixed buttons on the page

As you can see from the picture below – the buttons stay in exactly the same place on the screen as the user scrolls down the page

All the way to the bottom of the screen

Xomino

Sharing, Collaborating and Learning.

Month: November 2012

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

Avgrund.js

Community Blogging and why you shouldn’t give a &^%$ what anyone thinks

How to always show OneUI action buttons with a simple CSS trick