Simple way to make certain elements sticky in your web application (XPages example using OneUI)

Simple way to make certain elements sticky in your web application (XPages example using OneUI)

In one of my recent XPages applications, i had to develope quite a large form. The UI is based on the OneUI 2.1 Framework.

Depending on the values entered, the the form can grow pretty long, so when the user has to scroll down to the bottom, the bar with action buttons like “save”, “forward”, etc disappeared on the top and the user had to scroll up again in order to click one of those buttons.  Understandably this does not really improve the usability of an application. In the worst case, this could even lead to a support cases (<<Help, my “save” button disappeared>>).

So i was looking for a simple way to make the action bar remain at the top of the form while scrolling down.

scrolling_sticky

 

So how to achieve this?

I did not want to use jquery or a complicated dojo script to achieve that, so i was looking for a simple javascript and found an example on the net. Basically the script observes the scrolling event and then changes the styles of the given element.

To make certain elements sticky, you have to call the function with the DOM element ID, like this:

	makeElementSticky("actionBar",true) 

The “madeElementSticky” function receives the element ID, gets it and observes it. When the observing event is happening, additional styles are either added to or removed from the elements. The central parameter adds some additional styles (for central elements).

function makeElementSticky(id, central) {

	var node = dojo.byId(id);
	var menuPosition = node.getBoundingClientRect().top;

	window.addEventListener('scroll', function() {
		if (window.pageYOffset >= menuPosition) {
			node.style.position = 'fixed';
			node.style.top = '0px';
			node.style.right = '0px';
			node.style.zIndex = '100';
			node.style.boxShadow = '5px 5px 5px #cccccc';
			if(central){
				node.style.right = '228px';
				node.style.left = '228px';
				node.style.width = 'auto';
			}
		} else {
			node.style.position = 'static';
			node.style.top = '';
			node.style.right = '';
			node.style.boxShadow = 'none';
			if(central){
				node.style.left = '';
				node.style.width = '100%';
			}
		}
	})

}

Beware
This does not work on IE. But i tested on Firefox, XUL Runner (Notes Client) and Chrome. It might be simple to do it also for IE, but since my application runs only on the XUL Runner on Notes Clients, there was no need to find a solution (yet..:-).

 

You can download the whole database here (open the start.xsp XPage):

Download Lotus Notes nsf File

Leave a Reply

comment-avatar

*