INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(911, 3, '2010-07-01 14:11:17', '2010-07-01 18:11:17', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your <canvas> element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-7', '', '', '2010-07-01 14:11:17', '2010-07-01 18:11:17', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-7/', 0, 'revision', '', 0),
(912, 3, '2010-07-01 14:11:23', '2010-07-01 18:11:23', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your <canvas> element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-8', '', '', '2010-07-01 14:11:23', '2010-07-01 18:11:23', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-8/', 0, 'revision', '', 0),
(913, 3, '2010-07-01 14:12:34', '2010-07-01 18:12:34', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-9', '', '', '2010-07-01 14:12:34', '2010-07-01 18:12:34', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-9/', 0, 'revision', '', 0),
(914, 3, '2010-07-01 14:20:48', '2010-07-01 18:20:48', '', 'box2', 0, '', 'inherit', 'open', 'open', '', 'box2-2', '', '', '2010-07-01 14:20:48', '2010-07-01 18:20:48', '', 903, 'http://blog.reybango.com/wp-content/uploads/2010/07/box2.png', 0, 'attachment', 'image/png', 0),
(915, 3, '2010-07-01 14:12:37', '2010-07-01 18:12:37', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-10', '', '', '2010-07-01 14:12:37', '2010-07-01 18:12:37', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-10/', 0, 'revision', '', 0),
(916, 3, '2010-07-01 14:22:42', '2010-07-01 18:22:42', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\n\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \n\nIf we look at the Canvas element, the format is just like any other HTML element:\n\n[code lang="html"]\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\n[/code]\n\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\n\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\n\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\n\n[code lang="js"]\nvar myCanvas = document.getElementById( &quot;can1&quot; );\n[/code]\n\nYou could do the same thing in jQuery this way:\n\n[code lang="js"]\nvar myCanvas = $( &quot;#can1&quot; );\n[/code]\n\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\n\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\n\n[code lang="js"]\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\n[/code]\n\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\n\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\n\n[code lang="js"]\n  myContext.fillStyle   = ''#00f'';\n  myContext.strokeStyle = ''#f00'';  \n  myContext.lineWidth   = 4;  \n  myContext.strokeRect( 0,0,300,300);\n  myContext.fillRect(0, 0, 300, 300);\n[/code]\n\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\n\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\n\n[code lang="js"]\n  myContext.moveTo( 150, 0 );\n[/code]\n\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \n\n[code lang="js"]\n  myContext.lineTo( 0, 150 );\n  myContext.lineTo( 150, 300 );    \n  myContext.lineTo( 300, 150 );    \n  myContext.lineTo( 150, 0 ); \n[/code]\n\nThis code renders a box like this:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\n\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\n\n  myContext.fillStyle   = ''#F63806'';  \n  myContext.strokeStyle = "#000";\n  \n  myContext.fill();\n  myContext.stroke();\n\n\n\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-11', '', '', '2010-07-01 14:22:42', '2010-07-01 18:22:42', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-11/', 0, 'revision', '', 0),
(917, 3, '2010-07-01 14:23:24', '2010-07-01 18:23:24', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = "#000";\r\n  \r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n\r\n\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-12', '', '', '2010-07-01 14:23:24', '2010-07-01 18:23:24', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-12/', 0, 'revision', '', 0),
(918, 3, '2010-07-01 14:23:53', '2010-07-01 18:23:53', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n\r\n\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-13', '', '', '2010-07-01 14:23:53', '2010-07-01 18:23:53', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-13/', 0, 'revision', '', 0),
(919, 3, '2010-07-01 14:25:12', '2010-07-01 18:25:12', '', 'box3', 0, '', 'inherit', 'open', 'open', '', 'box3', '', '', '2010-07-01 14:25:12', '2010-07-01 18:25:12', '', 903, 'http://blog.reybango.com/wp-content/uploads/2010/07/box3.png', 0, 'attachment', 'image/png', 0),
(920, 3, '2010-07-01 14:23:58', '2010-07-01 18:23:58', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n\r\n\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-14', '', '', '2010-07-01 14:23:58', '2010-07-01 18:23:58', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-14/', 0, 'revision', '', 0),
(921, 3, '2010-07-01 14:25:22', '2010-07-01 18:25:22', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\n\r\n\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-15', '', '', '2010-07-01 14:25:22', '2010-07-01 18:25:22', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-15/', 0, 'revision', '', 0),
(922, 3, '2010-07-01 14:25:29', '2010-07-01 18:25:29', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\n\r\n\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-16', '', '', '2010-07-01 14:25:29', '2010-07-01 18:25:29', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-16/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(923, 3, '2010-07-01 14:26:46', '2010-07-01 18:26:46', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-17', '', '', '2010-07-01 14:26:46', '2010-07-01 18:26:46', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-17/', 0, 'revision', '', 0),
(924, 3, '2010-07-01 14:26:52', '2010-07-01 18:26:52', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-18', '', '', '2010-07-01 14:26:52', '2010-07-01 18:26:52', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-18/', 0, 'revision', '', 0),
(925, 3, '2010-07-01 14:26:52', '2010-07-01 18:26:52', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-18', '', '', '2010-07-01 14:26:52', '2010-07-01 18:26:52', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-18/', 0, 'revision', '', 0),
(926, 3, '2010-07-01 14:48:00', '2010-07-01 18:48:00', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of Canvas can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using <code><canvas></code>, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-19', '', '', '2010-07-01 14:48:00', '2010-07-01 18:48:00', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-19/', 0, 'revision', '', 0),
(927, 3, '2010-07-01 14:49:00', '2010-07-01 18:49:00', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of Canvas can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &ltcanvas&gt, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-20', '', '', '2010-07-01 14:49:00', '2010-07-01 18:49:00', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-20/', 0, 'revision', '', 0),
(928, 3, '2010-07-01 14:49:03', '2010-07-01 18:49:03', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of Canvas can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &ltcanvas&gt, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-21', '', '', '2010-07-01 14:49:03', '2010-07-01 18:49:03', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-21/', 0, 'revision', '', 0),
(930, 3, '2010-07-01 14:50:32', '2010-07-01 18:50:32', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of Canvas can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-23', '', '', '2010-07-01 14:50:32', '2010-07-01 18:50:32', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-23/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(929, 3, '2010-07-01 14:49:36', '2010-07-01 18:49:36', 'I hate to admit it but I haven''t looked at Canvas yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of Canvas can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using <pre>&ltcanvas&gt</pre>, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'A Quick Jump into Canvas', 0, '', 'inherit', 'open', 'open', '', '903-revision-22', '', '', '2010-07-01 14:49:36', '2010-07-01 18:49:36', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-22/', 0, 'revision', '', 0),
(931, 3, '2010-07-01 14:54:28', '2010-07-01 18:54:28', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\n\nFor those not familiar with it, the HTML 5 &lt;canvas&gt; element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \n\nIf we look at the Canvas element, the format is just like any other HTML element:\n\n[code lang="html"]\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\n[/code]\n\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\n\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\n\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\n\n[code lang="js"]\nvar myCanvas = document.getElementById( &quot;can1&quot; );\n[/code]\n\nYou could do the same thing in jQuery this way:\n\n[code lang="js"]\nvar myCanvas = $( &quot;#can1&quot; );\n[/code]\n\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\n\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\n\n[code lang="js"]\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\n[/code]\n\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\n\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\n\n[code lang="js"]\n  myContext.fillStyle   = ''#00f'';\n  myContext.strokeStyle = ''#f00'';  \n  myContext.lineWidth   = 4;  \n  myContext.strokeRect( 0,0,300,300);\n  myContext.fillRect(0, 0, 300, 300);\n[/code]\n\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\n\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\n\n[code lang="js"]\n  myContext.moveTo( 150, 0 );\n[/code]\n\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \n\n[code lang="js"]\n  myContext.lineTo( 0, 150 );\n  myContext.lineTo( 150, 300 );    \n  myContext.lineTo( 300, 150 );    \n  myContext.lineTo( 150, 0 ); \n[/code]\n\nThis code renders a box like this:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\n\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\n\n[code lang="js"]\n  myContext.fillStyle   = ''#F63806'';  \n  myContext.strokeStyle = &quot;#000&quot;;\n[/code]  \n\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\n\n[code lang="js"]\n  myContext.fill();\n  myContext.stroke();\n[/code]\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\n\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\n\nHere''s the code to my tutorial:\n\n[code lang="html"]\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt; \n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \n  &lt;title&gt;Canvas Test&lt;/title&gt; \n&lt;/head&gt; \n \n&lt;body&gt; \n\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\n\n  &lt;script type=&quot;text/javascript&quot;&gt;\n  var myCanvas = document.getElementById( &quot;can1&quot; );\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\n  myContext.fillStyle   = ''#00f'';\n  myContext.strokeStyle = ''#F63806'';  \n  myContext.lineWidth   = 4;  \n  myContext.fillRect(0, 0, 300, 300);  \n  myContext.strokeRect( 0,0,300,300);\n\n  myContext.moveTo( 150, 0 );\n  myContext.lineTo( 0, 150 );\n  myContext.lineTo( 150, 300 );    \n  myContext.lineTo( 300, 150 );    \n  myContext.lineTo( 150, 0 );      \n\n  myContext.fillStyle   = ''#F63806'';  \n  myContext.strokeStyle = &quot;#000&quot;;\n  \n  myContext.fill();\n  myContext.stroke();\n\n  &lt;/script&gt;\n \n&lt;/body&gt; \n&lt;/html&gt; \n[/code]\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-24', '', '', '2010-07-01 14:54:28', '2010-07-01 18:54:28', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-24/', 0, 'revision', '', 0),
(932, 3, '2010-07-01 14:54:57', '2010-07-01 18:54:57', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML 5 &lt;canvas&gt; element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-25', '', '', '2010-07-01 14:54:57', '2010-07-01 18:54:57', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-25/', 0, 'revision', '', 0),
(933, 3, '2010-07-01 14:55:03', '2010-07-01 18:55:03', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the HTML 5 &lt;canvas&gt; element provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the Canvas element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-26', '', '', '2010-07-01 14:55:03', '2010-07-01 18:55:03', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-26/', 0, 'revision', '', 0),
(934, 3, '2010-07-01 14:56:11', '2010-07-01 18:56:11', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-27', '', '', '2010-07-01 14:56:11', '2010-07-01 18:56:11', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-27/', 0, 'revision', '', 0),
(935, 3, '2010-07-01 14:56:18', '2010-07-01 18:56:18', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the moveTo() method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the lineTo() method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the moveTo() method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-28', '', '', '2010-07-01 14:56:18', '2010-07-01 18:56:18', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-28/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(936, 3, '2010-07-01 14:58:33', '2010-07-01 18:58:33', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-29', '', '', '2010-07-01 14:58:33', '2010-07-01 18:58:33', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-29/', 0, 'revision', '', 0),
(937, 3, '2010-07-01 14:58:37', '2010-07-01 18:58:37', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million buck at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-30', '', '', '2010-07-01 14:58:37', '2010-07-01 18:58:37', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-30/', 0, 'revision', '', 0),
(938, 3, '2010-07-01 14:59:20', '2010-07-01 18:59:20', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-31', '', '', '2010-07-01 14:59:20', '2010-07-01 18:59:20', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-31/', 0, 'revision', '', 0),
(939, 3, '2010-07-01 14:59:24', '2010-07-01 18:59:24', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element.\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-32', '', '', '2010-07-01 14:59:24', '2010-07-01 18:59:24', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-32/', 0, 'revision', '', 0),
(940, 3, '2010-07-01 15:07:37', '2010-07-01 19:07:37', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element. \r\n\r\nOne really cool thing is that the gaming industry is keenly looking at &lt;canvas&gt; since it will help them distribute new games without the need for special plugins. <a href="http://www.canvasdemos.com/2009/07/09/game-development-tutorials/">Here''s a tutorial</a>, for example, that talks about how to create a game using &lt;canvas&gt;. It certainly won''t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-33', '', '', '2010-07-01 15:07:37', '2010-07-01 19:07:37', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-33/', 0, 'revision', '', 0),
(941, 3, '2010-07-01 15:07:50', '2010-07-01 19:07:50', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element. \r\n\r\nOne really cool thing is that the gaming industry is keenly looking at &lt;canvas&gt; since it will help them distribute new games without the need for special plugins. <a href="http://www.canvasdemos.com/2009/07/09/game-development-tutorials/">Here''s a tutorial</a>, for example, that talks about how to create a game using &lt;canvas&gt;. It certainly won''t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-34', '', '', '2010-07-01 15:07:50', '2010-07-01 19:07:50', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-34/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(942, 3, '2010-07-01 15:08:14', '2010-07-01 19:08:14', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, your limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element. \r\n\r\nOne really cool thing is that the gaming industry is keenly looking at &lt;canvas&gt; since it will help them distribute new games without the need for special plugins. <a href="http://www.canvasdemos.com/2009/07/09/game-development-tutorials/">Here''s a tutorial</a>, for example, that talks about how to create a game using &lt;canvas&gt;. It certainly won''t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-35', '', '', '2010-07-01 15:08:14', '2010-07-01 19:08:14', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-35/', 0, 'revision', '', 0),
(943, 3, '2010-07-01 15:21:22', '2010-07-01 19:21:22', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\n\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \n\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\n\n[code lang="html"]\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\n[/code]\n\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\n\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\n\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\n\n[code lang="js"]\nvar myCanvas = document.getElementById( &quot;can1&quot; );\n[/code]\n\nYou could do the same thing in jQuery this way:\n\n[code lang="js"]\nvar myCanvas = $( &quot;#can1&quot; );\n[/code]\n\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\n\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\n\n[code lang="js"]\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\n[/code]\n\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, you''re limited to flat drawings.\n\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\n\n[code lang="js"]\n  myContext.fillStyle   = ''#00f'';\n  myContext.strokeStyle = ''#f00'';  \n  myContext.lineWidth   = 4;  \n  myContext.strokeRect( 0,0,300,300);\n  myContext.fillRect(0, 0, 300, 300);\n[/code]\n\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\n\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\n\n[code lang="js"]\n  myContext.moveTo( 150, 0 );\n[/code]\n\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \n\n[code lang="js"]\n  myContext.lineTo( 0, 150 );\n  myContext.lineTo( 150, 300 );    \n  myContext.lineTo( 300, 150 );    \n  myContext.lineTo( 150, 0 ); \n[/code]\n\nThis code renders a box like this:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\n\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\n\n[code lang="js"]\n  myContext.fillStyle   = ''#F63806'';  \n  myContext.strokeStyle = &quot;#000&quot;;\n[/code]  \n\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\n\n[code lang="js"]\n  myContext.fill();\n  myContext.stroke();\n[/code]\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\n\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element. \n\nOne really cool thing is that the gaming industry is keenly looking at &lt;canvas&gt; since it will help them distribute new games without the need for special plugins. <a href="http://www.canvasdemos.com/2009/07/09/game-development-tutorials/">Here''s a tutorial</a>, for example, that talks about how to create a game using &lt;canvas&gt;. It certainly won''t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)\n\nHere''s the code to my tutorial:\n\n[code lang="html"]\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt; \n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \n  &lt;title&gt;Canvas Test&lt;/title&gt; \n&lt;/head&gt; \n \n&lt;body&gt; \n\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\n\n  &lt;script type=&quot;text/javascript&quot;&gt;\n  var myCanvas = document.getElementById( &quot;can1&quot; );\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\n  myContext.fillStyle   = ''#00f'';\n  myContext.strokeStyle = ''#F63806'';  \n  myContext.lineWidth   = 4;  \n  myContext.fillRect(0, 0, 300, 300);  \n  myContext.strokeRect( 0,0,300,300);\n\n  myContext.moveTo( 150, 0 );\n  myContext.lineTo( 0, 150 );\n  myContext.lineTo( 150, 300 );    \n  myContext.lineTo( 300, 150 );    \n  myContext.lineTo( 150, 0 );      \n\n  myContext.fillStyle   = ''#F63806'';  \n  myContext.strokeStyle = &quot;#000&quot;;\n  \n  myContext.fill();\n  myContext.stroke();\n\n  &lt;/script&gt;\n \n&lt;/body&gt; \n&lt;/html&gt; \n[/code]\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-autosave', '', '', '2010-07-01 15:21:22', '2010-07-01 19:21:22', '', 903, 'http://blog.reybango.com/2010/07/01/903-autosave/', 0, 'revision', '', 0),
(944, 3, '2010-07-01 15:21:21', '2010-07-01 19:21:21', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1&quot; );\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, you''re limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element. \r\n\r\nOne really cool thing is that the gaming industry is keenly looking at &lt;canvas&gt; since it will help them distribute new games without the need for special plugins. <a href="http://www.canvasdemos.com/2009/07/09/game-development-tutorials/">Here''s a tutorial</a>, for example, that talks about how to create a game using &lt;canvas&gt;. It certainly won''t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-36', '', '', '2010-07-01 15:21:21', '2010-07-01 19:21:21', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-36/', 0, 'revision', '', 0),
(945, 3, '2010-07-01 15:25:24', '2010-07-01 19:25:24', 'I hate to admit it but I haven''t looked at &lt;canvas&gt; yet. It''s not for lack of wanting but more of time. Seems like there''s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.\r\n\r\nFor those not familiar with it, the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">HTML 5 &lt;canvas&gt; element</a> provides a rectangular area where you can draw anything you want on. It''s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. \r\n\r\nIf we look at the &lt;canvas&gt; element, the format is just like any other HTML element:\r\n\r\n[code lang="html"]\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n[/code]\r\n\r\nYou define the element along with specific attributes, just like most any other HTML element. In this case, we''re assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.\r\n\r\nNow, I''m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.\r\n\r\nThe first thing we need to do is great a reference to the &lt;canvas&gt; element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:\r\n\r\n[code lang="js"]\r\nvar myCanvas = document.getElementById( &quot;can1&quot; );\r\n[/code]\r\n\r\nYou could do the same thing in jQuery this way:\r\n\r\n[code lang="js"]\r\nvar myCanvas = $( &quot;#can1 )[0];\r\n[/code]\r\n\r\nbut because we really don''t need all of the jQuery library''s syntactic sugar for this small demo, I''m just going to use plain ''ole JavaScript.\r\n\r\nNext, we''ll use the element''s <em>getContext()</em> method to grab the rendering context for that element. This is the area within your &lt;canvas&gt; element where the actual drawing will occur. It doesn''t have to be the same size as your canvas but it needs to fit within it.\r\n\r\n[code lang="js"]\r\nvar myContext = myCanvas.getContext( &quot;2d&quot; );\r\n[/code]\r\n\r\nWe specify "2d" as a parameter because it''s the only rendering context currently supported by the specification so for now, you''re limited to flat drawings.\r\n\r\nNow that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the <em>strokeRect()</em> & <em>fillRect()</em> methods, I can use the colors defined in those properties to effect the change:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#f00'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.strokeRect( 0,0,300,300);\r\n  myContext.fillRect(0, 0, 300, 300);\r\n[/code]\r\n\r\nWhat this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we''re able to do this via HTML and JavaScript is pretty cool:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>\r\n\r\nNow I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I''m first going to use the <em>moveTo()</em> method to position my starting point. The two parameters are "x,y" coordinates within your rendering context and I''d like to start at the top and centered:\r\n\r\n[code lang="js"]\r\n  myContext.moveTo( 150, 0 );\r\n[/code]\r\n\r\nNext, I''ll use the <em>lineTo()</em> method to draw a line to different "x,y" coordinates. Notice that I don''t have to re-use the <em>moveTo()</em> method to reposition the starting point of each line. \r\n\r\n[code lang="js"]\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 ); \r\n[/code]\r\n\r\nThis code renders a box like this:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box2.png" alt="" title="box2" width="303" height="303" class="alignright size-full wp-image-914" /></a>\r\n\r\nThe last things I want to do are to adjust the <em>fillStyle</em> and <em>strokeStyle</em> properties so that they''re a different color:\r\n\r\n[code lang="js"]\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n[/code]  \r\n\r\nand then using the <em>fill()</em> and <em>stroke()</em> methods, apply the color changes to the new drawing:\r\n\r\n[code lang="js"]\r\n  myContext.fill();\r\n  myContext.stroke();\r\n[/code]\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box3.png" alt="" title="box3" width="306" height="307" class="alignright size-full wp-image-919" /></a>\r\n\r\nWooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it''s a start. While what I built is fairly simple, the power of &lt;canvas&gt; can really be seen by visiting <a href="http://www.canvasdemos.com/">Canvasdemos.com</a>. Along with excellent demos built using &lt;canvas&gt;, it provides tutorials on how to get up to speed on this element. \r\n\r\nOne really cool thing is that the gaming industry is keenly looking at &lt;canvas&gt; since it will help them distribute new games without the need for special plugins. <a href="http://www.canvasdemos.com/2009/07/09/game-development-tutorials/">Here''s a tutorial</a>, for example, that talks about how to create a game using &lt;canvas&gt;. It certainly won''t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)\r\n\r\nHere''s the code to my tutorial:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;\r\n\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  var myCanvas = document.getElementById( &quot;can1&quot; );\r\n  var myContext = myCanvas.getContext( &quot;2d&quot; );\r\n  myContext.fillStyle   = ''#00f'';\r\n  myContext.strokeStyle = ''#F63806'';  \r\n  myContext.lineWidth   = 4;  \r\n  myContext.fillRect(0, 0, 300, 300);  \r\n  myContext.strokeRect( 0,0,300,300);\r\n\r\n  myContext.moveTo( 150, 0 );\r\n  myContext.lineTo( 0, 150 );\r\n  myContext.lineTo( 150, 300 );    \r\n  myContext.lineTo( 300, 150 );    \r\n  myContext.lineTo( 150, 0 );      \r\n\r\n  myContext.fillStyle   = ''#F63806'';  \r\n  myContext.strokeStyle = &quot;#000&quot;;\r\n  \r\n  myContext.fill();\r\n  myContext.stroke();\r\n\r\n  &lt;/script&gt;\r\n \r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element', 0, '', 'inherit', 'open', 'open', '', '903-revision-37', '', '', '2010-07-01 15:25:24', '2010-07-01 19:25:24', '', 903, 'http://blog.reybango.com/2010/07/01/903-revision-37/', 0, 'revision', '', 0),
(947, 3, '2010-07-06 09:00:33', '2010-07-06 13:00:33', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from <a href="http://www.karlswedberg.com/">Karl Swedberg</a> which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'publish', 'open', 'open', '', 'generic-activity-indicator-for-ajax-requests', '', '', '2010-07-03 10:07:38', '2010-07-03 14:07:38', '', 0, 'http://blog.reybango.com/?p=947', 0, 'post', '', 10),
(948, 3, '2010-07-03 09:05:03', '2010-07-03 13:05:03', '', 'facebook', 0, '', 'inherit', 'open', 'open', '', 'facebook', '', '', '2010-07-03 09:05:03', '2010-07-03 13:05:03', '', 947, 'http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif', 0, 'attachment', 'image/gif', 0),
(949, 3, '2010-07-03 09:07:09', '2010-07-03 13:07:09', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\n\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises tem', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision', '', '', '2010-07-03 09:07:09', '2010-07-03 13:07:09', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision/', 0, 'revision', '', 0),
(950, 3, '2010-07-03 09:07:24', '2010-07-03 13:07:24', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-2', '', '', '2010-07-03 09:07:24', '2010-07-03 13:07:24', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-2/', 0, 'revision', '', 0),
(951, 3, '2010-07-03 09:07:29', '2010-07-03 13:07:29', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-3', '', '', '2010-07-03 09:07:29', '2010-07-03 13:07:29', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-3/', 0, 'revision', '', 0),
(952, 3, '2010-07-03 09:12:18', '2010-07-03 13:12:18', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-4', '', '', '2010-07-03 09:12:18', '2010-07-03 13:12:18', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-4/', 0, 'revision', '', 0),
(953, 3, '2010-07-03 09:12:22', '2010-07-03 13:12:22', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-5', '', '', '2010-07-03 09:12:22', '2010-07-03 13:12:22', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-5/', 0, 'revision', '', 0),
(954, 3, '2010-07-03 09:15:21', '2010-07-03 13:15:21', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-6', '', '', '2010-07-03 09:15:21', '2010-07-03 13:15:21', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-6/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(955, 3, '2010-07-03 09:15:27', '2010-07-03 13:15:27', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-7', '', '', '2010-07-03 09:15:27', '2010-07-03 13:15:27', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-7/', 0, 'revision', '', 0),
(956, 3, '2010-07-03 09:21:49', '2010-07-03 13:21:49', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the prepend() method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\n[code lang="js"]\r\n	fillBox = function( ele ) {\r\n		\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		}).ajaxStop( function() {\r\n		\r\n			$(&quot;#throbber&quot;).remove();\r\n		\r\n		});\r\n			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-8', '', '', '2010-07-03 09:21:49', '2010-07-03 13:21:49', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-8/', 0, 'revision', '', 0),
(957, 3, '2010-07-03 09:21:56', '2010-07-03 13:21:56', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the prepend() method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\n[code lang="js"]\r\n	fillBox = function( ele ) {\r\n		\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		}).ajaxStop( function() {\r\n		\r\n			$(&quot;#throbber&quot;).remove();\r\n		\r\n		});\r\n			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-9', '', '', '2010-07-03 09:21:56', '2010-07-03 13:21:56', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-9/', 0, 'revision', '', 0),
(958, 3, '2010-07-03 09:25:30', '2010-07-03 13:25:30', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\n\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-10', '', '', '2010-07-03 09:25:30', '2010-07-03 13:25:30', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-10/', 0, 'revision', '', 0),
(959, 3, '2010-07-03 09:30:13', '2010-07-03 13:30:13', '', 'throbber', 0, '', 'inherit', 'open', 'open', '', 'throbber', '', '', '2010-07-03 09:30:13', '2010-07-03 13:30:13', '', 947, 'http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png', 0, 'attachment', 'image/png', 0),
(960, 3, '2010-07-03 09:25:34', '2010-07-03 13:25:34', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\n\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-11', '', '', '2010-07-03 09:25:34', '2010-07-03 13:25:34', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-11/', 0, 'revision', '', 0),
(961, 3, '2010-07-03 09:32:38', '2010-07-03 13:32:38', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed!\r\n\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-12', '', '', '2010-07-03 09:32:38', '2010-07-03 13:32:38', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-12/', 0, 'revision', '', 0),
(962, 3, '2010-07-03 09:32:43', '2010-07-03 13:32:43', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed!\r\n\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-13', '', '', '2010-07-03 09:32:43', '2010-07-03 13:32:43', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-13/', 0, 'revision', '', 0),
(963, 3, '2010-07-03 09:36:29', '2010-07-03 13:36:29', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-14', '', '', '2010-07-03 09:36:29', '2010-07-03 13:36:29', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-14/', 0, 'revision', '', 0),
(964, 3, '2010-07-03 09:40:11', '2010-07-03 13:40:11', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-15', '', '', '2010-07-03 09:40:11', '2010-07-03 13:40:11', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-15/', 0, 'revision', '', 0),
(965, 3, '2010-07-03 09:40:18', '2010-07-03 13:40:18', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-16', '', '', '2010-07-03 09:40:18', '2010-07-03 13:40:18', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-16/', 0, 'revision', '', 0),
(966, 3, '2010-07-03 09:41:04', '2010-07-03 13:41:04', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-17', '', '', '2010-07-03 09:41:04', '2010-07-03 13:41:04', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-17/', 0, 'revision', '', 0),
(967, 3, '2010-07-03 09:41:12', '2010-07-03 13:41:12', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-18', '', '', '2010-07-03 09:41:12', '2010-07-03 13:41:12', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-18/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(968, 3, '2010-07-03 09:47:30', '2010-07-03 13:47:30', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code language="lang=&quot;js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-19', '', '', '2010-07-03 09:47:30', '2010-07-03 13:47:30', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-19/', 0, 'revision', '', 0),
(969, 3, '2010-07-03 09:47:34', '2010-07-03 13:47:34', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code language="lang=&quot;js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-20', '', '', '2010-07-03 09:47:34', '2010-07-03 13:47:34', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-20/', 0, 'revision', '', 0),
(970, 3, '2010-07-03 09:48:19', '2010-07-03 13:48:19', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-21', '', '', '2010-07-03 09:48:19', '2010-07-03 13:48:19', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-21/', 0, 'revision', '', 0),
(971, 3, '2010-07-03 09:48:23', '2010-07-03 13:48:23', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\n\r\n\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-22', '', '', '2010-07-03 09:48:23', '2010-07-03 13:48:23', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-22/', 0, 'revision', '', 0),
(972, 3, '2010-07-03 09:57:56', '2010-07-03 13:57:56', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-23', '', '', '2010-07-03 09:57:56', '2010-07-03 13:57:56', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-23/', 0, 'revision', '', 0),
(973, 3, '2010-07-03 09:58:13', '2010-07-03 13:58:13', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-24', '', '', '2010-07-03 09:58:13', '2010-07-03 13:58:13', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-24/', 0, 'revision', '', 0),
(974, 3, '2010-07-03 10:01:52', '2010-07-03 14:01:52', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-25', '', '', '2010-07-03 10:01:52', '2010-07-03 14:01:52', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-25/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(975, 3, '2010-07-03 10:01:57', '2010-07-03 14:01:57', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from Karl Swedberg which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-26', '', '', '2010-07-03 10:01:57', '2010-07-03 14:01:57', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-26/', 0, 'revision', '', 0),
(976, 3, '2010-07-03 10:05:42', '2010-07-03 14:05:42', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from <a href="http://www.karlswedberg.com/">Karl Swedberg</a> which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-27', '', '', '2010-07-03 10:05:42', '2010-07-03 14:05:42', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-27/', 0, 'revision', '', 0),
(977, 3, '2010-07-03 10:06:31', '2010-07-03 14:06:31', 'Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I''m sure most of you have seen these but if not, here''s one similar to what Facebook uses:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>\r\n\r\nWhile it''s may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.\r\n\r\n<h2>Targeted Indicators</h2>\r\n\r\nIn my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). \r\n\r\nFirst, I created three DIVs and 3 anchor tags:\r\n\r\n[code lang="html"]\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n[/code]\r\n\r\nand I set the DIVs to a specific width and floated them left:\r\n\r\n[code lang="css"]\r\n#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n[/code]\r\n\r\nNext, I created a new method called <em>fillBox()</em> that would take the target element''s ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery''s global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the <em>prepend()</em> method:\r\n\r\n[code lang="js"]\r\n		$(ele).ajaxStart( function() {\r\n		\r\n			$(this).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n		\r\n		})\r\n[/code]\r\n\r\nThen using the Ajax global event handler ajaxStop(), I would easily delete the indicator once the Ajax request was done by using the <em>remove()</em> method to delete the IMG tag from the DOM:\r\n\r\n[code lang="js"]\r\najaxStop( function() {\r\n		\r\n	$(&quot;#throbber&quot;).remove();\r\n		\r\n});\r\n[/code]\r\n\r\nLastly, using some event delegation, I created an event handler for the clicks on the anchor tags:\r\n\r\n[code lang="js"]\r\n$( &quot;a&quot; ).click( function(e) {\r\n	\r\n	var el = '''';\r\n	switch(e.target.text) {\r\n		case &quot;Box 1&quot;: \r\n			el = ''#box1'';\r\n			break;					\r\n		case &quot;Box 2&quot;: \r\n			el = ''#box2'';\r\n			break;								\r\n		case &quot;Box 3&quot;: \r\n			el = ''#box3'';\r\n			break;										\r\n	} \r\n\r\n	fillBox( el );\r\n	\r\n});\r\n[/code]\r\n\r\nThe handler simply looked for the anchor tag''s text and based on that filled a local var with the ID that would be targeted for the indicator. It then passed that ID to the <em>fillBox()</em> method.\r\n\r\n<h2>A Little Roadblock</h2>\r\n\r\nI thought I was done and the code look pretty straightforward. When I ran this, though, I experienced some odd behavior:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/throbber.png" alt="" title="throbber" width="619" height="414" class="alignright size-full wp-image-959" /></a>\r\n\r\nWhen I would click on the "Box 1" link, the indicator would correctly appear in the first DIV followed by the data populating the box. When I would next click on the "Box 3" link, though, both the first box <strong>AND</strong> the third box would have the indicators displayed! Not good. \r\n\r\nI looked into it and got feedback from Adam Sontag who provided the answer I needed. I had incorrectly assumed that <em>ajaxStop()</em> would unbind the jQuery global Ajax events from the attached element. Unfortunately it doesn''t so by using the <em>unbind()</em> method, I was able to resolve the issue.\r\n\r\n[code lang="js"]			\r\n		$.ajax({\r\n		  url: ''test.php'',\r\n		  cache: false,\r\n		  success: function(data) {\r\n			\r\n			$(ele).html( data ).unbind( ''ajaxStart'' ).unbind( ''ajaxStop'' );\r\n\r\n		  }\r\n		});\r\n\r\n	};\r\n[/code]\r\n\r\n<h2>The Solution Gets Easier</h2>\r\n\r\nThen I got more feedback from <a href="http://www.karlswedberg.com/">Karl Swedberg</a> which really streamlined the whole thing. He recommended forgoing the Ajax global events altogether and simply inserting the indicator via my fillBox() method directly and since I was replacing the contents of the DIVs with the <em>html()</em> method, there was no need to use <em>remove()</em> since the IMG tag was already being removed.\r\n\r\n[code lang="js"]\r\nvar fillBox = function( ele ) {\r\n\r\n	$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n	$.ajax({\r\n		url: ''test.php'',\r\n		cache: false,\r\n		success: function(data) {\r\n\r\n			$(ele).html( data );\r\n\r\n		}\r\n	});\r\n\r\n};\r\n[/code]\r\n\r\nSo while I initially was looking to use jQuery''s built-in global Ajax event handlers for making this generic, I''m finding Karl''s solution much cleaner. It requires less event handlers and method calls to do the same task. Love it!\r\n\r\nHere''s the end result and <a href="http://reybango.com/ajax/">you can see the demo here</a>:\r\n\r\n[code lang="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Throbber Test&lt;/title&gt; \r\n  &lt;style&gt;\r\n	#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };\r\n  &lt;/style&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n\r\n	fillBox = function( ele ) {\r\n\r\n		$(ele).prepend( &quot;&lt;img id=''throbber'' src=''facebook.gif'' /&gt;&quot; );\r\n\r\n		$.ajax({\r\n			url: ''test.php'',\r\n			cache: false,\r\n			success: function(data) {\r\n\r\n				$(ele).html( data );\r\n\r\n			}\r\n		});\r\n\r\n	};\r\n	\r\n	$(document).ready( function() {\r\n	\r\n		$( &quot;a&quot; ).click( function(e) {\r\n			\r\n			var el = '''';\r\n			switch(e.target.text) {\r\n				case &quot;Box 1&quot;: \r\n					el = ''#box1'';\r\n					break;					\r\n				case &quot;Box 2&quot;: \r\n					el = ''#box2'';\r\n					break;								\r\n				case &quot;Box 3&quot;: \r\n					el = ''#box3'';\r\n					break;										\r\n			} \r\n\r\n			fillBox( el );\r\n			\r\n		});\r\n		\r\n	});\r\n  &lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; \r\n\r\n&lt;br /&gt;&lt;br /&gt;\r\n\r\n&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n', 'Generic Activity Indicator for Ajax Requests', 0, '', 'inherit', 'open', 'open', '', '947-revision-28', '', '', '2010-07-03 10:06:31', '2010-07-03 14:06:31', '', 947, 'http://blog.reybango.com/2010/07/03/947-revision-28/', 0, 'revision', '', 0),
(978, 3, '2010-07-08 14:11:22', '2010-07-08 18:11:22', '<a href="http://carsonified.com/online-conferences/jquery/"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\nBe sure to use the following discount code for a 15% discount on registration: <strong>jquery15</strong> \r\n', 'I''m Presenting on jQuery Templates at ThinkVitamin''s jQuery Online Conference', 0, '', 'publish', 'open', 'open', '', 'im-presenting-on-jquery-templates-at-thinkvitamins-jquery-online-conference', '', '', '2010-07-09 17:10:13', '2010-07-09 21:10:13', '', 0, 'http://blog.reybango.com/?p=978', 0, 'post', '', 0),
(979, 3, '2010-07-08 13:52:26', '2010-07-08 17:52:26', '', 'tv-jquery-con', 0, '', 'inherit', 'open', 'open', '', 'tv-jquery-con', '', '', '2010-07-08 13:52:26', '2010-07-08 17:52:26', '', 978, 'http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png', 0, 'attachment', 'image/png', 0),
(980, 3, '2010-07-08 13:50:46', '2010-07-08 17:50:46', 'This coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\n\n', '', 0, '', 'inherit', 'open', 'open', '', '978-revision', '', '', '2010-07-08 13:50:46', '2010-07-08 17:50:46', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision/', 0, 'revision', '', 0),
(981, 3, '2010-07-08 13:52:38', '2010-07-08 17:52:38', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '978-revision-2', '', '', '2010-07-08 13:52:38', '2010-07-08 17:52:38', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-2/', 0, 'revision', '', 0),
(982, 3, '2010-07-08 13:53:17', '2010-07-08 17:53:17', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m a Speaker at Think Vitamin''s jQuery Online Conference - jQuery Templates', 0, '', 'inherit', 'open', 'open', '', '978-revision-3', '', '', '2010-07-08 13:53:17', '2010-07-08 17:53:17', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-3/', 0, 'revision', '', 0),
(983, 3, '2010-07-08 13:53:40', '2010-07-08 17:53:40', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-4', '', '', '2010-07-08 13:53:40', '2010-07-08 17:53:40', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-4/', 0, 'revision', '', 0),
(984, 3, '2010-07-08 13:53:56', '2010-07-08 17:53:56', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-5', '', '', '2010-07-08 13:53:56', '2010-07-08 17:53:56', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-5/', 0, 'revision', '', 0),
(990, 3, '2010-07-08 14:04:38', '2010-07-08 18:04:38', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\n\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \n\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\n\n<h3 id="topics-sched">Topics and schedule</h3>\n\n<ul>\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \n<em>Rey Bango</em></strong>\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\n	<li><strong>Testing Your Mobile Web Apps \n<em>John Resig</em></strong>\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\n	<li><strong>Taking jQuery Effects to the Next Level\n<em>Karl Swedberg</em></strong>\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\n	<li><strong>jQuery Pluginization \n<em>Ben Alman</em></strong> \nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\n</ul>\n\n\n\n\nIt''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\n\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-11', '', '', '2010-07-08 14:04:38', '2010-07-08 18:04:38', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-11/', 0, 'revision', '', 0),
(987, 3, '2010-07-08 14:02:15', '2010-07-08 18:02:15', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data<br/> \r\nRey Bango <br/></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps<br/> \r\nJohn Resig<br/> </strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level<br/> \r\nKarl Swedberg<br/></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization<br/> \r\nBen Alman<br/></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\n\r\n\r\n\r\nIt''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-8', '', '', '2010-07-08 14:02:15', '2010-07-08 18:02:15', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-8/', 0, 'revision', '', 0),
(985, 3, '2010-07-08 13:58:29', '2010-07-08 17:58:29', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n					<table id="schedule-table">\r\n\r\n						<tbody><tr>\r\n							<th class="session" scope="col">Session</th>\r\n							<th class="length" scope="col">Length</th>\r\n							<th class="topics" scope="col">Topics</th>\r\n							<th></th>\r\n						</tr>\r\n						<tr>\r\n\r\n							<td class="session">1st Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data</span> <br><span class="speaker-name">Rey Bango</span> <br><span class="topic-desc">In this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</span></td>\r\n						</tr>\r\n						<tr class="alt">\r\n\r\n							<td class="session">2nd Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">Testing Your Mobile Web Apps</span> <br><span class="speaker-name">John Resig</span> <br><span class="topic-desc">This talk will be a comprehensive look at what you need\r\n							to know to properly test your web applications on mobile devices,\r\n							based upon the work that''s been done by the jQuery team.\r\n							We''ll look at the different mobile phones that exist, what browsers\r\n							they run, and what you can do to support them. Additionally we''ll\r\n							examine some of the testing tools that can be used to make the whole\r\n							process much easier.</span></td>\r\n						</tr>\r\n						<tr>\r\n\r\n							<td class="session">3rd Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">Taking jQuery Effects to the Next Level</span> <br><span class="speaker-name">Karl Swedberg</span> <br><span class="topic-desc">One of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</span></td>\r\n						</tr>\r\n						<tr class="alt">\r\n\r\n							<td class="session">4th Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">jQuery Pluginization</span> <br><span class="speaker-name">Ben Alman</span> <br><span class="topic-desc">In this live-coding session, Ben explains how, with just a little\r\n							thought and effort around generalization, parameterization and\r\n							organization, you can convert your "just get the job done" jQuery code\r\n							into a legitimate, reusable, modular jQuery plugin.</span>\r\n						</tr>\r\n					</tbody></table>\r\n\r\n\r\n\r\nIt''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-6', '', '', '2010-07-08 13:58:29', '2010-07-08 17:58:29', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-6/', 0, 'revision', '', 0),
(986, 3, '2010-07-08 13:58:35', '2010-07-08 17:58:35', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n					<table id="schedule-table">\r\n\r\n						<tbody><tr>\r\n							<th class="session" scope="col">Session</th>\r\n							<th class="length" scope="col">Length</th>\r\n							<th class="topics" scope="col">Topics</th>\r\n							<th></th>\r\n						</tr>\r\n						<tr>\r\n\r\n							<td class="session">1st Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data</span> <br><span class="speaker-name">Rey Bango</span> <br><span class="topic-desc">In this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</span></td>\r\n						</tr>\r\n						<tr class="alt">\r\n\r\n							<td class="session">2nd Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">Testing Your Mobile Web Apps</span> <br><span class="speaker-name">John Resig</span> <br><span class="topic-desc">This talk will be a comprehensive look at what you need\r\n							to know to properly test your web applications on mobile devices,\r\n							based upon the work that''s been done by the jQuery team.\r\n							We''ll look at the different mobile phones that exist, what browsers\r\n							they run, and what you can do to support them. Additionally we''ll\r\n							examine some of the testing tools that can be used to make the whole\r\n							process much easier.</span></td>\r\n						</tr>\r\n						<tr>\r\n\r\n							<td class="session">3rd Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">Taking jQuery Effects to the Next Level</span> <br><span class="speaker-name">Karl Swedberg</span> <br><span class="topic-desc">One of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</span></td>\r\n						</tr>\r\n						<tr class="alt">\r\n\r\n							<td class="session">4th Session</td>\r\n							<td class="length">1 hour</td>\r\n							<td class="topics" colspan="2"><span class="topic-name">jQuery Pluginization</span> <br><span class="speaker-name">Ben Alman</span> <br><span class="topic-desc">In this live-coding session, Ben explains how, with just a little\r\n							thought and effort around generalization, parameterization and\r\n							organization, you can convert your "just get the job done" jQuery code\r\n							into a legitimate, reusable, modular jQuery plugin.</span>\r\n						</tr>\r\n					</tbody></table>\r\n\r\n\r\n\r\nIt''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-7', '', '', '2010-07-08 13:58:35', '2010-07-08 17:58:35', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-7/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(988, 3, '2010-07-08 14:03:15', '2010-07-08 18:03:15', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data<br/> \r\nRey Bango <br/></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps<br/> \r\nJohn Resig<br/> </strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level<br/> \r\nKarl Swedberg<br/></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization<br/> \r\nBen Alman<br/></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\n\r\n\r\n\r\nIt''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-9', '', '', '2010-07-08 14:03:15', '2010-07-08 18:03:15', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-9/', 0, 'revision', '', 0),
(989, 3, '2010-07-08 14:03:33', '2010-07-08 18:03:33', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\nRey Bango</strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps<br/> \r\nJohn Resig<br/> </strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level<br/> \r\nKarl Swedberg<br/></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization<br/> \r\nBen Alman<br/></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\n\r\n\r\n\r\nIt''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-10', '', '', '2010-07-08 14:03:33', '2010-07-08 18:03:33', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-10/', 0, 'revision', '', 0),
(991, 3, '2010-07-08 14:05:24', '2010-07-08 18:05:24', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-12', '', '', '2010-07-08 14:05:24', '2010-07-08 18:05:24', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-12/', 0, 'revision', '', 0),
(992, 3, '2010-07-08 14:05:45', '2010-07-08 18:05:45', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3 id="topics-sched">Topics and schedule</h3>\r\n\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-13', '', '', '2010-07-08 14:05:45', '2010-07-08 18:05:45', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-13/', 0, 'revision', '', 0),
(993, 3, '2010-07-08 14:06:52', '2010-07-08 18:06:52', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-14', '', '', '2010-07-08 14:06:52', '2010-07-08 18:06:52', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-14/', 0, 'revision', '', 0),
(994, 3, '2010-07-08 14:06:56', '2010-07-08 18:06:56', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the Microsoft jQuery Template plugin to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-15', '', '', '2010-07-08 14:06:56', '2010-07-08 18:06:56', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-15/', 0, 'revision', '', 0),
(995, 3, '2010-07-08 14:08:33', '2010-07-08 18:08:33', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-16', '', '', '2010-07-08 14:08:33', '2010-07-08 18:08:33', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-16/', 0, 'revision', '', 0),
(996, 3, '2010-07-08 14:08:48', '2010-07-08 18:08:48', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at Think Vitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-17', '', '', '2010-07-08 14:08:48', '2010-07-08 18:08:48', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-17/', 0, 'revision', '', 0),
(997, 3, '2010-07-08 14:10:52', '2010-07-08 18:10:52', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at ThinkVitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-18', '', '', '2010-07-08 14:10:52', '2010-07-08 18:10:52', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-18/', 0, 'revision', '', 0),
(998, 3, '2010-07-08 14:10:59', '2010-07-08 18:10:59', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at ThinkVitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-19', '', '', '2010-07-08 14:10:59', '2010-07-08 18:10:59', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-19/', 0, 'revision', '', 0),
(999, 3, '2010-07-08 14:11:22', '2010-07-08 18:11:22', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\n', 'I''m Presenting on jQuery Templates at ThinkVitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-20', '', '', '2010-07-08 14:11:22', '2010-07-08 18:11:22', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-20/', 0, 'revision', '', 0),
(1000, 3, '2010-07-08 14:13:19', '2010-07-08 18:13:19', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\nBe sure to use the following discount code for a 15% discount on registration: <strong>jquery15</strong> \r\n', 'I''m Presenting on jQuery Templates at ThinkVitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-21', '', '', '2010-07-08 14:13:19', '2010-07-08 18:13:19', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-21/', 0, 'revision', '', 0),
(1001, 3, '2010-07-09 11:01:25', '2010-07-09 15:01:25', 'In preparation for my <a href="http://carsonified.com/online-conferences/jquery/">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'publish', 'open', 'open', '', 'not-using-jquery-javascript-templates-youre-really-missing-out', '', '', '2010-07-09 17:09:49', '2010-07-09 21:09:49', '', 0, 'http://blog.reybango.com/?p=1001', 0, 'post', '', 76),
(1003, 3, '2010-07-09 10:39:20', '2010-07-09 14:39:20', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name + &quot; &quot; + age}&lt;/a&gt;&lt;/li&gt;\r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-2', '', '', '2010-07-09 10:39:20', '2010-07-09 14:39:20', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-2/', 0, 'revision', '', 0),
(1002, 3, '2010-07-09 10:39:07', '2010-07-09 14:39:07', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\n\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\n\nI could do something like this:\n\n[code language="js"]\nvar clRec = &quot;&quot;;\n\nfor(var i=0; i&lt;client.name.length; i++) {\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\n}\n[/code]\n\nbut to me, this seems much more readable and maintainable:\n\n[code language="js"]\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name + &quot; &quot; + age}&lt;/a&gt;&lt;/li&gt;\n&lt;/script&gt;\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision', '', '', '2010-07-09 10:39:07', '2010-07-09 14:39:07', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision/', 0, 'revision', '', 0);
