Using javascript to help users
javascript html
As javascript is maturing at a fast rate, so are developers and designers of web applications and pages. At first javascript was a frowned upon language and profession, that has changed. Now we see a situation where javascript is being called upon to help the back end developer extend the functionality. But it can also work in other fields, the user interface design part for instance, in ways that not many people are doing.
Not by creating superficial animations and such, but by understanding the needs of the user and anticipating on them. Today such a situation presented itself to me.
If you want to know what I am talking about you can skip to the demo demo page here, make sure you come back to check out the explanation...
Reducing
You know of the need to help the visitor of your page with extra functionality. For instance a 'scroll to top' link at the bottom of your page, like this.
<a href="#topP" id="scrollToTop">scroll to top</a>Useful, if it is needed, but rather useless when the whole page is already visible to that visitor. All you do is give the visitor yet another link to be distracted by, not help him. That link should only be visible when it is needed.
That is where javascript comes into play. With a few simple lines you remove the link from the visitor when he has no need for it.
How?
First you need to know the height of you viewport, for that we turn to the infamous PPK with his script that does just that.For the script and the explanation I direct you to his page about this script which you can find on quirksmode.
We then use this script to see where on the page the link is. First we check if the link is one the page, only than we do something. We get the height of the viewport and the y-position of the link and calculate the difference. If the link is above the fold, we give it a class of inViewPort.
``` >> = linebreak function hideScrollToTop(){ // we start by seeking the height of the browser var height = (typeof window.innerHeight != 'undefined' >> ? window.innerHeight : document.body.offsetHeight); // first we seek the link with class of scrollToTop var up = getElementsById('scrollToTop'); // if the link exists. if(up){ // we get the coordinates from the ppk. var coors = findPos(up); // we then extract the y position yPos = coors[1]; // we calculate what's left.. var left = height - yPos; // if the link is 'above the fold' // aka if there is a positive number left. // we give it a class of 'inViewPort' if( left <= 0 ){ up.className += ' inViewPort'; } } } ```In css we set the display of inViewPort to none and we are off.
.inViewPort {
display: none;
}So there you have it a way of helping users by reducing visual clutter instead of putting up more stuff. You can find the script working on it's own demo page, with all of the javascript needed in the head. Go and play with it.