Below are the steps to implement jQuery in Magento. There is a lot to like about it, which we’ll probably talk about another time, but it uses Prototype for a JavaScript library. Now I’m sure Prototype is wonderful and all that, but I don’t know a lick of it. I’d rather just use the library I’ve known to come and love, jQuery. But Prototype and jQuery notoriously don’t get along. This is how to deal with that.

1. The latest version of Magento comes with a somewhat outdated version of the script.aculo.us effects file, which is part of the problem. Go get the latest version (1.8.2 right now). You may want to rename it with the version number at the end, like

   effects-1.8.1.js

2. Upload the file to [Magento]/js/scriptaculous
3. Open the file page.xml at [Magento]/app/design/frontend/default/default/layout/page.xml
4. On about line 41, there will be a line like this:

   <action method="addJs"><script>scriptaculous/effects.js</script></action>

   Change the file name to your new file

5. The layout files are normally cached, so you’ll need to clear that cache to see the effect take place. Log into the backend and go to System > Cache Management
6. Select “refresh” from the All Cache menu and save (which should clear your cache)
7. Reload a store page and view source to make sure your new file is the one that is loading
8. Now you need to include jQuery on your page. You could add a new line to the page.xml file, or you could open the common head.phtml file at [Magneto]/app/design/frontend/default/default/template/page/html/head.phtml – and add your <script> for jQuery there
9. The final step is making sure that jQuery is in .noConflict(); mode. This is the final step to making sure it plays nice with Prototype
10. Now you need to set noConflict and write code in that mode. Basically you replace the normal “$” with a new shorthand ($j, in this case).

    var $j = jQuery.noConflict(); 
     
    $j(document).ready(function(){
        $j("#test").css("padding","10px");
    });

Submit A Form Without Page Refresh using jQuery

Demo URL : View Demo.
Description : A great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial you will learn how easy it is to submit a contact form that sends an email, without page refresh using jQuery.

Live Email Validation
Demo URL : View Demo.
Description : In this tutorial you will learn how you can validate the format of an email address “live” using jQuery and regular expressions without the need for a plugin.

Fading Menu – Replacing Content

Demo URL : View Demo.
Description : Iinstead of thinking about CSS as page layout and a way to style your page when it loads, you can use it in animation and change it on-the-fly to react to events that happen on your page.

Create a Scrolling Menu with CSS and jQuery
Demo URL : View Demo.
Description : There are a lot of flash scrolling menus out there,in this tutorial you will create a similiary looking menu with just CSS and jQuery.

Create a live-update list effect with jQuery
Demo URL : View Demo.
Description : In this tutorial you will learn how to create a live-update list effect, essentially a list that is generated as new data is added.

Advanced “Poll” jQuery Plugin

Description : In this tutorial you are going to create a jQuery plugin from start to finish; this plugin will allow you to easily add a simple poll widget to a web page or blog.

Parent Page Code (from where fancybox script is called)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script type="text/javascript" >
 $().ready(function(){  
'hideOnContentClick': true,'callbackOnShow': autoClose });
  $("a.uploadVideo").fancybox({'frameWidth': 400, 'frameHeight':160});
 });
 
 < /script>
 
< script type="text/javascript" src="http://localhost/test/jscripts/jquery.js">< /script>
< script type="text/javascript" src="http://localhost/test/jscripts/jquery.fancybox/jquery.fancybox-1.2.1.pack.js">< /script>
 
 <  script >
  function triggerClose(){
   var el = $("#fancyCloseId");
   el.bind("click", $.fn.fancybox.close);
   el.trigger('click'); 
  }
 
  function autoClose(){
   setTimeout("triggerClose()",1000);
  }
 < /script>
 
 
< body >
  < a class="iframe uploadVideo" href="iframepage.html?ie=UTF-8&aid=video">Video< /a>
 
  < div id="fancyCloseId">< /div
 
< /body >

iframepage.html page
———————–

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< script type="text/javascript" src="http://localhost/test/jscripts/jquery.js"><  /script>
< script type="text/javascript" src="http://localhost/test/jscripts/jquery.fancybox/jquery.fancybox-1.2.1.pack.js">< /script>
 
< body >
 ...........message here........
< /body>
 
$(function(){ 
   if(typeof(parent.autoClose)=="function"){ 
     parent.autoClose();
   }
   else {alert("Function not found")};
});
</script>