Monatsarchiv für January 2011

 
 

Regular Expression CSS3 Hack

I’ve been meaning to write this snippet for awhile. I hate writing things like:

-webkit-border-radius : 10px;
-moz-border-radius : 10px;
-o-border-radius : 10px;
border-radius : 10px;

There is at least one jQuery plug in that deals with this issue for you. But suppose your not using javascript to animate these properties, you just want a shadow or the ability to rotate a div. You could do something like this:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >
    <title>CSS3 Hack</title>
    <script>
      window.onload = function(){
        var style = document.getElementsByTagName("style")[0]; 
 
        var prefix = ["-webkit-", "-moz-", "-o-", "-khtml-"];
 
        function replaceValue(property){
          var str = "";
          for (var i = 0; i<prefix.length; i++){
            str += prefix[i] + property + "$2;"; 
          }
          return str;
        }
        style.innerHTML = style.innerHTML.replace(/(transform|border-radius|box-shadow)\s?(.+)/g, replaceValue("$1"));
      }
    </script>
    <style>
      html, body{
        color : white;
        font-family : Georgia, serif; 
      }
      #box{
        position : absolute;
        width : 100px;
        height : 100px;
        transform-origin : 0% 0%;
        transform: translate(0px, 100px) rotate(-20deg) scale(2, 2);
        background-color : #7e9fc2;
        border-radius : 10px;
        box-shadow : 0px 0px 10px rgba(0,0,100,0.5);
        border : 4px solid #c9ddf0;
        padding : 20px;
      }
    </style>
  </head>
  <body>
    <div id="box" >CSS3 Hack</div>
  </body>
</html>

Which will result in:

In the code snippet above I alter the innerHTML of the first style tag in the html document. I run a regular expression replace to change things like:

box-shadow: 10px 10px 10px black;

to :

-webkit-box-shadow: 10px 10px 10px black;
-moz-box-shadow: 10px 10px 10px black;
-o-box-shadow: 10px 10px 10px black;
-khtml-box-shadow: 10px 10px 10px black;
box-shadow: 10px 10px 10px black;

I haven’t tested this thoroughly and it definitely wont work in IE. But I thought it was worth posting.

29. January 2011 | css3, hacks, html5, javascript, snippets | Comments (0)

jQuery Carousel & 2D Transform Part 1

I get asked this question a lot from flash/javascript people. How do you make an image carousel? The question is flawed because there are many different types of image carousels, so I always ask for them to show me a link to the kind of carousel they’d like to create. I thought it would be interesting to show a hard-coded example of the inner workings behind the motion of one type of carousel…


Den ganzen Beitrag lesen…

27. January 2011 | javascript, jquery, ui | Comments (6)

Anonymous Classes in Java

Java still lacks anonymous functions (as far as I know). It does have anonymous classes though. They’re used often in conjunction with the ActionListener class. In the below example I create an anonymous class using an interface. Have a look at this example:

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

import java.awt.*;
import java.applet.*;
 
public class Test extends Applet {
 
  public void init(){
    setSize(500,500);			  
  }
 
  Graphics g;
  public void paint (Graphics graphics) {
    g = graphics;
 
    // anonymous class of type ZShape, implements the render() function
    repeat(new ZShape() {
      public void render() {
        g.setColor(new Color((int)(Math.random() * 0xFFFFFF)));
        g.fillOval((int)(Math.random() * 500),
        (int)(Math.random() * 500),
        30,30);
      }
    });
  }
 
  public interface ZShape{
    public void render();
  }
 
  private void repeat(ZShape z){
    for (int i = 0; i<100; i++){
      z.render();
    }
  }
}

This example is visually boring, it just draws a bunch of randomly colored circles to the screen. But if you’ve never seen anonymous classes before, its interesting. You can use classes or interfaces, but the syntax basically works like this:

new ClassOrInterface(){
  // implementation
}

…you can then pass this class to a function or a constructor or store it in a variable. Pretty interesting stuff.

26. January 2011 | java | Comments (0)

« Ältere Beiträge