Question

Before you start reading… You should know that there are many questions below… I will appreciate any help to understand any part of the MIT code(jFlip plugin for jQuery v0.4) which I find very hard to understand

You can find the code if you like at http://plugins.jquery.com/project/jFlip

And see it working at http://www.jquery.info/scripts/jFlip/demo.html

< script type=”text/javascript>

(function($){    
       $(function(){    
           $("#g1").jFlip(800,800,{background:"green",cornersTop:false}).
           bind("flip.jflip",function(event,index,total){
              $("#l1").html("Image "+(index+1)+" of "+total);
           });        
       });
   })(jQuery);

< /script>

1. the function gets a $ and than uses the $ before another function?! and than it looks like it becomes a function $(“g1”) … it feels like a delegate (is it? how does it work)
2. How does the bind work…it’s a js function right? (I mean part of the language)
3. what is the “g1” role? I would expect something like “select case” somewhere in the code, but can’t find one…

Another peace of code that I find hard is:

; (function($) {
      var Flip = function(canvas, width, height, images, opts) {
      //private vars
      opts = $.extend({ background: "green", cornersTop: true, scale: "noresize" }, opts);
      var obj = this,
      el = canvas.prev(),

1. why is the “;” needed before he function
2. there is a var within a var – what does it mean- it’s a class, struct or what?
3. el = canvas.prev() … el is not defined anywhere is it a saved word for something?

and last is the one that is important for me:

.click(function(){
  if(onCorner && !flipping) {
      el.trigger("flip.jflip",[index,images.length]);
  }
  return false;
})

1. what is the dot syntax : .click(… some function definition…)
2. I need to make the code in the click to execute every 5 seconds …like onPageLoad(while(true) set timeout=5000; call click;)

That’s a good time to thank Trufa for the those links:
How to get the bookflip effect with JavaScript

Thank you so much for your time
Asaf

Answer 1

1 Question

Here you are having anonymous function that auto executes (function(){})(); and in it you are passing jQuery object (which is actually a function) as variable that’s called $. This is the same (calling it LALA and not $):

(function(LALA){    
       LALA(function(){    
           LALA("#g1").jFlip(800,800,{background:"green",cornersTop:false}).
           bind("flip.jflip",function(event,index,total){
              LALA("#l1").html("Image "+(index+1)+" of "+total);
           });        
       });
   })(jQuery);

Bind is implemented in jQuery object as separate sub function (method). There is more complicated code going on in it that handles events in different browsers, but makes sure that your event gets bind no meter what you use to view the page.

This #g1 is CSS style selector. You will have to google on that for more info. It means “get the HTML element which has ID=’g1′ and call the following method on it”. In you case you are selecting element with ID=g1 and calling jFlip() on it. To select elements which all have class ELEMENT, you would use dot like so $(".ELEMENT").

2 Question

Semicolon is needed only if you write two or more statements in same row like this:

alert("lalala") var a = 2+3

So you must write them in separate rows, like so:

alert("lalala") 
var a = 2+3

Or separate with ; in the same row:

alert("lalala"); var a = 2+3

For vars you will have to know that there are no types in JS. You can have function in var, integer, string… and objects. Objects are made of functions using keyword new. There in your code you are saving reference Flip to anonymous function that does something… To declare variables var is not needed, so you can have el = 10 and that stands as a valid variable definition.

3 Question

Dot syntax doesnt exist. You are calling .click() on jQuery object that was before the . in a line before.

For timeout you will have to have some more XP… google some more…