Introduction

Plugins play a great part in the success of jQuery. There are hundreds of them out there, and having the ability to create your own is a great skill to have. With all of the interest in Pinterest (no pun intended), I thought it would be a good idea to do up a quick and simple Pinterest sharing plugin for jQuery.

Getting started

First we need to grab the jQuery plugin boilerplate

                                            (function( $ ) {
                                            $.fn.pinterest = function(options) {

                                            var settings = $.extend( {
                                            }, options);

                                            return this.each(function() {

                                            });

                                            };
                                            })( jQuery );

This boilerplate provides us with the ability to specify default configuration values (settings) and ensures that the infamous jQuery chaining ability is maintained (the return this.each). I’m going to take advantage of the default configuration values by specifying the default Pinterest image we’ll be using. This can be overridden when initializing the plugin by specifying the url to the preferred image.

Default image

Custom image

                                            (function( $ ) {
                                            $.fn.pinterest = function(options) {

                                            var settings = $.extend( {
                                            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
                                            }, options);

                                            return this.each(function() {

                                            });

                                            };
                                            })( jQuery );

                                            $(document).on('ready', function(){
                                            $('img#share').pinterest({ button: 'pinterest-alt.png'});
                                            });

Now that we have a basic framework done, let’s start adding some functionality. We need to update the this.each function to initialize each image and add some events for us. I’ve chosen to have the icon hover over the image being shared. To do this, I need to wrap the image in a span element that positioned ‘relative’, I then need to append the share image and position it absolutely. I’m going with the bottom right, but feel free to have a play

(function( $ ) {
                                            $.fn.pinterest = function(options) {

                                            var settings = $.extend( {
                                            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
                                            }, options);

                                            return this.each(function() {
                                            img = $(this);
                                            img.wrap('<span class="pin-it" style="position: relative;" />');
                                            img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
                                            });
                                            };
                                            })( jQuery );

                                            $(document).on('ready', function(){
                                            $('img#share').pinterest({ button: 'pinterest-alt.png'});
                                            });

Now that the elements that we need are there, we can start attaching our events. I’m going to use the hover and click events. When the user hovers over the main image, the share button will appear.

                                            (function( $ ) {
                                            $.fn.pinterest = function(options) {

                                            var settings = $.extend( {
                                            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
                                            }, options);

                                            function on_click () {
                                            };

                                            function on_hover_in() {
                                            $(this).siblings('img:first').show(500);
                                            };

                                            return this.each(function() {
                                            img = $(this);
                                            img.wrap('<span class="pin-it" style="position: relative;" />');
                                            img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
                                            img.hover(on_hover_in);
                                            img.siblings('img:first').on('click', on_click);
                                            });

                                            };
                                            })( jQuery );

                                            $(document).on('ready', function(){
                                            $('img#share').pinterest({ button: 'pinterest-small.png'});
                                            });

The on_click event looks like the following

                                            function on_click () {
                                            img = $(this).siblings('img:first');
                                            description = img.attr('title');
                                            url = document.location;
                                            media = img.attr('src');

                                            var pin_url = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent( url ) +
                                            '&media=' + encodeURIComponent( media ) +
                                            '&description=' + encodeURIComponent( description );

                                            window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
                                            $(this).hide(1000);
                                            };

It’s grabbing the image we want to share, and then reading it’s title and src attributes. It’s also getting the current pages url using document.location. The Pinterest share url has 3 parameters that we are interested in:

• url – the page we are sharing from
• media – the image we want to share
• description – the text we want to share with the image

When I’m creating the share url, I’m also using the JavaScript encodeURIComponent function to make sure the values are properly escaped.

One final thing we need to allow for is if the image src url is relative or not. If it’s relative we’ll need to update the media url to be fully qualified.

                                            function getUrl(src){
                                            var url = document.location.toString();
                                            var http = /^https?:\/\//i;
                                            if (!http.test(src)) {
                                            if(src[0] == '/'){
                                            url = url.substring(0, url.lastIndexOf('/')) + src;
                                            } else {
                                            url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
                                            }
                                            } else {
                                            url = src;
                                            }

                                            return url;
                                            };

This function is checking to see if the provided src URL starts with http or not. If it doesn’t it then creates an absolute url and returns it.

And that’s it, we now have a fully functional jQuery plugin for sharing images on Pinterest. You can see the full HTML and JavaScript or download it below. The image I’m sharing by the way is Picasso’s Three Musicians

                                            <!DOCTYPE html>
                                            <html lang="en">
                                            <head>
                                            <meta http-equiv="content-type" content="text/html; charset=utf-8">
                                            <title>Creating a simple Pinterest! jQuery</title>
                                            <meta name="viewport" content="width=device-width, initial-scale=1">
                                            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

                                            <script type="text/javascript">

                                            (function( $ ) {
                                            $.fn.pinterest = function(options) {

                                            var settings = $.extend( {
                                            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
                                            }, options);

                                            function getUrl(src){
                                            var url = document.location.toString();
                                            var http = /^https?:\/\//i;
                                            if (!http.test(src)) {
                                            if(src[0] == '/'){
                                            url = url.substring(0, url.lastIndexOf('/')) + src;
                                            } else {
                                            url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
                                            }
                                            } else {
                                            url = src;
                                            }

                                            return url;
                                            };

                                            function on_click () {
                                            img = $(this).siblings('img:first');
                                            description = img.attr('title');
                                            url = document.location;
                                            media = getUrl( img.attr('src') );

                                            var pin_url = 'http://pinterest.com/pin/create/button/?url=' + url +
                                            '&media=' + media +
                                            '&description=' + description;

                                            window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
                                            $(this).hide(1000);
                                            };

                                            function on_hover_in() {
                                            $(this).siblings('img:first').show(500);
                                            };

                                            return this.each(function() {
                                            img = $(this);
                                            img.wrap('<span class="pin-it" style="position: relative;" />');
                                            img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
                                            img.hover(on_hover_in);
                                            img.siblings('img:first').on('click', on_click);
                                            });

                                            };
                                            })( jQuery );
                                            </script>
                                            </head>
                                            <body>
                                            <div id="page">
                                            <!-- [banner] -->
                                            <header id="banner">
                                            <hgroup>
                                            <h1>Creating a simple Pinterest! jQuery</h1>
                                            </hgroup>
                                            </header>
                                            <!-- [content] -->
                                            <section id="content">
                                            <img id="share" src="picasso.jpg" title="Three Musicians" />
                                            </section>

                                            <script>
                                            $(document).on('ready', function(){
                                            $('img#share').pinterest({ button: 'pinterest-small.png'});
                                            });
                                            </script>
                                            </div>
                                            <!-- [/page] -->
                                            </body>
                                            </html>

We have covered much of the basics for LESS in our previous posts. If you have been following our LESS series, we believe that at this point you already have a good idea about how to use the Variables, Mixins and Operation in LESS.

We have also mentioned how to convert LESS into regular CSS, with an app or with a compiler. But, how do we do the opposite; to convert CSS into LESS? Well, this tip is for you.

Using a Tool

With increasing popularity of CSS preprocessor, some new tools and apps that essentially aim to makea web designer’s or developer’s life easier, such as this tool: CSS2Less.

This tool allows us to convert regular CSS into LESS. So, let’s give it a try. I have the following CSS rules from my old file to be converted.

                        nav {
                        height: 40px;
                        width: 100%;
                        background: #000;
                        border-bottom: 2px solid #fff;
                        }
                        nav ul {
                        padding: 0;
                        margin: 0 auto;
                        }
                        nav li {
                        display: inline;
                        float: left;
                        }
                        nav a {
                        color: #fff;
                        display: inline-block;
                        width: 100px;
                        text-shadow: 1px 1px 0px #000;
                        }
                        nav li a {
                        border-right: 1px solid #fff;
                        box-sizing:border-box;
                        }
                        nav li:last-child a {
                        border-right: 0;
                        }
                        nav a:hover, nav a:active {
                        background-color: #fff;
                        }
                    

Here is the result.

                        nav a:hover, nav a:active {
                        background-color: #fff;
                        }
                        nav {
                        height: 40px;
                        width: 100%;
                        background: #000;
                        border-bottom: 2px solid #fff;
                        a {
                        color: #fff;
                        display: inline-block;
                        width: 100px;
                        text-shadow: 1px 1px 0px #000;
                        }
                        ul {
                        padding: 0;
                        margin: 0 auto;
                        }
                        li:last-child {
                        a {
                        border-right: 0;
                        }
                        }
                        li {
                        display: inline;
                        float: left;
                        a {
                        border-right: 1px solid #fff;
                        box-sizing:border-box;
                        }
                        }
                        }
                    

As we can see above, our old CSS is now nested like in LESS.

Limitation

However we can also see some limitations in the results of the conversion. In the old CSS, we have several same colors, such as in these two declarations border-bottom: 2px solid #fff; and border-right: 1px solid #fff; we have both borders in white. In LESS we can actually store this constant value in a Variable.

It also does not nest and separate the pseudo-* with an ampersand (&) symbol, such as in the following rules li:last-child and nav a:hover, nav a:active. They just remain as they are, where we can actually simplify the rulesets this way;

                        li {
                        &:first-child {

                        }
                        a {
                        &:hover {

                        }
                        &:active {

                        }
                        }
                        }
                    

Conclusion

Despite the limitations it currently still has, this tool can quite helpful in saving our time for nesting CSS rulesets. We only need to do the rest manually; possibly until the the limitations above are resolved.

]]> http://geryit.com/blog/convert-old-css-to-less/feed/ 0 http://geryit.com/blog/convert-old-css-to-less/ http://feedproxy.google.com/~r/goksel/~3/h6V3hDOgZGc/ http://geryit.com/blog/css3-radio-switcher/#comments Tue, 25 Dec 2012 00:49:54 +0000 admin http://geryit.com/blog/?p=1384 I needed a css 3 radio switcher for a project I am working on, coded it, and sharing with you.

Demo

            switch test2
            
            

                on
                off
                
                

            
        

.switcher-on {
  background: #6c8c37 ;
  background: -moz-linear-gradient(#6c8c37, #7fa341) ;
  background: -webkit-linear-gradient(#6c8c37, #7fa341) ;
  background: -o-linear-gradient(#6c8c37, #7fa341) ;
  background: -ms-linear-gradient(#6c8c37, #7fa341) ;
  background: linear-gradient(#6c8c37, #7fa341) ;
  border-color: #404e29;
}
.switcher-on div {
  left: 38px;
}
.switcher-on:hover div {
  left: 35px;
}
.switcher-wrapper input {
  display: none;
}
.switcher-wrapper input:checked ~ .switcher-no-js {
  background: #6c8c37 ;
  background: -moz-linear-gradient(#6c8c37, #7fa341) ;
  background: -webkit-linear-gradient(#6c8c37, #7fa341) ;
  background: -o-linear-gradient(#6c8c37, #7fa341) ;
  background: -ms-linear-gradient(#6c8c37, #7fa341) ;
  background: linear-gradient(#6c8c37, #7fa341) ;
  border-color: #404e29;
}
.switcher-wrapper input:checked ~ .switcher-no-js div {
  left: 38px;
}
.switcher-wrapper input:checked ~ .switcher-no-js:hover div {
  left: 35px;
}
.switcher-no-js {
  width: 80px;
  height: 23px;
  border-radius: 3px;
  background: #952b37 ;
  background: -moz-linear-gradient(#952b37, #952b37) ;
  background: -webkit-linear-gradient(#952b37, #952b37) ;
  background: -o-linear-gradient(#952b37, #952b37) ;
  background: -ms-linear-gradient(#952b37, #952b37) ;
  background: linear-gradient(#952b37, #952b37) ;
  border: 1px solid #4e2933;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.switcher-no-js span {
  width: 50%;
  text-align: center;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 21px;
  float: left;
  margin: 0 !important;
}
.switcher-no-js label {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
}
.switcher-no-js div {
  position: absolute;
  width: 50%;
  background: #ffffff ;
  background: -moz-linear-gradient(#ffffff, #dadada) ;
  background: -webkit-linear-gradient(#ffffff, #dadada) ;
  background: -o-linear-gradient(#ffffff, #dadada) ;
  background: -ms-linear-gradient(#ffffff, #dadada) ;
  background: linear-gradient(#ffffff, #dadada) ;
  top: 1px;
  left: 1px;
  border-radius: 3px;
  bottom: 1px;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  border: 1px solid #4e2933;
  line-height: 16px;
  -webkit-transition: left 0.1s ease;
  -moz-transition: left 0.1s ease;
  -o-transition: left 0.1s ease;
  transition: left 0.1s ease;
  cursor: pointer;
}
.switcher-no-js div:before,
.switcher-no-js div:after {
  content: '';
  width: 1px;
  height: 8px;
  display: inline-block;
  box-shadow: -1px 0 #bebebe, -2px 0 #ffffff, 1px 0 #ffffff;
  margin: 0 1px;
}
.switcher-no-js div:after {
  box-shadow: -1px 0 #bebebe, 1px 0 #ffffff, 2px 0 #bebebe;
}
.switcher-no-js:hover div {
  left: 4px;
}
.switcher-no-js.on {
  background: #6c8c37 ;
  background: -moz-linear-gradient(#6c8c37, #7fa341) ;
  background: -webkit-linear-gradient(#6c8c37, #7fa341) ;
  background: -o-linear-gradient(#6c8c37, #7fa341) ;
  background: -ms-linear-gradient(#6c8c37, #7fa341) ;
  background: linear-gradient(#6c8c37, #7fa341) ;
  border-color: #404e29;
}
.switcher-no-js.on div {
  left: 38px;
}
.switcher-no-js.on:hover div {
  left: 35px;
}
.switcher-no-js.disabled {
  cursor: default;
}
.switcher-no-js.disabled div {
  background: #d8d8d8 ;
  background: -moz-linear-gradient(#d8d8d8, #dbdbdb) ;
  background: -webkit-linear-gradient(#d8d8d8, #dbdbdb) ;
  background: -o-linear-gradient(#d8d8d8, #dbdbdb) ;
  background: -ms-linear-gradient(#d8d8d8, #dbdbdb) ;
  background: linear-gradient(#d8d8d8, #dbdbdb) ;
}
.switcher-no-js.disabled.off {
  background: #957F82;
}
.switcher-no-js.disabled.off:hover div {
  left: 1px;
}
.switcher-no-js.disabled.on {
  background: #848C77;
}
.switcher-no-js.disabled.on:hover div {
  left: 38px;
}

.switcher-on {
    .grad(#6c8c37,#7fa341);
    border-color: #404e29;
    div {
        left: 38px;
    }
    &:hover div {
        left: 35px;
    }
}

.switcher-wrapper {
    input {
        display: none;
        &:checked ~ .switcher-no-js {
            .switcher-on;
        }
    }
}
.switcher-no-js {
    width: 80px;
    height: 23px;
    border-radius: 3px;
    .grad(#952b37, #952b37);
    border: 1px solid #4e2933;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    span {
        width: 50%;
        text-align: center;
        color: #fff !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .3) !important;
        font-size: 11px;
        text-transform: uppercase;
        line-height: 21px;
        float: left;
        margin: 0 !important;
    }
    label {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        left: 0;
        top: 0;
    }
    div {
        position: absolute;
        width: 50%;
        .grad(#fff,#dadada);
        top: 1px;
        left: 1px;
        border-radius: 3px;
        bottom: 1px;
        text-align: center;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
        border: 1px solid #4e2933;
        line-height: 16px;
        .transition(left .1s ease);
        cursor: pointer;
        &:before, &:after {
            content: '';
            width: 1px;
            height: 8px;
            display: inline-block;
            box-shadow: -1px 0 #bebebe, -2px 0 #fff, 1px 0 #fff;
            margin: 0 1px;
        }
        &:after {
            box-shadow: -1px 0 #bebebe, 1px 0 #fff, 2px 0 #bebebe;
        }
    }

    &:hover div {
        left: 4px;
    }
    &.on {
        .switcher-on;
    }
    &.disabled {
        cursor: default;
        div {
            .grad(#d8d8d8,#dbdbdb);
        }
        &.off {
            background: #957F82;
            &:hover div {
                left: 1px;
            }
        }
        &.on {
            background: #848C77;
            &:hover div {
                left: 38px;
            }
        }
    }
}

NEW
★ FEATURED

.course-ribbon {
  position: absolute;
  right: -11px;
  top: 20px;
  z-index: 1;
}
.course-ribbon:before {
  background: #666666 ;
  background: -moz-linear-gradient(#666666, #000000) ;
  background: -webkit-linear-gradient(#666666, #000000) ;
  background: -o-linear-gradient(#666666, #000000) ;
  background: -ms-linear-gradient(#666666, #000000) ;
  background: linear-gradient(#666666, #000000) ;
  bottom: -7px;
  content: "";
  height: 6px;
  position: absolute;
  right: 1px;
  -moz-transform: skewY(-20deg);
  -webkit-transform: skewY(-20deg);
  -o-transform: skewY(-20deg);
  -ms-transform: skewY(-20deg);
  transform: skewY(-20deg);
  -webkit-backface-visibility: hidden;
  width: 10px;
  display: block;
}
.course-ribbon b {
  border: 1px solid #4F2C1D;
  border-radius: 4px;
  color: #fff;
  padding: 7px 10px 7px 8px;
  position: relative;
  box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset, 0 3px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
}
.course-ribbon b:before,
.course-ribbon b:after {
  border-color: #4F2C1D;
  border-style: solid;
  content: "";
  height: 50%;
  left: -4px;
  position: absolute;
  width: 8px;
}
.course-ribbon b:before {
  border-width: 1px 0 0 1px;
  box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset;
  top: -1px;
  -moz-transform: skewX(21deg);
  -webkit-transform: skewX(21deg);
  -o-transform: skewX(21deg);
  -ms-transform: skewX(21deg);
  transform: skewX(21deg);
  -webkit-backface-visibility: hidden;
}
.course-ribbon b:after {
  border-width: 0 0 1px 1px;
  bottom: -1px;
  -moz-transform: skewX(-21deg);
  -webkit-transform: skewX(-21deg);
  -o-transform: skewX(-21deg);
  -ms-transform: skewX(-21deg);
  transform: skewX(-21deg);
  -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 2px -2px rgba(0, 0, 0, 0.2);
}
.course-ribbon b i {
  font-style: normal;
  font-size: 20px;
}
.course-ribbon.orange b {
  background: #f79f4f ;
  background: -moz-linear-gradient(#f79f4f, #aa0642) ;
  background: -webkit-linear-gradient(#f79f4f, #aa0642) ;
  background: -o-linear-gradient(#f79f4f, #aa0642) ;
  background: -ms-linear-gradient(#f79f4f, #aa0642) ;
  background: linear-gradient(#f79f4f, #aa0642) ;
}
.course-ribbon.orange b:before {
  background: #f79f4f ;
  background: -moz-linear-gradient(#f79f4f, #d0684a) ;
  background: -webkit-linear-gradient(#f79f4f, #d0684a) ;
  background: -o-linear-gradient(#f79f4f, #d0684a) ;
  background: -ms-linear-gradient(#f79f4f, #d0684a) ;
  background: linear-gradient(#f79f4f, #d0684a) ;
}
.course-ribbon.orange b:after {
  background: #d0684a ;
  background: -moz-linear-gradient(#d0684a, #aa0642) ;
  background: -webkit-linear-gradient(#d0684a, #aa0642) ;
  background: -o-linear-gradient(#d0684a, #aa0642) ;
  background: -ms-linear-gradient(#d0684a, #aa0642) ;
  background: linear-gradient(#d0684a, #aa0642) ;
}
.course-ribbon.green b {
  background: #8ab933 ;
  background: -moz-linear-gradient(#8ab933, #4a631c) ;
  background: -webkit-linear-gradient(#8ab933, #4a631c) ;
  background: -o-linear-gradient(#8ab933, #4a631c) ;
  background: -ms-linear-gradient(#8ab933, #4a631c) ;
  background: linear-gradient(#8ab933, #4a631c) ;
}
.course-ribbon.green b:before {
  background: #8ab933 ;
  background: -moz-linear-gradient(#8ab933, #688b29) ;
  background: -webkit-linear-gradient(#8ab933, #688b29) ;
  background: -o-linear-gradient(#8ab933, #688b29) ;
  background: -ms-linear-gradient(#8ab933, #688b29) ;
  background: linear-gradient(#8ab933, #688b29) ;
}
.course-ribbon.green b:after {
  background: #688b29 ;
  background: -moz-linear-gradient(#688b29, #4a631c) ;
  background: -webkit-linear-gradient(#688b29, #4a631c) ;
  background: -o-linear-gradient(#688b29, #4a631c) ;
  background: -ms-linear-gradient(#688b29, #4a631c) ;
  background: linear-gradient(#688b29, #4a631c) ;
}

Here are some screenshots:

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible.

To do this, use the code snippet below:

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#sidebar-ads').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#sidebar-ads').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#sidebar-ads').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);

The above code can also be made into a JQuery plug-in and used on WordPress sites.

Here is the plug-in version of the above code:

/**
 *  jQuery keep element in view plugin.
 *
 *  @author      David Gitonga
 *  @copyright   Copyright (c) 2012 DeveloperDrive
 *  @license     Licensed
 *  @link        http://developerdrive.com
 *  @since       Version 1.0
 *
 */

(function($)
{
    $.fn.keepElementInView = function()
    {
        var elemPosTop = this.position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            if (wintop > elemPosTop)
            {
                this.css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                this.css({ "position":"inherit" });
            }
        });
        return this;
    };

    $(document).ready( function()
    {
        jQuery('#sidebar-ads').keepElementInView();
    });
})(jQuery);

Remember to define the element you want to keep in view in the code by changing the ‘#sidebar-ads’ element to your preferences.

Note that the plug-in only works on scroll down elements.

Check out the demo page below that has been created using the above code:

http://www.jquery4u.com/

]]> http://geryit.com/blog/code-snippet-keep-sidebar-elements-in-view-when-scrolling/feed/ 0 http://geryit.com/blog/code-snippet-keep-sidebar-elements-in-view-when-scrolling/ http://feedproxy.google.com/~r/goksel/~3/U_b27CHzhMw/ http://geryit.com/blog/implementing-drag-and-drop-functions-with-html5-and-javascript/#comments Mon, 26 Mar 2012 22:28:04 +0000 admin http://geryit.com/blog/?p=1347 With HTML5 and JavaScript, you can implement native drag and
drop functions within the Web browser.

This is one of the emerging HTML5 tools that promises to make websites
more interactive without relying on additional technologies such as
Flash. In this tutorial we will create a simple page with images the
user can drag and drop into designated areas.

Create an HTML5 Web Page

Create an HTML file for your drag and drop function. Use the
following basic outline, with sections for JavaScript and CSS in the
head area:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*styling here*/
</style>
<script type="text/javascript">
//functions here
</script>
</head>
<body>
<!--page elements-->
</body>
</html>

Add Drag Targets to the Page

Your page will contain elements that can be dragged and elements
in which the dragged items can be dropped. Start with the areas your
user will be able to drop draggable elements into, adding the
following in your page body section:

<div class="pics">
<div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place5" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
</div>

The draggable images in the page will be able to drop within
these elements. Each has an ID to identify it within the JavaScript
code. The “ondrop” event specifies a function that will execute when
an item is dropped over one of these elements. The “ondragover” event
simply instructs the browser not to do what it does by default, which
is to prevent items being dropped within other elements – we are
telling the browser to allow elements to be dropped by preventing this
default behavior.

Add Draggable Elements to the Page

Let’s use a couple of image elements to drag within the page.
Use the following markup for each one, altering the image source
attributes for your own images:

<img src="pic1.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />

Alter the width and height to suit your own images and give each
one a unique ID attribute value. The draggable attribute instructs the
browser to allow users to drag the image element. The “ondragstart”
event attribute specifies a JavaScript function to execute when
dragging commences. Add a couple of these inside two of your
placeholder elements, resulting in markup like this:

<div class="pics">
<div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="pic1.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />
</div>
<div id="place2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="pic2.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic2" />
</div>
<div id="place3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place5" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
</div>

Alter the image elements to suit the name, location and
dimensions of your own image files as well as your chosen IDs.

Style the Elements

Add the following declarations to the style section in your page
head:

div[id^="place"]
{float:left; width:80px; height:80px; margin:3px; padding:3px; border:1px dotted #333333; background-color:#ffff99;}

These declarations apply to all elements whose ID attributes
begin with “place” as our holder elements do. The shorthand notation
uses a wildcard to specify this, rather than having to specify every
ID attribute for the elements that your items can be dropped within.
Alter the dimensions to suit your images and the styling for
backgrounds or borders in any way you like. To make the demonstration
clearer, you can add the following HTML at the bottom of the page:

<div class="nums">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

Style the new elements by adding the following to your CSS code,
so that you can see at a glance which element you are dragging and
dropping into:

span
{float:left; width:80px; margin:3px; padding:3px; border:1px solid #999999; color:#333333;}
.pics, .nums
{clear:both; text-align:center;}

Implement Dragging

Add the following function inside the script section in your
page head:

//function called when drag starts
function dragIt(theEvent) {
//tell the browser what to drag
theEvent.dataTransfer.setData("Text", theEvent.target.id);
}

If you look at your image elements you will see that this is the
function specified within the “ondragstart” event attribute. The
content of the function specifies the image element, letting the
browser know that is what to drag. The function receives an event
variable providing access to data about the element being dragged.

Implement Dropping

Add the following function after your dragging function:

//function called when element drops
function dropIt(theEvent) {
//get a reference to the element being dragged
var theData = theEvent.dataTransfer.getData("Text");
//get the element
var theDraggedElement = document.getElementById(theData);
//add it to the drop element
theEvent.target.appendChild(theDraggedElement);
//instruct the browser to allow the drop
theEvent.preventDefault();
}

This code first gets a reference to the dragged element, then
adds it to the element it is being dropped in. Again, the code tells
the browser not to implement the default behavior so that the image
can be dropped successfully. This function also receives the event
data indicating information about the dragged element and the element
being dropped over.

Open your page in the browser and test it by clicking and
dragging the images. Notice that if you drag the images over a page
area that you have not explicitly instructed the browser to allow
dropping in, they snap back to their original position. As long as you
drop over a designated element, your images can be moved around.
Notice also that if you drop one image on top of another, the next
time you drag one, they both drag.

Conclusion

HTML5 functions bring a greatly enhanced level of interactivity
to Web development. The future looks pretty exciting, but for the
moment remember to take care of users with browsers that do not
support these emerging techniques.

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.

Simple Style

First to go we will create a simple animated search form that show only search button with search image on it. When the button receives a click, the input field will widen while the search image will move to left filling the left blank space before input text.

Based on the picture above, the HTML element will consists of 4 elements, a div for elements wrapper, an input text, an input button for search button and an image search. All of them will be stacked each other where the div wrapper is at the very bottom of the stack and image search at the very top. Here’s the HTML and CSS :

.wrapper-simple {
	text-align: center;
	margin: 0 auto;
	display: block;
	width: 60px;
	height: 45px;
	padding: 10px 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,
					#9bb6c9 0 1px 2px;
	position: relative;
}

.wrapper-simple input[type=submit] {
	margin-top: .2em;
	z-index: 2;
	position: relative;
	vertical-align: top;
	height: 43px;
	min-width: 55px;
	border-radius: 3px;
	border: 1px solid #aa7818;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
	box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;
	cursor: pointer;
}

	.wrapper-simple input[type=submit]:active {
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}

	.wrapper-simple input[type=submit]:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

.wrapper-simple input[type=text] {
	font-family: Arial;
	font-weight: bold;
	color: #1a3d51;
	background: #d8e6ef;
	border-radius:2px;
	padding: 10px 10px 15px 10px;
	width: 250px;
	border: 0;
	font-size: 16px;
	text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
	box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	position: absolute;
	width: 1px;
	z-index: 2;
	padding-left: 2em;
	margin-left: .2em;
}

.wrapper-simple img {
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 4;
}

Now we will read the click event on search button and animate the form using jQuery.

$('.wrapper-simple input[type=submit]').toggle(function(){

	$('.wrapper-simple').animate({'width':'300px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})
	  .end().find(this).animate({'marginLeft':'22em'}).attr('value', 'CANCEL');

}, function() {

	$('.wrapper-simple').animate({'width':'60px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '0'})
	  .end().find(this).animate({'marginLeft':'0'}).attr('value', '');

});

The script toggling user’s click. First click will widen the div wrapper and input text, move the search button to the edge of input text and move image search to fill the left blank space before input text. Second click will revert to normal.

Cube Style

After making simple animated search form, actually we aren’t moving too far. So we will make another experiment, how about show the search form rotating like a cube? Well, CSS3 properties like transform, perspective and animation seems very helpful. The thing that we must give more attention that the following code and demo currently work only on Safari 5+.

Making a cube is a bit tricky, for vertical rotate and one direction (up to down) we can create a cube by making 2 div, first div as a front side of the cube and the second div as a top side. The top side div must be rotated so it will be like coming from the top when the cube rotating.

The structure of elements will be :

wrapper1 acting as wrapper for all elements inside, content-wrapper1 also as a wrapper that will be rotated, search button-1 as top side and search-box1 as front side. The styling :

.wrapper1 {
	display: block;
	width: 300px;
	margin: 0 auto;
	-webkit-perspective : 1200px;
}

	.search-button1 span {
		display: block;
		margin: 0 auto;
		background: #643904;
		border-radius: 30px;
		width: 30px;
		height: 30px;
		box-shadow: rgba(255,255,255,.3) 0 1px 0px;
	}

		.search-button1 span img {
			vertical-align: middle;
			padding-top: 7px;
		}

	.search-button1:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

	.search-button1:active {
		margin-top: 0.2em;
		box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
						#8e620e 0 0.3em 0,
						rgba(0, 0, 0, 0.2) 0 0.5em 3px;
	}

.search-box1 {
	margin-top: -.6em;
	display: none;
	position: absolute;
	width: 300px;
	height: 50px;
	padding: 10px 6px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border: 1px solid #9bb6c9;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
					#899faf 0 .5em 0px,
					rgba(0, 0, 0, 0.2) 0 .9em 3px;

	-webkit-transform:	rotate3d(1,0,0,90deg)
								translateZ(20px);
}

	.search-box1 input {
		font-family: Arial;
		font-weight: bold;
		color: #1a3d51;
		background: #d8e6ef;
		border-radius:2px;
		padding: 10px 10px 15px 10px;
		width: 250px;
		border: 0;
		font-size: 16px;
		text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}

		.search-box1 input:focus {
			outline: none;
		}

	.search-box1 img {
		opacity: .5;
		position: absolute;
		margin: .6em 0 0 -2em;
		cursor: pointer;
		-webkit-transition: 0.5s linear;
	}

		.search-box1 img:hover {
			opacity: 1;
		}

.hide-search-button {
	display: none;
}

.show-search-button {
	display: block;
}

.show-search-box {
	display: block;
}

.showed-search-box {
	display: block;
	-webkit-transform: rotate3d(1,0,0,0deg);
}

.hidden-search-box {
	-webkit-transform:	rotate3d(1,0,0,90deg)
								translateZ(25px);
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}

@-webkit-keyframes showBox{
	0% { -webkit-transform: rotate3d(1,0,0,0); }
	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}

@-webkit-keyframes hideBox{
	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
	100% { -webkit-transform: rotate3d(1,0,0,0); }
}

We’re a half set up, now we will read the click event from the user and rotate the cube.

$('.search-button1').click(function() {

	$('.content-wrapper1').addClass('switch-show');
	$('.search-box1').addClass('show-search-box');

	setTimeout(function(){

		$('.content-wrapper1').removeClass('switch-show');
		$('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
		$('.search-box1').addClass('showed-search-box');

	},480);
});

$('.search-box1 img').click(function() {

	$('.search-button1').removeClass('hide-search-button');
	$('.search-box1').addClass('hidden-search-box');
	$('.content-wrapper1').addClass('switch-hide');

	setTimeout(function(){

		$('.content-wrapper1').removeClass('switch-hide');
		$('.search-button1').removeClass('show-search-button');
		$('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');

	},480);

});

The script above act as an animation delegator, all animation handled by CSS. Since the CSS animation we describe before only works once and revert to the normal state, we force the current showed side to visible and other side to hidden until the animation works before revert back, this is do the trick.

Cube Style With Animate

At some point we might animate the front side before rotate the cube. Then we reduce the front side’s width and widen it before rotate.

$('.search-button2').click(function() {

	$('.arrow').hide();

	$(this).stop().animate({'width':'300px'}, 500, function() {

		$('.content-wrapper2').addClass('switch-show');
		$('.search-box2').addClass('show-search-box');

		setTimeout(function(){

			$('.content-wrapper2').removeClass('switch-show');
			$('.search-button2').removeClass('show-search-button').addClass('hide-search-button');
			$('.search-box2').addClass('showed-search-box');

		},480);

	});
});

$('.search-box2 img').click(function() {

	$('.search-button2').removeClass('hide-search-button');
	$('.search-box2').addClass('hidden-search-box');
	$('.content-wrapper2').addClass('switch-hide');

	$('.search-button2').addClass('show-search-button').stop().delay(500).animate({'width':'50px'}, 500, function() {

		$('.content-wrapper2').removeClass('switch-hide');
		$('.search-button2').removeClass('show-search-button');
		$('.search-box2').removeClass('show-search-box showed-search-box hidden-search-box');

		$('.arrow').show();

	});
});

We use jQuery’s animate() function to widen the front side’s width and reduce it back when user close the form.

Conclusion

CSS3 and jQuery combination help us improve current web user interface into unlimited state, depend on our imagination. Did I missed something? I’d love to hear.

Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of the time hardware accelerated by the GPU, they definitely raise the quality bar of the new generation of HTML5 applications.

According to the “CSS Animation Module Level 3” specification on the W3C site, CSS3 Animations introduces defined animations, which specify the values that CSS properties will take over a given time interval. This specification is an extension to CSS Transitions.

As CSS3 Animation is an extension to CSS3 Transitions, you should first read the article of my colleague David Catuhe on Transitions here: Introduction to CSS3 Transitions.

We’ll see in this article an interesting demo highlighting the potential of CSS3 animations, how to build simple animations & how to handle fallback in JavaScript:

1. CSS3 Animationsa>
2. Browsers Support
3. CSS3 Animations JavaScript fallback library
4. Conclusion

Let’s first start by quickly demonstrating what CSS3 Animations are. Here is a sample animation of a Star Wars AT-AT which uses CSS3 Animations to animate parts of the transport (and which will fall back to JavaScript if your browser doesn’t support CSS3 Animations):

You can test this sample also in a separate window here: http://david.blob.core.windows.net/html5/css3atat/index.htm

Note: this sample has been tested successfully with native animations under IE10 PP3/PP4, Chrome 15, Firefox 8 & iPad 2 and with JS fallback under IE9 desktop & mobile (Windows Phone). For an unknown reason, it behaves in weird way under Opera 11.50 but works fine with the 11.60. Moreover, our lovely blogging platform is most of the time forcing the IE9 rendering engine via a meta tag. To force it back to the IE10 standards mode, press the F12 key and change the value of “Document Mode” back to IE10. Otherwise, view the demo in a separate window.

This sample is based on the awesome work done by Anthony Calzadilla. You can check other incredible demos on his website here: http://www.anthonycalzadilla.com . I’m a huge fan of the I twitty the fool sample using SVG & CSS3 Animation for instance.

CSS3 Animations

Introduction

Let’s first review on what you can play to build the animations. CSS3 Animations works basically on the same values as CSS3 Transition.

Here they are:

• color: interpolated via red, green, blue and alpha components (treating each as a number, see below)
• length: interpolated as real numbers.
• percentage: interpolated as real numbers.
• integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer using floor().
• number: interpolated as real (floating point) numbers.
• transform list: see CSS Transforms specification: http://www.w3.org/TR/css3-2d-transforms/
• rectangle: interpolated via the x, y, width and height components (treating each as a number).
• visibility: interpolated via a discrete step. The interpolation happens in real number space between 0 and 1, where 1 is “visible” and all other values are “hidden”.
• shadow: interpolated via the color, x, y and blur components (treating them as color and numbers where appropriate). In the case where there are lists of shadows, the shorter list is padded at the end with shadows whose color is transparent and all lengths (x, y, blur) are 0.
• gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.
• paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
• space-separated list of above: If the lists have the same number of items, each item in the list is interpolated using the rules above. Otherwise, no interpolation.
• a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified.

And the following properties must be supported for animations:

• background-color (color)
• background-image (only gradients)
• background-position (percentage and length)
• border-bottom-color (color)
• border-bottom-width (length)
• border-color (color)
• border-left-color (color)
• border-left-width (length)
• border-right-color (color)
• border-right-width (length)
• border-spacing (length)
• border-top-color (color)
• border-top-width (length)
• border-width (length)
• bottom (length and percentage)
• color (color)
• crop (rectangle)
• font-size (length and percentage)
• font-weight (number)
• grid-* (various)
• height (length and percentage)
• left (length and percentage)
• letter-spacing (length)
• line-height (number, length and percentage)
• margin-bottom (length)
• margin-left (length)
• margin-right (length)
• margin-top (length)
• max-height (length and percentage)
• max-width (length and percentage)
• min-height (length and percentage)
• min-width (length and percentage)
• opacity (number)
• outline-color (color)
• outline-offset (integer)
• outline-width (length)
• padding-bottom (length)
• padding-left (length)
• padding-right (length)
• padding-top (length)
• right (length and percentage)
• text-indent (length and percentage)
• text-shadow (shadow)
• top (length and percentage)
• vertical-align (keywords, length and percentage)
• visibility (visibility)
• width (length and percentage)
• word-spacing (length and percentage)
• z-index (integer)
• zoom (number)

SVG

The properties of SVG objects are animatable when they are defined as animatable:true in the SVG specification: http://www.w3.org/TR/SVG/struct.html. But at the time where this article is written, I didn’t manage to combine CSS3 Animation directly on SVG elements in any of the latest browsers versions. Today’s samples on the web are then doing a little trick: they are embedding SVG resources into different DIV animated by CSS3 like the I twitty the fool sample.

Declarations

To declare an animation in a CSS file, here is the kind of generic code you’ll need to write:

@keyframes name_of_the_animation {
  from {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  to {
    property_to_animate: final_value;
  }
}

Which could also be written like that:

@keyframes name_of_the_animation {
  0% {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  100% {
    property_to_animate: final_value;
  }
}

This animation definition declares 3 steps 0, 50 & 100%. You should at least set a from (or 0%) and a to (or 100%) steps to build a correct animation (minimum 2 steps thus). Once done, you may add as many keyframes as you’d like between 0 and 100% to handle precisely the various steps of your animations.

Once the definition is declared, you can affect it to an element using the classical CSS3 selectors and you’ll need also to configure the animation options. Here the kind of generic blocks you’ll see:

#id_of_the_html_element {
    animation-name: name_of_the_animation;
    animation-duration: number_of_seconds s;
    animation-iteration-count: number | infinite;
}

To better understand, let’s review a real sample. First of all, as the CSS3 Animations specification is still in a draft stage, you’ll need to use the appropriate vendor prefix. Let’s use IE10 as a sample with the –ms prefix then. Let’s now see how the head of our AT-AT is moving.

Here’s the animation declaration:

@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

We’ve got 6 steps (0, 25, 50, 55, 75 & 100%) working on the CSS3 2D transform attributes by changing the value of the rotation.

The animation is then applied via this CSS rule:

#skull
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
}

We’re targeting the
<div>
element having the “

id=skull

” and we’re applying the animation named “rotate-skull” on it. The animation will have to be completed in 7s and be played an infinite number of times.

Here is the living result if your browser supports CSS3 Animations:

We could have written this rule in a shorter manner using the animation shorthand property:

#skull {
    -ms-animation: rotate-skull 7s infinite;
}

The animations will be triggered as soon as a matching rule is applied. You can then play or stop animations simply via JavaScript or via CSS3 to play with the classes affected to a tag.

Non-linear animations

The “animation-timing-function” property can be used if you want non-linear animations. You can even mix the type of timing functions during each keyframe.

Basically, CSS3 animations will use cubic bezier curve to smooth the animation by computing different speed over its duration.

The following functions are supported:

• linear: Constant speed
• cubic-bezier: Speed will be computed according to a cubic bezier curve define by two control points : P0 and P1 (so you will have to define 4 values here : P0x, P0y and P1x, P1y.
• ease: Speed will be computed with cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in: Speed will be computed with cubic-bezier(0.42, 0, 1, 1)
• ease-inout: Speed will be computed with cubic-bezier(0.42, 0, 0.58, 1)
• ease-out: Speed will be computed with cubic-bezier(0, 0, 0.58, 1)

Here is a simulation tool written by David Catuhe that uses pure JavaScript to show the impact of each timing function:

Note: this tool uses in-line SVG supported by Firefox, Chrome, Opera 11.60 & IE9/10. It won’t work properly under Opera 11.50 & Safari on iPad thus.

This is an awesome tool using SVG. You can even play with your mouse on the custom function to edit the curve. If you’d like to know more about this tool, please again have a look to David’s article.

If your browser supports CSS3 animations, let’s now see a simple demo using easing functions to animate a canvas tag containing an animated sprite with CSS3.

Here is the CSS3 animations code that will be used in this demo:

@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}
 
#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}

As well as all the vendor prefixes variations to make sure it works also in Google Chrome & Mozilla Firefox. And here’s the living output:

If your browser doesn’t support CSS3 Animation but support canvas, the sprite’s running animation should be displayed but the character won’t move through the width of the screen.

Note: if you’d like to know more about canvas and sprites animation, you can have a look to this article: HTML5 Gaming: animating sprites in Canvas with EaselJS

Delay

The “animation-delay” property simply allows an animation to begin execution some time after it is applied.

Events

3 events could be raised during an animation. They are named “AnimationStart”, “AnimationEnd” and “AnimationIteration”. Depending on your browser, the correct name will be for instance:

• Chrome: webkitAnimationEnd
• Firefox: mozAnimationEnd
• Internet Explorer: MSAnimationEnd

The event will give you the following details:

• animationName: name of the animation which raised the event
• elapsedTime: the amount of time the animation has been running, in seconds

Here is an usage sample for IE10:

elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);

More about CSS3 animations

CSS3 animations are really useful for 2 main reasons:

• Hardware acceleration: CSS3 Animations are most of the time directly handled by the GPU and could produce smoother results. This could then be a very interesting approach for mobile devices.
• Better separation between code and design: I know there is some debates on this point but with David, we think that a developer shouldn’t be aware of animations or anything related to design as much as possible. In the same way the designer/artist must not be aware of JavaScript. CSS3 offers then this possibility and could let the designers work with their classical tools to generate the appropriate animations on elements, between screens, etc.

To highlight this importance in performance, the following HTML5 game I wrote using a full frame <canvas>: HTML5 Platformer run at 60 fps in IE9/IE10 on my PC but at 10 fps max on a iPad 2. This is because its CPU is much more limited and the iPad is currently not hardware-accelerating <canvas>. Using CSS3 Transitions/Animations to animate several smaller <canvas> elements could provide a huge performance boost for this game. Think about it when you’re targeting mobile devices!

Browsers Support

Since the Platform Preview 3 of IE10 available in the Windows Developer Preview, we’re supporting CSS3 Animations. And as you can see on the following report produced by caniuse.com, the CSS3 animations are now supported on a wide range of browsers:

But as the specification is not finished yet (working draft), you must use vendor’s prefixes such as –ms-, –moz-, –webkit-, –o- to make a cross-browsers compatible application.

But the question could be: how to handle browsers that don’t support this new feature?

First option is to just do nothing. Thanks to the beauty of graceful degradation, you could just let the user only see a static image if you’ve worked correctly. This is for instance the case of these 2 original samples of Anthony: I Twitty the Fool! and Pure CSS3 AT-AT Walker . When watched in IE9, it looks like we only have a static image. When watched in IE10, the very same code shows nice animations. IE10 users will then have an enhanced version while IE9 will still be able to view and use properly the website. The more modern your browser is, the more visual bonus you will have.

The second option is to detect the feature via a JS library like Modernizr and try to offer the same animation via a JavaScript library that will mimic the animations. This is what we usually call a fallback mechanism. Unfortunately, I haven’t found today a working & complete JS library that could replace CSS3 animations when not supported by the browser.

I have then written a sample JS library more or less specifically designed for the AT-AT sample.

CSS3 Animations JavaScript fallback library

Animations are nothing more than a series of transitions separated by a certain duration defined via the keyframes. I’ve then reused the concepts built by David Catuhe in his transitions helper library. I let you reviewing his article to check the base of the concepts behind the code.

On my side, I’ve added some support to animate the CSS3 2D Transform rotation & translation values and a way to iterate through the keyframes.

Here is the main part of the library you need to review:

// Animation object
// It need the HTML targeted element, the name of the animation, its duration & iteration count and
// the keyframes contained in an array object
// View the animation simply as a sequence of transitions played a certain number of times
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // saving the properties values
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;
 
    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;
 
    // Transforming the percentage of each keyframe into duration value
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }
 
    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;
 
    // The nextTransition() function return the next transition to run
    // based on the current keyframe to play
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;
 
        // Compared to the original TRANSITIONSHELPER of David Catuhe
        // We need a specific code to play with the CSS3 2D Transform properties values
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }
 
            // Create a new transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };
 
            return transition;
        }
        // If it's a classic property to animate, we're using more or less the TRANSITIONSHELPER as-is
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };
 
    // each animation object has a tick function
    // that will be called every 17 ms (to target 60 fps)
    // This ticker is monitoring the current state of the transition and
    // create a new transition as soon as the old one is finished/dead
    this.tick = function () {
        if (this.iterationcount > 0) {
            if (!this.currentTransition.isPlaying) {
                this.currentTransition = this.nextTransition(this.keyframes[this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);
                // We're using our own global ticker only for the 2D transformations
                // Otherwise, we're using the one from the TRANSITIONSHELPER library
                if (this.currentTransition.type === "transform") {
                    ANIMATIONSHELPER.currentTransitions.push(this.currentTransition);
                }
                this.currentKeyFrameIndex++;
 
                // We've reached the last keyframe (100%). We're starting back from the beginning
                if (this.currentKeyFrameIndex >= this.keyframesCount) {
                    this.currentKeyFrameIndex = 0;
                    this.iterationcount--;
                }
            }
        }
    };
};

The first part of the code is iterating through each keyframe to compute the exact duration specified by each percentage. We’re then defining a
nextTransition()
function that will dynamically build the next transition to play based on the current index into the keyframes collection. At last, we’ve got a
tick()
function that will monitor the current state of the transition applied. Once the transition is finished or dead, it asks for the next transition, push it to the stack of transitions to be played and moves the indexes.

This
tick()
function is called thanks to this code:

ANIMATIONSHELPER.launchAnimation = function (animation) {
    // Launching the tick service if required
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }
 
    // Little closure to launch the tick method on the appropriate animation instance
    setInterval(function () { animation.tick(); }, 17);
};

At last, we have this kind of code that helps us building the keyframes:

// Object to build a new generic keyframe (not working on the CSS3 2D Transform properties thus)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};
 
//Objects to build specific rotation keyframes
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};

To highlight its usage, let’s recreate the previous simple CSS3 Animation skull sample with this library :

// number of times you'd like the animations to be run
var iterationsNumber = 100;
 
var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(100, 0));
 
var animation1 = new ANIMATIONSHELPER.animation(skullElement, "rotate-skull", 7000,
                            iterationsNumber, keyframes);
 
ANIMATIONSHELPER.launchAnimation(animation1, ANIMATIONSHELPER.easingFunctions.linear);

And here is the result that will now work in every browser supporting CSS3 2D Transform:

At last, the very first sample demonstrated at the beginning of this article uses Modernizr to check the support for CSS3 Animations. If it’s not the case, it loads the code that will mimic the keyframes defined in the file master.css, moz-master.css & ms-master.css :

// Checking if CSS3 animations is supported
if (!Modernizr.cssanimations) {
// if so, we can use our JS fallback library
    supportElement.innerHTML = "CSS3 Animations <strong>are not supported</strong>";
    LoadJSAnimationsFallback();
}
else {
    // if CSS3 animation is supported, we have nothing to do.
    // The *master.css stylesheets will be automatically applied & used.
    supportElement.innerHTML = "CSS3 Animations <strong>are supported</strong>";
}

The LoadJSAnimationsFallback() function is defined into jsfallback-master.js which simply contains all the keyframes declarations and the 19 animations needed to mimic the behavior created by Anthony in pure CSS3. In this approach, the designer then needs to rewrite all rules using the library. Another approach could be to parse one of the CSS file using an XHR call and to create dynamically the JavaScript calls to the library. This needs more work as you almost need to reimplement the CSS3 animations specifications in JavaScript!

You now have an idea on the way to build a fallback mechanism to support more browsers while starting to use the latest CSS3 specifications.

You can download the files for the main sample here: http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

It contains the unminified versions of the animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript files as well as the various CSS3 declinaison files for the main vendors prefixes.

Conclusion

CSS3 Animations is a powerful technology to push HTML5 applications to a new level. It offers interesting scenarios. Designers could use it to create a new generation of UI screens with smooth & fluid animations without the need of developers. As it’s hardware-accelerated most of the time, developers should also pay attention to this specification. At last, both could collaborate. Designers could work on a series of predefined animations covering most scenarios. Developers could then create JavaScript libraries that will implement those animations. This library could offer in a transparent way 2 implementations: a dynamic generation of CSS3 on the fly or a fallback for older browsers.

Going further

• Article about CSS3 Transitions by David Catuhe: Introduction to CSS3 Transitions
• CSS3 Animations specifications: http://www.w3.org/TR/css3-animations/
• IE Test Drive on CSS3 animations: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm

Other useful posts:

• Events are relatively limited in the CSS3 Animation spec. Joe Lambert is proposing an interesting solution to trigger events on each keyframe: CSS Animation Keyframe Events (Javascript solution)

Check if a specific website is available

Want to know if a specific website is available? cURL is here to help. This script can be used with a cron job to monitor your websites.

Don’t forget to update the script with the url you want to check on line 3. Once done, just paste it somewhere and it will let you know about the site availability.

<?php

       if (isDomainAvailible('http://www.css-tricks.com'))
       {
               echo "Up and running!";
       }
       else
       {
               echo "Woops, nothing found there.";
       }

       //returns true, if domain is availible, false if not
       function isDomainAvailible($domain)
       {
               //check, if a valid url is provided
               if(!filter_var($domain, FILTER_VALIDATE_URL))
               {
                       return false;
               }

               //initialize curl
               $curlInit = curl_init($domain);
               curl_setopt($curlInit,CURLOPT_CONNECTTIMEOUT,10);
               curl_setopt($curlInit,CURLOPT_HEADER,true);
               curl_setopt($curlInit,CURLOPT_NOBODY,true);
               curl_setopt($curlInit,CURLOPT_RETURNTRANSFER,true);

               //get answer
               $response = curl_exec($curlInit);

               curl_close($curlInit);

               if ($response) return true;

               return false;
       }
?>

→ Source: http://css-tricks.com/snippets/php/check-if-website-is-available/

cURL replacement for file_get_contents()

The
file_get_contents()
function is very useful but it is unfortunely deactivated by default on some webhosts. Using cURL, we can write a replacement function that works exactly like
file_get_contents()
.

function file_get_contents_curl($url) {
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Set curl to return the data instead of printing it to the browser.
	curl_setopt($ch, CURLOPT_URL, $url);

	$data = curl_exec($ch);
	curl_close($ch);

	return $data;
}

→ Source: http://snipplr.com/view/4084

Get latest Twitter status

Using PHP and cURL, it is pretty easy to get the status of a specific user. Once you have it, what about displaying it on your blog, like I do in WPRecipes footer?

function get_status($twitter_id, $hyperlinks = true) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/$twitter_id.xml?count=1");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/<text>(.*)<\/text>/', $src, $m);
    $status = htmlentities($m[1]);
    if( $hyperlinks ) $status = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]", '<a href="%5C%22%5C%5C0%5C%22">\\0</a>', $status);
    return($status);
}

The function is super easy to use:

echo get_status('catswhocode');

→ Source: http://www.catswhocode.com/blog/php-snippets-to-interact-with-twitter

Twitter: test friendship between two users

If you want to know if a specific user is following you (or someone else) you have to use the Twitter API. This snippet will echo
true
if the two users specified on lines 18 and 19 are friends. It will return
false
otherwise.

function make_request($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

/* gets the match */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

/* persons to test */
$person1 = 'phpsnippets';
$person2 = 'catswhocode';

/* send request to twitter */
$url = 'https://api.twitter.com/1/friendships/exist';
$format = 'xml';

/* check */
$persons12 = make_request($url.'.'.$format.'?user_a='.$person1.'&user_b='.$person2);
$result = get_match('/<friends>(.*)<\/friends>/isU',$persons12);
echo $result; // returns "true" or "false"

→ Source: http://www.catswhocode.com/blog/php-snippets-to-interact-with-twitter

Download and save images from a page using cURL

Here is a set of functions that can be very useful: Give this script the url of a webpage, and it will save all images from this page on your server.

function getImages($html) {
    $matches = array();
    $regex = '~http://somedomain.com/images/(.*?)\.jpg~i';
    preg_match_all($regex, $html, $matches);
    foreach ($matches[1] as $img) {
        saveImg($img);
    }
}

function saveImg($name) {
    $url = 'http://somedomain.com/images/'.$name.'.jpg';
    $data = get_data($url);
    file_put_contents('photos/'.$name.'.jpg', $data);
}

$i = 1;
$l = 101;

while ($i < $l) {
    $html = get_data('http://somedomain.com/id/'.$i.'/');
    getImages($html);
    $i += 1;
}

→ Source: http://stackoverflow.com/questions/7747875/grab-download-images-from-multiple-pages-using-php-preg-match-all-curl

Convert currencies using cURl and Google

Converting currencies isn’t very hard to do, but as the currencies fluctuates all the time, we definitely need to use a service like Google to get the most recent values. The
currency()
function take 3 parameters: from, to, and sum.

function currency($from_Currency,$to_Currency,$amount) {
    $amount = urlencode($amount);
    $from_Currency = urlencode($from_Currency);
    $to_Currency = urlencode($to_Currency);
    $url = "http://www.google.com/ig/calculator?hl=en&q=$amount$from_Currency=?$to_Currency";
    $ch = curl_init();
    $timeout = 0;
    curl_setopt ($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch,  CURLOPT_USERAGENT , "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
    curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $rawdata = curl_exec($ch);
    curl_close($ch);
    $data = explode('"', $rawdata);
    $data = explode(' ', $data['3']);
    $var = $data['0'];
    return round($var,2);
}

→ Source: http://l33ts.org/forum/Thread-PHP-Convert-currencies-using-Google-and-cURL-Snippet

Get remote filesize using cURL

Want to be able to calculate the size of a specific file? The following function can help. It takes 3 parameters: the file url, and in case the file is password protected, a username and a password.

function remote_filesize($url, $user = "", $pw = ""){
    ob_start();
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_HEADER, 1);
    curl_setopt($ch, CURLOPT_NOBODY, 1);

    if(!empty($user) && !empty($pw))
    {
        $headers = array('Authorization: Basic ' .  base64_encode("$user:$pw"));
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    }

    $ok = curl_exec($ch);
    curl_close($ch);
    $head = ob_get_contents();
    ob_end_clean();

    $regex = '/Content-Length:\s([0-9].+?)\s/';
    $count = preg_match($regex, $head, $matches);

    return isset($matches[1]) ? $matches[1] : "unknown";
}

→ Source: http://megasnippets.com/source-codes/php/get_remote_filesize

FTP upload with cURL

PHP does have a FTP library, but you can also use cURL to upload files on a FTP server. Here is a working example:

// open a file pointer
$file = fopen("/path/to/file", "r");

// the url contains most of the info needed
$url = "ftp://username:password@mydomain.com:21/path/to/new/file";

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// upload related options
curl_setopt($ch, CURLOPT_UPLOAD, 1);
curl_setopt($ch, CURLOPT_INFILE, $fp);
curl_setopt($ch, CURLOPT_INFILESIZE, filesize("/path/to/file"));

// set for ASCII mode (e.g. text files)
curl_setopt($ch, CURLOPT_FTPASCII, 1);

$output = curl_exec($ch);
curl_close($ch);