193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Tipps and Tricks for the Java SE 8 Programmer Exam
Sun, Dec 11th 2016 6
Winning the IBM Collaboration Solutions Developer Competition 2016
Mon, Oct 3rd 2016 4
Creating ICS Calendar Feeds with XPages
Tue, Apr 12th 2016 7
3 XPages hints #3: Homepage and Performance improvements
Mon, Feb 29th 2016 4
Travelling 2.0: How your smartphone can assist you travelling easier and cheaper
Fri, Jan 15th 2016 10
Leaving the yellow bubble for a while
Sun, Jun 7th 2015 5
Simple way to make certain elements sticky in your web application (XPages example using OneUI)
Sun, Apr 19th 2015 5
Top 10
Travelling 2.0: How your smartphone can assist you travelling easier and cheaper
Fri, Jan 15th 2016 10
3 XPages hints #2
Wed, Apr 30th 2014 9
My top 5 wishlist for IBM Notes / IBM Domino Designer, which ones are yours?
Wed, Aug 6th 2014 9
How to use the OneUI V2.1 Framework without ExtensionLibrary
Thu, Apr 5th 2012 9
Creating a test environment: the easy way
Tue, Jun 3rd 2014 8
OpenLog Implementation in XPages
Sun, Jul 31st 2011 8
XPages: Handling disabled Checkboxes
Thu, Mar 26th 2015 8
Displaying fancy loading indicator while loading AJAX
Fri, Nov 11th 2011 7
Creating ICS Calendar Feeds with XPages
Tue, Apr 12th 2016 7
Resolve time difference in hours and minutes of two date/time values
Wed, Aug 17th 2011 6


Simple way to make certain elements sticky in your web application (XPages example using OneUI)
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Frederic dehedin    

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.

Based on the values entered in the fields the form can grow pretty long, so when the users scrolls down to the bottom, the bar with action buttons like “save”, “forward”, etc disappeared on the bottom and the user had to scroll up again in order to klick one of these buttons.  Understandably this does not really improve the usability of an application. In the worst case, this could even cause some 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



---------------------
http://www.fdehedin.ch/517/simple-way-to-make-certain-elements-sticky-in-your-web-application-xpages-example-using-oneui
Apr 19, 2015
6 hits



Recent Blog Posts
6
Tipps and Tricks for the Java SE 8 Programmer Exam
Sun, Dec 11th 2016 4:17p   Frederic Dehedin
Recently i studied for the Java SE 8 Programmer I Exam (Java OCA for short) and was glad that i passed it on the first go. Although i’ve been practicing programming in Java several years, i decided to sustain my practical knowledge with some theoretical background and i’m happy to share my experience in this blog […]
4
Winning the IBM Collaboration Solutions Developer Competition 2016
Mon, Oct 3rd 2016 12:23p   Frederic Dehedin
Just yesterday we came back to Switzerland after our 3 Weeks holidays in Indonesia. We were in Bali, Nusa Lembongan (Island next to Bali) and Rote Island (Timor). So on the 16. September 2016, after a beautiful day on the boat diving with Manta Rays, i was eager to check the contest results and received […]
7
Creating ICS Calendar Feeds with XPages
Tue, Apr 12th 2016 8:52a   Frederic Dehedin
An ICS Calendar feed can be used to exchange calendar data over the internet. It’s also known as iCalendar feed. ICS Calendar Feeds are supported by a vast amount of calendar clients such as Google Kalender / Android Kalender, Microsoft Outlook.. and of course IBM Notes. The main benefit is to provide calendar data in an open standard format, […]




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition