Spread the word

Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Sunday, July 17, 2011

How to Create a Link To Smoothly Scroll To The Top of a Page by jQuery

"Go to top" is a very popular link that we use to put into web pages when pages tend to be long and users always need to go back to the top of the page to avail the options. Users can obviously go back by scrolling up and up and up. But we can also provide them with an option at the bottom of a page, clicking which will automatically take the user to the top of that page.

The most natural and effective way to do it is to place a "quick link" or "inpage link" which should be linked to the ID of the topmost element on the page.

Example of go to top link on a webpage:

Tuesday, March 22, 2011

How to Create Easy Collapsible and Expandable Lists in JavaScript

Here is a very quick and easy way to make your lists collapsible and expandable on clicks by using JavaScript. Now when presenting a long lists of item you can set them to remain collapsed on page load, but after that users can click and expand any of those list headings to see the full list of items. Unlike accordion, here users can easily open up all the lists one by one. Checkout the Demo of Collapsible and Expandable Lists which is created here.
First, just include a JavaScript file in your <header> section of the page -

<script src="http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/acmeousCollapsibleLists.js" type="text/javascript"></script>
Then just below it, within the <header> section of your page, add the following code -