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
(1167, 3, '2010-08-11 11:27:10', '2010-08-11 15:27:10', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\r\n[/code]\r\n\r\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\r\n\r\nSay you have the following HTML markup:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand you bind the click event to generate an alert of some type like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically append DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\r\n\r\nNow to get around this limitation, jQuery team member initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM element but all subsequent DOM elements that were appended to the DOM and matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply top live(). The great thing with live() is that you could now bind dynamically added DOM elements like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nand if you did append a new DOM element, like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nit would now share the same function binding as initially defined.\r\n\r\n<strong>The Problem with Live()</strong>\r\n\r\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that altered the selector expressions initial results (e.g.: using children()). So, if we had markup like this:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n	&lt;ul&gt;\r\n		&lt;li&gt;Mary&lt;/li&gt;\r\n		&lt;li&gt;Jane&lt;/li&gt;\r\n	&lt;/ul&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand tried to use live() to bind all of the list items like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nthe binding would fail. \r\n\r\nIn order to get around this, Brandon introduced in version 1.4 of jQuery the new delegate() method. It provides greater control by allowing you to specify they context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\r\n[/code]\r\n\r\n<strong>When to Use live() or delegate()</strong>\r\n\r\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\r\n\r\n\r\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-12', '', '', '2010-08-11 11:27:10', '2010-08-11 15:27:10', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-12/', 0, 'revision', '', 0),
(1168, 3, '2010-08-11 11:30:25', '2010-08-11 15:30:25', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\n\n[code lang="js"]\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\n[/code]\n\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\n\nSay you have the following HTML markup:\n\n[code lang="html"]\n&lt;div id=&quot;clcontainer&quot;&gt;\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\n&lt;/div&gt;\n[/code]\n\nand you bind the click event to generate an alert of some type like this:\n\n[code lang="js"]\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\n[/code]\n\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\n[/code]\n\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\n\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to live(). The great thing with live() is that you could now bind dynamically added DOM elements like this:\n\n[code lang="js"]\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\n[/code]\n\nand if you did append a new DOM element, like this:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\n[/code]\n\nit would now share the same function binding as initially defined.\n\n<strong>The Problem with Live()</strong>\n\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that altered the selector expressions initial results (e.g.: using children()). So, if we had markup like this:\n\n[code lang="html"]\n&lt;div id=&quot;clcontainer&quot;&gt;\n	&lt;ul&gt;\n		&lt;li&gt;Mary&lt;/li&gt;\n		&lt;li&gt;Jane&lt;/li&gt;\n	&lt;/ul&gt;\n&lt;/div&gt;\n[/code]\n\nand tried to use live() to bind all of the list items like this:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\n[/code]\n\nthe binding would fail. \n\nIn order to get around this, Brandon introduced in version 1.4 of jQuery the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify they context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\n[/code]\n\n<strong>When to Use live() or delegate()</strong>\n\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\n\n\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-13', '', '', '2010-08-11 11:30:25', '2010-08-11 15:30:25', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-13/', 0, 'revision', '', 0),
(1169, 3, '2010-08-11 11:30:50', '2010-08-11 15:30:50', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\r\n[/code]\r\n\r\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\r\n\r\nSay you have the following HTML markup:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand you bind the click event to generate an alert of some type like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\r\n\r\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to <a href="http://api.jquery.com/live/">live()</a>. The great thing with <a href="http://api.jquery.com/live/">live()</a> is that you could now bind dynamically added DOM elements like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nand if you did append a new DOM element, like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nit would now share the same function binding as initially defined.\r\n\r\n<strong>The Problem with Live()</strong>\r\n\r\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that altered the selector expressions initial results (e.g.: using children()). So, if we had markup like this:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n	&lt;ul&gt;\r\n		&lt;li&gt;Mary&lt;/li&gt;\r\n		&lt;li&gt;Jane&lt;/li&gt;\r\n	&lt;/ul&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand tried to use live() to bind all of the list items like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nthe binding would fail. \r\n\r\nIn order to get around this, Brandon introduced in version 1.4 of jQuery the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify they context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\r\n[/code]\r\n\r\n<strong>When to Use live() or delegate()</strong>\r\n\r\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\r\n\r\n\r\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-14', '', '', '2010-08-11 11:30:50', '2010-08-11 15:30:50', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-14/', 0, 'revision', '', 0),
(1170, 3, '2010-08-11 11:31:00', '2010-08-11 15:31:00', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\r\n[/code]\r\n\r\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\r\n\r\nSay you have the following HTML markup:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand you bind the click event to generate an alert of some type like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\r\n\r\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to <a href="http://api.jquery.com/live/">live()</a>. The great thing with <a href="http://api.jquery.com/live/">live()</a> is that you could now bind dynamically added DOM elements like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nand if you did append a new DOM element, like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nit would now share the same function binding as initially defined.\r\n\r\n<strong>The Problem with Live()</strong>\r\n\r\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that altered the selector expressions initial results (e.g.: using children()). So, if we had markup like this:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n	&lt;ul&gt;\r\n		&lt;li&gt;Mary&lt;/li&gt;\r\n		&lt;li&gt;Jane&lt;/li&gt;\r\n	&lt;/ul&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand tried to use live() to bind all of the list items like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nthe binding would fail. \r\n\r\nIn order to get around this, Brandon introduced in version 1.4 of jQuery the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify they context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\r\n[/code]\r\n\r\n<strong>When to Use live() or delegate()</strong>\r\n\r\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\r\n\r\n\r\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-15', '', '', '2010-08-11 11:31:00', '2010-08-11 15:31:00', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-15/', 0, 'revision', '', 0),
(1171, 3, '2010-08-11 11:34:40', '2010-08-11 15:34:40', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\r\n[/code]\r\n\r\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\r\n\r\nSay you have the following HTML markup:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand you bind the click event to generate an alert of some type like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\r\n\r\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to <a href="http://api.jquery.com/live/">live()</a>. The great thing with <a href="http://api.jquery.com/live/">live()</a> is that you could now bind dynamically added DOM elements like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nand if you did append a new DOM element, like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nit would now share the same function binding as initially defined.\r\n\r\n<strong>The Problem with Live()</strong>\r\n\r\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that alter the selector expression''s initial results (e.g.: using children()). So, if we had markup like this:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n	&lt;ul&gt;\r\n		&lt;li&gt;Mary&lt;/li&gt;\r\n		&lt;li&gt;Jane&lt;/li&gt;\r\n	&lt;/ul&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand tried to use live() to bind all of the list items like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nthe binding would fail. Since chaining is so widely used within the jQuery community, this was a bit of a surprise to many and one of the most requested updates to jQuery.\r\n\r\nIn order to get around this, Brandon introduced in jQuery v 1.4 the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify the context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\r\n[/code]\r\n\r\n<strong>When to Use live() or delegate()</strong>\r\n\r\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\r\n\r\n\r\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-16', '', '', '2010-08-11 11:34:40', '2010-08-11 15:34:40', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-16/', 0, 'revision', '', 0),
(1172, 3, '2010-08-11 11:34:44', '2010-08-11 15:34:44', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\r\n[/code]\r\n\r\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\r\n\r\nSay you have the following HTML markup:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand you bind the click event to generate an alert of some type like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\r\n\r\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to <a href="http://api.jquery.com/live/">live()</a>. The great thing with <a href="http://api.jquery.com/live/">live()</a> is that you could now bind dynamically added DOM elements like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nand if you did append a new DOM element, like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nit would now share the same function binding as initially defined.\r\n\r\n<strong>The Problem with Live()</strong>\r\n\r\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that alter the selector expression''s initial results (e.g.: using children()). So, if we had markup like this:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n	&lt;ul&gt;\r\n		&lt;li&gt;Mary&lt;/li&gt;\r\n		&lt;li&gt;Jane&lt;/li&gt;\r\n	&lt;/ul&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand tried to use live() to bind all of the list items like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nthe binding would fail. Since chaining is so widely used within the jQuery community, this was a bit of a surprise to many and one of the most requested updates to jQuery.\r\n\r\nIn order to get around this, Brandon introduced in jQuery v 1.4 the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify the context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\r\n[/code]\r\n\r\n<strong>When to Use live() or delegate()</strong>\r\n\r\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\r\n\r\n\r\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-17', '', '', '2010-08-11 11:34:44', '2010-08-11 15:34:44', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-17/', 0, 'revision', '', 0),
(1181, 3, '2010-08-18 16:43:51', '2010-08-18 20:43:51', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he isn''t suffering anymore. No more shitty chemo. No more convulsions. No more meds. No more being an invalid. <strong>And that''s good because my dad hated being dependent on anyone.</strong>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. <strong>And that''s good because we all need some closure.</strong>\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'publish', 'open', 'open', '', 'one-year-ago-today-my-dad-passed-away', '', '', '2010-08-18 16:43:51', '2010-08-18 20:43:51', '', 0, 'http://blog.reybango.com/?p=1181', 0, 'post', '', 8),
(1174, 3, '2010-08-11 12:15:54', '2010-08-11 16:15:54', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\n\n[code lang="js"]\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\n[/code]\n\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\n\nSay you have the following HTML markup:\n\n[code lang="html"]\n&lt;div id=&quot;clcontainer&quot;&gt;\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\n&lt;/div&gt;\n[/code]\n\nand you bind the click event to generate an alert of some type like this:\n\n[code lang="js"]\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\n[/code]\n\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\n[/code]\n\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a specific set of available DOM elements (i.e: not dynamically appended). (Note:\n\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to <a href="http://api.jquery.com/live/">live()</a>. The great thing with <a href="http://api.jquery.com/live/">live()</a> is that you could now bind dynamically added DOM elements like this:\n\n[code lang="js"]\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\n[/code]\n\nand if you did append a new DOM element, like this:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\n[/code]\n\nit would now share the same function binding as initially defined.\n\n<strong>The Problem with Live()</strong>\n\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that alter the selector expression''s initial results (e.g.: using children()). So, if we had markup like this:\n\n[code lang="html"]\n&lt;div id=&quot;clcontainer&quot;&gt;\n	&lt;ul&gt;\n		&lt;li&gt;Mary&lt;/li&gt;\n		&lt;li&gt;Jane&lt;/li&gt;\n	&lt;/ul&gt;\n&lt;/div&gt;\n[/code]\n\nand tried to use live() to bind all of the list items like this:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\n[/code]\n\nthe binding would fail. Since chaining is so widely used within the jQuery community, this was a bit of a surprise to many and one of the most requested updates to jQuery.\n\nIn order to get around this, Brandon introduced in jQuery v 1.4 the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify the context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\n\n[code lang="js"]\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\n[/code]\n\n<strong>When to Use live() or delegate()</strong>\n\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\n\n\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-autosave', '', '', '2010-08-11 12:15:54', '2010-08-11 16:15:54', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-autosave/', 0, 'revision', '', 0),
(1175, 3, '2010-08-11 11:35:13', '2010-08-11 15:35:13', 'Binding events is one of the most common tasks a JavaScript developer has to do. It''s integral to the way our applications handle user interaction and response. Since it''s inception, jQuery has had event handling via various helper methods that helped to abstract cross-browser differences. If you''re a jQuery developer, I''m sure you''re used to syntax like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clname&quot;).click( function() { alert( &quot;Rey&quot; ) } );\r\n[/code]\r\n\r\nwhich would bind a click event to a DOM element with an ID of "clname". Very easy to understanding and simple to use. But when you get past just simple use of JavaScript and start inserting new DOM nodes, this binding becomes less useful because it can''t handle dynamically inserted elements. Let me explain.\r\n\r\nSay you have the following HTML markup:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n&lt;a href=&quot;#&quot; class=&quot;clients&quot;&gt;Click for Rey Information&lt;/a&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand you bind the click event to generate an alert of some type like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).click( function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nbut then you decide that you''re going to add a new DOM element to the page dynamically:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nWhat do you think will happen? I would venture many developers might expect that the second, dynamically appended DOM element would share the same binding as the first since they share the same class name. That''s not the case. jQuery methods such as click(), dbclick(), and bind() are meant to bind events to a single DOM element.\r\n\r\nNow to get around this limitation, jQuery team member <a href="http://brandonaaron.net/">Brandon Aaron</a> initially created a plugin called LiveQuery which would allow you to bind events not only to specific DOM elements but all subsequent DOM elements that were appended to the DOM that matched the selector specified in the initial binding. That plugin eventually became part of the jQuery Core library and renamed simply to <a href="http://api.jquery.com/live/">live()</a>. The great thing with <a href="http://api.jquery.com/live/">live()</a> is that you could now bind dynamically added DOM elements like this:\r\n\r\n[code lang="js"]\r\n$(&quot;.clients&quot;).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nand if you did append a new DOM element, like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot; ).append( &quot;&lt;a href=''#'' class=''clients''&gt;Click for Mark Information&lt;/a&gt;&quot; )\r\n[/code]\r\n\r\nit would now share the same function binding as initially defined.\r\n\r\n<strong>The Problem with Live()</strong>\r\n\r\nNow, live() is an awesome method and people totally loved it. That is, until they wanted to bind events based on a deeper DOM traversal than just a single element, specifically when methods were used that alter the selector expression''s initial results (e.g.: using children()). So, if we had markup like this:\r\n\r\n[code lang="html"]\r\n&lt;div id=&quot;clcontainer&quot;&gt;\r\n	&lt;ul&gt;\r\n		&lt;li&gt;Mary&lt;/li&gt;\r\n		&lt;li&gt;Jane&lt;/li&gt;\r\n	&lt;/ul&gt;\r\n&lt;/div&gt;\r\n[/code]\r\n\r\nand tried to use live() to bind all of the list items like this:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).find( &quot;li&quot; ).live( &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );\r\n[/code]\r\n\r\nthe binding would fail. Since chaining is so widely used within the jQuery community, this was a bit of a surprise to many and one of the most requested updates to jQuery.\r\n\r\nIn order to get around this, Brandon introduced in jQuery v 1.4 the new <a href="http://api.jquery.com/delegate/">delegate()</a> method. It provides greater control by allowing you to specify the context to which you''d like to bind to. So using the same example as above and making some slight changes to use delegate(), we''re now able to use chaining to determine our selector results and then specify that we''d like all current and future list items to be bound to our declared function:\r\n\r\n[code lang="js"]\r\n$(&quot;#clcontainer&quot;).children( &quot;ul&quot; ).delegate( &quot;li&quot;, &quot;click&quot;, function() { alert( &quot;Here''s some information.&quot; ) } );	\r\n[/code]\r\n\r\n<strong>When to Use live() or delegate()</strong>\r\n\r\nThese two convenience methods are totally awesome and incredibly helpful with more complex apps. The best use case for them is when you know that you will be dynamically adding new DOM elements and they''ll share the same bound function. I mean, essentially that''s the premise of event delegation. You''re trying to limit the number of event handlers needed to handle functionality and increase maintainability be centralizing your logic. Make sense. If you''re not going to be doing anything that involved, though, then jQuery''s event helper methods such as bind(), click() etc. are still excellent choices for those one-off scenarios.\r\n\r\n\r\n', 'The Case for jQuery''s .delegate() Method for Dynamic Event Binding', 0, '', 'inherit', 'open', 'open', '', '1155-revision-18', '', '', '2010-08-11 11:35:13', '2010-08-11 15:35:13', '', 1155, 'http://blog.reybango.com/2010/08/11/1155-revision-18/', 0, 'revision', '', 0),
(1176, 3, '2010-08-12 10:55:34', '2010-08-12 14:55:34', 'Here''s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here''s the caveat, the developers MUST BE in the web development community.\r\n\r\nHere are my choices in no specific order:\r\n\r\n<ul>\r\n<li><a href="http://www.stubbornella.org/content/">Nicole Sullivan</a> - Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She''s also a super-cool person.</li>\r\n<li><a href="http://www.nczonline.net/about/">Nicholas Zakas</a> - Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for <a href="http://www.yahoo.com">Yahoo!</a> and that''s knowledge worth nabbing. And if you''ve watched his presentations, you know he can teach.</li>\r\n<li><a href="http://stu.mp/">Joe Stump</a> - Why? Because Joe is one of the coolest dudes on the planet and apart from that, he has the knowledge to build out BIG sites. Now that he''s focused on <a href="http://simplegeo.com/">geolocation</a>, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)</li>\r\n</ul>\r\nNow, my list isn''t meant to leave anyone out because there are a ton of people who I''d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they''re just great for providing that. So hopefully, I won''t hurt anyone''s feelings. :)\r\n\r\nSo who would you pick?', 'Choose 3 Developers You''d Spend a Day With', 0, '', 'publish', 'open', 'open', '', 'choose-3-developers-youd-spend-a-day-with', '', '', '2010-08-12 10:55:34', '2010-08-12 14:55:34', '', 0, 'http://blog.reybango.com/?p=1176', 0, 'post', '', 21),
(1177, 3, '2010-08-12 10:51:22', '2010-08-12 14:51:22', 'Here''s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here''s the caveat, the developers MUST BE in the web development community.\n\nHere are my choices in no specific order:\n\n<ul>\n<li><a href="http://www.stubbornella.org/content/">Nicole Sullivan</a> - Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She''s also a super-cool person.</li>\n<li><a href="http://www.nczonline.net/about/">Nicholas Zakas</a> - Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for Yahoo! and that''s knowledge worth nabbing. And if you''ve watched his presentations, you know he can teach.</li>\n<li>Joe Stump - Why? Because Joe is one of the coolest dudes on this planet and apart from that, he has the knowledge to build out BIG sites. Now that he''s focused on geolocation, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)</li>\n\nNow, my list isn''t meant to leave anyone out because there are a ton of people who I''d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they''re just great for providing that. So hopefully, I won''t hurt anyone''s feelings. :)\n\nSo who would you pick?', 'Choose 3 Developers You''d Spend a Day With', 0, '', 'inherit', 'open', 'open', '', '1176-revision', '', '', '2010-08-12 10:51:22', '2010-08-12 14:51:22', '', 1176, 'http://blog.reybango.com/2010/08/12/1176-revision/', 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
(1178, 3, '2010-08-12 10:52:11', '2010-08-12 14:52:11', 'Here''s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here''s the caveat, the developers MUST BE in the web development community.\r\n\r\nHere are my choices in no specific order:\r\n\r\n<ul>\r\n<li><a href="http://www.stubbornella.org/content/">Nicole Sullivan</a> - Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She''s also a super-cool person.</li>\r\n<li><a href="http://www.nczonline.net/about/">Nicholas Zakas</a> - Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for Yahoo! and that''s knowledge worth nabbing. And if you''ve watched his presentations, you know he can teach.</li>\r\n<li><a href="http://stu.mp/">Joe Stump</a> - Why? Because Joe is one of the coolest dudes on this planet and apart from that, he has the knowledge to build out BIG sites. Now that he''s focused on geolocation, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)</li>\r\n</ul>\r\nNow, my list isn''t meant to leave anyone out because there are a ton of people who I''d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they''re just great for providing that. So hopefully, I won''t hurt anyone''s feelings. :)\r\n\r\nSo who would you pick?', 'Choose 3 Developers You''d Spend a Day With', 0, '', 'inherit', 'open', 'open', '', '1176-revision-2', '', '', '2010-08-12 10:52:11', '2010-08-12 14:52:11', '', 1176, 'http://blog.reybango.com/2010/08/12/1176-revision-2/', 0, 'revision', '', 0),
(1179, 3, '2010-08-12 10:52:17', '2010-08-12 14:52:17', 'Here''s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here''s the caveat, the developers MUST BE in the web development community.\r\n\r\nHere are my choices in no specific order:\r\n\r\n<ul>\r\n<li><a href="http://www.stubbornella.org/content/">Nicole Sullivan</a> - Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She''s also a super-cool person.</li>\r\n<li><a href="http://www.nczonline.net/about/">Nicholas Zakas</a> - Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for Yahoo! and that''s knowledge worth nabbing. And if you''ve watched his presentations, you know he can teach.</li>\r\n<li><a href="http://stu.mp/">Joe Stump</a> - Why? Because Joe is one of the coolest dudes on this planet and apart from that, he has the knowledge to build out BIG sites. Now that he''s focused on geolocation, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)</li>\r\n</ul>\r\nNow, my list isn''t meant to leave anyone out because there are a ton of people who I''d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they''re just great for providing that. So hopefully, I won''t hurt anyone''s feelings. :)\r\n\r\nSo who would you pick?', 'Choose 3 Developers You''d Spend a Day With', 0, '', 'inherit', 'open', 'open', '', '1176-revision-3', '', '', '2010-08-12 10:52:17', '2010-08-12 14:52:17', '', 1176, 'http://blog.reybango.com/2010/08/12/1176-revision-3/', 0, 'revision', '', 0),
(1180, 3, '2010-08-12 10:55:11', '2010-08-12 14:55:11', 'Here''s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here''s the caveat, the developers MUST BE in the web development community.\r\n\r\nHere are my choices in no specific order:\r\n\r\n<ul>\r\n<li><a href="http://www.stubbornella.org/content/">Nicole Sullivan</a> - Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She''s also a super-cool person.</li>\r\n<li><a href="http://www.nczonline.net/about/">Nicholas Zakas</a> - Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for <a href="http://www.yahoo.com">Yahoo!</a> and that''s knowledge worth nabbing. And if you''ve watched his presentations, you know he can teach.</li>\r\n<li><a href="http://stu.mp/">Joe Stump</a> - Why? Because Joe is one of the coolest dudes on the planet and apart from that, he has the knowledge to build out BIG sites. Now that he''s focused on <a href="http://simplegeo.com/">geolocation</a>, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)</li>\r\n</ul>\r\nNow, my list isn''t meant to leave anyone out because there are a ton of people who I''d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they''re just great for providing that. So hopefully, I won''t hurt anyone''s feelings. :)\r\n\r\nSo who would you pick?', 'Choose 3 Developers You''d Spend a Day With', 0, '', 'inherit', 'open', 'open', '', '1176-revision-4', '', '', '2010-08-12 10:55:11', '2010-08-12 14:55:11', '', 1176, 'http://blog.reybango.com/2010/08/12/1176-revision-4/', 0, 'revision', '', 0),
(1182, 3, '2010-08-18 16:35:16', '2010-08-18 20:35:16', '', 'mem 047', 0, '', 'inherit', 'open', 'open', '', 'mem-047', '', '', '2010-08-18 16:35:16', '2010-08-18 20:35:16', '', 1181, 'http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg', 0, 'attachment', 'image/jpeg', 0),
(1183, 3, '2010-08-18 16:39:00', '2010-08-18 20:39:00', 'I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.\n\nTonight, I''ll join my family in a service to remember my dad. \n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" /></a>', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision', '', '', '2010-08-18 16:39:00', '2010-08-18 20:39:00', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision/', 0, 'revision', '', 0),
(1184, 3, '2010-08-18 16:39:57', '2010-08-18 20:39:57', 'I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" /></a>\n\nTonight, I''ll join my family in a service to remember my dad. And that''s good because we all need some closure.\n\nWe miss you dad.\n\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-2', '', '', '2010-08-18 16:39:57', '2010-08-18 20:39:57', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-2/', 0, 'revision', '', 0),
(1185, 3, '2010-08-18 16:40:13', '2010-08-18 20:40:13', 'I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;" /></a>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. And that''s good because we all need some closure.\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-3', '', '', '2010-08-18 16:40:13', '2010-08-18 20:40:13', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-3/', 0, 'revision', '', 0),
(1186, 3, '2010-08-18 16:40:24', '2010-08-18 20:40:24', 'I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;" /></a>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. And that''s good because we all need some closure.\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-4', '', '', '2010-08-18 16:40:24', '2010-08-18 20:40:24', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-4/', 0, 'revision', '', 0),
(1187, 3, '2010-08-18 16:40:57', '2010-08-18 20:40:57', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.\r\n\r\nTonight, I''ll join my family in a service to remember my dad. And that''s good because we all need some closure.\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-5', '', '', '2010-08-18 16:40:57', '2010-08-18 20:40:57', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-5/', 0, 'revision', '', 0),
(1188, 3, '2010-08-18 16:41:22', '2010-08-18 20:41:22', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.\r\n\r\nTonight, I''ll join my family in a service to remember my dad. And that''s good because we all need some closure.\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-6', '', '', '2010-08-18 16:41:22', '2010-08-18 20:41:22', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-6/', 0, 'revision', '', 0),
(1189, 3, '2010-08-18 16:41:26', '2010-08-18 20:41:26', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. And that''s good because my dad hated being dependent on anyone.\r\n\r\nTonight, I''ll join my family in a service to remember my dad. And that''s good because we all need some closure.\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-7', '', '', '2010-08-18 16:41:26', '2010-08-18 20:41:26', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-7/', 0, 'revision', '', 0),
(1190, 3, '2010-08-18 16:41:50', '2010-08-18 20:41:50', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. <strong>And that''s good because my dad hated being dependent on anyone.</strong>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. <strong>And that''s good because we all need some closure.</strong>\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-8', '', '', '2010-08-18 16:41:50', '2010-08-18 20:41:50', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-8/', 0, 'revision', '', 0),
(1191, 3, '2010-08-18 16:41:56', '2010-08-18 20:41:56', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he wasn''t suffering anymore. No more shitty chemo. No more involuntary convulsions. No more meds. No more being an invalid. <strong>And that''s good because my dad hated being dependent on anyone.</strong>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. <strong>And that''s good because we all need some closure.</strong>\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-9', '', '', '2010-08-18 16:41:56', '2010-08-18 20:41:56', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-9/', 0, 'revision', '', 0),
(1192, 3, '2010-08-18 16:42:48', '2010-08-18 20:42:48', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he isn''t suffering anymore. No more shitty chemo. No more convulsions. No more meds. No more being an invalid. <strong>And that''s good because my dad hated being dependent on anyone.</strong>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. <strong>And that''s good because we all need some closure.</strong>\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-10', '', '', '2010-08-18 16:42:48', '2010-08-18 20:42:48', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-10/', 0, 'revision', '', 0),
(1193, 3, '2010-08-18 16:43:00', '2010-08-18 20:43:00', '<a href="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047.jpg"><img src="http://blog.reybango.com/wp-content/uploads/2010/08/mem-047-300x225.jpg" alt="" title="mem 047" width="300" height="225" class="alignright size-medium wp-image-1182" style="float:right;margin-left:5px;" /></a>I can''t believe it''s been a year. A whole year since my dad lost his fight with cancer. The pain has definitely subsided over that time, especially knowing that he isn''t suffering anymore. No more shitty chemo. No more convulsions. No more meds. No more being an invalid. <strong>And that''s good because my dad hated being dependent on anyone.</strong>\r\n\r\nTonight, I''ll join my family in a service to remember my dad. <strong>And that''s good because we all need some closure.</strong>\r\n\r\nWe miss you dad.\r\n\r\n', 'One year ago today, my dad passed away', 0, '', 'inherit', 'open', 'open', '', '1181-revision-11', '', '', '2010-08-18 16:43:00', '2010-08-18 20:43:00', '', 1181, 'http://blog.reybango.com/2010/08/18/1181-revision-11/', 0, 'revision', '', 0),
(1356, 3, '2010-09-21 15:40:31', '2010-09-21 19:40:31', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\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 charset=&quot;utf-8&quot; /&gt;\r\n	&lt;title&gt;&lt;/title&gt;\r\n	&lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n	&lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n	&lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n	\r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n	\r\n    &lt;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\n<h3><em>Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. <a href="http://blog.reybango.com/2011/03/22/my-visual-studio-2010-html5-templates-are-updated-for-jquery-1-5-1-and-modernizr-1-7/">Check it out here</a>.</em>\r\n</h3>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder\r\n\r\n\r\n', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'publish', 'open', 'open', '', 'how-to-create-html5-website-and-page-templates-for-visual-studio-2010', '', '', '2011-03-22 21:55:24', '2011-03-23 01:55:24', '', 0, 'http://blog.reybango.com/?p=1356', 0, 'post', '', 38),
(1195, 3, '2010-09-02 12:24:56', '2010-09-02 16:24:56', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/b0M5JFLJl48?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b0M5JFLJl48?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'publish', 'open', 'open', '', 'how-to-easily-inject-jquery-into-any-web-page', '', '\nhttp://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet', '2010-09-02 13:31:42', '2010-09-02 17:31:42', '', 0, 'http://blog.reybango.com/?p=1195', 0, 'post', '', 14),
(1196, 3, '2010-09-02 10:31:39', '2010-09-02 14:31:39', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\n\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. \n\n[cod', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision', '', '', '2010-09-02 10:31:39', '2010-09-02 14:31:39', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision/', 0, 'revision', '', 0),
(1197, 3, '2010-09-02 10:32:39', '2010-09-02 14:32:39', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\n\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. \n\n[lang="javascript"]\n(function() {\n  var el=document.createElement(''div''),\n   b=document.getElementsByTagName(''body'')[0];\n   otherlib=false,\n   msg='''';\n  el.style.position=''fixed'';\n  el.style.height=''32px'';\n  el.style.width=''220px'';\n  el.style.marginLeft=''-110px'';\n  el.style.top=''0'';\n  el.style.left=''50%'';\n  el.style.padding=''5px 10px'';\n  el.style.zIndex = 1001;\n  el.style.fontSize=''12px'';\n  el.style.color=''#222'';\n  el.style.backgroundColor=''#f99'';\n  if(typeof jQuery!=''undefined'') {\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\n return showMsg();\n  } else if (typeof $==''function'') {\n otherlib=true;\n  }\n  // more or less stolen form jquery core and adapted by paul irish\n  function getScript(url,success){\n var script=document.createElement(''script'');\n script.src=url;\n var head=document.getElementsByTagName(''head'')[0],\n  done=false;\n // Attach handlers for all browsers\n script.onload=script.onreadystatechange = function(){\n   if ( !done && (!this.readyState\n     || this.readyState == ''loaded''\n     || this.readyState == ''complete'') ) {\n  done=true;\n  success();\n  script.onload = script.onreadystatechange = null;\n  head.removeChild(script);\n   }\n };\n head.appendChild(script);\n  }\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\n if (typeof jQuery==''undefined'') {\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\n } else {\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\n }\n return showMsg();\n  });\n  function showMsg() {\n el.innerHTML=msg;\n b.appendChild(el);\n window.setTimeout(function() {\n   if (typeof jQuery==''undefined'') {\n  b.removeChild(el);\n   } else {\n  jQuery(el).fadeOut(''slow'',function() {\n    jQuery(this).remove();\n  });\n  if (otherlib) {\n    $jq=jQuery.noConflict();\n  }\n   }\n } ,2500);\n  }\n})();\n[/javascript]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-2', '', '', '2010-09-02 10:32:39', '2010-09-02 14:32:39', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-2/', 0, 'revision', '', 0),
(1198, 3, '2010-09-02 10:33:27', '2010-09-02 14:33:27', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. \r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-3', '', '', '2010-09-02 10:33:27', '2010-09-02 14:33:27', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-3/', 0, 'revision', '', 0),
(1199, 3, '2010-09-02 10:33:33', '2010-09-02 14:33:33', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. \r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-4', '', '', '2010-09-02 10:33:33', '2010-09-02 14:33:33', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-4/', 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
(1200, 3, '2010-09-02 11:35:31', '2010-09-02 15:35:31', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-5', '', '', '2010-09-02 11:35:31', '2010-09-02 15:35:31', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-5/', 0, 'revision', '', 0),
(1201, 3, '2010-09-02 11:35:40', '2010-09-02 15:35:40', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-6', '', '', '2010-09-02 11:35:40', '2010-09-02 15:35:40', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-6/', 0, 'revision', '', 0),
(1229, 3, '2010-09-08 07:00:11', '2010-09-08 11:00:11', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: local(''☺''), url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n<h2>An Update</h2>\r\n\r\n<a href="http://paulirish.com">Paul Irish</a> pointed out the I had left out the <em>local(''☺'')</em> directive from the @font-face rule, which is really important in terms of performance since, as Paul wrote:\r\n\r\n<blockquote>if it just so happens that a user actually has your custom font installed, this''ll save them the download. The primary reason is that you cede control to the user''s machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there''s a very small chance the file could be wrong.\r\n\r\nTo account for this gotcha, I''ve specified a local font name of ''☺''. Yes, it''s a smiley face. The OpenType spec indicates any two-byte unicode characters won''t work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name. This technique is recommended if you think a locally installed version of this font is not in your best interest.</blockquote>\r\n\r\nAlso, because the <em>local(''☺'')</em> directive isn''t supported it IE, it will simply ignore the second <em>src</em> declaration (which is for non-IE browsers) ensuring that you don''t have an extra request that will issue a 404 and slow down your page''s performance.\r\n\r\nThanks Paul!\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'publish', 'open', 'open', '', 'using-font-face-and-font-squirrel-to-enhance-your-site-with-fonts', '', '\nhttp://paulirish.com/2009/bulletproof-font-face-implementation-syntax/', '2010-09-08 12:04:28', '2010-09-08 16:04:28', '', 0, 'http://blog.reybango.com/?p=1229', 0, 'post', '', 7),
(1230, 3, '2010-09-07 21:12:58', '2010-09-08 01:12:58', '<h2>Testing out the fonts</h2>', 'Using the Typekit Library to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision', '', '', '2010-09-07 21:12:58', '2010-09-08 01:12:58', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision/', 0, 'revision', '', 0),
(1202, 3, '2010-09-02 11:39:47', '2010-09-02 15:39:47', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-7', '', '', '2010-09-02 11:39:47', '2010-09-02 15:39:47', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-7/', 0, 'revision', '', 0),
(1203, 3, '2010-09-02 11:39:52', '2010-09-02 15:39:52', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-8', '', '', '2010-09-02 11:39:52', '2010-09-02 15:39:52', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-8/', 0, 'revision', '', 0),
(1204, 3, '2010-09-02 11:40:39', '2010-09-02 15:40:39', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-9', '', '', '2010-09-02 11:40:39', '2010-09-02 15:40:39', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-9/', 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
(1205, 3, '2010-09-02 11:40:45', '2010-09-02 15:40:45', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-10', '', '', '2010-09-02 11:40:45', '2010-09-02 15:40:45', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-10/', 0, 'revision', '', 0),
(1206, 3, '2010-09-02 11:41:21', '2010-09-02 15:41:21', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate, Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-11', '', '', '2010-09-02 11:41:21', '2010-09-02 15:41:21', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-11/', 0, 'revision', '', 0),
(1207, 3, '2010-09-02 11:41:25', '2010-09-02 15:41:25', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate, Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\n\r\n\r\n\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-12', '', '', '2010-09-02 11:41:25', '2010-09-02 15:41:25', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-12/', 0, 'revision', '', 0),
(1208, 3, '2010-09-02 11:46:00', '2010-09-02 15:46:00', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate, Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery in any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-13', '', '', '2010-09-02 11:46:00', '2010-09-02 15:46:00', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-13/', 0, 'revision', '', 0),
(1209, 3, '2010-09-02 11:46:18', '2010-09-02 15:46:18', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate, Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-14', '', '', '2010-09-02 11:46:18', '2010-09-02 15:46:18', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-14/', 0, 'revision', '', 0),
(1210, 3, '2010-09-02 11:46:30', '2010-09-02 15:46:30', 'I use jQuery...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate, Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-15', '', '', '2010-09-02 11:46:30', '2010-09-02 15:46:30', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-15/', 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
(1211, 3, '2010-09-02 11:46:45', '2010-09-02 15:46:45', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate, Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-16', '', '', '2010-09-02 11:46:45', '2010-09-02 15:46:45', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-16/', 0, 'revision', '', 0),
(1212, 3, '2010-09-02 11:47:46', '2010-09-02 15:47:46', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-17', '', '', '2010-09-02 11:47:46', '2010-09-02 15:47:46', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-17/', 0, 'revision', '', 0),
(1213, 3, '2010-09-02 11:47:50', '2010-09-02 15:47:50', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s src attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s head node:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the head of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s .noConflict() method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-18', '', '', '2010-09-02 11:47:50', '2010-09-02 15:47:50', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-18/', 0, 'revision', '', 0),
(1214, 3, '2010-09-02 11:50:30', '2010-09-02 15:50:30', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-19', '', '', '2010-09-02 11:50:30', '2010-09-02 15:50:30', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-19/', 0, 'revision', '', 0),
(1215, 3, '2010-09-02 11:50:39', '2010-09-02 15:50:39', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-20', '', '', '2010-09-02 11:50:39', '2010-09-02 15:50:39', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-20/', 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
(1221, 3, '2010-09-02 12:03:02', '2010-09-02 16:03:02', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-26', '', '', '2010-09-02 12:03:02', '2010-09-02 16:03:02', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-26/', 0, 'revision', '', 0),
(1216, 3, '2010-09-02 11:54:08', '2010-09-02 15:54:08', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify Bookmarklet</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-21', '', '', '2010-09-02 11:54:08', '2010-09-02 15:54:08', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-21/', 0, 'revision', '', 0),
(1217, 3, '2010-09-02 11:54:14', '2010-09-02 15:54:14', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify Bookmarklet</a> <strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-22', '', '', '2010-09-02 11:54:14', '2010-09-02 15:54:14', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-22/', 0, 'revision', '', 0),
(1220, 3, '2010-09-02 12:01:20', '2010-09-02 16:01:20', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> <strong><em><=== Drag that link to your browser toolbar</em></strong></p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-25', '', '', '2010-09-02 12:01:20', '2010-09-02 16:01:20', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-25/', 0, 'revision', '', 0),
(1218, 3, '2010-09-02 11:59:00', '2010-09-02 15:59:00', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «</p>\r\n<strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-23', '', '', '2010-09-02 11:59:00', '2010-09-02 15:59:00', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-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
(1219, 3, '2010-09-02 11:59:04', '2010-09-02 15:59:04', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «</p>\r\n<strong><em><=== Drag that link to your browser toolbar</em></strong>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-24', '', '', '2010-09-02 11:59:04', '2010-09-02 15:59:04', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-24/', 0, 'revision', '', 0),
(1222, 3, '2010-09-02 12:03:13', '2010-09-02 16:03:13', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-27', '', '', '2010-09-02 12:03:13', '2010-09-02 16:03:13', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-27/', 0, 'revision', '', 0),
(1223, 3, '2010-09-02 12:20:58', '2010-09-02 16:20:58', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-28', '', '', '2010-09-02 12:20:58', '2010-09-02 16:20:58', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-28/', 0, 'revision', '', 0),
(1224, 3, '2010-09-02 12:21:19', '2010-09-02 16:21:19', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-29', '', '', '2010-09-02 12:21:19', '2010-09-02 16:21:19', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-29/', 0, 'revision', '', 0),
(1225, 3, '2010-09-02 12:23:43', '2010-09-02 16:23:43', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-30', '', '', '2010-09-02 12:23:43', '2010-09-02 16:23:43', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-30/', 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
(1226, 3, '2010-09-02 12:23:49', '2010-09-02 16:23:49', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-31', '', '', '2010-09-02 12:23:49', '2010-09-02 16:23:49', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-31/', 0, 'revision', '', 0),
(1227, 3, '2010-09-02 13:31:27', '2010-09-02 17:31:27', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/b0M5JFLJl48?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b0M5JFLJl48?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-autosave', '', '', '2010-09-02 13:31:27', '2010-09-02 17:31:27', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-autosave/', 0, 'revision', '', 0),
(1228, 3, '2010-09-02 12:24:56', '2010-09-02 16:24:56', 'I use <a href="http://jquery.com">jQuery</a>...a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what''s going on under the hood. In many cases, jQuery is being used so it''s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don''t use it which forces me to go back to plain ''ole JavaScript. There''s nothing wrong with that but I''ve gotten used to the nice, terse syntax jQuery provides and I''d like to be able to use it.\r\n\r\nAwhile back, I came across an awesome <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">bookmarklet created by my jQuery teammate</a>, <a href="http://www.learningjquery.com">Karl Swedberg</a>, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn''t have jQuery included and you either don''t own the page or don''t feel like adding a script tag to it. The code below shows how the jQuery lib is included. \r\n\r\nIt''s fairly straightforward in that a script element is created:\r\n\r\n[code lang="js"]var script=document.createElement(''script'');[/code]\r\n\r\n and the script tag''s <em>src</em> attribute is set with the following URL:\r\n\r\n<em>''http://code.jquery.com/jquery-latest.min.js''</em>\r\n\r\nThen, they grab a reference to the document''s <em>head</em> DOM element:\r\n\r\n[code lang="js"]var head=document.getElementsByTagName(''head'')[0]...;[/code]\r\n\r\nand then insert the new script tag into the <em>head</em> of the document.\r\n\r\n[code lang="js"]head.appendChild(script);[/code]\r\n\r\nThat was a very high-level explanation because there''s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery''s <a href="http://api.jquery.com/jQuery.noConflict/"><em>.noConflict()</em></a> method is called should there be another library present that requires the "$" namespace. Very cool. :)\r\n\r\nNow, this leverages the latest minified version from the jQuery repo but you should be able to easily include a version of jQuery from the Microsoft or Google CDNs if that''s your preference:\r\n\r\nMicrosoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js\r\nGoogle: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js \r\n\r\nYou can find the full source for the bookmarklet below and if you want to install it now, here''s the link for you to use:\r\n\r\n<p>» <a href="javascript:%20(function(){var%20el=document.createElement(''div''),b=document.getElementsByTagName(''body'')[0];otherlib=false,msg='''';el.style.position=''fixed'';el.style.height=''32px'';el.style.width=''220px'';el.style.marginLeft=''-110px'';el.style.top=''0'';el.style.left=''50%'';el.style.padding=''5px%2010px'';el.style.zIndex=1001;el.style.fontSize=''12px'';el.style.color=''#222'';el.style.backgroundColor=''#f99'';if(typeof%20jQuery!=''undefined''){msg=''This%20page%20already%20using%20jQuery%20v''+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$==''function''){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement(''script'');script.src=url;var%20head=document.getElementsByTagName(''head'')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState==''loaded''||this.readyState==''complete'')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script);}};head.appendChild(script);}%20getScript(''http://code.jquery.com/jquery-latest.min.js'',function(){if(typeof%20jQuery==''undefined''){msg=''Sorry,%20but%20jQuery%20wasn\\''t%20able%20to%20load'';}else{msg=''This%20page%20is%20now%20jQuerified%20with%20v''+jQuery.fn.jquery;if(otherlib){msg+=''%20and%20noConflict().%20Use%20$jq(),%20not%20$().'';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery==''undefined''){b.removeChild(el);}else{jQuery(el).fadeOut(''slow'',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();">jQuerify</a> «-- Drag this link to your browser toolbar</p>\r\n\r\nI created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:\r\n\r\n<object id="scPlayer" class="embeddedObject" width="800" height="468" type="application/x-shockwave-flash" data="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" > <param name="movie" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/mp4h264player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/FirstFrame.png&containerwidth=800&containerheight=468&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/" /> <video width="800" height="468" controls="controls"><br />  <source src="http://content.screencast.com/users/ReyBango/folders/Default/media/b541a7ab-02af-4aba-838c-2c222638e46d/Easily%20Inject%20jQuery%20in%20any%20Web%20Page.mp4" type="video/mp4;" /><br />  <b>Your browser cannot play this video. <a href="http://www.screencast.com/handlers/redirect.ashx?target=viewingembededhelp">Learn how to fix this</a>.</b> </video> </object>\r\n\r\nNicely formatted bookmarklet code:\r\n\r\n[code lang="js"]\r\n(function() {\r\n  var el=document.createElement(''div''),\r\n   b=document.getElementsByTagName(''body'')[0];\r\n   otherlib=false,\r\n   msg='''';\r\n  el.style.position=''fixed'';\r\n  el.style.height=''32px'';\r\n  el.style.width=''220px'';\r\n  el.style.marginLeft=''-110px'';\r\n  el.style.top=''0'';\r\n  el.style.left=''50%'';\r\n  el.style.padding=''5px 10px'';\r\n  el.style.zIndex = 1001;\r\n  el.style.fontSize=''12px'';\r\n  el.style.color=''#222'';\r\n  el.style.backgroundColor=''#f99'';\r\n  if(typeof jQuery!=''undefined'') {\r\n msg=''This page already using jQuery v''+jQuery.fn.jquery;\r\n return showMsg();\r\n  } else if (typeof $==''function'') {\r\n otherlib=true;\r\n  }\r\n  // more or less stolen form jquery core and adapted by paul irish\r\n  function getScript(url,success){\r\n var script=document.createElement(''script'');\r\n script.src=url;\r\n var head=document.getElementsByTagName(''head'')[0],\r\n  done=false;\r\n // Attach handlers for all browsers\r\n script.onload=script.onreadystatechange = function(){\r\n   if ( !done &amp;&amp; (!this.readyState\r\n     || this.readyState == ''loaded''\r\n     || this.readyState == ''complete'') ) {\r\n  done=true;\r\n  success();\r\n  script.onload = script.onreadystatechange = null;\r\n  head.removeChild(script);\r\n   }\r\n };\r\n head.appendChild(script);\r\n  }\r\n  getScript(''http://code.jquery.com/jquery-latest.min.js'',function() {\r\n if (typeof jQuery==''undefined'') {\r\n   msg=''Sorry, but jQuery wasn\\''t able to load'';\r\n } else {\r\n   msg=''This page is now jQuerified with v'' + jQuery.fn.jquery;\r\n   if (otherlib) {msg+='' and noConflict(). Use $jq(), not $().'';}\r\n }\r\n return showMsg();\r\n  });\r\n  function showMsg() {\r\n el.innerHTML=msg;\r\n b.appendChild(el);\r\n window.setTimeout(function() {\r\n   if (typeof jQuery==''undefined'') {\r\n  b.removeChild(el);\r\n   } else {\r\n  jQuery(el).fadeOut(''slow'',function() {\r\n    jQuery(this).remove();\r\n  });\r\n  if (otherlib) {\r\n    $jq=jQuery.noConflict();\r\n  }\r\n   }\r\n } ,2500);\r\n  }\r\n})();\r\n[/code]', 'How to Easily Inject jQuery into any Web Page', 0, '', 'inherit', 'open', 'open', '', '1195-revision-32', '', '', '2010-09-02 12:24:56', '2010-09-02 16:24:56', '', 1195, 'http://blog.reybango.com/2010/09/02/1195-revision-32/', 0, 'revision', '', 0),
(1231, 3, '2010-09-07 21:33:14', '2010-09-08 01:33:14', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. :)\n\n<h2>Testing out the fonts</h2>', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-2', '', '', '2010-09-07 21:33:14', '2010-09-08 01:33:14', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-2/', 0, 'revision', '', 0),
(1232, 3, '2010-09-07 21:34:08', '2010-09-08 01:34:08', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. :)\r\n\r\n<h2>Testing out the fonts</h2>', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-3', '', '', '2010-09-07 21:34:08', '2010-09-08 01:34:08', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-3/', 0, 'revision', '', 0),
(1233, 3, '2010-09-07 21:34:16', '2010-09-08 01:34:16', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. :)\r\n\r\n<h2>Testing out the fonts</h2>', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-4', '', '', '2010-09-07 21:34:16', '2010-09-08 01:34:16', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-4/', 0, 'revision', '', 0),
(1234, 3, '2010-09-07 21:35:31', '2010-09-08 01:35:31', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\n[code language="css"]\r\n@font-face {\r\n   font-family: SketchRockwell;\r\n   src: url(‘SketchRockwell.ttf’);\r\n}\r\n\r\n.my_CSS3_class {\r\n   font-family: SketchRockwell;\r\n   font-size: 3.2em;\r\n   text-shadow: 3px 3px 7px #111;\r\n}\r\n[/code]', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-5', '', '', '2010-09-07 21:35:31', '2010-09-08 01:35:31', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-5/', 0, 'revision', '', 0),
(1235, 3, '2010-09-07 21:35:40', '2010-09-08 01:35:40', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\n[code language="css"]\r\n@font-face {\r\n   font-family: SketchRockwell;\r\n   src: url(‘SketchRockwell.ttf’);\r\n}\r\n\r\n.my_CSS3_class {\r\n   font-family: SketchRockwell;\r\n   font-size: 3.2em;\r\n   text-shadow: 3px 3px 7px #111;\r\n}\r\n[/code]', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-6', '', '', '2010-09-07 21:35:40', '2010-09-08 01:35:40', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-6/', 0, 'revision', '', 0),
(1236, 3, '2010-09-07 21:48:57', '2010-09-08 01:48:57', '', 'fs-builder', 0, '', 'inherit', 'open', 'open', '', 'fs-builder', '', '', '2010-09-07 21:48:57', '2010-09-08 01:48:57', '', 1229, 'http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png', 0, 'attachment', 'image/png', 0),
(1237, 3, '2010-09-07 21:46:57', '2010-09-08 01:46:57', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \n\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>". I downloaded the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \n\nTypically, you would manually go into your CSS file and enter a font definition like this:\n\n[code language="css"]\n@font-face {\n	font-family: ''SFArchRivalRegular'';\n	src: url(''SF_Arch_Rival-webfont.eot'');\n	font-weight: normal;\n	font-style: normal;\n}\n[/code]\n\nand then use it to style a specific selector like this:\n\n[code language="css"]\n.post {\n   font-family: ''SFArchRivalRegular'';\n   font-size: 18px;\n}\n[/code]\n\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. Font Squirrel takes the pain out of this.\n\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\n\n\n\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-7', '', '', '2010-09-07 21:46:57', '2010-09-08 01:46:57', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-7/', 0, 'revision', '', 0),
(1238, 3, '2010-09-07 21:49:12', '2010-09-08 01:49:12', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>". I downloaded the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS file and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nand then use it to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-8', '', '', '2010-09-07 21:49:12', '2010-09-08 01:49:12', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-8/', 0, 'revision', '', 0),
(1239, 3, '2010-09-07 21:49:16', '2010-09-08 01:49:16', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>". I downloaded the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS file and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nand then use it to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-9', '', '', '2010-09-07 21:49:16', '2010-09-08 01:49:16', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-9/', 0, 'revision', '', 0),
(1240, 3, '2010-09-07 22:02:42', '2010-09-08 02:02:42', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \n\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \n\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\n\n[code language="css"]\n@font-face {\n	font-family: ''SFArchRivalRegular'';\n	src: url(''SF_Arch_Rival-webfont.eot'');\n	font-weight: normal;\n	font-style: normal;\n}\n[/code]\n\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your fotn\n\n\nThen use it to style a specific selector like this:\n\n[code language="css"]\n.post {\n   font-family: ''SFArchRivalRegular'';\n   font-size: 18px;\n}\n[/code]\n\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. Font Squirrel takes the pain out of this.\n\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\n\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\n\n[code language="css"]\n@font-face {\n	font-family: ''SFArchRivalRegular'';\n	src: url(''SF_Arch_Rival-webfont.eot'');\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\n	font-weight: normal;\n	font-style: normal;\n}\n[/code]\n\n\n\n\n\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-10', '', '', '2010-09-07 22:02:42', '2010-09-08 02:02:42', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-10/', 0, 'revision', '', 0),
(1241, 3, '2010-09-07 22:03:25', '2010-09-08 02:03:25', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\n\r\n\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-11', '', '', '2010-09-07 22:03:25', '2010-09-08 02:03:25', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-11/', 0, 'revision', '', 0),
(1242, 3, '2010-09-07 22:07:55', '2010-09-08 02:07:55', '', 'fonts', 0, '', 'inherit', 'open', 'open', '', 'fonts', '', '', '2010-09-07 22:07:55', '2010-09-08 02:07:55', '', 1229, 'http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png', 0, 'attachment', 'image/png', 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
(1243, 3, '2010-09-07 22:03:33', '2010-09-08 02:03:33', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\n\r\n\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-12', '', '', '2010-09-07 22:03:33', '2010-09-08 02:03:33', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-12/', 0, 'revision', '', 0),
(1244, 3, '2010-09-07 22:08:22', '2010-09-08 02:08:22', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png" alt="" title="fonts" width="631" height="473" class="alignleft size-full wp-image-1242" /></a>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-13', '', '', '2010-09-07 22:08:22', '2010-09-08 02:08:22', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-13/', 0, 'revision', '', 0),
(1245, 3, '2010-09-07 22:08:28', '2010-09-08 02:08:28', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png" alt="" title="fonts" width="631" height="473" class="alignleft size-full wp-image-1242" /></a>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-14', '', '', '2010-09-07 22:08:28', '2010-09-08 02:08:28', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-14/', 0, 'revision', '', 0),
(1246, 3, '2010-09-07 22:17:07', '2010-09-08 02:17:07', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \n\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \n\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\n\n[code language="css"]\n@font-face {\n	font-family: ''SFArchRivalRegular'';\n	src: url(''SF_Arch_Rival-webfont.eot'');\n	font-weight: normal;\n	font-style: normal;\n}\n[/code]\n\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\n\n[code language="css"]\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\n[/code]\n\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\n\n[code language="css"]\n.post {\n   font-family: ''SFArchRivalRegular'';\n   font-size: 18px;\n}\n[/code]\n\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\n\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\n\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\n\n[code language="css"]\n@font-face {\n	font-family: ''SFArchRivalRegular'';\n	src: url(''SF_Arch_Rival-webfont.eot'');\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\n	font-weight: normal;\n	font-style: normal;\n}\n[/code]\n\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\n\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png" alt="" title="fonts" width="631" height="473" class="alignleft size-full wp-image-1242" /></a>\n\n[code language="css"][/code]\n@font-face {\n	font-family: ''TrueCrimesRegular'';\n	src: url(''/fonts/true-crimes-webfont.eot'');\n	src: local(''☺''), url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\n	font-weight: normal;\n	font-style: normal;\n}\n\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\n[code language="css"][/code]\n\n<h2 class="fontdemo">I''m digging @font-face!!</h\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-15', '', '', '2010-09-07 22:17:07', '2010-09-08 02:17:07', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-15/', 0, 'revision', '', 0),
(1247, 3, '2010-09-07 22:17:15', '2010-09-08 02:17:15', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png" alt="" title="fonts" width="631" height="473" class="alignleft size-full wp-image-1242" /></a>\r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: local(''☺''), url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[code language="css"][/code]\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-16', '', '', '2010-09-07 22:17:15', '2010-09-08 02:17:15', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-16/', 0, 'revision', '', 0),
(1248, 3, '2010-09-07 22:17:20', '2010-09-08 02:17:20', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png" alt="" title="fonts" width="631" height="473" class="alignleft size-full wp-image-1242" /></a>\r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: local(''☺''), url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[code language=&quot;css&quot;][/code]\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-17', '', '', '2010-09-07 22:17:20', '2010-09-08 02:17:20', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-17/', 0, 'revision', '', 0),
(1249, 3, '2010-09-07 22:25:50', '2010-09-08 02:25:50', '', 'fonts', 0, '', 'inherit', 'open', 'open', '', 'fonts-2', '', '', '2010-09-07 22:25:50', '2010-09-08 02:25:50', '', 1229, 'http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png', 0, 'attachment', 'image/png', 0),
(1250, 3, '2010-09-07 22:24:28', '2010-09-08 02:24:28', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts.png" alt="" title="fonts" width="631" height="473" class="alignleft size-full wp-image-1242" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-18', '', '', '2010-09-07 22:24:28', '2010-09-08 02:24:28', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-18/', 0, 'revision', '', 0),
(1251, 3, '2010-09-07 22:26:14', '2010-09-08 02:26:14', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-19', '', '', '2010-09-07 22:26:14', '2010-09-08 02:26:14', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-19/', 0, 'revision', '', 0),
(1252, 3, '2010-09-07 22:26:23', '2010-09-08 02:26:23', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-20', '', '', '2010-09-07 22:26:23', '2010-09-08 02:26:23', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-20/', 0, 'revision', '', 0);
