A social network’s UI - simple yet effective with JavaScript

Some website’s user interface (UI) can be a pain to use. That’s because some areas are hard to read, nonsense pages exist or simply there’s so much graphic on the site, the forms and texts are basically hidden from the eye.
OK. I elaborate a bit cos not even me understand what I meant.
For example, the login and registration pages. Usually there are 2 input fields on a login form, or at least 3 on registration forms; and webmasters dedicate full pages for these forms. I really think these pages’ existence is not needed at all and should be incorporated in a website’s structure.
Other thing is, the help pages. I encountered a lot of sites where when clicking those little question marks, I was sent to a dedicated page where there was one single, short sentence. For the cow’s sake, why? Wouldn’t be cooler to just have that sentence included in little bulb and which appears only when the user hovers over the question mark?

A social network has hundreds of thousands of visitors and I think these annoyances should be excluded from the site’s structure. How? Simple: with javascript.

So, first we set a goal: to push all the reg/login forms in one single page and display as much help content as possible using mouse controlled tool-tips.

First we had to decide whether we develop every javascript function from scratch or we better use a framework. The first option is time consuming and usually the result is not so cool as in the case of a framework. We rapidly decided we’ll use a framework. Now let’s decide which framework to use. There are some basic things which should be considered: the framework’s size, it’s functionality, it’s acceptance and finally whether is still developed or not.
As far as I considered JQuery is the smallest in size (when compressed), it’s used even by Google, developers from all around the world write plugins for it and is still developed. So, our choice is: JQuery.

Toggle elements with JQuery
Hiding elements with JQuery is more than simple. First you have to include the jquery framework in your head element, then 3 simple javascript lines:

$("button").click(function () {
$("p").toggle();
});

Of course, it’s always better to put your functions in $document.ready to assure they will work only when the page is fully loaded.
What the above means: if you click a button element, toggle the paragraph element. Simple yet effective. You can ready more about toggle() here.
Another cool way is to animate the toggle effect. In this case the code will look something like this:

$("a.THE_SHOW_LINK").click(function(){
$("div#DIV_TO_HIDE").animate({
height: "180px"
})
.animate({
height: "200px"
}, "fast");
});
$("a.THE_HIDE_LINK").click(function(){
$("div#DIV_TO_HIDE").animate({
height: "0px"
}, "fast");
});

The element with the DIV_TO_HIDE id has to have null height, no display and hidden overflow specified in your CSS, that will be toggled to 180 pixels. An example of the above can be seen here: http://tester.devoracles.com/jquery_examples.html. Feel free to play with it.
Using the above two functions of JQuery you can safely hide forms which normally have dedicated and useless pages.

Tips with JQuery
Another annoyance is when you click a help link and you’re taken to a page where there’s only one line of content. Here comes in help JTip, developed by Cody Lindley. Please click the following link and have a look: JTip.
As you see, when you roll over the links or the question marks, you get some tips. Neat tips. The content of these tips are loaded from those useless pages I talked about, those with one line of content. The annoyance is gone: I’m not taken to those useless pages.

Next post: A social network and the user generated content

Related posts brought to you by Yet Another Related Posts Plugin.