Monatsarchiv für March 2012

 
 

jQuery on() Map

Another nice feature of jQuery on() is that it accepts an object literal for its event type. So you can use one call to on() to set multiple event listeners.

Here is the code:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
      $(function(){
        var debug = $("#debug");
 
        $(".box").on({
          click : function(){
            debug.append("click ");
          }, 
          mouseover : function(){
            $(this).css({backgroundColor : "red"});
          }, 
          mouseout : function(){
            $(this).css({backgroundColor : "#7e9fc2"});
          }
        });
 
      });
    </script>
    <style>
      body,html{
        background-color : #333; 
        font-family : Helvetica, sans-serif;
      }
      .box{
        position: relative;
        float : left;
        width : 50px;
        height : 50px;
        margin : 2px;
        padding : 5px;
        background-color : #7e9fc2 ;
        cursor : pointer;
        font-size : 11px;
      }
      #debug{
        position : relative;
        clear : both;
        border : 1px solid gray;
        color : white;
      }
    </style>
  </head>
  <body>
    <div class="box">click me</div>
    <div class="box">click me</div>
    <div class="box">click me</div>
    <div id="debug"></div>
  </body>
</html>

jQuery on()

jQuery.on() is really nice. It’s now recommended that you use on() instead of bind() delegate() or live(). I use live a good deal, so I thought it would make sense to create a small demo showing how to use on() instead of live.

These boxes are created after the event listener has been added via on:

Here is the code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
      $(function(){
        var debug = $("#debug");
        var doc = $(document);
 
        // create event listener
        doc.on("click", ".box", function(){
          debug.append("click ");
        });
 
        // create elements
        for (var i = 0; i < 3; i++){
          $("<div>",{
            "class" : "box",
            text : "click me"
          }).prependTo("body"); 
        }
 
      });
    </script>
    <style>
      body,html{
        background-color : #333; 
        font-family : Helvetica, sans-serif;
      }
      .box{
        position: relative;
        float : left;
        width : 50px;
        height : 50px;
        margin : 2px;
        padding : 5px;
        background-color : #7e9fc2 ;
        cursor : pointer;
        font-size : 11px;
      }
      #debug{
        position : relative;
        clear : both;
        border : 1px solid gray;
        color : white;
      }
    </style>
  </head>
  <body>
    <div id="debug"></div>
  </body>
</html>

Raphael Animation Along a Path

In earlier versions of Raphael you could use the animateAlong() function to move something along a path. This method no longer exists in Raphael 2.0, instead a different technique is used. Here is the demo from raphaeljs.com: http://raphaeljs.com/gear.html. After tweaking this a little, I was able to create two custom attributes for use with Raphael’s animate() and attr() functions… “along” and “guide” where along is a percentage value (between 0 – 1) of how far along a given path you would like to move and guide is a reference to the path you want to move along. Here is an example:

Here are the custom attributes, “guide” and “along” wrapped in a function called addGuides().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
;(function() {
  Raphael.fn.addGuides = function() {
    this.ca.guide = function(g) {
      return {
        guide: g
      };
    };
    this.ca.along = function(percent) {
      var g = this.attr("guide");
      var len = g.getTotalLength();
      var point = g.getPointAtLength(percent * len);
      var t = {
        transform: "t" + point.x + " " + point.y
      };
      return t;
    };
  };
})();

This is the code for the demo:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="raphael-min.js"></script>
    <script src="raphael-guides.js"></script>
    <script>
      $(function(){
 
        var p = new Raphael(0,0,"100%","100%");
 
        // give raphael guide and along custom attributes
        p.addGuides();
 
        var white = {stroke : "white"};
        var path;
 
        var path1 = p.path("M 100 100 Q 200 500 300 100").attr(white);
 
        var path2 = p.path("M 300 100 \
                           R 350 150 \
                           400 50 \
                           450 100 \
                           500 40 \
                           550 100").attr(white);
 
        var circ1 = p.circle(0, 0, 10).attr(white);
 
        var circ2 = p.circle(0, 0, 10).attr(white);
 
        $(document).on("click", function(){
          // animate along a path
          circ1.attr({guide : path1, along : 0})
            .animate({along : 1}, 3000, "ease-out");
 
          circ2.attr({guide : path2, along : 1})
            .animate({along : 0}, 3000, "ease-out");
        });
 
      });
    </script>
    <style>
      body,html{
        background-color : #333;
        color : white; 
        font-family : sans-serif;
      }
    </style>
  </head>
  <body>
    click me to see animation
  </body>
</html>