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: We’ll use jQuery for this scenario. Here’s an example HTML to create select and … Read more
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: We’ll use jQuery for this scenario. Here’s an example HTML to create checkbox and radio buttons. Checkboxes are … Read more
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:- 1. Create a CMS page (CMS -> Pages -> Add New … Read more
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 … Read more
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. View Demo || Download Code In the example below, I will show … Read more
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 The following code will … Read more
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 As you can see below, I have kept the large image link in the alt tag. … Read more
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 As you can see in the js code, I have positioned the … Read more
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 In the … Read more