Archiv der Kategorie ‘css3‘

 
 

Interesting jQuery() Function Signature

The jQuery() function is a little strange. Most people write $() instead of jQuery() (myself included) – slightly strange when you first start working with jQuery – what’s a little more unusual is the amount of signatures $ has:

// very common usage:
$(function(){
  // dom ready
});
 
// make a div and add it to the body
$("<div/>").appendTo("body");
 
// run a selector on a string (gives us back) [<p>​there​</p>​]
$("p", "<div>hello<p>there</p></div>");
 
// very standard usage...
// css selectors - returns a set of elements made up of all the divs in the document
$("div")
 
// etc... I counted 10 different signatures in the jQuery docs.

Turns out there was one that I didn’t know about – I read about it in this article 5 Things You Might Not Know About jQuery. When you create an element on the fly there is a second argument that is a map of methods and attributes. So you can easily initialize all aspects of an element that you’d like to create:

$("<div/>",{
  css: {position : "absolute",
        cursor : "pointer",
        left : 80,
        top : 100,
        width : 60,
        height : 50,
        color : "white",
        padding : 5,
        font: "12px sans-serif",
        border : "1px solid white",
        backgroundColor : "#827658"},
  click: function(){
    var size = parseInt(Math.random() * 100 + 60);
    $(this).animate({width:size, height:size});         
  },
  id : "blueBox",
  className : "shady",
  text : "Click Here"
}).appendTo("body");

The above creates this:

There is a little css just to illustrate that you can associate an element with a class:

.shady{
        /* css3 - not browser friendly */
        -webkit-box-shadow : 0px 0px 50px rgba(0,0,0,0.5); 
        -moz-box-shadow : 0px 0px 50px rgba(0,0,0,0.5); 
        box-shadow : 0px 0px 50px rgba(0,0,0,0.5); 
}

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.