KrishnaVandanu

Bootstrap CDN

Bootstrap CDN

Bootstrap CDN

Getting started · Bootstrap

Getting started · Bootstrap Getting started · Bootstrap

JavaScript · Bootstrap

JavaScript · Bootstrap JavaScript · Bootstrap

Components · Bootstrap

Components · Bootstrap Components · Bootstrap

jQuery BBQ: Back Button & Query Library

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><h1><br />jQuery BBQ: Back Button & Query Library</h1><br /><div class="asset-inner"><br />      <br />      <br />      <br />        <br />  <div class="meta asset-meta"><br />    <span class="byline"><br />      <br />        By <span class="vcard author"><a class="fn url" href="http://benalman.com/">"Cowboy" Ben Alman</a></span> on <abbr class="published" title="2009-10-03T11:07:14-04:00">October  3, 2009 11:07 AM</abbr><br />      <br />    </span><br />    <br />      <br />        <span class="divider">|</span><br />        <br />  <br />  <a class="icon icon-right icon-comments" href="http://benalman.com/projects/jquery-bbq-plugin/#disqus_thread">292 Comments</a><br /><br />      <br />      <br />    <br />  </div><br /><div class="asset-body"><br />          jQuery BBQ leverages the HTML5 <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange event</a><br /> to allow simple, yet powerful bookmarkable #hash history. In addition, <br />jQuery BBQ provides a full .deparam() method, along with both hash state<br /> management, and fragment / query string parse and merge utility <br />methods.<br /><br /><br /><br />This plugin and the <a href="http://benalman.com/projects/jquery-urlinternal-plugin/">jQuery urlInternal</a> plugin supersede the URL Utils plugin.<br /><br /><br /><br />          <br />            <br />              <ul><br /><li>Release v1.2.1</li><br /><li>Tested with jQuery 1.3.2, 1.4.1, 1.4.2 in Internet Explorer 6-8, Firefox 2-3.7, Safari 3-4, Chrome 4-5, Opera 9.6-10.1, <a href="http://paulirish.com/i/6920.png" target="benalman2">Mobile Safari 3.1.1</a>.</li><br /><li>Download <a href="http://github.com/cowboy/jquery-bbq/raw/v1.2.1/jquery.ba-bbq.js" target="benalman2">Source</a>, <a href="http://github.com/cowboy/jquery-bbq/raw/v1.2.1/jquery.ba-bbq.min.js" target="benalman2">Minified</a> (4.0kb)</li><br /><li>Follow the project on <a href="http://github.com/cowboy/jquery-bbq" target="benalman2">GitHub project page</a> or <a href="http://github.com/cowboy/jquery-bbq/issues" target="benalman2">report a bug!</a></li><br /><li>View <a href="http://benalman.com/code/projects/jquery-bbq/docs/">Full Documentation</a></li><br /><li>View <a href="http://benalman.com/code/projects/jquery-bbq/unit/">Unit Tests</a></li><br /><li>Examples: <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">basic hashchange</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">advanced hashchange</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">jQuery UI Tabs history & bookmarking</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/deparam/">jQuery.deparam</a></li><br /><li>Translations: <a href="http://webhostingrating.com/libs/jquery-bbq-plugin-be" target="benalman2">Belorussian</a></li><br /></ul><br />Note: If you’re using jQuery 1.3.2 or earlier and need BBQ to merge query string or fragment params containing <code>[]</code>, you’ll want to include the <a href="http://gist.github.com/206323" target="benalman2">jQuery 1.4 <code>.param</code> method</a> in your code.<br /><br /><br /><br />Also, my article <a href="http://benalman.com/news/2010/04/cooking-bbq-the-original-recipe/">Cooking BBQ: the original recipe</a> gives a history of jQuery BBQ along with some plugin authoring guidelines, if you’re interested.<br /><br /><br /><br /><h2><br />What jQuery BBQ allows you to do:</h2><br />While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read <a href="http://benalman.com/code/projects/jquery-bbq/docs/">the documentation</a>, and check out the full examples listed above.<br /><br /><br /><br /><ul><br /><li>Deserialize any params string, the document query string or fragment<br /> into an object, including the new jQuery.param format (new in jQuery <br />1.4, <a href="http://benalman.com/news/2009/12/jquery-14-param-demystified/">read more here</a>). (<a href="http://benalman.com/code/projects/jquery-bbq/examples/deparam/">example</a>)</li><br /><li>Merge any URL plus query string or fragment params—in an object, <br />params string or second URL (including the current document <br />location)—into a new URL.</li><br /><li>Update the “URL attribute” (ie. <code>a[href]</code>, <code>img[src]</code>, <code>form[action]</code>,<br /> etc) in multiple elements, merging any URL plus query string or <br />fragment params—in an object, params string or second URL (including the<br /> current document location)—into a new URL, which is then set into that <br />attribute.</li><br /><li>Push (and retrieve) bookmarkable, history-enabling “state” objects <br />or strings onto the document fragment, allowing cross-browser back- and <br />next-button functionality for dynamic web applications (<a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">example 1</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">example 2</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">example 3</a>)</li><br /><li>Bind event handlers to a normalized, cross-browser <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange event</a> (<a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">example 1</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">example 2</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">example 3</a>)</li><br /></ul><br /><a href="http://www.blogger.com/null" name="community"></a><br /><br /><br /><br /><h2><br />jQuery BBQ community</h2><br />Have you used jQuery BBQ in an project, website, article or tutorial? <a href="http://benalman.com/about/contact/">Let me know</a>, and I’ll mention it here!<br /><br /><br /><br /><h3><br />Projects or websites using jQuery BBQ</h3><br /><ul><br /><li><a href="http://drupal.org/" target="benalman2">Drupal 7</a></li><br /><li><a href="http://code.google.com/p/struts2-jquery/" target="benalman2">Struts2 jQuery Plugin</a></li><br /><li><a href="http://www.yiiframework.com/" target="benalman2">Yii PHP framework</a></li><br /><li><a href="http://bit.ly/" target="benalman2">bit.ly</a></li><br /><li><a href="http://code.google.com/p/kaytwo/wiki/WhatisK2" target="benalman2">K2 WordPress theme/framework</a></li><br /><li><a href="http://jqapi.com/" target="benalman2">jQAPI - Alternative jQuery Documentation</a></li><br /><li><a href="http://james.padolsey.com/jquery/" target="benalman2">jQuery source viewer</a></li><br /><li><a href="http://craigstuntz.github.com/jqGrid/" target="benalman2">jqGrid/BBQ Integration</a></li><br /><li><a href="http://code.google.com/p/svg-edit/" target="benalman2">SVG-edit</a></li><br /><li><a href="http://gemkitty.com/custom-jewelry/earrings" target="benalman2">GemKitty custom jewelry</a></li><br /></ul><br /><h3><br />Articles or tutorials featuring jQuery BBQ</h3><br /><ul><br /><li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff690558.aspx" target="benalman2">History and Back Button Support</a> - MSDN ScriptJunkie</li><br /><li><a href="http://jqueryfordesigners.com/enabling-the-back-button/" target="benalman2">Enabling the Back Button</a> - jQuery for Designers</li><br /><li><a href="http://stephenwalther.com/blog/archive/2010/04/08/jquery-asp.net-and-browser-history.aspx" target="benalman2">jQuery, ASP.NET, and Browser History</a> - Stephen Walther</li><br /><li><a href="http://happyworm.com/blog/2010/08/23/the-future-of-web-apps-single-page-applications/" target="benalman2">The Future of Web Apps - Single Page Applications</a> - Mark Boas</li><br /><li><a href="http://mattfrear.com/2010/03/20/enabling-browser-back-button-on-cascading-dropdowns-with-jquery-bbq-plugin/" target="benalman2">Enabling browser back button on cascading dropdowns with jQuery BBQ plugin</a> - Matt Frear</li><br /><li><a href="http://railscasts.com/episodes/175-ajax-history-and-bookmarks" target="benalman2">AJAX History and Bookmarks Railscast</a>, <a href="http://asciicasts.com/episodes/175-ajax-history-and-bookmarks" target="benalman2">ASCIIcast</a> - <em>Note: features URL Utils, jQuery BBQ’s predecessor</em></li><br /></ul><br /><a href="http://www.blogger.com/null" name="why"></a><br /><br /><br /><br /><h2><br />Why BBQ? AKA: Why “history” and “deparam” together?</h2><br />Imagine three scenarios. Now, imagine a <a href="http://benalman.com/projects/jquery-starwipe-plugin/">star wipe</a>…<br /><br /><br /><br /><h3><br />The single widget</h3><br />In the first scenario, you’ve got a single widget on the page. Maybe <br />the page is the widget, whatever. Either way, things are so simple that <br />every history plugin can do this (including jQuery BBQ):<br /><br /><br /><br /><strong><Widget></strong> Yo, hash, update the state with this string. <br /><br /><strong><Hash></strong> No prob, dude, done. Sure, your state takes up the whole hash, but what do you care, you’re the only widget on the page! <br /><br /><strong><Widget></strong> But I’m so lonely. <br /><br /><strong><Hash></strong> Tough luck, kid. There’s only room in this hash for one state.<br /><br /><br /><br /><h3><br />Multiple widgets, rough-and-tumble</h3><br />In the next scenario, you’ve got multiple widgets on the page. And <br />unfortunately, because the history plugin developer didn’t provide an <br />easy way to manage multiple, separate, individual states simultaneously,<br /> your widgets need to be somewhat aware of each other’s existence, so <br />they don’t accidentally erase each other’s state in the hash:<br /><br /><br /><br /><strong><Widget></strong> Yo, hash.. I need to update my state parameters. Whatcha got in there? <br /><br /><strong><Hash></strong> A string representation of your state, plus maybe some others, I’m not sure. Whatever. Here ya go! <br /><br /><strong><Widget></strong> Wow, that sure contains a lot of stuff I don’t care about.. But a job’s a job, right? <br /><br /><strong><Widget></strong> So, first let me figure out where my <br />parameters are. Ok, right.. Wait! I think some other widget’s parameters<br /> are in here too! Ok. Let’s see, add this in there, carry the one.. <br />great, that seems to be working now. <br /><br /><strong><Widget></strong> Well, hash, here’s the whole new state. I<br /> inserted my parameters in there next to all the other parameters that <br />were there. Or maybe i didn’t. I dunno, it probably works. <br /><br /><strong><Widget2></strong> Are you telling me I’ve got to do all that too? 404 dudes, I quit.<br /><br /><br /><br /><h3><br />Multiple widgets, with some tasty BBQ sauce</h3><br />In this final scenario, while there are multiple widgets on the same <br />page, each one can get and set its own state very easily because the <br />history plugin can deparameterize any fragment-based params string into <br />its component parts easily, then merge replacement params in, and <br />update:<br /><br /><br /><br /><strong><Widget></strong> Yo, hash, update my state parameters. <br /><br /><strong><Hash></strong> No prob, dude, done. And you didn’t even <br />have to know about that other widget’s parameter, I just merged them in <br />there for you. <br /><br /><strong><Widget></strong> There’s another widget? <br /><br /><strong><Widget2></strong> Huh? Did someone say my name?<br /><br /><br /><br />In case you hadn’t guessed, jQuery BBQ helps you do all this the easy way.<br /><br /><br /><br /><h2><br />Examples</h2><br /><h3><br />jQuery.deparam</h3><br />In the following examples, <code>jQuery.deparam</code> is used to deserialize params strings generated with the built-in <code>jQuery.param</code> method. Check out the <a href="http://benalman.com/code/projects/jquery-bbq/examples/deparam/">jQuery.deparam example page</a> and <a href="http://benalman.com/code/projects/jquery-bbq/docs/">documentation</a> for more information.<br /><br /><br /><br /><div class="syntaxhighlighter " id="highlighter_462987"><br /><div class="lines"><br /><div class="line alt1"><br /><code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Serializing a params string using the built-in jQuery.param method.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// myStr is set to "a=1&b=2&c=true&d=hello+world"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myStr = $.param({ a:1, b:2, c:</code><code class="keyword">true</code><code class="plain">, d:</code><code class="string">"hello world"</code> <code class="plain">});</code></span></span></div><br /><div class="line alt2"><br /><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Deserialize the params string into an object.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// myObj is set to { a:"1", b:"2", c:"true", d:"hello world" }</code></span></span></div><br /><div class="line alt1"><br /><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam( myStr );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Deserialize the params string into an object, coercing values.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// myObj is set to { a:1, b:2, c:true, d:"hello world" }</code></span></span></div><br /><div class="line alt1"><br /><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam( myStr, </code><code class="keyword">true</code> <code class="plain">);</code></span></span></div><br /><div class="line alt2"><br /><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Deserialize jQuery 1.4-style params strings.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// myObj is set to { a:[1,2], b:{ c:[3], d:4 } }</code></span></span></div><br /><div class="line alt1"><br /><code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam( </code><code class="string">"a[]=1&a[]=2&b[c][]=3&b[d]=4"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></span></span></div><br /></div><br /></div><br /><h3><br />jQuery.deparam with query string and fragment</h3><br />The <code>jQuery.deparam.querystring</code> and <code>jQuery.deparam.fragment</code><br /> methods can be used to parse params strings out of any URL, including <br />the current document. Complete usage information is available in the <a href="http://benalman.com/code/projects/jquery-bbq/docs/">documentation</a>.<br /><br /><br /><br /><div class="syntaxhighlighter " id="highlighter_226331"><br /><div class="lines"><br /><div class="line alt1"><br /><code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Deserialize current document query string into an object.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam.querystring();</code></span></span></div><br /><div class="line alt1"><br /><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt2"><br /><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Deserialize current document fragment into an object.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam.fragment();</code></span></span></div><br /><div class="line alt2"><br /><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Parse URL, deserializing query string into an object.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// myObj is set to { a:"1", b:"2", c:"hello" }</code></span></span></div><br /><div class="line alt1"><br /><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam.querystring( </code><code class="string">"/foo.php?a=1&b=2&c=hello#test"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt2"><br /><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Parse URL, deserializing fragment into an object.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// myObj is set to { a:"3", b:"4", c:"world" }</code></span></span></div><br /><div class="line alt1"><br /><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">myObj = $.deparam.fragment( </code><code class="string">"/foo.php?test#a=3&b=4&c=world"</code> <code class="plain">);</code></span></span></div><br /></div><br /></div><br /><h3><br />Parsing the query string or fragment from a URL</h3><br />The <code>jQuery.param.querystring</code> and <code>jQuery.param.fragment</code><br /> methods can be used to return a normalized query string or fragment <br />from the current document or a specified URL. Complete usage information<br /> is available in the <a href="http://benalman.com/code/projects/jquery-bbq/docs/">documentation</a>.<br /><br /><br /><br /><div class="syntaxhighlighter " id="highlighter_632457"><br /><div class="lines"><br /><div class="line alt1"><br /><code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Return the document query string (similar to location.search, but with</code></span></span></div><br /><div class="line alt2"><br /><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// any leading ? stripped out).</code></span></span></div><br /><div class="line alt1"><br /><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">qs = $.param.querystring();</code></span></span></div><br /><div class="line alt2"><br /><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Return the document fragment (similar to location.hash, but with any</code></span></span></div><br /><div class="line alt2"><br /><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// leading # stripped out. The result is *not* urldecoded).</code></span></span></div><br /><div class="line alt1"><br /><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">hash = $.param.fragment();</code></span></span></div><br /><div class="line alt2"><br /><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Parse URL, returning the query string, stripping out the leading ?.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// qs is set to "a=1&b=2&c=3"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">qs = $.param.querystring( </code><code class="string">"/index.php?a=1&b=2&c=3#hello-world"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt2"><br /><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Parse URL, returning the fragment, stripping out the leading #.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// hash is set to "hello-world"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">hash = $.param.fragment( </code><code class="string">"/index.php?a=1&b=2&c=3#hello-world"</code> <code class="plain">);</code></span></span></div><br /></div><br /></div><br /><h3><br />URL building, using query string and fragment</h3><br />The <code>jQuery.param.querystring</code> and <code>jQuery.param.fragment</code><br /> methods can also be used to merge a params string or object into an <br />existing URL. Complete usage information and merge options are available<br /> in the <a href="http://benalman.com/code/projects/jquery-bbq/docs/">documentation</a>.<br /><br /><br /><br /><div class="syntaxhighlighter " id="highlighter_114524"><br /><div class="lines"><br /><div class="line alt1"><br /><code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">url = </code><code class="string">"http://example.com/file.php?a=1&b=2#c=3&d=4"</code><code class="plain">,</code></span></span></div><br /><div class="line alt2"><br /><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">paramsStr = </code><code class="string">"a=5&c=6"</code><code class="plain">,</code></span></span></div><br /><div class="line alt1"><br /><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">paramsObj = { a:7, c:8 };</code></span></span></div><br /><div class="line alt2"><br /><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Build URL, merging params_str into url query string.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// newUrl is set to "http://example.com/file.php?a=5&b=2&c=6#c=3&d=4"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">newUrl = $.param.querystring( url, paramsStr );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Build URL, merging params_obj into url query string.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// newUrl is set to "http://example.com/file.php?a=7&b=2&c=8#c=3&d=4"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">newUrl = $.param.querystring( url, paramsObj );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Build URL, merging params_str into url fragment.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// newUrl is set to "http://example.com/file.php?a=1&b=2#a=5&c=6&d=4"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">newUrl = $.param.fragment( url, paramsStr );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Build URL, merging params_obj into url fragment.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">18.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// newUrl is set to "http://example.com/file.php?a=1&b=2#a=7&c=8&d=4"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">19.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">newUrl = $.param.fragment( url, paramsObj );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">20.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">21.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Build URL, overwriting url fragment with new fragment string.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">22.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// newUrl is set to "index.php#/path/to/file.php"</code></span></span></div><br /><div class="line alt1"><br /><code class="number">23.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">newUrl = $.param.fragment( </code><code class="string">"index.php"</code><code class="plain">, </code><code class="string">"/path/to/file.php"</code><code class="plain">, 2 );</code></span></span></div><br /></div><br /></div><br /><h3><br />URL building in elements with “URL attributes”</h3><br />The <code>jQuery.fn.querystring</code> and <code>jQuery.fn.fragment</code><br /> methods are used to merge a params string or object into an existing <br />URL, in the appropriate selected elements’ “URL attribute” (ie. <code>a[href]</code>, <code>img[src]</code>, <code>form[action]</code>,<br /> etc). Complete usage information and merge options, as well as a list <br />of all elements’ default “URL attributes” are available in the <a href="http://benalman.com/code/projects/jquery-bbq/docs/">documentation</a>.<br /><br /><br /><br /><div class="syntaxhighlighter " id="highlighter_961879"><br /><div class="lines"><br /><div class="line alt1"><br /><code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Merge a=1 and b=2 into the `href` attribute's URL's query string,</code></span></span></div><br /><div class="line alt2"><br /><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// for every `a` element.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">$(</code><code class="string">"a"</code><code class="plain">).querystring({ a:1, b:2 });</code></span></span></div><br /><div class="line alt2"><br /><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Completely replace the `href` attribute's URL's query string with</code></span></span></div><br /><div class="line alt2"><br /><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// "a=1&b=2", for every `a` element.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">$(</code><code class="string">"a"</code><code class="plain">).querystring( </code><code class="string">"a=1&b=2"</code><code class="plain">, 2 );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Completely replace the `href` attribute's URL's fragment with</code></span></span></div><br /><div class="line alt2"><br /><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// "new-fragment", for every `a` element.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">$(</code><code class="string">"a"</code><code class="plain">).fragment( </code><code class="string">"new-fragment"</code><code class="plain">, 2 );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Merge the current document's query string params into every</code></span></span></div><br /><div class="line alt2"><br /><code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// `a[href]` and `form[action]` attribute, but don't</code></span></span></div><br /><div class="line alt1"><br /><code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// propagate the "foo" parameter.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">var</code> <code class="plain">qsObj = $.deparam.querystring();</code></span></span></div><br /><div class="line alt1"><br /><code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">delete</code> <code class="plain">qsObj.foo;</code></span></span></div><br /><div class="line alt2"><br /><code class="number">18.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">$(</code><code class="string">"a, form"</code><code class="plain">).querystring( qsObj );</code></span></span></div><br /></div><br /></div><br /><h3><br />History & bookmarking via hashchange event</h3><br />jQuery BBQ leverages the <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange event plugin</a> to create a normalized, cross-browser <code>window.onhashchange</code> event that enables very powerful but easy to use location.hash state / history and bookmarking. Check out the <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">basic hashchange</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">advanced hashchange</a> and <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">jQuery UI Tabs history & bookmarking</a> examples, as well as the <a href="http://benalman.com/code/projects/jquery-bbq/docs/">documentation</a> for more information.<br /><br /><br /><br /><div class="syntaxhighlighter " id="highlighter_827375"><br /><div class="lines"><br /><div class="line alt1"><br /><code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// Be sure to bind to the "hashchange" event on document.ready, not</code></span></span></div><br /><div class="line alt2"><br /><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// before, or else it may fail in IE6/7. This limitation may be</code></span></span></div><br /><div class="line alt1"><br /><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="comments">// removed in a future revision.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">$(</code><code class="keyword">function</code><code class="plain">(){</code></span></span></div><br /><div class="line alt1"><br /><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt2"><br /><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// Override the default behavior of all `a` elements so that, when</code></span></span></div><br /><div class="line alt1"><br /><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// clicked, their `href` value is pushed onto the history hash</code></span></span></div><br /><div class="line alt2"><br /><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// instead of being navigated to directly.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">$(</code><code class="string">"a"</code><code class="plain">).click(</code><code class="keyword">function</code><code class="plain">(){</code></span></span></div><br /><div class="line alt2"><br /><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="keyword">var</code> <code class="plain">href = $(</code><code class="keyword">this</code><code class="plain">).attr( </code><code class="string">"href"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt1"><br /><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt2"><br /><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// Push this URL "state" onto the history hash.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="plain">$.bbq.pushState({ url: href });</code></span></span></div><br /><div class="line alt2"><br /><code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">15.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// Prevent the default click behavior.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">16.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="keyword">return</code> <code class="keyword">false</code><code class="plain">;</code></span></span></div><br /><div class="line alt1"><br /><code class="number">17.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">});</code></span></span></div><br /><div class="line alt2"><br /><code class="number">18.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">19.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// Bind a callback that executes when document.location.hash changes.</code></span></span></div><br /><div class="line alt2"><br /><code class="number">20.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">$(window).bind( </code><code class="string">"hashchange"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e) {</code></span></span></div><br /><div class="line alt1"><br /><code class="number">21.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// In jQuery 1.4, use e.getState( "url" );</code></span></span></div><br /><div class="line alt2"><br /><code class="number">22.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="keyword">var</code> <code class="plain">url = $.bbq.getState( </code><code class="string">"url"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt1"><br /><code class="number">23.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt2"><br /><code class="number">24.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// In this example, whenever the event is triggered, iterate over</code></span></span></div><br /><div class="line alt1"><br /><code class="number">25.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// all `a` elements, setting the class to "current" if the</code></span></span></div><br /><div class="line alt2"><br /><code class="number">26.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// href matches (and removing it otherwise).</code></span></span></div><br /><div class="line alt1"><br /><code class="number">27.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="plain">$(</code><code class="string">"a"</code><code class="plain">).each(</code><code class="keyword">function</code><code class="plain">(){</code></span></span></div><br /><div class="line alt2"><br /><code class="number">28.</code><span class="content"><span class="block" style="margin-left: 42px !important;"><code class="keyword">var</code> <code class="plain">href = $(</code><code class="keyword">this</code><code class="plain">).attr( </code><code class="string">"href"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt1"><br /><code class="number">29.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt2"><br /><code class="number">30.</code><span class="content"><span class="block" style="margin-left: 42px !important;"><code class="keyword">if</code> <code class="plain">( href === url ) {</code></span></span></div><br /><div class="line alt1"><br /><code class="number">31.</code><span class="content"><span class="block" style="margin-left: 56px !important;"><code class="plain">$(</code><code class="keyword">this</code><code class="plain">).addClass( </code><code class="string">"current"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt2"><br /><code class="number">32.</code><span class="content"><span class="block" style="margin-left: 42px !important;"><code class="plain">} </code><code class="keyword">else</code> <code class="plain">{</code></span></span></div><br /><div class="line alt1"><br /><code class="number">33.</code><span class="content"><span class="block" style="margin-left: 56px !important;"><code class="plain">$(</code><code class="keyword">this</code><code class="plain">).removeClass( </code><code class="string">"current"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt2"><br /><code class="number">34.</code><span class="content"><span class="block" style="margin-left: 42px !important;"><code class="plain">}</code></span></span></div><br /><div class="line alt1"><br /><code class="number">35.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="plain">});</code></span></span></div><br /><div class="line alt2"><br /><code class="number">36.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt1"><br /><code class="number">37.</code><span class="content"><span class="block" style="margin-left: 28px !important;"><code class="comments">// You probably want to actually do something useful here..</code></span></span></div><br /><div class="line alt2"><br /><code class="number">38.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">});</code></span></span></div><br /><div class="line alt1"><br /><code class="number">39.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div><br /><div class="line alt2"><br /><code class="number">40.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// Since the event is only triggered when the hash changes, we need</code></span></span></div><br /><div class="line alt1"><br /><code class="number">41.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// to trigger the event now, to handle the hash the page may have</code></span></span></div><br /><div class="line alt2"><br /><code class="number">42.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="comments">// loaded with.</code></span></span></div><br /><div class="line alt1"><br /><code class="number">43.</code><span class="content"><span class="block" style="margin-left: 14px !important;"><code class="plain">$(window).trigger( </code><code class="string">"hashchange"</code> <code class="plain">);</code></span></span></div><br /><div class="line alt2"><br /><code class="number">44.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">});</code></span></span></div><br /></div><br /></div><br />If you have any non-bug-related feedback or suggestions, please let <br />me know below in the comments, and if you have any bug reports, please <br />report them in the <a href="http://github.com/cowboy/jquery-bbq/issues" target="benalman2">issues tracker</a>, thanks!<br /><br /><br /><br /><em>I want to thank <a href="http://paulirish.com/" target="benalman2">Paul Irish</a> and <a href="http://yehudakatz.com/" target="benalman2">Yehuda Katz</a> for all their help refining the jQuery BBQ API, as well as <a href="http://brandonaaron.net/" target="benalman2">Brandon Aaron</a> for explaining parts of the jQuery.event.special API for me and providing me the example code on which I based the <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange event plugin</a>. I also want to thank everyone in the #jquery IRC channel on irc.freenode.net for all their suggestions and enthusiasm!</em></div><br /></div><br /></div><br />

jQuery BBQ: Back Button & Query Library

jQuery BBQ: Back Button & Query Library By "Cowboy" Ben Alman on October 3, 20...

adding a Disqus gadget to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="title"><br />        <h1><br />Manually adding a Disqus gadget to Blogger</h1><br /></div><br />If the <a href="http://disqus.com/admin/blogger">Disqus gadget installer</a><br /> isn't working, you have the option of manually installing the gadget on<br /> your Blogger site. This will require editing your Blogger template <br />HTML, so it won't work with Dynamic Views templates.<br /><br /> <br /><h2><br />Add a new gadget</h2><br /><ol><br /><li>Go to your Blogger "Layout" section and click <b>Add a gadget</b> in the sidebar<br /><br /> <img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/2h3r9%7Eoj9gtu.png" /></li><br /><li>In the Add a Gadget popup, scroll down to find the <b>HTML/Javascript</b> gadget and click the + button<br /><br /> <img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/p91e%7Eaniyct_.png" /></li><br /><li>Enter <i>Disqus</i> as the <strong>title</strong> and the following code for the <strong>content</strong>:<br /> <pre>  <code></code></pre><br /></li><br /><li>Click save and the window will close</li><br /><li>Click <b>Save arrangement</b> in the Layout viewer</li><br /></ol><br /><h2><br />Add the Disqus code to your template</h2><br /><ol><br /><li>Go to your blog's <b>Template</b> section and then click the "Edit template" button<br /><br /> <img alt="Edit template button within Blogger template editor" src="http://disqus-cloudfront.s3.amazonaws.com/docs/install-blogger-edittemplate.png" /></li><br /><li>Click inside the text area and search for the widget you just <br />created in your HTML template by pressing Ctrl-F (Command-F on OSX) then<br /> typing <i>Disqus</i>. You should find the following line:<br /> <pre>  <code><b:widget id='HTML1' locked='false' title='Disqus' type='HTML'></code></pre><br /></li><br /><li>Change that line to add <b>mobile='yes'</b> to load Disqus on your mobile template. It will look like this when you're done:<br /> <pre>  <code><b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'></code></pre><br /></li><br /><li>Below that locate and <strong>DELETE</strong> the following code right before the closing tag. The section you're deleting should look like this:<br /> <pre>  <code><b:includable id='main'><br />  <br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div><br />  <b:include name='quickedit'/><br /></b:includable></code></pre><br /></li><br /><li>BEFORE the closing <code></b:widget></code> tag, add the following Disqus code (remember to change <strong>EXAMPLE</strong> to your site's shortname – you should leave both '&#39;' characters on either side of the shortname):<br /> <pre>  <code><b:includable id='main'><br />            <script type='text/javascript'><br />                var disqus_shortname = &#39;EXAMPLE&#39;;<br />                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;<br /><br />                if (!disqus_blogger_current_url.length) {<br />                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;<br />                }<br /><br />                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;<br />                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;<br />            </script><br /><br />            <b:if cond='data:blog.pageType == &quot;item&quot;'><br />                <style type='text/css'><br />                    #comments {display:none;}<br />                </style><br /><br />                <script type='text/javascript'><br />                    (function() {<br />                        var bloggerjs = document.createElement(&#39;script&#39;);<br />                        bloggerjs.type = &#39;text/javascript&#39;;<br />                        bloggerjs.async = true;<br />                        bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;<br />                        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);<br />                    })();<br /><br />                </script><br />            </b:if><br />                <style type='text/css'><br />                    .post-comment-link { visibility: hidden; }<br />                </style><br /><br />                <script type='text/javascript'><br />                (function() {<br />                    var bloggerjs = document.createElement(&#39;script&#39;);<br />                    bloggerjs.type = &#39;text/javascript&#39;;<br />                    bloggerjs.async = true;<br />                    bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;<br />                    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);<br />                })();<br /><br />            </script><br /></b:includable></code></pre><br /></li><br /><li>Click <b>Save template</b>. Assuming there are no errors, Disqus should properly show up on your site now.</li><br /><li> (Optional) Verify that the meta tags in your Blogger Template do <br />not force Internet Explorer to load using IE7 standards. For more <br />information see <a href="http://help.disqus.com/customer/portal/articles/666084-troubleshooting-disqus-in-internet-explorer-8-9-10#IE7-standards">Troubleshooting Disqus in Internet Explorer 8/9/10</a><br /></li><br /></ol><br /></div><br />

adding a Disqus gadget to Blogger

Manually adding a Disqus gadget to Blogger If the Disqus gadget installer isn't working, you have the option of manually instal...

Updating a Blogger template to support all versions of Internet Explorer

<div class="title">        <h1>Updating a Blogger template to support all versions of Internet Explorer</h1></div><div class="article-content">        By default all Blogger templates come with a meta tag that  forces all versions of Internet Explorer to behave like Internet  Explorer 7. Because Disqus supports Internet Explorer 8 and higher, this  will break functionality and users won't be able to comment on even the  latest version of Internet Explorer.<br /><br /><ol><li>Go to your blog's <b>Template</b> section and then click the "Edit template" button<br /><br /><img alt="Edit template button within Blogger template editor" src="http://disqus-cloudfront.s3.amazonaws.com/docs/install-blogger-edittemplate.png" /></li><br /><li>Locate the following line within the <head>...</head> tags: <pre><code><meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible '/></code></pre></li><br /><li>Replace it with this line: <pre><code><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE; chrome=1" /></code></pre></li><br /><li>Click <b>Save Template</b> to apply your changes.</li><br /></ol></div><div id="tab_header">        <span class="tab_active" id="contact_tab">Contact us</span>                </div><div class="article-content">          We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:<br /><br /><ul><li>               A brief description of the issue</li><br /><li>               Link to any page where you saw the issue</li><br /><li>               Screenshots that illustrate the problem - <a href="http://take-a-screenshot.org/" target="_blank">How do I take a screenshot?</a></li><br /></ul></div><br /><br /> Source <a href="http://help.disqus.com/customer/portal/articles/1189621-updating-the-meta-tag-in-blogger-to-support-internet-explorer">| DISQUS</a>

Updating a Blogger template to support all versions of Internet Explorer

Updating a Blogger template to support all versions of Internet Explorer By default all Blogger templates come with a meta t...

Examples hashchange jQuery UI Tabs

Examples hashchange jQuery UI Tabs

Open Source ERP Built for the Web

<div class="col-md-12" style="margin-top: 15px;"><br /> <br /> <h1 class="top" style="margin-top: 30px; letter-spacing: -1px;">Open Source ERP Built for the Web</h1><br /><br /><div class="sub-head">Manage accounting, inventory, sales and a lot more in one open source app.</div><br /><div style="text-align: center; min-height: 200px; margin-top: 30px;"><br />    <div id="video-placeholder" style="cursor: pointer; display: none;" title="Click here to see video" data-mce-style="cursor: pointer;"><br />        <img src="files/erpnext-home.png"><br />    </div><br />    <iframe src="https://www.youtube.com/embed/J-YFUI_daq8?controls=0&rel=0&enablejsapi=1&origin=https%3A%2F%2Ferpnext.com" title="YouTube video player" allowfullscreen="1" id="intro-video" frameborder="0" height="387.64044943820227" width="690"></iframe><br /></div><br /><p style="color: #777; text-align: center; margin-top: 8px;" data-mce-style="color: #777; text-align: center; margin-top: 8px;">Click on the image to watch the introductory video.</p><br /><p> </p><br /><hr><br /><p class="alert alert-warning"><a href="http://bitnami.com/product/erpnext" target="_blank">Vote for ERPNext so that it is added to BitNami</a>, that provides easy to use installers, virtual machines and cloud images.</p><p><br /></p><h3>Is this for my business?</h3><br /><br /><p><i class="icon-fixed-width icon-ok" style="color: green;"></i>  <b>Manufacturing<br></b>ERPNext was originally built for a manufacturing setup. ERPNext allows you to setup multi-level Bill of Materials. Plan your materials and production based on your<br />    BOMs and get accurate profitability analytics. ERPNext also allows you to manage other functions in your organization like Sales, Purchase, Billing, Order Tracking and also generates your Website.</p><br /><p><i class="icon-fixed-width icon-ok" style="color: green;"></i>  <b>Distributors<br></b>ERPNext is ideal for distributors. You can track your inventory accurately across multiple warehouses and retail outlets. Keep track of serialized inventory for high<br />    value items and manage warranties, service plans, customer issues and much more.</p><br /><p><i class="icon-fixed-width icon-ok" style="color: green;"></i>  <b>Retailers<br></b>ERPNext will help you manage your multiple retail outlets like a champ. With ERPNext web based <a href="pos">Point-of-Sale</a> transactions, all your retails outlets can be integrated in<br />    one application. With advanced features like serialized inventory, multiple currencies and others, ERPNext works great for retailers.</p><br /><p><i class="icon-fixed-width icon-ok" style="color: green;"></i>  <b>Services Providers<br></b>ERPNext helps you stay on top of your team and customers. With ERPNext, your service organization can manage billing and accounts, projects and task, time logging,<br />    customer support, <a href="https://frappe.erpnext.com/portal" style="font-family: inherit; line-height: 1.428571429;">customer portal</a>, <span style="line-height: 1.428571429;">website</span><span style="line-height: 1.428571429;"> and a lot more in one platform. ERPNext has many small tools for managing your team like Leave Application, Expense Claims and more that will save you a lot of time and sweat.</span></p><br /><hr><br /><br /><h3>What Modules / Apps does ERPNext have?</h3><br /><br /><p>ERPNext has a large number of built-in modules (or apps) to help you manage your business on one platform:</p><br /><p><i class="icon-fixed-width icon-money"></i> Financial Accounting</p><br /><p><i class="icon-fixed-width icon-truck"></i> Inventory Management</p><br /><p><i class="icon-fixed-width icon-cogs"></i> Manufacturing Management</p><br /><p><i class="icon-fixed-width icon-tag"></i> Sales and CRM</p><br /><p><i class="icon-fixed-width icon-shopping-cart"></i> Purchasing or SRM</p><br /><p><i class="icon-fixed-width icon-group"></i> Human Resource Management (HRM)</p><br /><p><i class="icon-fixed-width icon-phone"></i> Customer Support and Maintenance</p><br /><p><i class="icon-fixed-width icon-puzzle-piece"></i> Projects and Time Tracking</p><br /><p><i class="icon-fixed-width icon-globe"></i> Website Builder (from your Items) and Content Management</p><br /><hr><br /><br /><h3>Who Uses ERPNext?</h3><br /><br /><b>Apple, Sony, Ford, L'Oreal, Kraft Foods</b> don't use ERPNext. But more than a hundred small and medium businesses like you are active users of ERPNext. These are manufacturing companies in Indonesia, cell phone distributors in Nigeria, coffee machine<br />promoters in Vietnam, premium stationary retailers in Dubai, home lighting providers in United States, open hardware enthusiasts in Germany or software companies in India (like us). Small hardworking brands you have never heard of. Most of our customers<br />will be happy to talk to you, <a href="https://groups.google.com/forum/#!forum/erpnext-user-forum" target="_blank">just drop in a line on our user forums</a>. Most of the users love using ERPNext.<br /><ul><br />    <li><a href="erpnext-customer-stories">Read some customer testimonials</a><br /><br />    </li><br />    <li><a href="http://www.expresscomputeronline.com/case-study/1085-a-walk-through-the-integrated-cloud" target="_blank" data-mce-href="http://www.expresscomputeronline.com/case-study/1085-a-walk-through-the-integrated-cloud">Read an Independent Full Length Case Study of an ERPNext Implementation.</a><br /><br />    </li><br /></ul><br /><div class="alert alert-warning row"><br />    <div class="col-xs-9">ERPNext included in the winner's list of top Open Source Applications of 2013 (<a href="http://www.infoworld.com/slideshow/119652/bossie-awards-2013-the-best-open-source-applications-226975#slide15" target="_blank">BOSSIE Awards</a>) published by InfoWorld<br />        Magazine</div><br />    <div class="col-xs-3"><br />        <a href="http://www.infoworld.com/slideshow/119652/bossie-awards-2013-the-best-open-source-applications-226975#slide15" target="_blank"><br />            <img class="responsive" src="files/bossies_2013.jpeg"><br />        </a><br />    </div><br /></div><br /><hr><br /><br /><h3>Why Open Source And Why Should I Care?</h3><br /><br /><p>ERP is a critical foundation of your business and we believe that you should have the freedom and control over your ERP application. This means that you have the choice to select your hosting provider, or host it on your own. This also means that you<br />    could (or hire someone to) modify the application, customize it, integrate, make it your own.</p><br /><p>So how do we make money? We make money from those users who choose our cloud services for hosting ERPNext. Since 2008 we are hosting ERP applications on our platform and have the necessary skills and resources to ensure that your ERP is running most<br />    of the time and we have backups managed when things really go wrong. <a href="pricing-and-signup">Cloud hosting for ERPNext is available at very affordable annual rates today</a>.</p><br /><p> If you choose to host ERPNext on your own, or through another provider you still have the <i>same</i> application with all the source codes and access to future upgrades. So don't worry, we want to make it easy for you.</p><br /><p><b>ps. When it comes to pricing, <a href="compare-erpnext">ERPNext is still the most affordable cloud ERP in the world</a>.</b><br /><br /></p><br /><hr><br /><br /><h3>I am Excited, Whats Next?</h3><br /><br /><ul><br />    <li>First up, if you have never checked out ERPNext, <a href="https://demo.erpnext.com" target="_blank">see a live demo</a>.</li><br />    <li>If  you want to setup your own evaluation, <a href="pricing-and-signup">try our free 30 day trial. No credit card details required</a>.</li><br />    <li>You can also <a href="https://groups.google.com/forum/#!forum/erpnext-user-forum">join in on our User Forums if you have any questions or want to talk to existing users</a><br /><br />    </li><br />    <li>If you are a developer, you may want to <a href="https://github.com/webnotes/erpnext">check out/star/fork our code on GitHub</a><br /><br />    </li><br /></ul><br /><br><br /><div class="text-center"><br /><a href="https://demo.erpnext.com" class="btn btn-success btn-lg" target="_blank"><br />Demo <i class="icon-arrow-right"></i></a><br /><br /></div><br /></div>

Open Source ERP Built for the Web

Open Source ERP Built for the Web Manage accounting, inventory, sales and a lot more in one open source app. Click on ...