Acmeous Blog of Web Technology, Designing, Marketing, Blogging and Money Making

Showing posts with label JavaScript. Show all posts

Thursday, October 13, 2011

How to Color Alternate Rows in a Table with JavaScript and CSS

Tables should be used only when you are actually representing tabular data. Yes, we know that. But by default tables are not so much usable unless we put some addons and make tables usable. One of the best ways to make tabular data usable is to color alternate row backgrounds with different colors so that users don’t get lost while looking into long set of data. This not only helps users to remain on a specific track but also helps them interpret data precisely without generating much visual noise.

You can checkout the Demo of Alternate Table Row Coloring here.

Here is a very simple JavaScript script which can transform any existing tables on a page into tables with alternate row color backgrounds. This scripts check for specific class for a table on a page and puts different classes for different <tr>.
You can simply copy the following code and paste into the <head> section of your page.

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 -

Thursday, October 30, 2008

How to add link and script codes in the Head tag from the body section through JavaScript

Many times we need to add <script> or <link> tags for some selected pages of a website. In many websites we use Content Management Systems or some templates where we can’t add different headers to different pages. But in many pages we need some extra functionality through scripts and other codes which are used differently in different pages within that site. Sometimes we need to insert the scripts within the page body tag which is not at all Web Standards compliant. The scripts and links to css or JavaScript files should always be in the head tag.

Wednesday, July 9, 2008

Simplest way to change images on Mouse Over through JavaScript

Many times we use to give some effects when users mouse overs an element. Sometimes we change the colors, sometimes we change sizes. Many times we also change the images on which users put their mouses on. Many times we use to change the texts in the images which is also done by changing the whole image on mouse over. Many times we see that images remain totally same on mouse over, just the color of the image is changed, which is also done by changing the whole image.

Tuesday, July 8, 2008

How to show a link details in status bar of the browser in JavaScript

Here is another cool trick with JavaScript. Whenever an user mouse overs a linked text or image, you use to show them a tool tip through the title text property of anchor tag. But now you can also show the details of the link in the status bar of the browser. Its very easy and light to show a short description in the browser status bar, whenever an user mouse overs the link text or image. Here is and example of using the onMouseOver and onMouseOut event handlers of JavaScript.

How to get the current time in JavaScript

JavaScript is very amazing scripting language through which you can do many funny things and can also satisfy useful tasks. Here is an very easy and useful use of JavaScript just to show you the use of a JavaScript's inbuilt function. You can easily show the current time in you website through JavaScript. JavaScript has an inbuilt function Date(), from which you can get the desired values. This is a good way to learn the Date() function. Checkout the example.

Thursday, May 22, 2008

JavaScript Trick - Shaking browser window

Here is a trick that how you can shake the screen with JavaScript? JavaScript has many powerful functionalities that can be used to perform many interesting and unconventional ideas. Here is one funny thing that you can do with JavaScript. This is just for fun but a nice script to play with.

Sunday, May 11, 2008

How to detect user's Browser in JavaScript - Which Browser your visitor is using?

Many times you will need to show up different messages or include different elements according to the browser your user is using. For this you need to detect which Browser you visitor is using to browse your Website. There are many techniques to detect user's browsers, here we will detect browsers through JavaScript. Enclose these codes in the Script tag for JavaScript.

Pages

Spread the word