Archiv der Kategorie ‘html‘

 
 

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>

Digg

10. March 2012 | html, javascript, jquery | Comments (0)

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>

Digg

10. March 2012 | html, javascript, jquery | Comments (0)

Webkit CSS3 Arm

CSS3 is great. I look forward to a time when we don’t need to use -webkit -moz -o etc…

Note, this is webkit only so use chrome, safari, mobile safari or some other webkit browser at supports 3d transformations.

Here’s 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div{
        position : absolute;
        width : 100px;
        height : 20px;
        left : 20%;
        top : 50%;
        background-color : #7e9fc2;
        -webkit-transform : rotateZ(45deg) scale3d(0.9,0.9,1);
        -webkit-transform-origin : 0px 10px;
        -webkit-animation : rotate 3s infinite linear;
        -webkit-box-shadow : 0px 0px 10px 5px rgba(0,0,0,0.2);
      }
 
      div div{
        left : 100px; 
        top :0px;
      }
 
      @-webkit-keyframes rotate{
        from {
          -webkit-transform : rotateZ(0deg) scale3d(0.9,0.9,1);
        } 
        to {
          -webkit-transform : rotateZ(360deg) scale3d(0.9,0.9,1);
        } 
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <div>
          <div>
          </div>
        </div>
      </div>
    </div> 
  </body>
</html>

I use all 3d transformations here so that it gets hardware accelerated on the iphone/ipad.

Digg

10. March 2012 | css3, html, html5, webkit | Comments (0)

« Ältere Beiträge