Scenario:
I have different select box and multiple select boxes. The select dropdown and multi select boxes have some price value associated with them. Upon selecting them I have to calculate the total price and display it in a textbox.
Solution:

Scenario:
I have different checkboxes and radio buttons. The checkboxes and radio buttons have some price value associated with them. Upon checking them I have to calculate the total price and display it in a textbox.
Solution:

You can add tabs in a CMS page in Magento. I have used jQueryUI tabs for this purpose. You can view the examples and source code of the tabs feature here: http://jqueryui.com/tabs/
Here is the step-by-step guide to create tabs on Magento CMS page:-

By default, Magento contains and uses the Prototype javascript library. You can also integrate the other most popular javascript library ‘jQuery‘ in your Magento site.
While integrating jQuery in Magento, you might get some javascript conflict and errors as you will be using two javascript libraries (prototype and jQuery) at a time. This is caused because prototype also uses ‘$‘ as a function or variable name, just as jQuery does.

In this tutorial, I will be showing how you can use AJAX with jQuery.
From jQuery, you can send values to php page as GET or POST parameters.
You can use load() function OR ajax() function of jQuery to accomplish the AJAX functionality.

Here, I will show you how to preview Image with grey out background effect. I mean, you will be able to preview large image when you click the thumbnail image. The background of the page will be greyed and the image will be displayed as popup.
View Demo || Download Code

Here, I will show you how to preview Image with Zoom effect. I mean, you will be able to preview large image when you hover the thumbnail image. The image is zoomed when hovered.
View Demo || Download Code

Here, I will show you how to preview Image as a tooltip effect. I mean, you will be able to preview large image when you hover the thumbnail image. The preview is shown as tooltip is shown generally.
View Demo || Download Code

Here, I will show you how to show tooltip with jQuery. It’s very simple and easy.
I have a href link. I will show you, how to show tooltip when you hover your mouse over the link. The title of the href link will be shown as tooltip.
View Demo || Download Code

Here, I will be showing you how to create a cool bouncing navigation with jQuery and jQuery easing plugin. The content appears with the bouncing effect as you navigate through the menu.
You need jQuery Library and the jQuery easing plugin. But you need not worry, I have zipped them all in the download file.

I have created a bit of image animation with the Transfer effect of jQuery UI. By animation, I just mean fade in and out. But the transfer effect makes it so beautiful :).
The Transfer effect can be used with effect() method. This Transfers the outline of an element to another element. Very useful when trying to visualize interaction between two elements.

I have made a very simple jQuery slideshow. When you click the play button, then the images changes with fade in and fade out effect.
View Demo || Download Code

In this article, I will be showing you how you can replace string, div content, and image src value with jQuery.
You can do this by replace() function in jQuery.

You can use jQuery queue() function with setTimeout() function to set some time interval between events in jQuery. Like, you have run one event and wanted the browser to wait for some time to run the next event. At this instance, queue function is very helpful.
Suppose, you wanted an image to fade in and out. You can use fadeIn() and fadeOut() jQuery functions to do so. But when you like to wait for some time between fade in and fade out then you can use the queue() function. Remember that, …

This article shows how to print array and object on jQuery. You can do it with jQuery.each() function.
jQuery.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array.