<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MaggsWeb:7 &#187; Javascript</title>
	<atom:link href="http://www.maggsweb.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.maggsweb.com</link>
	<description>www.maggsweb.com</description>
	<lastBuildDate>Fri, 03 Feb 2012 22:50:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Background image for Search Box</title>
		<link>http://www.maggsweb.com/javascript/background-image-for-search-box/</link>
		<comments>http://www.maggsweb.com/javascript/background-image-for-search-box/#comments</comments>
		<pubDate>Mon, 27 Sep 2010 09:18:41 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=1070</guid>
		<description><![CDATA[I implemented a Google Custom Search to an existing site &#8211; but needed to build it in to an existing search box, so needed to add the Gogole background logo into my search box if it was empty, and have it dissapear on click, etc&#8230;.. Add this to the markup&#8230; ?View Code HTML&#60;script type=&#34;text/javascript&#34;&#62;window.onload=setBG();&#60;/script&#62; And [...]]]></description>
			<content:encoded><![CDATA[<p>I implemented a Google Custom Search to an existing site &#8211; but needed to build it in to an existing search box, so needed to add the Gogole background logo into my search box if it was empty, and have it dissapear on click, etc&#8230;..</p>
<p><span id="more-1070"></span></p>
<p>Add this to the markup&#8230;</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1070code4'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p10704"><td class="code" id="p1070code4"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot;&gt;window.onload=setBG();&lt;/script&gt;</pre></td></tr></table></div>

<p>And add this to the form field&#8230;</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1070code5'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p10705"><td class="code" id="p1070code5"><pre class="html" style="font-family:monospace;">&lt;input type=&quot;text&quot; name=&quot;search&quot; id=&quot;search&quot; onclick=&quot;clearBG(this)&quot; onblur=&quot;setBG()&quot; value=&quot;&quot; /&gt;</pre></td></tr></table></div>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1070code6'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p10706"><td class="code" id="p1070code6"><pre class="javascript" style="font-family:monospace;">&nbsp;
&nbsp;
    function setBG(){
        var s = document.getElementById(&quot;search&quot;);
        if (s.value == '') {
            s.style.backgroundImage = 'url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif)';
            s.style.backgroundRepeat = 'no-repeat';
        } else {
            s.style.backgroundColor = 'white';
        }
    }  
&nbsp;
    function clearBG(s){
        s.style.backgroundImage = 'none';
        s.style.backgroundColor = 'white';
    }</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/javascript/background-image-for-search-box/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a &#8216;Search Engine Friendly&#8217; URL</title>
		<link>http://www.maggsweb.com/javascript/creating-a-search-engine-friendly-url/</link>
		<comments>http://www.maggsweb.com/javascript/creating-a-search-engine-friendly-url/#comments</comments>
		<pubDate>Mon, 28 Jun 2010 09:34:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[SEO]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=950</guid>
		<description><![CDATA[Creating a &#8216;Search Engine Friendly&#8217; URL automatically from another field, ie: the Title ?View Code JAVASCRIPT&#160; &#60;script language=&#34;JavaScript&#34;&#62; function createSlug(obj, slugField){ /* for 'obj' use 'this' */ /* onblur=&#34;javascript:createSlug(this, 'slugField'); */ var slug = document.getElementById(slugField).value; if(slug == ''){ var string = obj.value; string = slug.replace(/[^0-9,a-z,A-Z,\s]/gi,&#34;-&#34;); string = slug.replace(/-+/gi,&#34;&#34;); string = slug.replace(/\s+/g,&#34;-&#34;); string = slug.toLowerCase(); slug [...]]]></description>
			<content:encoded><![CDATA[<p>Creating a &#8216;Search Engine Friendly&#8217; URL automatically from another field, ie: the Title<br />
<span id="more-950"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p950code8'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p9508"><td class="code" id="p950code8"><pre class="javascript" style="font-family:monospace;">&nbsp;
&lt;script language=&quot;JavaScript&quot;&gt;
    function createSlug(obj, slugField){         
        /* for 'obj' use 'this' */
        /* onblur=&quot;javascript:createSlug(this, 'slugField'); */        
        var slug = document.getElementById(slugField).value;           
        if(slug == ''){
        var string = obj.value;
            string = slug.replace(/[^0-9,a-z,A-Z,\s]/gi,&quot;-&quot;); 
            string = slug.replace(/-+/gi,&quot;&quot;);
            string = slug.replace(/\s+/g,&quot;-&quot;);
            string = slug.toLowerCase();            
            slug = string;
        }
    }
&lt;/script&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/javascript/creating-a-search-engine-friendly-url/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Font-size ReSize with JQuery</title>
		<link>http://www.maggsweb.com/css/font-size-resize-with-jquery/</link>
		<comments>http://www.maggsweb.com/css/font-size-resize-with-jquery/#comments</comments>
		<pubDate>Wed, 14 Apr 2010 11:24:00 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=873</guid>
		<description><![CDATA[Ever wondered how to do the Increase/Decrease font sizes without reload&#8230;? ?View Code JAVASCRIPT $(document).ready(function() { $(&#34;a.Styleswitcher&#34;).click(function() { $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); }); Then put the links somewhere prominent, most likely chganged to images. ?View Code HTML &#60;a class=&#34;Styleswitcher&#34; rel=&#34;default.css&#34; href=&#34;#&#34;&#62;Default Theme&#60;/a&#62; &#60;a class=&#34;Styleswitcher&#34; rel=&#34;red.css&#34; href=&#34;#&#34;&#62;Red Theme&#60;/a&#62; &#60;a class=&#34;Styleswitcher&#34; rel=&#34;blue.css&#34; href=&#34;#&#34;&#62;Blue Theme&#60;/a&#62;]]></description>
			<content:encoded><![CDATA[<p>Ever wondered how to do the Increase/Decrease font sizes without reload&#8230;?<br />
<span id="more-873"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p873code11'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p87311"><td class="code" id="p873code11"><pre class="javascript" style="font-family:monospace;"> $(document).ready(function() {
    $(&quot;a.Styleswitcher&quot;).click(function() {
        $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
    });
});</pre></td></tr></table></div>

<p>
Then put the links somewhere prominent, most likely chganged to images.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p873code12'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p87312"><td class="code" id="p873code12"><pre class="html" style="font-family:monospace;">    &lt;a class=&quot;Styleswitcher&quot; rel=&quot;default.css&quot; href=&quot;#&quot;&gt;Default Theme&lt;/a&gt;
    &lt;a class=&quot;Styleswitcher&quot; rel=&quot;red.css&quot; href=&quot;#&quot;&gt;Red Theme&lt;/a&gt;
    &lt;a class=&quot;Styleswitcher&quot; rel=&quot;blue.css&quot; href=&quot;#&quot;&gt;Blue Theme&lt;/a&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/font-size-resize-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery show/hide DIV &amp; Image</title>
		<link>http://www.maggsweb.com/javascript/jquery-showhide-div-image/</link>
		<comments>http://www.maggsweb.com/javascript/jquery-showhide-div-image/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 08:31:55 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=715</guid>
		<description><![CDATA[Show/Hide areas are common place now all over the web and are an easy way to display large amounts of information that may/may not be useful to all readers. The [+] and [-] images are the key, and changing these must be seamless.. Enter jQuery. ?View Code JAVASCRIPT&#160; $(document).ready(function() { &#160; $('.searchItem').hide(); //initial hide &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>Show/Hide areas are common place now all over the web and are an easy way to display large amounts of information that may/may not be useful to all readers.  The [+] and [-] images are the key, and changing these must be seamless..<br />
Enter jQuery.<br />
<span id="more-715"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p715code14'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p71514"><td class="code" id="p715code14"><pre class="javascript" style="font-family:monospace;">&nbsp;
    $(document).ready(function() {
&nbsp;
      $('.searchItem').hide();    //initial hide 
&nbsp;
	  $('a#showHideBtn').toggle(
		   function(){ 
				$('.searchItem').show('slow');
				$('#showHideImage').attr('src','../images/hide.gif');
		   }, function() { 
				$('.searchItem').hide('slow');
				$('#showHideImage').attr('src','../images/show.gif');
		   });
&nbsp;
      });</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/javascript/jquery-showhide-div-image/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Display filesizes</title>
		<link>http://www.maggsweb.com/javascript/display-filesizes/</link>
		<comments>http://www.maggsweb.com/javascript/display-filesizes/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 08:26:40 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[function]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=767</guid>
		<description><![CDATA[Ever clicked a link only to find out that the image/download was massive and you wished you hadn&#8217;t? Wouldn&#8217;t it have been nice to have an idea of the file-size when hovering over the link? ?View Code JAVASCRIPT&#160; function byteConvert(num) { var result = 0; var unit = &#34;&#34;; &#160; // Set unit variables for [...]]]></description>
			<content:encoded><![CDATA[<p>Ever clicked a link only to find out that the image/download was massive and you wished you hadn&#8217;t?  Wouldn&#8217;t it have been nice to have an idea of the file-size when hovering over the link?<br />
<span id="more-767"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p767code16'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p76716"><td class="code" id="p767code16"><pre class="javascript" style="font-family:monospace;">&nbsp;
function byteConvert(num) {
	var result = 0;
	var unit = &quot;&quot;;
&nbsp;
	// Set unit variables for convenience
	var bytes = 1;
	var kb = 1024;
	var mb = 1048576;
	var gb = 1073741824;
&nbsp;
	// Check for non-numeric or negative num argument
	if (not isNumeric(num) OR num LT 0)
		return &quot;Invalid size argument&quot;;
&nbsp;
	// Check to see if unit was passed in, and if it is valid
	if ((ArrayLen(Arguments) GT 1)
		AND (&quot;bytes,KB,MB,GB&quot; contains Arguments[2]))
	{
		unit = Arguments[2];
	// If not, set unit depending on the size of num
	} else {
		  if      (num lt kb) {	unit =&quot;bytes&quot;;
		} else if (num lt mb) {	unit =&quot;KB&quot;;
		} else if (num lt gb) {	unit =&quot;MB&quot;;
		} else                {	unit =&quot;GB&quot;;
		}		
	}
&nbsp;
	// Find the result by dividing num by the number represented by the unit
	result = num / Evaluate(unit);
&nbsp;
	// Format the result
	if (result lt 10)
	{
		result = NumberFormat(Round(result * 100) / 100,&quot;0.00&quot;);
	} else if (result lt 100) {
		result = NumberFormat(Round(result * 10) / 10,&quot;90.0&quot;);
	} else {
		result = Round(result);
	}
	// Concatenate result and unit together for the return value
	return (result &amp; &quot; &quot; &amp; unit);
}</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/javascript/display-filesizes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Browser detection with JQuery</title>
		<link>http://www.maggsweb.com/javascript/browser-detection-with-jquery/</link>
		<comments>http://www.maggsweb.com/javascript/browser-detection-with-jquery/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 14:22:46 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[browser detection]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=525</guid>
		<description><![CDATA[Want to determine the browser version for conditional Javascript/JQuery ? Use JQuery then. ?View Code JAVASCRIPT&#160; if( $.browser.safari ) { //Safari } elseif ($.browser.msie &#38;&#38; $.browser.version &#62; 6 ) { //IE v7+ } else if ($.browser.msie &#38;&#38; $.browser.version &#60;= 6 ) { //IE -v7 } elseif ($.browser.mozilla &#38;&#38; $.browser.version &#62;= &#34;1.8&#34; ) { //FF2+ }]]></description>
			<content:encoded><![CDATA[<p>Want to determine the browser version for conditional Javascript/JQuery ?  Use JQuery then.<br />
<span id="more-525"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p525code18'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p52518"><td class="code" id="p525code18"><pre class="javascript" style="font-family:monospace;">&nbsp;
if( $.browser.safari ) {
    //Safari
} elseif ($.browser.msie &amp;&amp; $.browser.version &gt; 6 ) {
    //IE v7+
} else if ($.browser.msie &amp;&amp; $.browser.version &lt;= 6 ) {
    //IE  -v7
} elseif ($.browser.mozilla &amp;&amp; $.browser.version &gt;= &quot;1.8&quot; ) {
    //FF2+
}</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/javascript/browser-detection-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS &#8216;content&#8217; attribute</title>
		<link>http://www.maggsweb.com/css/css-content-attribute/</link>
		<comments>http://www.maggsweb.com/css/css-content-attribute/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 18:49:20 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=300</guid>
		<description><![CDATA[This is a new one, and pretty cool.  The &#8216;content&#8217; attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class. For example: ?View Code CSS&#160; a:after &#123; content: &#34;&#34; attr&#40;href&#41; &#34;&#34;; &#125; &#160; a.external:after&#123; content: &#34;(Link opens in a new window)&#34;; &#125; &#160; a.pdf:before [...]]]></description>
			<content:encoded><![CDATA[<p>This is a new one, and pretty cool.  The &#8216;content&#8217; attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class.</p>
<p><span id="more-300"></span></p>
<p>For example:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p300code20'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p30020"><td class="code" id="p300code20"><pre class="css" style="font-family:monospace;">&nbsp;
a<span style="color: #3333ff;">:after </span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;&quot;</span> attr<span style="color: #00AA00;">&#40;</span>href<span style="color: #00AA00;">&#41;</span> <span style="color: #ff0000;">&quot;&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
a<span style="color: #6666ff;">.external</span><span style="color: #3333ff;">:after</span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;(Link opens in a new window)&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
a<span style="color: #6666ff;">.pdf</span><span style="color: #3333ff;">:before </span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;&lt;img src='/img/abobe-icon.gif' width='16' height='16' border='0'&gt;&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<ol>
<li>Would automatically add the content of the &#8216;href&#8217; attribute of the link code to the end (because we used &#8216;:after&#8217;) of the link text.</li>
<li>Would automatically add the quoted text to the end of the link text.  See how this is applied to a &#8216;class&#8217; of &#8216;external&#8217;.</li>
<li>This one adds an icon to the beginning of the link text, and is controlled by the &#8216;class&#8217;.  Imagine having classes for each type of document link&#8230;..</li>
</ol>
<p>Web 2.0?  Nah, this is CSS3!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css-content-attribute/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Catching a keyPress..</title>
		<link>http://www.maggsweb.com/html/catching-a-keypress/</link>
		<comments>http://www.maggsweb.com/html/catching-a-keypress/#comments</comments>
		<pubDate>Tue, 04 Aug 2009 10:51:33 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=291</guid>
		<description><![CDATA[&#8230;like &#8216;Enter&#8217; for instance. ?View Code JAVASCRIPTfunction handleEnter (field, event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { //do something, eg: submitForm(); } else { return true; } }]]></description>
			<content:encoded><![CDATA[<p>&#8230;like &#8216;Enter&#8217; for instance.</p>
<p><span id="more-291"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p291code22'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p29122"><td class="code" id="p291code22"><pre class="javascript" style="font-family:monospace;">function handleEnter (field, event) {
  var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  if (keyCode == 13) { 
        //do something, eg:
	submitForm();
  } else {
   return true;
  }
}</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/html/catching-a-keypress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Print a Page, or Print a Section</title>
		<link>http://www.maggsweb.com/html/print-a-page-or-print-a-section/</link>
		<comments>http://www.maggsweb.com/html/print-a-page-or-print-a-section/#comments</comments>
		<pubDate>Sun, 26 Jul 2009 10:08:31 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=289</guid>
		<description><![CDATA[This is another functionality that I have been looking or for a while. I haven&#8217;t tried it yet, but intend to add this to my default toolbox! I am sticking it here for now &#8211; and will update this when I have used it. ?View Code JAVASCRIPT&#160; function printPageComponent() { html = '&#60;div id=&#34;print-page&#34;&#62;'; html [...]]]></description>
			<content:encoded><![CDATA[<p>This is another functionality that I have been looking or for a while.  I haven&#8217;t tried it yet, but intend to add this to my default toolbox!  I am sticking it here for now &#8211; and will update this when I have used it.</p>
<p><span id="more-289"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p289code24'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p28924"><td class="code" id="p289code24"><pre class="javascript" style="font-family:monospace;">&nbsp;
function printPageComponent() {
  html  = '&lt;div id=&quot;print-page&quot;&gt;';
  html += '  &lt;input class=&quot;button&quot; \n';
  html += '         id=&quot;print-page-button&quot; \n';
  html += '         onclick=&quot;window.print();&quot; \n';
  html += '         onmouseup=&quot;this.blur();&quot; \n';
  html += '         title=&quot;Print the current page.&quot; \n';
  html += '         type=&quot;button&quot; \n';
  html += '         value=&quot;Print this page&quot;';
  html += '   /&gt;';
  html += '&lt;/div&gt;';
  return html;
}
&nbsp;
function printPageLink() {
  html  = &quot;&lt;span id=\&quot;component-box-print-link\&quot; \n&quot;;
  html += &quot;      class=\&quot;button\&quot;\n&quot;;
  html += &quot;      onclick=\&quot;window.print();\&quot;&gt;\n&quot;;
  html += &quot;Print this page&quot;;
  html += &quot;&lt;/span&gt;&quot;;
  return html;
}</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/html/print-a-page-or-print-a-section/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cross-browser bookmark link</title>
		<link>http://www.maggsweb.com/html/cross-browser-bookmark-link/</link>
		<comments>http://www.maggsweb.com/html/cross-browser-bookmark-link/#comments</comments>
		<pubDate>Sun, 26 Jul 2009 09:56:56 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=284</guid>
		<description><![CDATA[&#8216;Bookmark Me&#8217; is a sort of IE thing and doesn&#8217;t usually work in FireFox, Safari, Chrome, etc.. so as a FireFox user I&#8217;ve never bothered with a bookmark links before. FireFox users know that Ctrl+D is the shortcut for these browsers, and that most &#8216;Bookmark Me&#8217; links just aren&#8217;t work clicking &#8211; as they won&#8217;t [...]]]></description>
			<content:encoded><![CDATA[<p>&#8216;Bookmark Me&#8217; is a sort of IE thing and doesn&#8217;t usually work in FireFox, Safari, Chrome, etc.. so as a FireFox user I&#8217;ve never bothered with a bookmark links before.<br />
FireFox users know that Ctrl+D is the shortcut for these browsers, and that most &#8216;Bookmark Me&#8217; links just aren&#8217;t work clicking &#8211; as they won&#8217;t work.</p>
<p>And then I found this&#8230;</p>
<p><span id="more-284"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p284code26'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p28426"><td class="code" id="p284code26"><pre class="javascript" style="font-family:monospace;">&nbsp;
function bookmarkIt(){
if(document.all){
   window.external.AddFavorite(location.href,document.title);
   }
else if(window.sidebar){
   window.sidebar.addPanel(document.title,location.href,'');
   }
}</pre></td></tr></table></div>

<p>&#8230;although I haven&#8217;t actually used it yet.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/html/cross-browser-bookmark-link/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

