A Stable Content with CSS

JavaScript and Ajax based applications are always perceived as dynamic applications. This type of application is always interacting, always changing for the user using only the browser. That’s practically the beauty of JavaScript and Ajax based applications. Instead of simply boring their users, they provide functionality that could rival any desktop applications.

But an efficient application is not all dazzling functions and changing interface. There are still things that need to stay on the browser no matter what changes were made on the other parts of the application. By providing stable data on the application, the application would even look better as there is a persistent data in the browser.

Developers could even push it further by adding a consistent data on the application. No matter where the user scrolls, the data will stay in the same place. Think of a permanent pop-up but doesn’t take over the entire page of the application. Developers could use this as a detached tool wherein users could click on the functions and see the changes on the browser.

The best way of doing things is through CSS. This form of data manipulation tool is perfect for JavaScript since it could continue streaming data and hold a specific position.

To properly implement this function, developers don’t have to use the coordinate system in specifying the location of the function. In using the x and y system, the browser will point to the specific location of the browser which will not float and will be lost if the user scrolls up or down depending on the location.

In this case, developers have to point the location of the location of the tool through “px”. This measurement will not be based for its location on the browser but on the relative position of the tool in the interface. It will stay in the same position no matter who the user scrolls them.

There are two positions to be specified – the location from the top and the location from the left. If you use zero (0) in both positions, the tool will stick on the upper left area of the browser no matter where the user goes.

For example:

<style type="text/css">
    #name of function {position: fixed; left: 0px; top: 0px;}
</style>

After implementing this function, you should be able to attach any function that you want as long as you provide the same name for the function (#name of function).

The only challenge for developers is when they try to implement the application for those who have relatively smaller screen. Netbooks and UMPCs (Ultra Mobile Personal Computers) have relatively smaller screen that the fixed content might become a bother instead of a useful function.

With the increasing popularity of these forms of computing devices, developers have to seriously consider this factor as their online application would end up being a nuisance application instead of being useful. But if the developers could minimize the said tool but still relevant to the application; the tool could be useful even in small-screened devices.