Devirtuoso http://www.devirtuoso.com Web Development Wickedness Tue, 24 Jan 2012 17:16:01 +0000 en hourly 1 http://wordpress.org/?v=3.3 Subscribe with My Yahoo!Subscribe with NewsGatorSubscribe with My AOLSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with PageflakesSubscribe with PlusmoSubscribe with The Free DictionarySubscribe with Bitty BrowserSubscribe with NewsAlloySubscribe with Live.comSubscribe with Excite MIXSubscribe with Attensa for OutlookSubscribe with WebwagSubscribe with Podcast ReadySubscribe with FlurrySubscribe with WikioSubscribe with Daily Rotation Triggering Navigation with Scrolling in JQuery http://feedproxy.google.com/~r/Devirtuoso/~3/Gfvb4gYS8Wg/ http://www.devirtuoso.com/2012/01/triggering-navigation-with-scrolling-in-jquery/#comments Tue, 24 Jan 2012 17:16:01 +0000 Shawn http://www.devirtuoso.com/?p=1447 Scrolling as your sites main source of navigation is all the rage. With the amount of one page sites out there I thought it would be helpful to show how to trigger your navigation to changed based on how far you’ve scrolled down.

What we’re building

We’ll be creating a simple 1 page site. Actually we’ll just be stealing the code from the previous post on Smooth Scrolling in Jquery, and adding in the navigation triggering bits.

Download Example

Steal the Previous Code

We’re just going to steal the HTML and CSS from the previous post Smooth Scrolling in Jquery. There is nothing special, it’s just a navigation and a bunch of sections with a header and some text in them. The headers have unique ids so we can reference them with the jQuery. We’re more or less going to get rid of the jQuery and start a new.

Here is what we’re starting off with:

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
56
57
58
59
60
61
62
63
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Smooth Scrolling</title>
    <style type="text/css">
        .container{
            width:300px;
            margin:0 auto;
           
        }
        .section{
            margin-top:60px;
        }
        .navigation{
            position: fixed;
            background:white;
            padding:20px 20px;
            width:100%;
            margin-top:0px;
            top:0px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="navigation">
        <a href="#html">HTML</a>
        <a href="#javascript">JavaScript</a>
        <a href="#jquery">jQuery</a>
        <a href="#php">PHP</a>
        <a href="#css">CSS</a>
    </div>
    <div class="section">
        <h1 id="html">HTML</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="javascript">JavaScript</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="jquery">jQuery</h1>
        <p><!--Your HTML Content Goes HERE --></p>

    </div>
    <div class="section">
        <h1 id="php">PHP</h1>
        <p><!--Your HTML Content Goes HERE --></p>

    </div>
    <div class="section">
        <h1 id="css">CSS</h1>
        <p><!--Your HTML Content Goes HERE --></p>

    </div>     
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
    // JavaScript Will go Here
</script>
</body>
</html>

The New CSS

In new found code aquired by a five finger discount needs some styling. Right now the navigation is plain and you can’t tell when an item is selected so we’re just going to add an .active class and perhaps beautify the list a bit.

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
/*
Regular state of naviation
*/
a:link,
a:hover,
a:visited{
    text-decoration:none;
    color: #000;
    padding:3px;
}

/*
Active state of navigation
*/
.active:link,
.active:hover,
.active:visited
{
    color: #fff;
    background: #000060;
}

/*
Make the font of the list a little nicer to look at.
*/
*{
    font-family: sans-serif;
    color: #666;
}

The JQuery

The first thing we need to know is how far each section is from the top. So we’re going to write a function that we can pass in a navigation item and it will tell us how far that section is from the top. Because we have our navigation at the top, we’ll have to make sure that the section triggers the change just before it reaches the navigation. We’ll just subtract the height of the nav from the distance from the top.

Navigation Trigger Scrolling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Get Sections top position
function getTargetTop(elem){
   
    //gets the id of the section header
    //from the navigation's href e.g. ("#html")
    var id = elem.attr("href");

    //Height of the navigation
    var offset = 60;

    //Gets the distance from the top and
    //subtracts the height of the nav.
    return $(id).offset().top - offset;
}

Now that we can pull where each section is, we can now setup our navigation to scroll to a section when clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {
   
    //gets the distance from the top of the
    //section refenced in the href.
    var target = getTargetTop($(this));


    //scrolls to that section.
    $('html, body').animate({scrollTop:target}, 500);

    //prevent the browser from jumping down to section.
    event.preventDefault();

});

That takes care of the nav, but now comes the meat and potatoes. The scrolling now has to trigger the navigation to change. We’ll create a function that goes through every section and sees if it’s at the top yet. It’ll except 1 parameter which specifies how far the user has scrolled.

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
//Pulling sections from main nav.
var sections = $('a[href^="#"]');

// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){
   
    //How close the top has to be to the section.
    var threshold = 100;

    var i;

    for (i = 0; i < sections.length; i++) {
       
        //get next nav item
        var section = $(sections[i]);

        //get the distance from top
        var target = getTargetTop(section);
       
        //Check if section is at the top of the page.
        if (scrolledTo > target - threshold && scrolledTo < target + threshold) {

            //remove all selected elements
            sections.removeClass("active");

            //add current selected element.
            section.addClass("active");
        }

    };
}

The last thing we need to do is call the function when someone scrolls and when the page is first loaded.

1
2
3
4
5
6
//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());

$(window).scroll(function(e){
    checkSectionSelected($(window).scrollTop())
});

That’s it!

Now you have yourself a pretty sweet scrolling site. You can also use this same principle to animate items on your page. Too fun.

Here is all the code all together:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Smooth Scrolling</title>
    <style type="text/css">
        .container{
            width:300px;
            margin:0 auto;
           
        }
        .section{
            margin-top:60px;
        }
        .navigation{
            position: fixed;
            background:white;
            padding:20px 20px;
            width:100%;
            margin-top:0px;
            top:0px;
        }

        a:link,
        a:hover,
        a:visited{
            text-decoration:none;
            color: #000;
            padding:3px;
        }


        .active:link,
        .active:hover,
        .active:visited
        {
            color: #fff;
            background: #000060;
        }
        *{
            font-family: sans-serif;
            color: #666;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="navigation">
        <a href="#html">HTML</a>
        <a href="#javascript">JavaScript</a>
        <a href="#jquery">jQuery</a>
        <a href="#php">PHP</a>
        <a href="#css">CSS</a>
    </div>
    <div class="section">
        <h1 id="html">HTML</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="javascript">JavaScript</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="jquery">jQuery</h1>
        <p><!--Your HTML Content Goes HERE --></p>

    </div>
    <div class="section">
        <h1 id="php">PHP</h1>
        <p><!--Your HTML Content Goes HERE --></p>

    </div>
    <div class="section">
        <h1 id="css">CSS</h1>
        <p><!--Your HTML Content Goes HERE --></p>

    </div>     
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
    $(document).ready(function() {
       
        //Get Sections top position
        function getTargetTop(elem){
           
            //gets the id of the section header
            //from the navigation's href e.g. ("#html")
            var id = elem.attr("href");

            //Height of the navigation
            var offset = 60;

            //Gets the distance from the top and
            //subtracts the height of the nav.
            return $(id).offset().top - offset;
        }

        //Smooth scroll when user click link that starts with #
        $('a[href^="#"]').click(function(event) {
           
            //gets the distance from the top of the
            //section refenced in the href.
            var target = getTargetTop($(this));


            //scrolls to that section.
            $('html, body').animate({scrollTop:target}, 500);

            //prevent the browser from jumping down to section.
            event.preventDefault();

        });

        //Pulling sections from main nav.
        var sections = $('a[href^="#"]');

        // Go through each section to see if it's at the top.
        // if it is add an active class
        function checkSectionSelected(scrolledTo){
           
            //How close the top has to be to the section.
            var threshold = 100;

            var i;

            for (i = 0; i < sections.length; i++) {
               
                //get next nav item
                var section = $(sections[i]);

                //get the distance from top
                var target = getTargetTop(section);
               
                //Check if section is at the top of the page.
                if (scrolledTo > target - threshold && scrolledTo < target + threshold) {

                    //remove all selected elements
                    sections.removeClass("active");

                    //add current selected element.
                    section.addClass("active");
                }

            };
        }


        //Check if page is already scrolled to a section.
        checkSectionSelected($(window).scrollTop());

        $(window).scroll(function(e){
            checkSectionSelected($(window).scrollTop())
        });



    });
</script>
</body>
</html>
Download Example


]]> http://www.devirtuoso.com/2012/01/triggering-navigation-with-scrolling-in-jquery/feed/ 0 http://www.devirtuoso.com/2012/01/triggering-navigation-with-scrolling-in-jquery/ Smooth Scrolling in jQuery http://feedproxy.google.com/~r/Devirtuoso/~3/No_OI5-kbNs/ http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/#comments Wed, 30 Nov 2011 16:04:40 +0000 Shawn http://www.devirtuoso.com/?p=1434 Single page websites seem to be all the rage now a days. Scrolling effects seem to be in high demand. So in this post I’ll show you how to create a smooth scrolling page with jQuery.

What are we building?

We’ll be creating our own fansy smansy website. The nav will sit fixed at the top. Once we click on a nav item it will scroll down to the section. Best of all, if JavaScript is shut off, it will degrade gracefull and just jump down to the section.

Download Example

The HTML : Content

First thing we need is some content to scroll. This can be anything as long as their is enough of it to scroll….otherwise this tutorial is pointless ;) At the top of each section we’ll need to specify an id (we’ll be using this for our navigation). It can be on anything. Really just put the id on what you want to appear at the top of the page. For this example I put it on the header tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="section">
        <h1 id="html">HTML</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="css">CSS</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="php">PHP</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="javascript">JavaScript</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="jquery">jQuery</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
</div>

The HTML : Navigation

Now that we know what the ids are for each section we can go ahead and use those to create a navigation.

1
2
3
4
5
6
7
<div class="navigation">
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#php">PHP</a>
    <a href="#javascript">JavaScript</a>
    <a href="#jquery">jQuery</a>
</div>

Now just having this when we click on the navigation it should take us down to our desired location.

The CSS

Nothing to Crazy here. The most important part is the navigation. The position:fixed attribute keeps it at the top. And the margin top on the section class just make sure the content isn’t below the navigation when first loading the page.

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
<style>

/* Made the container thin
so I didn't have to come up
with too much content */
.container{
    width:300px;
    margin:0 auto;
   
}
/* So the sections don't fall
underneath the navigation */
.section{
    margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
   underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
    position: fixed;
    background:white;
    padding:20px 20px;
    width:100%;
    margin-top:0px;
    top:0px;
}
</style>

The jQuery (aka The Magic behind smooth scrolling)

The jQuery isn’t overly complicated. We’re just going to use the animate function to a specific location over time. Now we get that location by referencing the item that has the id that the href of our navigation points to. So if our navigation points to “#css”, then we’ll get the position of the item that has the id of “css”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
$(document).ready(function() {

    // Click event for any anchor tag that's href starts with #
    $('a[href^="#"]').click(function(event) {

        // The id of the section we want to go to.
        var id = $(this).attr("href");

        // An offset to push the content down from the top.
        var offset = 60;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
    });
});
</script>

Putting it all together

Here is everything all in one.

Enjoy!

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE HTML>
<html>
<head>

<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style>

/* Made the container thin
so I didn't have to come up
with too much content */
.container{
    width:300px;
    margin:0 auto;
   
}
/* So the sections don't fall
underneath the navigation */
.section{
    margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
   underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
    position: fixed;
    background:white;
    padding:20px 20px;
    width:100%;
    margin-top:0px;
    top:0px;
}
</style>
</head>

<body>
<div class="container">
    <div class="navigation">
        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#php">PHP</a>
        <a href="#javascript">JavaScript</a>
        <a href="#jquery">jQuery</a>
    </div>
    <div class="section">
        <h1 id="html">HTML</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="css">CSS</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="php">PHP</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="javascript">JavaScript</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="jquery">jQuery</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
</div>

<script>
$(document).ready(function() {

    // Click event for any anchor tag that's href starts with #
    $('a[href^="#"]').click(function(event) {

        // The id of the section we want to go to.
        var id = $(this).attr("href");

        // An offset to push the content down from the top.
        var offset = 60;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
    });
});
</script>

</body>
</html>
Download Example


]]> http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/feed/ 0 http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/ Good list of RSS feeds to follow for Web Developers http://feedproxy.google.com/~r/Devirtuoso/~3/tkDTPM0P2bk/ http://www.devirtuoso.com/2011/11/good-list-of-rss-feeds-to-follow-for-web-developers/#comments Mon, 28 Nov 2011 15:43:27 +0000 Shawn http://www.devirtuoso.com/?p=1427 Paul Irish recently posted a list of his rss feeds that he follows.  I thought I’d spread the love and share it with you as it’s a pretty great list.

Be sure to check out his list for:

  1. Front end Development
  2. Web Standards

Also be sure to subscribe to his blog, he has some pretty cool videos.

Enjoy.


]]> http://www.devirtuoso.com/2011/11/good-list-of-rss-feeds-to-follow-for-web-developers/feed/ 0 http://www.devirtuoso.com/2011/11/good-list-of-rss-feeds-to-follow-for-web-developers/ Creating an Image Mask with HTML 5 Canvas http://feedproxy.google.com/~r/Devirtuoso/~3/myDqDaK7K_I/ http://www.devirtuoso.com/2011/09/creating-an-image-mask-with-html-5-canvas/#comments Thu, 22 Sep 2011 19:25:04 +0000 Shawn http://www.devirtuoso.com/?p=1415 Sometimes it’s handy to be able to mask an image without having to take it into Photoshop. In this tutorial I’ll show you how to make a mask using HTML 5 canvas and a bit of javascript.

What we’re building

We’re going to mask an image with a circle that we create. Pretty simple, but it gets the point across I think.

Sorry IE users, this probably won’t work for you.

Download Example

The HTML

We just need a canvas, and an image. We’re going to place the image inside the canvas incase the browser doesn’t support the canvas. This way instead of masking it, it will just display the regular image.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Image Mask</title>
</head>
<body>
    <!-- If the browser doesn't support canvas, just the image will be displayed. -->
    <canvas id="stage"><img src="test.jpg" id="image" alt="" /></canvas>

</body>
</html>

The JavaScript

The magic that makes the mask work in canvas is the context’s method called clip. This just tells the canvas to hide everything outside of the shape just defined. Which is perfect for making a mask.

Here is the JavaScript:

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
window.onload = function (){
   
    //Setup the canvas.
    var canvas = document.getElementById("stage");
   
    if (canvas.getContext) {
       
        var ctx = canvas.getContext("2d");
   
        //Load the image.
        var img = document.getElementById("image");

        //Set the canvas to the size of the image.
        canvas.width = img.width;
        canvas.height = img.height;
       
        //Draw the Circle Mask.
        ctx.fillStyle = "#f30";
        ctx.beginPath();
        // (centerX, centerY, radius, starting angle, end angle, counter clockwise)
        ctx.arc(img.width / 2,img.height / 2,img.width / 2,0,Math.PI * 2, false);
        ctx.fill();
       
        //Makes the circle into a mask.
        ctx.clip();
   
        //Draws image.
        ctx.drawImage(img,0,0);
    }

};

So after loading in the image, we create a circle that we’ll use as the mask. Directly after we set the clip which does it’s magic. We then load the image into the canvas, when we do so it gets masked by the circle that we created earlier.

That’s it

Here it is all together:

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
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Image Mask</title>
</head>
<body>
    <!-- If the browser doesn't support canvas, just the image will be displayed. -->
    <canvas id="stage"><img src="mask.jpg" id="image" alt="" /></canvas>
   
   
    <script>
        window.onload = function (){
           
            //Setup the canvas.
            var canvas = document.getElementById("stage");
           
            if (canvas.getContext) {
               
                var ctx = canvas.getContext("2d");
           
                //Load the image.
                var img = document.getElementById("image");

                //Set the canvas to the size of the image.
                canvas.width = img.width;
                canvas.height = img.height;
               
                //Draw the Circle Mask.
                ctx.fillStyle = "#f30";
                ctx.beginPath();

                // (centerX, centerY, radius, starting angle, end angle, counter clockwise)
                ctx.arc(img.width / 2,img.height / 2,img.width / 2,0,Math.PI * 2, false);
                ctx.fill();
               
                //Makes the circle into a mask.
                ctx.clip();
           
                //Draws image.
                ctx.drawImage(img,0,0);
            }

        };
    </script>
</body>
</html>

Not much too this one. If you want it to get working in IE you’ll have to find a Canvas polyfill to help you out. The most notable one is probably explorercanvas. Enjoy.

Download Example


]]> http://www.devirtuoso.com/2011/09/creating-an-image-mask-with-html-5-canvas/feed/ 0 http://www.devirtuoso.com/2011/09/creating-an-image-mask-with-html-5-canvas/ Minify and Gzip CSS in JavaScript http://feedproxy.google.com/~r/Devirtuoso/~3/-710RG944b8/ http://www.devirtuoso.com/2011/09/minify-and-gzip-css-an-javascript/#comments Wed, 21 Sep 2011 13:30:03 +0000 Shawn http://www.devirtuoso.com/?p=1404 Found a pretty cool site.  It allows users to minify and compress both their CSS and JavaScript. So I thought I would just share it with you so you can bask in it’s speed inducing glory.

zBugs

Although still in beta at this point in time, zBugs has an easy to use interface which makes compressing and minifying easy.  The coolest thing of all, if you sign up they give you a FREE CDN link to your compressed and minified files…..SWEEET.  They also have an xml sitemap generator, which is handy. Be sure to check them out, well worth the look in my humble opinion.

http://www.zbugs.com

zBugs - Minify and Compress CSS and JavaScipt


]]> http://www.devirtuoso.com/2011/09/minify-and-gzip-css-an-javascript/feed/ 0 http://www.devirtuoso.com/2011/09/minify-and-gzip-css-an-javascript/ Working with images and HTML5 Canvas locally http://feedproxy.google.com/~r/Devirtuoso/~3/b8L1UET9RUM/ http://www.devirtuoso.com/2011/09/working-with-images-and-html5-canvas-locally/#comments Fri, 16 Sep 2011 19:47:31 +0000 Shawn http://www.devirtuoso.com/?p=1392 A problem that I often run into with while working locally with Canvas is the security error that comes with working with images on my local machine or cross domain. This post will give you a work around that will work if in a bind.

The Error

If you ever come across : Uncaught Error: SECURITY_ERR: DOM Exception 18 , you’re not alone. This error is triggered if you’re trying to get the imageData from an image that lives on your machine, or cross domain….good times. Kind of a pain…of course most errors are ;-)

Here is an example that will make the error trigger.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<img src="test.jpg" alt=""  id="image"/>

<canvas id="stage"></canvas>
<script>
    var canvas = document.getElementById("stage");
    var image = document.getElementById("image");
   
    if (canvas.getContext) {
        var context = canvas.getContext("2d");

        image.onload = function (){
           canvas.width = image.width;
           canvas.height = image.height;
           
           context.drawImage(image,0,0);
           
            //You will get an ERROR -> Uncaught Error: SECURITY_ERR: DOM Exception 18
            var imageData = context.getImageData(0,0,image.width,image.height);
           
            console.log(imageData);
        }
    }
   
</script>

The Solution

I’m sure there are a couple of ways to handle this but the one I came across was to encode the image into base64. This way the image is embedded right into your html page. Preventing the browser from having to go off site to get your image.

Fantastic news right….but how do I use a base64 image? In any img’s src you can put a data source in place of the image’s path. This is what one might look like:

1
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...really long string" alt="" />

base64 image explination

Here is a handy tool to help you encode your images.

So now to get the earlier code working, we just have to replace the image’s src information with the base64 image data we got from the site.

Here is that in all it’s glory:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AA..." alt=""  id="image"/>

<canvas id="stage"></canvas>
<script>
    var canvas = document.getElementById("stage");
    var image = document.getElementById("image");
   
    if (canvas.getContext) {
        var context = canvas.getContext("2d");

        image.onload = function (){
           canvas.width = image.width;
           canvas.height = image.height;
           
           context.drawImage(image,0,0);
           
            //This works now because of our image's source is now embedded.
            var imageData = context.getImageData(0,0,image.width,image.height);
           
            console.log(imageData);
        }
    }
   
</script>
Download Example

Of course once you push it to a server you’d probably want to change this, as it blows up the size of the image by quite a bit. The fix isn’t pretty, but at least you’ll be able to work locally in all your canvas-y goodness.


]]> http://www.devirtuoso.com/2011/09/working-with-images-and-html5-canvas-locally/feed/ 0 http://www.devirtuoso.com/2011/09/working-with-images-and-html5-canvas-locally/ Creating a 3D Scrolling Carousel with CSS3 and JQuery http://feedproxy.google.com/~r/Devirtuoso/~3/EOC_X0fzSUI/ http://www.devirtuoso.com/2011/09/creating-a-3d-scrolling-carousel-with-css3-and-jquery/#comments Wed, 14 Sep 2011 18:57:36 +0000 Shawn http://www.devirtuoso.com/?p=1371 How do you make your CSS3 awesome? By creating something 3D of course. I thought that was a given ;-) This tutorial will show how to do just that….awesomify your CSS3.

CSS3 Scrolling Carousel

What we’re trying to build here is a carousel that scrolls when the user uses the browser’s scroll bar. Allowing the user to navigate in a way they’re already familiar with.

Note: This will only work with webkit browsers (I found Chrome to be finicky, works on mac…not so much on pc). Safari is your best bet. Transform 3D still isn’t fully supported yet.

Download Example

The HTML

Really we just need something to scroll, and a container to hold everything pretty simple HTML. We’re just going to make sure each item has a class associated with it so we can reference it later in jQuery.

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
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>3d Carousel</title>
 
  <!-- CSS will go here -->
 
</head>
<body>
  <div id="main">
    <div id="slide1" class="slide">
      Slide 1
    </div>
   
    <div id="slide2" class="slide">
      Slide 2
    </div>
   
    <div id="slide3" class="slide">
      Slide 3
    </div>
   
    <div id="slide4" class="slide">
      Slide 4
    </div>
   
    <div id="slide5" class="slide">
      Slide 5
    </div>
   
    <div id="slide6" class="slide">
      Slide 6
    </div>

  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
  <!-- jQuery will go here -->
</body>
</html>

The CSS

There are 3 important things that are going to happen in the CSS.

  1. Give the body a big min-height to enable scrolling.
  2. Give our main container a fixed position so it doesn’t move when we scroll and setting the transform style so it acts like a 3d space. (Things closer to the user are in front of things further away)
  3. Setup each slide to be position absolute to move freely.

Most of the heavy lifting will be done in the jQuery. The CSS will just set up each slide so it can move freely in 3d space, and make sure the screen has a scroll bar. The jQuery will link the scroll bar to the each slide.

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
56
57
58
59
60
61
62
63
body{
    /* Enable the scroll bar */
    min-height:5000px;
   
    /* Centering the carousel */
    width:200px;
    margin:30px auto 0px;
}

#main{
    /* Make sure everything works in a 3d space. */
    -webkit-transform-style: preserve-3d;
   
    /* Adjusting the perspective...make it look more roundish */
    -webkit-perspective: 1800px;
   
    /* Rotating the angle a bit so it isn't face on */      
    -webkit-transform: rotateY(10deg);
   
    /* Make sure the carousel doesn't move when we scroll */
    position: fixed;
}
.slide{
    /* Make sure it can move freely */
    position:absolute;
    display:block;
   
    /* Set the dimensions */
    width:200px;
    height:200px;

    /* Positioning text in the middle of the box */
    text-align:center;
    line-height:200px;


    /* An easing effect*/
    -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

}

/*
* Change the colors of each slide so we can tell them apart.
*/

#slide1{
    background:green;  
}    
#slide2{
    background:blue;  
}    
#slide3{
    background:pink;  
}    
#slide4{
    background:orange;  
}    
#slide5{
    background:silver;  
}    
#slide6{
    background:purple;  
}

A couple of things that were used that might need some explanation.

  1. -webkit-perspective: 1800px; – The -webkit-perspective adjusts how the 3d will look, or in camera terms what kind of lens. Do we want it to look fish eye or relatively flat.
  2. -webkit-transform: rotateY(10deg); – This just rotates everything along the y axis.
  3. -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); – cubic-bezier just creates a nice easing effect after a user stops scrolling. You can play around with the values to get it how you want it to look. This was just used to increase the geekiness of the code. ;-)

The JQuery

So here comes the cool part. The JQuery sets up each slide on the carousel. Once a user scrolls, it then updates each slide in the carousel, rotating it accordingly.

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
$(document).ready(function() {
 
  //Go through each slide.
  $('.slide').each(function(index) {
   
    //Figure out how many slides, then give each slide a slice of the pie.
    var length = $('.slide').length;
    var degree = (360 / length) | 0;
   
    //Set the slide's reference to the starting point on the carousel.
    $(this).attr("data",degree * index)
   
    //Position the slide on the carousel using css
    $(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+degree * index+'deg) translate3d(0,100%,0)'});
  });
 
 
    //When the window scrolls....
    $(window).scroll(function(e) {

        //Figure out how far down we've scrolled. (Value from 0 - 1)
        var percent = (($(this).scrollTop()) / ($('body').height() - $(window).height()));

        //The new rotation based on how far down the user scrolled
        degrees = (percent * 360) | 0;

        //Go through each slide..
        $('.slide').each(function(index) {
        var startDegree = $(this).attr("data");

        //Add the degrees to whatever the starting point was.
        var val = degrees + parseInt(startDegree);

        //Apply the css
        $(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+val+'deg) translate3d(0,100%,0)'});

    });
   
   
  });
});

A little explanation. We first figure out where each slide should be on the carousel, by figuring out how many degrees should separate each slide. So we divide 360 degrees by how many slides we have. That should tell us where on the circle each slide should reside.

Degrees around the carousel

As for the CSS transform, we first position the slide in the center of the carousel. Rotate the slide to the desired degree. Then push it away from the center along the axis that it was rotated.

css webkit transform explination

That’s it

Feel free to play around with the values. You can easily change it from verticle to horizontal by playing around with the axis it rotates and which direction it is pushed with the translate3d. Have fun with it!

Here is everything all together:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>3d Carousel</title>
  <style>
 
  body{
      /* Enable the scroll bar */
      min-height:5000px;

      /* Centering the carousel */
      width:200px;
      margin:30px auto 0px;
     
  }

  #main{
      /* Make sure everything works in a 3d space. */
      -webkit-transform-style: preserve-3d;

      /* Adjusting the perspective...make it look more roundish */
      -webkit-perspective: 1800px;

      /* Rotating the angle a bit so it isn't face on */      
      -webkit-transform: rotateY(10deg);

      /* Make sure the carousel doesn't move when we scroll */
      position: fixed;
  }
  .slide{
      /* Make sure it can move freely */
      position:absolute;
      display:block;

      /* Set the dimensions */
      width:200px;
      height:200px;

      /* Positioning text in the middle of the box */
      text-align:center;
      line-height:200px;


      /* An easing effect*/
      -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

  }

  /*
  * Change the colors of each slide so we can tell them apart.
  */

  #slide1{
      background:green;  
  }    
  #slide2{
      background:blue;  
  }    
  #slide3{
      background:pink;  
  }    
  #slide4{
      background:orange;  
  }    
  #slide5{
      background:silver;  
  }    
  #slide6{
      background:purple;  
  }
   
   
   
  </style>
</head>
<body>
  <div id="main">
    <div id="slide1" class="slide">
      Slide 1
    </div>
   
    <div id="slide2" class="slide">
      Slide 2
    </div>
   
    <div id="slide3" class="slide">
      Slide 3
    </div>
   
    <div id="slide4" class="slide">
      Slide 4
    </div>
   
    <div id="slide5" class="slide">
      Slide 5
    </div>
   
    <div id="slide6" class="slide">
      Slide 6
    </div>

  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
  <script>
    $(document).ready(function() {
     
      //Go through each slide.
      $('.slide').each(function(index) {
       
        //Figure out how many slides, then give each slide a slice of the pie.
        var length = $('.slide').length;
        var degree = (360 / length) | 0;
       
        //Set a reference to the starting point on the carousel.
        $(this).attr("data",degree * index)
       
        //Position the slide on the carousel using css
        //-webkit-transform: Pushes the whole carousel down from top : Rotates the carousel : The radius of the carousel
        $(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+degree * index+'deg) translate3d(0,100%,0)'});
      });
     
     
        //When the window scrolls....
        $(window).scroll(function(e) {

            //Figure out how far down we've scrolled. (Value from 0 - 1)
            var percent = (($(this).scrollTop()) / ($('body').height() - $(window).height()));

            //The new rotation based on how far down the user scrolled
            degrees = (percent * 360) | 0;

            //Go through each slide..
            $('.slide').each(function(index) {
            var startDegree = $(this).attr("data");

            //Add the degrees to whatever the starting point was.
            var val = degrees + parseInt(startDegree);

            //Apply the css
            //-webkit-transform: Pushes the whole carousel down from top : Rotates the carousel : The keeps the radius of the carousel
            $(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+val+'deg) translate3d(0,100%,0)'});

        });
       
       
      });
    });
   
  </script>
</body>
</html>
Download Example


]]> http://www.devirtuoso.com/2011/09/creating-a-3d-scrolling-carousel-with-css3-and-jquery/feed/ 0 http://www.devirtuoso.com/2011/09/creating-a-3d-scrolling-carousel-with-css3-and-jquery/ Canvas Image Manipulation Experiment http://feedproxy.google.com/~r/Devirtuoso/~3/QI2BeqOEeB0/ http://www.devirtuoso.com/2011/09/canvas-image-manipulation-experiment/#comments Fri, 09 Sep 2011 16:17:32 +0000 Shawn http://www.devirtuoso.com/?p=1350 There are plenty of cool things that HTML 5 has to offer. Here lies an experiment with the canvas and image manipulation. Oh what FUN!

Canvas Experiment (Best viewed on Chrome / Safari)

Just a brief description of what I built. We first pull in all the image data, and convert them to particles. Then let the playing happen. In this case I just made the particles jump away from the mouse, then jump back. I heavily commented the code to help you look through it.

Canvas Image Manipulation

Does not work locally! Image needs to be on server somewhere.

If you try to load in a local image or an image from another domain you will get a javascript security error. To get around this you can encode the image into base64. Here is a handy tool for that….very simple to use.

Download Example

Play with the code on JSFiddle

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
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas Image</title>
  <style>
  body{
    background:black;
  }
    canvas{
      width:900px;
      height:200px;
      background:none;
    }
    #canvasSource{
      display:none;
    }
  </style>
</head>
<body>
   
<!-- HTML Code -->
<img id="canvasSource" src="picture.png" alt="Canvas Source" />

<canvas id="area" width="900" height="200"></canvas>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>

<script>
//Image Manipulation Javascript will go here.
</script>

</body>
</html>
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
window.onload = function () {
   
    /**
    * Checks if a pixel is white or not
    * @param {Object} pixel A pixel with an rgb value
    * @returns Is the pixel white or not.
    * @type Boolean
    */
    function isPixelWhite (pixel) {
        return (pixel.r > 50 && pixel.g > 50 && pixel.b > 50);
    }

    /**
    * Converts an rgb value to hex
    * @param {Number} R The red value
    * @param {Number} G The green value
    * @param {Number} B The blue value
    * @returns A hex value based on the rgb given
    * @type String
    */
    function rgbToHex(R,G,B) {
        return toHex(R)+toHex(G)+toHex(B);
    }

    /**
    * convert value from 0-255 to hex.
    * @param {Number} n Number between 0 and 255
    * @returns Hex value
    * @type String
    */
    function toHex(n) {
       n = parseInt(n,10);
       if (isNaN(n)) {
           return "00";
       }
       n = Math.max(0,Math.min(n,255));
       return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
    }
   
    /**
    * Extends an array with the given options
    * @param {Object} obj The main object
    * @param {Object} extObj The extending object
    * @returns The merged objects
    * @type Object
    */
    var extend = function(obj, extObj) {
       var i;
       for (i in extObj) {
           if (extObj[i]) {
               obj[i] = extObj[i];
           }
       }

       return obj;
    };
   
   
    /**
    * Pixel Class
    * @author Shawn
    */
    var Particle = function(options){
       
        //Default Values
        var params = {color:"#fff",x:0, y:0,width:1, height:1, angle:0, speed:3 };
        params = extend(params,options);
       
        //Init Variables
        this.color = params.color;
        this.x = params.x;
        this.y = params.y;
        this.originalX = this.x;
        this.originalY = this.y;
        this.width = params.width;
        this.height = params.height;
        this.angle = params.angle * ( Math.PI / 180 );
        this.speed = params.speed;
    };
   
    /**
    * Sets x,y value based on current angle.
    * @returns
    * @type Void
    */
    Particle.prototype.getVector = function (){
      this.x = Math.cos(this.angle);
      this.y = Math.sin(this.angle);
    };
   
    /**
    * Sets the current angle
    * @param {Number} angle Angle to set it at
    * @returns Angle given, but rounded
    * @type Number
    */
    Particle.prototype.setAngle = function(angle){
       
        //Convert to radians, so it's useful.
        this.angle = angle * ( Math.PI / 180 );
        return angle | 0;
    };
   
    /**
    * Gets the current angle
    * @returns The current angle
    * @type Number
    */
    Particle.prototype.getAngle = function(){
        //Converts angle from radians to angle then rounds it.
        return (this.angle / ( Math.PI / 180 )) | 0;
    };
   
   
    /**
    * Emits particles
    * @author Shawn
    * @requires Particle
    */
    var Emitter = function (){
       
        //Initial values.
        this.maxParticles = 20000;
        this.particles = [];
        this.active = true;
        this.x = 0;
        this.y = 0;
    };
   
    /**
    * Adds a particle to the emitter
    * @param {Object} options Particle options
    * @returns The particle just added
    * @type Particle
    */
    Emitter.prototype.addParticle = function (options) {
       
        //Make sure there is less particles than the max amount
        if (this.particles.length < this.maxParticles) {
           
            //Set particle default values.
            var params = {color:"#fff",x:this.x,y:this.y, width:1,height:1};
            params = extend(params,options);

            //Add particle to emitter.
            var p = new Particle(params);
            p.id = this.particles.length;
            this.particles.push(p);

            return p;
        }
    };
   
    /**
    * Gets a particle at a given identifier
    * @param {Number} id Particles identifier
    * @returns A particle
    * @type Particle
    */
    Emitter.prototype.getParticle = function (id) {
        return this.particles[id];
    };
   
    /**
    * Get how many particles there are.
    * @returns Number of particles
    * @type Number
    */
    Emitter.prototype.getLength = function() {
      return this.particles.length;
    };
   
   /**
   * Paul Irish's method for requesting animation frame
   * @returns Animation Frame
   * @type Function
   */
    window.requestAnimFrame = (function(){

      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    //Setup canvas.
    var canvas = document.getElementById("area");
    var ctx = canvas.getContext("2d");
    var image = document.getElementById("canvasSource");
    ctx.drawImage(image, 0, 0);
   
    //get Image data.
    var imgData = ctx.getImageData(0,0, 900, 200);
   
    var pixels = [];
    var init = false;
    var mouseX, mouseY = 0;
    var affecetedArea = 70;
   
    var emit = new Emitter();
    var i;
   
    //Create a particle based on the image data.
    //Image data is ordered like r,g,b,a,r,g,b,a...need to count by 4
    for (i=0; i < imgData.data.length; i+=4) {
        var pixel = {};
        pixel.r = imgData.data[i];
        pixel.g = imgData.data[i+1];
        pixel.b = imgData.data[i+2];
        pixel.index = i / 4;
       
        //Setup columns and rows
        pixel.x = pixel.index % 900;
        pixel.y = Math.floor(pixel.index / 900);

        //The white pixels are the only ones we want to animate.
        if (isPixelWhite(pixel)) {
           
            //Pick a random angle.
            var angle = (Math.random() * 360);
           
            emit.addParticle({color:"#"+rgbToHex(pixel.r,pixel.g,pixel.b) ,x: pixel.x, y: pixel.y, angle:angle });
        }
    }
   
    /**
    * Mouse Move Handler...set the mouseX and MouseY variables
    * @param {Object} e Event Object
    * @returns Nothing
    * @type Void
    */
    $('#area').mousemove(function(e) {

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
   
        }else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }

    });
   
   
    //Start animation loop.
    function animate() {
      requestAnimFrame( animate );
      draw();
    }
   
    animate();
   
    var oldx,oldy,newx,newy;
   
    /**
    * Draws each frame
    * @returns Nothing
    * @type Void
    */
    function draw() {
        var i;
        canvas.width = 900;
        canvas.height = 200;
       
        //Render each particle in the emitter.
        for (i=0; i < emit.getLength(); i++) {

            var p = emit.getParticle(i);
           
            //Calculate the distance of the particle from the mouse.
            var distx = p.x - mouseX;
            var disty = p.y - mouseY;
            var distance = Math.sqrt(distx*distx + disty*disty);

            //If it's within the affected area.
            if (distance < affecetedArea) {
               
                //Push the particle out of the way.
                //p.x -= (Where the particle currently is - Where you want the particle to end up) / speed
                p.x -= (p.x - (mouseX + affecetedArea * distx / distance)) / 5;
                p.y -= (p.y - (mouseY + affecetedArea * disty / distance)) / 5;
               
            }else{
               
                //Return the particle to it's original place.
                if (p.x != p.originalX || p.y != p.originalY) {
                    p.x -= (p.x - p.originalX) / 2;
                    p.y -= (p.y - p.originalY) / 2;
                }

            }
           
            //Draw the particle
            ctx.fillStyle = p.color;
            ctx.fillRect(p.x,p.y,p.width,p.width);
        }
    }
   

};


]]> http://www.devirtuoso.com/2011/09/canvas-image-manipulation-experiment/feed/ 0 http://www.devirtuoso.com/2011/09/canvas-image-manipulation-experiment/ Toggle Switches with JQuery and Checkboxes http://feedproxy.google.com/~r/Devirtuoso/~3/YmRmaOUervk/ http://www.devirtuoso.com/2011/05/toggle-switches-with-jquery-and-checkboxes/#comments Wed, 25 May 2011 14:30:58 +0000 Shawn http://www.devirtuoso.com/?p=1324 iOS style checkboxes (toggle switches) are far more user friendly than ye ol’ browser checkboxes.  Without feeling to sorry for your browser checkboxes, we’re going to go through creating new toggle switch hotness with jQuery.

What are we building?

Well I’m glad you asked.  We’re going to take a progressive enhancement approach to this.  We want to make sure that the checkboxes still work if JavaScript is turned off.  So with jQuery we’ll add the new toggle switches, and make them check off the hidden checkboxes when clicked.

Download Example

Getting Started: The HTML

Nothing to crazy going on here.  It’s just a simple form with some checkboxes.  I added a class to the checkboxes just for ease of use.  Not really necessary if you’d rather reference them by some other means.  Also I gave the body tag a class of “nojs” so we can change this to “js” with JavaScript.  This way we can react appropriately when someone doesn’t have javascript enabled.

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
<body class="nojs">
  <h1>Toggle Checkboxes</h1>
  <form action="" method="get">
   
    <!--
     Enjoy Web
   -->
    <p>    
        <label for="enjoy_web">Do you enjoy web development?</label>
        <input class="checkbox" type="checkbox" name="enjoy_web" value="yes" id="enjoy_web" checked="true" />
    </p>
   
    <!--
     Hate IE
   -->
    <p>    
      <label for="enjoy_web">Do you hate IE?</label>
      <input class="checkbox" type="checkbox" name="hate_ie" value="yes" id="hate_ie" />
    </p>


    <!--
     Sad Pandas
   -->
    <p>    
      <label for="enjoy_web">Do pandas make you sad?</label>
      <input class="checkbox" type="checkbox" name="sad_panda" value="yes" id="sad_panda" />
    </p>

   
    <p><a href="#" id="showCheckboxes">Show Checkboxes</a></p>
  </form>
</body>

The jQuery

The first thing we need to tackle is progressive enhancement. So we’re just going to change the body class to “js”, so now in our css we can hide all checkboxes when the javascript is enabled.

After that we add an anchor tag after each checkbox. This will be our toggle switch with the magic of css styling. When we create this anchor we’ll add a ref attribute which reference the checkbox that it will affect. Also we’ll add a checked class to the anchor tag if the checkbox is already checked.

Then it just comes down to creating a click event for our new anchor tag. This will just toggle on and off a checked attribute of the checkbox referenced in the anchor’s ref tag.

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
$(document).ready(function() {
    /*
      Progressive enhancement.  If javascript is enabled we change the body class.  Which in turn hides the checkboxes with css.
    */
    $('body').attr("class","js");
   
    /*
      Add toggle switch after each checkbox.  If checked, then toggle the switch.
    */
     $('.checkbox').after(function(){
       if ($(this).is(":checked")) {
         return "<a href='#' class='toggle checked' ref='"+$(this).attr("id")+"'></a>";
       }else{
         return "<a href='#' class='toggle' ref='"+$(this).attr("id")+"'></a>";
       }
       
       
     });
     
     /*
      When the toggle switch is clicked, check off / de-select the associated checkbox
     */
    $('.toggle').click(function(e) {
       var checkboxID = $(this).attr("ref");
       var checkbox = $('#'+checkboxID);

       if (checkbox.is(":checked")) {
         checkbox.removeAttr("checked");

       }else{
         checkbox.attr("checked","true");
       }
       $(this).toggleClass("checked");

       e.preventDefault();

    });

  });

CSS: The Styling of the Toggle Switch

There is nothing to crazy here. If you’ve ever done a sprite button, you won’t find too much new here. We’re just giving the anchor a background of toggle switch graphic and shifting it up and down depending on whether it has a checked class or not.

Also we’re hiding all checkboxes if javascript is enabled.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.js .checkbox{
  display:none;
}

.toggle{
   background:url("toggle.png") bottom left;
   display:block;
   width:70px;
   height:22px;
}

.toggle.checked{
  background-position:top left;
}

That’s it

Not too hard was it? You can play around with the code at jsfiddle


]]> http://www.devirtuoso.com/2011/05/toggle-switches-with-jquery-and-checkboxes/feed/ 0 http://www.devirtuoso.com/2011/05/toggle-switches-with-jquery-and-checkboxes/ The Future of the Web is WebGL http://feedproxy.google.com/~r/Devirtuoso/~3/FbdzN8nL1y4/ http://www.devirtuoso.com/2011/03/the-future-of-the-web-is-webgl/#comments Fri, 04 Mar 2011 16:18:25 +0000 Shawn http://www.devirtuoso.com/?p=1317 So what’s in store for the web in the future?  Is it more bejeweled games? Or is it 3d first person shooters?A big shout out goes to Human Engines and Gregg Tavares.  This is a demo I came accross of WebGL in all it’s glory and had to share it.  The performance is pretty good considering all the reflections and volumetrics.  Very cool stuff.

You can check out the experiment at: THIS REQUIRES GOOGLE CHROME

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html


]]> http://www.devirtuoso.com/2011/03/the-future-of-the-web-is-webgl/feed/ 0 http://www.devirtuoso.com/2011/03/the-future-of-the-web-is-webgl/