Cram Everything to your Webpage

You have one page to render everything: news, quote of the day, embedded small online games and even your blog. You can create a page wherein your visitors can scroll down for information but too much scrolling is really annoying. You have to build a website where everything has to be crammed but will never sacrifice the overall lay-out of the website. During the days of HTML, developers are just resigned to the simple fact that everything could never be placed in a single webpage.

Then came Ajax and more specifically, JavaScript. Using the powerful interactivity of JavaScript and HTML for page layout and display, you got yourself a very powerful tool to build a website. You will not have to think where to place all that information in one place and your users will never have to scroll again. There is a command in Ajax that lets users choose what they want to read by hiding some parts of the page.

To understand this completely, let us take a look at these functions that enable these actions:

toggle_visible ()

To use that function you have to wrap your document as a parameter first. That sounds like a very big step but it is actually a small command added to parts of the webpage. By rebuilding the information, you will be able to control them like you are controlling a button or another function of the webpage.

Each article that you have written should be rendered this way – or at least the things that you wanted to be hidden when they are not used.

Aside from this simple function, there are additional parameters that you should add to your article so that it could be retrieved.

First is the el.style.visibility parameter. This parameter ensures that you see nothing when they should be. This parameter will check if the information is visible. If it does, it will be invisible when it is not in use. But it will be back once the information is needed once again by the user.

That function does not end there. You might have done something with the visibility, but not on the overall look of the information. By invoking the “hidden” parameter, you render the information invisible however; you still have to deal with space it has left. If you do not close the space, the hidden function will never be effective.

To close that space you need another parameter – el.style.display. Display will suggest how the specific article will behave in the webpage. At this point you suggest the parameter “none” so that it will not take up any space.

Transforming data into a simple function is just a matter of inserting these functions. When you are able to do that, you do not even have to look for additional functions to wrap the information as a function with specific behavior. The best part of this function is that it does not limit you to very small information but to wide spaces of a webpage as well. That way, you can cram more than two pages in your webpage at the same time without looking very bad.