<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Search-This</title>
	
	<link>http://www.search-this.com</link>
	<description>Internet Marketing, Website Promotion and Blogging Advice</description>
	<lastBuildDate>Mon, 01 Mar 2010 21:09:20 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/search-this" /><feedburner:info uri="search-this" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>search-this</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>jQuery Enlightenment Review</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/LtVEJ4wypwo/</link>
		<comments>http://www.search-this.com/2010/01/14/jquery-enlightenment-review/#comments</comments>
		<pubDate>Thu, 14 Jan 2010 15:44:28 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=997</guid>
		<description><![CDATA[
Over the past month I have been reading jQuery Enlightenment by Cody Lindley. Let me say now, that if you use jQuery or are thinking about using jQuery then you should most certainly buy this book. It&#8217;s a quick read (122 pages) that includes colorized code samples, easy to follow examples and solid explanations.
Author Cody [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://jqueryenlightenment.com/"><img src="http://www.search-this.com/wp-content/uploads/2010/01/bookCover.png" alt="jQuery Enlightenment" title="bookCover" width="405" height="289" class="alignnone size-full wp-image-998" align="right" /></a></p>
<p>Over the past month I have been reading <strong>jQuery Enlightenment</strong> by Cody Lindley. Let me say now, that if you use jQuery or are thinking about using jQuery then you should most certainly <strong><a href="http://www.lulu.com/content/paperback-book/jquery-enlightenment/7640934">buy this book</a></strong>. It&#8217;s a quick read (122 pages) that includes colorized code samples, easy to follow examples and solid explanations.</p>
<p>Author Cody Lindley is a member of the jQuery team and explains why he wrote the book.</p>
<blockquote><p>
jQuery Enlightenment was written to express, in short-order, the concepts essential to intermediate and advanced jQuery development. Its purpose is to instill in you, the reader, practices that jQuery developers take as common knowledge. Each chapter contains concepts essential to becoming a seasoned jQuery developer.</p>
<p>This book is intended for three types of readers. The first is someone who has read introductory books on jQuery and is looking for the next logical step. The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. The third reader is myself, the author. I crafted this book to be used as my own personal reference point for jQuery concepts. This is exactly the type of book I wish every JavaScript library had available.
</p></blockquote>
<p>I would argue that this book is perfectly suitable for beginners too. It&#8217;s simply a must have jQuery book. It&#8217;s the only one you need; it will take you from beginner to competent user.</p>
<p>I do ASP.NET / C# web development where I build web-based software for school districts. My preferred architecture is one in which I use NO server-controls. That means no GridViews, no Repeaters, no ListViews. If fact, nothing that uses runat server will be found on the page. The page will only consist of XHTML. So there is no need for a viewstate either. We end up using jQuery a lot in this architecture. We use jQuery / Ajax to call Web services that then query the database using LINQ to SQL and pass our data back to the client where we can then populate our XHTML controls. It works great and is extremely fast and efficient. The code couldn&#8217;t be cleaner. In addition, this methodology would allow you to easily change to a PHP or Java backend and you wouldn&#8217;t have to change a single thing on the frontend. I will give a full example on this methodology another time, but the point is &#8211; you need to learn jQuery.</p>
<p>For more information on the jQuery Enlightenment book, including a breakdown of each chapter go <strong><a href="http://jqueryenlightenment.com/">here</a></strong>. I would recommend buying the full color book from lulu.com as it&#8217;s well designed and very handy to have on your desk.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=LtVEJ4wypwo:5E5T5gJa0-8:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=LtVEJ4wypwo:5E5T5gJa0-8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=LtVEJ4wypwo:5E5T5gJa0-8:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=LtVEJ4wypwo:5E5T5gJa0-8:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2010/01/14/jquery-enlightenment-review/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2010/01/14/jquery-enlightenment-review/</feedburner:origLink></item>
		<item>
		<title>CSS – A Sticky Subject</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/bSfZgeU3qSU/</link>
		<comments>http://www.search-this.com/2009/10/09/css-a-sticky-subject/#comments</comments>
		<pubDate>Fri, 09 Oct 2009 14:37:41 +0000</pubDate>
		<dc:creator>Paul OB</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Website Design]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=970</guid>
		<description><![CDATA[CSS is a sticky subject in the best of times and to make it more sticky I thought I'd run down the techniques needed to make a sticky footer that works in all modern browsers. This is unlike most examples on the web that break in either Opera, IE8, IE7  or indeed in all [...]]]></description>
			<content:encoded><![CDATA[<p>CSS is a sticky subject in the best of times and to make it more sticky I thought I'd run down the techniques needed to <strong>make a sticky footer that works in all modern browsers</strong>. This is unlike <a href="http://www.google.co.uk/search?source=ig&#038;hl=en&#038;rlz=1G1GGLQ_ENUK317&#038;=&#038;q=CSS+Sticky+Footer+&#038;btnG=Google+Search&#038;meta=lr%3D&#038;aq=f&#038;oq="><strong>most examples on the web</strong></a> that break in either Opera, IE8, IE7  or indeed in all three.</p>
<p>Try any of those footers from the Google search above in IE8 or Opera (some don't work in IE7 either). Load the page then grab the bottom of the window (not the side or corner of the window) and drag it up or down and you will see that the footer usually sticks in the wrong place, messing up the display.</p>
<p>Now try it on <a href="http://www.pmob.co.uk/temp/3colfixedtest_4.htm"><strong>my old original sticky footer version</strong></a> (circa 2003 which pre-dates all those above) and you will see that my version is working in all browsers including IE8.</p>
<p>Before we get into details I should first explain what a sticky footer is.</p>
<p><strong><a href="http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm">What is a Sticky Footer</a></strong></p>
<p>A sticky footer is one that sits at the bottom of the viewport when there is not enough content in the page to push the footer down. If there is a lot of content then the footer sits at the bottom of the document and will be below the fold as usual. Why this is desirable is because on short content pages you won't have a footer right at the top of the screen looking very strange indeed as shown from Figure 1 below.</p>
<p><strong>Figure 1</strong> - normal footer close to content.<br />
<img src="http://www.search-this.com/wp-content/uploads/2009/09/f1-300x84.png" alt="Normal footer" title="Normal footer" width="300" height="84" class="alignnone size-medium wp-image-973" /></p>
<p><strong>Figure 2</strong> - Sticky footer at bottom of viewport.<br />
<img src="http://www.search-this.com/wp-content/uploads/2009/09/f2-300x252.png" alt="f2" title="f2" width="300" height="252" class="alignnone size-medium wp-image-977" /></p>
<p>Note that a "<strong>fixed positioned</strong>" footer is not the same thing as a sticky footer as a fixed positioned footer is one that sits at the bottom of the viewport at all times and never moves. Don't get confused between the two.</p>
<p><strong>Overview</strong></p>
<p>Before we get into the nitty gritty detail I will briefly explain the concept in getting a sticky footer to work. </p>
<p>The first thing we need to do is create a 100% high container which is achieved by setting the html and body elements to 100% height and then creating a container that is a minimum of 100% high. The footer is then placed after this container which means it will be invisible as it will be below the fold of the page but by the magic of negative margins we can bring it back into view at the bottom of the viewport. </p>
<p>Of course this means that the sticky footer must be a fixed height (pixels or ems will do) so that we know how to accommodate it with the exact negative margins that bring it into view. This also means that our footer is now overlapping content on the page so we will also need to protect this content with either padding on an inner element, or some other similar approach as you will see when we get into specifics later.</p>
<p>That's basically all there is to it except that we have to squash a few bugs on the way to make it work everywhere.</p>
<p><strong>When to use a Sticky Footer</strong></p>
<p>Sticky footers are best suited for fixed width sites with small copyright messages and horizontal menu links that keep the footer at a relatively small size. The technique will work with a large height footer but the chances are that if you have a very large footer it will always reach the bottom anyway by the time you've got your header and content in place. It will also work with percentage width footers but remember that if the content in the footer is squeezed into making the footer higher than it was then the negative margin routine won't match any more and the layout will be misaligned slightly.</p>
<p><strong>Creating The Footer</strong></p>
<p>Now it's time to get your hands dirty with the code and I will break the method down in easy steps.</p>
<p>1) Create a 100% high wrapper to fill the viewport.</p>
<p>This is accomplished by removing the default margin and padding from the html and body elements and then setting a height of 100% so that our wrapper element can base its height on this. We then use min-height:100% on our page wrapper and not height:100% because our container would never grow otherwise but we will still need to address IE6 as it doesn't understand min-height at all. (If we didn't apply a height to html and body then our container would collapse to auto height and would not stretch to the bottom. The margins from html and body must also be removed because they would increase the height and thus ruin the effect as we want an exact 100% height only.)</p>
<div class="igBar"><span id="lcss-11"><a href="#" onclick="javascript:showPlainTxt('css-11'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-11">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">html, body <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin</span>:<span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>:<span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #cc00cc;">#outer <span style="color: #66cc66;">&#123;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:#ffffcc;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin</span>:<span style="color: #993333;">auto</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; min-<span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* html #outer<span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%<span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<div class="igBar"><span id="lhtml-12"><a href="#" onclick="javascript:showPlainTxt('html-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-12">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">&lt;body&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"outer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!-- all content apart from the footer must go inside this outer wrapper --&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"footer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>As mentioned previously IE6 doesn't understand min-height therefore we provide a rule for IE6 only (using the <a href="http://reference.sitepoint.com/css/workaroundsfilters"><strong>star selector hack</strong></a> to target IE6 and under only) using the height property instead. We can do this because IE6 treats height as a minimum and will always expand an element to accommodate its content when overflow is set to visible (which is the default). We must also hide this height rule from other browsers because this would limit them to only an initial 100% and therefore the element would never expand with content.</p>
<blockquote><p>
Don't be tempted to use the !important hack to provide the height property to IE6 because the routine causes IE7 to be buggy with 100% height and won't resize the footer when the viewport is resized vertically.<br />
i.e.<strong> Do not do this:</strong></p>
<div class="igBar"><span id="lcss-13"><a href="#" onclick="javascript:showPlainTxt('css-13'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-13">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#outer<span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; min-<span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #993333;">auto</span>!important;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><strong>Do not do this either:</strong></p>
<div class="igBar"><span id="lcss-14"><a href="#" onclick="javascript:showPlainTxt('css-14'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-14">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#outer<span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; min-<span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">html&gt;body #outer<span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #993333;">auto</span><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Both the above <strong>will fail in IE7</strong> due to an obscure bug and should not be used in this routine.
</p></blockquote>
<p>The result of this code is that we now have a container that stretches to 100% height of the viewport quite nicely but the footer is sitting under this element and therefore under the fold of the page.</p>
<p>To bring the footer into view we first have to give it an appropriated height and then using a negative margin we drag it back into view. The negative margin can be applied in either of the following three methods.</p>
<p>1) A negative <strong>top margin</strong> on the footer itself<br />
2) A negative <strong>bottom margin </strong> on the main wrapper<br />
3) A negative <strong>top margin</strong> on the main wrapper</p>
<p>The first two methods are basically the same and just cause the footer to slip up over the bottom of the wrapper by the appropriate amount. <strong>Remember that the negative margins must match exactly the height of the footer.</strong> As a consequence of pulling the footer upwards it may indeed overwrite any content that was above it so you would also need to add some padding to the content above. The padding couldn't be added to the main wrapper because that means it would be too high and therefore the padding must be added to an inner element instead or just added to the element above the footer. </p>
<p>The third method mentioned above uses a slightly different tack in that the whole wrapper is moved upwards with a negative margin thus allowing the footer to fall into view at the bottom of the viewport but with the consequence that our wrapper now starts above the top of the viewport and out of sight. We therefore need to soak up this space on an inner element much the same as we did with the other two methods.</p>
<p>In 99% of cases you will most likely have a header element at the top of your page and you can use this element to soak up the extra space. My preferred method is to use a solid border on top of the header to do this because unlike padding it would not interfere with any absolutely positioned children should there be any.</p>
<p>Assuming our footer is 40px high the code to accomplish this is shown below:</p>
<div class="igBar"><span id="lcss-15"><a href="#" onclick="javascript:showPlainTxt('css-15'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-15">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #cc00cc;">#outer <span style="color: #66cc66;">&#123;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>:760px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:#ffffcc;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin</span>:<span style="color: #993333;">auto</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; min-<span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-top</span>:-40px;<span style="color: #808080; font-style: italic;">/*footer height - this drags the outer 40px up through the top of the monitor */</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #cc00cc;">#header <span style="color: #66cc66;">&#123;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">red</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; border-top<span style="color: #3333ff;">:40px </span>solid #fff; <span style="color: #808080; font-style: italic;">/* soak up negative margin and allows header to start at top of page*/</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The top border soaks up the space that is above the viewport and allows content to start in the viewport where it should be. This is exactly what we wanted and is  quite a slick way to do this as we no longer need to worry about any overlap of the footer.</p>
<p>To make it easier to follow here is the code so far:</p>
<div class="igBar"><span id="lhtml-16"><a href="#" onclick="javascript:showPlainTxt('html-16'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-16">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">&lt;html</span></a> xmlns=<span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">&lt;head&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">&lt;meta</span></a> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">"Content-Type"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"text/html; charset=iso-8859-1"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">&lt;title&gt;</span></a></span>Sticky Footer at Bottom<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">&lt;style</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* {/* for demo only*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin:0;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; padding:0</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">html, body {</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; height:100%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#outer {</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; width:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; background:#ffffcc;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin:auto;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; min-height:100%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* html #outer {</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; height:100%</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#header {</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; width:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; background:red;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#footer {/* footer now sits at bottom of window*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; background:red;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; width:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin:auto;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; height:40px;/* must match negative margin of #outer */</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; clear:both;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/style&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">&lt;body&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"outer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"header"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">&lt;h1&gt;</span></a></span>Header<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis tempor imperdiet. Morbi elit dolor, aliquam ut sagittis id, aliquam et tortor. Phasellus vitae suscipit dolor. Fusce euismod leo quis magna varius a feugiat elit aliquam. Suspendisse nec libero tellus. Nam quis libero vel sapien ultrices fermentum id vel sem. Duis massa neque, laoreet at viverra scelerisque, malesuada id nunc. Quisque turpis mi, commodo ac commodo vitae, accumsan eget nibh. Fusce sit amet leo sodales orci porta tempor. Donec nec mollis libero. Aenean porttitor placerat pretium. In hac habitasse platea dictumst. Nam vel dignissim turpis. Aenean facilisis purus nec nisi egestas at scelerisque tellus lobortis. Praesent vitae neque est. Fusce lacinia lectus sed urna suscipit blandit. Vestibulum sed euismod tortor. Sed vel neque nisl. Nunc aliquam feugiat egestas. <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"footer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>Footer<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/html&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>With the code shown we are very close to have a working footer and indeed the code above will work in IE6/7 and Firefox with no problems. Try out the above and see for yourself.</p>
<p>The problem with the above code is that it doesn't work properly in IE8 or in Opera. If, as already mentioned, you move the window by grabbing the bottom of the viewport (not the side or the corner) then the footer becomes mis-positioned or doesn't move at all.</p>
<p>This is the behavior seen in all other sticky footers but it doesn't occur in my original demo. The clue to why my old demo is still working will provide us with a neat solution that can be wrapped into this specific footer routine.</p>
<p>Back in 2003 not many browsers understood min-height and to accommodate these browsers I used a min-height hack which was basically a 100% high float that was 1px (or even 0px) wide. This held the browser open to the initial 100% height quite nicely without affecting much else as long as we took clear of clearing issues. The 100% height float triggered opera into resizing the page correctly once the viewport was moved and caused the footer to be drawn into the correct position.</p>
<p>Today (and thanks to the <a href="http://www.sitepoint.com/forums/showthread.php?t=611825">quiz I set at sitepoint</a>) we can apply that 100% float using the  pseudo element "<a href="http://reference.sitepoint.com/css/pseudoelement-before">:before</a>" and negate the need for any extra html mark up at all.</p>
<div class="igBar"><span id="lcss-17"><a href="#" onclick="javascript:showPlainTxt('css-17'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-17">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">body<span style="color: #3333ff;">:before </span><span style="color: #66cc66;">&#123;</span><span style="color: #808080; font-style: italic;">/* thanks to Maleika (Kohoutec)*/</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">content</span>:<span style="color: #ff0000;">""</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>:<span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">float</span>:<span style="color: #000000; font-weight: bold;">left</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>:<span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-top</span>:-32767px;<span style="color: #808080; font-style: italic;">/* thank you Erik J - negate effect of float*/</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The code above places a 100% high float that has no width as the first element on the page. This enables Opera to resize nicely and keep the footer where it should be. To negate any possible clearing issues on normal page content we use a negative top margin to pull the float high above the viewport (32767px is Opera's limit so don't use any more than this). Even with the negative margin applied Opera still continues to resize the page nicely.</p>
<p><strong>IE8</strong></p>
<p>The last browser to address is IE8 as it won't play ball with this method although it does understand the pseudo element :before, it doesn't apply the 100% height to it as required. Therefore we need another fix and again the answer is quite simple and logical and we supply IE8 with <strong>height:100%</strong> but declare the element as <a href="http://reference.sitepoint.com/css/display">display:table</a>.  This will enable the element to be 100% high initially but also to expand if content dictates which is exactly the way that tables work.</p>
<p>As IE8 is the only one that needs this rule we will use <a href="http://reference.sitepoint.com/css/conditionalcomments">conditional comments</a> to supply this rule to it. In order to tidy up we can also remove the IE6 hack we added earlier and put it in the conditional comments as shown below.</p>
<div class="igBar"><span id="lcss-18"><a href="#" onclick="javascript:showPlainTxt('css-18'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-18">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;!--<span style="color: #66cc66;">&#91;</span>if <span style="color: #66cc66;">&#40;</span>lte IE <span style="color: #cc66cc;color:#800000;">6</span><span style="color: #66cc66;">&#41;</span>|<span style="color: #66cc66;">&#40;</span>gte IE <span style="color: #cc66cc;color:#800000;">8</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;style type=<span style="color: #ff0000;">"text/css"</span>&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #cc00cc;">#outer <span style="color: #66cc66;">&#123;</span></span>height:<span style="color: #cc66cc;color:#800000;">100</span>%;display:table;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/style&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;!<span style="color: #66cc66;">&#91;</span>endif<span style="color: #66cc66;">&#93;</span>--&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>If you are not familiar with the first line of the conditional comments shown above then in English it basically says "<strong>If less than or equal to IE6 <strong>or</strong> If greater than or equal to IE8 then use the code below</strong>".</p>
<p>As IE6 doesn't understand display:table then it is simply ignored by IE6 and it gets the height:100% rule only. IE8 on the other hand understands both and gets both just as it needed. This saves using two sets of conditional comments and keeps the page nice and tidy.</p>
<p>Here is the full code with comments to make it easier to understand or you can view source from the <a href="http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm"> <strong>Full live version</strong></a>.<br />
<strong>Full Code</strong></p>
<div class="igBar"><span id="lhtml-19"><a href="#" onclick="javascript:showPlainTxt('html-19'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-19">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">&lt;html</span></a> xmlns=<span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">&lt;head&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">&lt;meta</span></a> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">"Content-Type"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"text/html; charset=iso-8859-1"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">&lt;title&gt;</span></a></span>Sticky Footer at Bottom<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">&lt;style</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* {/* for demo only*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin:0;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; padding:0</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">html, body {</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; height:100%;/* needed to base 100% height on something known*/</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#outer {</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; width:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; background:#ffffcc;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin:auto;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; min-height:100%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#header {</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; background:red;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#footer {/* footer now sits at bottom of window*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; background:red;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; width:760px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin:auto;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; height:40px;/* must match negative margin of #outer */</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; clear:both;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">/*Opera Fix*/</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">body:before {/* thanks to Maleika (Kohoutec)*/</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; content:&quot;&quot;;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; height:100%;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; float:left;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; width:0;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; margin-top:-32767px;/* thank you Erik J - negate effect of float*/</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">h1,h2,p{padding:0 10px;}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/style&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!--[if (lte IE 6)|(gte IE 8)]&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">&lt;style</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#outer {height:100%;display:table;}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/style&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>!<span style="color: #66cc66;">&#91;</span>endif<span style="color: #66cc66;">&#93;</span>--<span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">&lt;body&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"outer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"header"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">&lt;h1&gt;</span></a></span>Sticky Footer<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">&lt;h2&gt;</span></a></span>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and probably every other modern browser)<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>test<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"clear:both"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Element with clear:both added<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>test<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>test<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"footer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>Footer<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/html&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Just in case you are thinking that there is too much code overhead in this if we look at the html needed you will see that there aren't really any extra elements (apart from assuming that you have a header in the page.) The minimum html is as follows.</p>
<div class="igBar"><span id="lhtml-20"><a href="#" onclick="javascript:showPlainTxt('html-20'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-20">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"outer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"header"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>test<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"footer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>I don't think you can get neater than that!</p>
<p>Although I have shown the example in a fixed-width format you can use it in a percentage or fluid width page as long as you take care with the footer dimensions and don't let the footer height increase with content. To enable text-resizing you could size the footer and negative margins using ems but that would assume you were basing them on the same font-size, etc.</p>
<p><strong>Things to watch out for</strong></p>
<p>Remember to take into account the effect of <a href="http://reference.sitepoint.com/css/collapsingmargins">collapsing margins</a> on the first and last elements in the wrapper because these may have an impact on the position of the parent or the position of the footer.</p>
<p>I also often see problems where authors have tried to make space at the top and bottom of the page by simply moving the wrapper down the page. The result of this is it moves the whole 100% down the page and ruins the effect. Everything has to happen in the 100% high wrapper and if you want space at the top then you would need to reduce the space at the bottom or be creative in other ways.</p>
<p>Here are just a few various examples.<br />
<a href="http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm">Main Version</a><br />
<a href="http://www.pmob.co.uk/temp/100-with-rightbar.htm">Example 1</a><br />
<a href="http://www.pmob.co.uk/temp/graphical-footer.htm">Example 2</a><br />
<a href="http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm">Example 3</a><br />
<a href="http://www.pmob.co.uk/temp/sticky-f.htm">Example 4</a></p>
<p>I hope you have enjoyed this article and if you have any questions then post away and I'll try my best to answer them.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=bSfZgeU3qSU:g-hG6RXEUtg:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=bSfZgeU3qSU:g-hG6RXEUtg:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=bSfZgeU3qSU:g-hG6RXEUtg:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=bSfZgeU3qSU:g-hG6RXEUtg:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/10/09/css-a-sticky-subject/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/10/09/css-a-sticky-subject/</feedburner:origLink></item>
		<item>
		<title>Is Technology Making a Difference?</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/4vjBgIzIWqE/</link>
		<comments>http://www.search-this.com/2009/09/04/is-technology-making-a-difference/#comments</comments>
		<pubDate>Fri, 04 Sep 2009 13:29:39 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Stuff]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=905</guid>
		<description><![CDATA[Is technology really making a difference? 
Of course we all love our iPods and Blu-Ray players and doing research before Google came along was slow, often times requiring you to get in your car and go to a library. Anybody remember using library tools such as card catalogs and Microfiche to perform research? Now we [...]]]></description>
			<content:encoded><![CDATA[<h2>Is technology really making a difference? </h2>
<p>Of course we all love our iPods and Blu-Ray players and doing research before Google came along was slow, often times requiring you to get in your car and go to a library. Anybody remember using library tools such as <a href="http://en.wikipedia.org/wiki/Library_catalog">card catalogs</a> and <a href="http://www.wisegeek.com/what-is-microfiche.htm">Microfiche</a> to perform research? Now we can do it from our beds, simply by entering a few words into our mobile device and get instantaneous results; fantastic, no doubt.</p>
<p>Today's cell phones look like something out of <a href="http://en.wikipedia.org/wiki/Star_Trek">Star Trek</a>. Actually, they look better and have more options.</p>
<p>We truly live in marvelous times. But, what does it all add up to? Technology is supposed to make our lives easier, more productive and in some areas eliminate work altogether. And for the most part I think we can say it's worked. So how come I, like you, still work forty plus hour work weeks? In fact, since World War 2 the number of hours worked per week has grown. In her recent book, "<em>Willing Slaves – How the Overwork Culture is Ruling our Lives</em>", Madeleine Bunting states that from 1977 to 1997 Americans working full time have increased their average working hours from 43.6 hours to 47.1 hours each week. (This does not include time required to travel to and from their places of business).<a href="http://en.wikipedia.org/wiki/Work-life_balance">[1]</a> How can this be? In addition to working longer hours, many families have both family members working. The United States Bureau of Labor Statistics states that between 1950 and 2000 the number of individuals in the active labor force grew 227 percent from 62 million to 141 million.<a href="http://en.wikipedia.org/wiki/Working_time">[2]</a></p>
<p>The whole goal of a software developer is to make <em>someone's </em>life easier. If we're successful our software or device will allow a user to be more proficient, saving them time and allowing them to get more work done. But does it really matter if the user is now able to get their work done faster if the end result is still working forty hours? What does it matter if you can get twice the amount of work done? Forty hours is forty hours. I'm sure that by increasing the amount of work we are able to get done each day that someone benefits, someone higher up, but it isn't you and it isn't me.</p>
<p>It seems like life just keeps moving at an ever accelerated pace. Like a merry-go-round that started off slow and built up speed. Perhaps it's moving so fast now that we can't jump off? Or maybe we still don't feel we need to jump off?</p>
<p>Author <a href="http://en.wikipedia.org/wiki/Daniel_Quinn">Daniel Quinn</a> in his book <a href="http://www.amazon.com/Ishmael-Adventure-Spirit-Daniel-Quinn/dp/0553375407/ref=sr_1_1?ie=UTF8&#038;s=books&#038;qid=1251814631&#038;sr=8-1"><em>Ishmael</em></a> gives us a parable that may explain what has happened. It's certainly interesting.   </p>
<blockquote><p>
Terpsichore is among the places you would enjoy visiting in the universe. This was a planet where people emerged in the usual way in the community of life. For a time they lived as all others live, simply eating whatever came to hand. But after a couple of million years of living in this way, they noticed it was very easy to promote the regrowth of their favorite foods. You might say they found a few easy steps that would have this result. They didn't have to take these steps in order to stay alive, but if they took them, their favorite foods were always more readily available. These were, of course, the steps of a dance.</p>
<p>A few steps of the dance, performed just three or four days a month, enriched their lives greatly and took almost no effort. As here on earth, the people of this planet were not a single people but many peoples, and as time went on, each people developed its own approach to the dance. Some continued to dance just a few steps three or four days a month. Others found it made sense for them to have even more of their favorite foods, so they danced a few steps every second or third day. Still others saw no reason why they shouldn't live mostly on their favorite foods, so they danced a few steps every single day. Things went on this way for tens of thousands of years among the people of this planet, who thought of themselves as living in the hands of the gods and leaving everything to them. For this reason, they called themselves Leavers.</p>
<p>But one group of Leavers eventually said to themselves, "Why should we just live partially on the foods we favor? Why don't we live entirely on the foods we favor? All we have to do is devote a lot more time to dancing." So this one particular group took to dancing several hours a day. Because they thought of themselves as taking their welfare into their own hands, we'll call them Takers. The results were spectacular. The Takers were inundated with their favorite foods. A manager class soon emerged to look after the accumulation and storage of surpluses — something that had never been necessary when everyone was just dancing a few hours a week. The members of this manager class were far too busy to do any dancing themselves, and since their work was so critical, they soon came to be regarded as social and political leaders. But after a few years these leaders of the Takers began to notice that food production was dropping, and they went out to see what was going wrong. What they found was that the dancers were slacking off. They weren't dancing several hours a day, they were dancing only an hour or two and sometimes not even that much. The leaders asked why. </p>
<p>"What's the point of all this dancing?" the dancers said. "It isn't necessary to dance seven or eight hours a day to get the food we need. There's plenty of food even if we just dance an hour a day. We're never hungry. So why shouldn't we relax and take life easy, the way we used to do?" </p>
<p>The leaders saw things very differently, of course. If the dancers went back to living the way they used to, then the leaders would soon have to do the same, and that didn't appeal to them at all. They considered and tried many different schemes to encourage or cajole or tempt or shame or force the dancers into dancing longer hours, but nothing worked until one of them came up with the idea of locking up the food.</p>
<p>"What good will that do?" he was asked.</p>
<p>"The reason the dancers aren't dancing right now is that they just have to reach out and take the food they want. If we lock it away, they won't be able to do that." </p>
<p>"But if we lock the food away, the dancers will starve to death!"</p>
<p>"No, no, you don't understand," the other said with a smile. "We'll link dancing to receiving food — so much food for so much dancing. So if the dancers dance a little, they'll get a little food, and if they dance a lot, they'll get a lot. This way, slackers will always be hungry, and dancers who dance for long hours will have full stomachs." </p>
<p>"They'll never put up with such an arrangement," he was told. </p>
<p>"They'll have no choice. We'll lock the food away in storehouses, and the dancers will either dance or they'll starve." </p>
<p>"The dancers will just break into the storehouses." </p>
<p>"We'll recruit guards from among the dancers. We'll excuse them from dancing and have them guard the storehouses instead. We'll pay them the same way we pay the dancers, with food — so much food for so many hours of guarding." </p>
<p>"It will never work," he was told. But oddly enough it did work...
</p></blockquote>
<p>So here we are today, dancing away and no amount of technology seems to matter. We keep creating better and better technology and yet we dance more and more. </p>
<p>I love being a software developer. I love coming up with creative solutions to peoples problems. Over the past ten years I have been fortunate enough to work on a variety of projects ranging from POS software, market analysis software, life and health insurance software and educational school system software. For the most part the feedback has been positive. But I've yet to have anyone say "thanks to your software I am now able to spend more time with my family." In the end I don't know that I have made anyone's life better. I may have allowed them to get more work done in a day by speeding up their processes. I may have simplified their work life and improved their experience, but have I made their life any better? </p>
<p>"I submit that Egyptian workers, relatively speaking, got as much out of building Khufu’s pyramid as Microsoft workers will get out of building Bill Gates’s pyramid (which will surely dwarf Khufu’s a hundred times over, though it will not, of course, be built of stone)."</p>
<p>"It took Khufu twenty-three years to build his Great Pyramid at Giza, where some eleven hundred stone blocks, each weighing about two and a half tons, had to be quarried, moved, and set in place every day during the annual building season, roughly four months long. Few commentators on these facts can resist noting that this achievement is an amazing testimonial to the pharaoh’s iron control over the workers of Egypt. I submit, on the contrary, that pharaoh Khufu needed to exercise no more control over his workers at Giza than pharaoh Bill Gates exercises over his workers at Microsoft."</p>
<p>Throughout time man has asked - Who are we? Where did we come from and where are we going? Perhaps these questions are more pertinent now more than ever...</p>
<p><strong>What are your thoughts?</strong></p>
<p>[1] http://en.wikipedia.org/wiki/Work-life_balance<br />
[2] http://en.wikipedia.org/wiki/Working_time</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=4vjBgIzIWqE:51-BzOYm3LA:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=4vjBgIzIWqE:51-BzOYm3LA:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=4vjBgIzIWqE:51-BzOYm3LA:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=4vjBgIzIWqE:51-BzOYm3LA:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/09/04/is-technology-making-a-difference/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/09/04/is-technology-making-a-difference/</feedburner:origLink></item>
		<item>
		<title>Using jQuery with ASP.NET Controls</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/_WsFRAcMGj4/</link>
		<comments>http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/#comments</comments>
		<pubDate>Thu, 06 Aug 2009 17:27:55 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=880</guid>
		<description><![CDATA[jQuery, a lightweight (only 19kb in size) JavaScript library has become my new best friend. It's like mushrooms to Mario. Obviously I'm not alone since Microsoft is now distributing jQuery with Visual Studio (including jQuery intellisense). If you are using the new MVC framework from Microsoft then you will no doubt become familiar with the [...]]]></description>
			<content:encoded><![CDATA[<p>jQuery, a lightweight (only 19kb in size) JavaScript library has become my new best friend. It's like mushrooms to Mario. Obviously I'm not alone since Microsoft is now distributing jQuery with Visual Studio (including jQuery intellisense). If you are using the new MVC framework from Microsoft then you will no doubt become familiar with the intricate workings of jQuery.</p>
<p>jQuery is not all that difficult to learn. The biggest thing you have to understand is all the different "<a href="http://docs.jquery.com/Selectors">selectors</a>" that are available to you. Using <a href="http://docs.jquery.com/Selectors">selectors</a> developers can query, in a CSS like way, for HTML elements, and then apply "commands" to them. </p>
<p>For example, the below JavaScript uses jQuery to find a &lt;div&gt; element within a page that has a CSS id of "rightSide", and shows it and "leftSide" and hides it.</p>
<div class="igBar"><span id="ljavascript-27"><a href="#" onclick="javascript:showPlainTxt('javascript-27'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-27">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div#rightSide'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">show</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div#leftSide'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">hide</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>As another example, the JavaScript below uses jQuery to find a specific &lt;table&gt; on the page with an id of "datagrid1", then retrieves every other &lt;tr&gt; row within the datagrid, and sets those &lt;tr&gt; elements to have a CSS class of "even" - which could be used to alternate the background color of each row:</p>
<div class="igBar"><span id="ljavascript-28"><a href="#" onclick="javascript:showPlainTxt('javascript-28'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-28">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#datagrid1 tr:nth-child(even)'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addClass</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'even'</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This next example gets all links &lt;a&gt; in a specific &lt;div&gt; and attaches an onclick event to them:</p>
<div class="igBar"><span id="ljavascript-29"><a href="#" onclick="javascript:showPlainTxt('javascript-29'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-29">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#navBtns a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>event<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;event.<span style="color: #006600;">preventDefault</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">//stop the link from going to href</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #009900; font-style: italic;">//do something</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Being able to traverse the DOM and locate HTML elements to attach events, behaviors, animations and CSS is priceless. But what about ASP.NET controls like the RadioButtonList, GridView, ListView, Repeater, and many others that we as developers like to bind to? How do we traverse them when they all get their ids auto-generated? That's what we will look at now! And with jQuery it's not that hard!</p>
<p> When you add an ASP.NET RadioButtonList control to a page, like below:</p>
<div class="igBar"><span id="lcsharp-30"><a href="#" onclick="javascript:showPlainTxt('csharp-30'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-30">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;asp:RadioButtonList runat=<span style="color: #808080;">"server"</span> ID=<span style="color: #808080;">"rblCaseControl"</span> /&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The browser renders the control to the code below:</p>
<p><img src="http://www.search-this.com/wp-content/uploads/2009/08/radioButtonListScreenshot.png" alt="radioButtonList screenshot" title="radioButtonListScreenshot" width="896" height="290" class="alignnone size-full wp-image-883" /></p>
<p>As you can see, we don't have control over the generated items id tag. It would not be an easy task to guess what the auto-generated id tags are going to be. There's simply too many ways it can very depending on if you are using master-pages and or web-controls. The one thing that we do know is that somewhere in the id will be the id we gave to the control; in this case "rblCaseControl". Lucky for us this is all jQuery needs to go to town. Look at the code below:</p>
<div class="igBar"><span id="ljavascript-31"><a href="#" onclick="javascript:showPlainTxt('javascript-31'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-31">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> rblCaseControl = $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'input[type=radio][id*=rblCaseControl]'</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This code uses jQuery to get all radio buttons that have "rblCaseControl" somewhere in their id tag. We could get the selected value of the radio button list using this code:</p>
<div class="igBar"><span id="ljavascript-32"><a href="#" onclick="javascript:showPlainTxt('javascript-32'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-32">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> rblCaseControl = $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'input[type=radio][id*=rblCaseControl]:checked'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">val</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>With this code we have now found the selected value from our ASP.NET RadioButtonList control using jQuery. Perhaps now we want to send that value to a web method in our codebind page using Ajax? Well we could use jQuery for that too! But, that's another article.</p>
<p>Further Reading:</p>
<ul>
<li>http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx</li>
<li>http://weblogs.asp.net/mikebosch/archive/2008/02/15/asp-net-mvc-submitting-ajax-form-with-jquery.aspx</li>
<li>http://www.chadmyers.com/Blog/archive/2007/12/13/using-jquery-with-asp.net-mvc.aspx</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=_WsFRAcMGj4:J3qLqoffW0o:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=_WsFRAcMGj4:J3qLqoffW0o:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=_WsFRAcMGj4:J3qLqoffW0o:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=_WsFRAcMGj4:J3qLqoffW0o:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/</feedburner:origLink></item>
		<item>
		<title>Stop And Smell The Roses</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/G0-s5vaixCM/</link>
		<comments>http://www.search-this.com/2009/07/01/stop-and-smell-the-roses/#comments</comments>
		<pubDate>Wed, 01 Jul 2009 20:01:07 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Blogging]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=861</guid>
		<description><![CDATA["He emerged from the metro at the L'Enfant plaza station and positioned himself against a wall beside a trash basket. By most measures, he was nondescript: a youngish white man in jeans, a long-sleeved T-shirt and a Washington Nationals baseball cap. From a small case, he removed a violin. Placing the open case at his [...]]]></description>
			<content:encoded><![CDATA[<p><em>"He emerged from the metro at the L'Enfant plaza station and positioned himself against a wall beside a trash basket. By most measures, he was nondescript: a youngish white man in jeans, a long-sleeved T-shirt and a Washington Nationals baseball cap. From a small case, he removed a violin. Placing the open case at his feet, he shrewdly threw in a few dollars and pocket change as seed money, swiveled it to face pedestrian traffic, and began to play."</em></p>
<p>This scene is all too familiar for those of us that work in an urban downtown area. Do we stop and listen or just hurry on about our business?</p>
<p>But wait, this was not your typical panhandler. No one knew it, but the fiddler standing against a bare wall was one of the finest classical musicians in the world. In fact, the musician was Joshua Bell. Whom just three days before he appeared at the Metro station, had filled the house at Boston's stately Symphony Hall, where merely pretty good seats went for $100. The very violin that he played was worth more than most of the passer byes would make in their lifetime.  The violin was handcrafted in 1713 by Antonio Stradivari and the price tag was reported to be about $3.5 million.</p>
<p>Joshua Bell, one of the worlds top classical musicians, equipped with his million dollar Stradivari violin played one of the most difficult violin pieces ever. <strong>AND THE WORLD WAS TOO BUSY TO NOTICE...</strong></p>
<p>This experiment arranged by The Washington Post struck a cord in me. Probably because I fear that I would be one of the many that was too busy with life to see or hear the beauty that was right there in front of me.</p>
<p>This is one of the reasons for the less frequency of blog post these days. The other reason is the birth of my second child. In the words of Ferris Bueller, "Life moves pretty fast. If you don't stop and look around once in a while, you could miss it."</p>
<p>The life of a software developer is fast paced for sure, maybe that's why they call them sprints in the Agile dev methodology. Make sure you are stopping from time to time to smell the roses or hear the music. Work to live. Don't live to work...</p>
<p>Be sure to read the entire Washington Post experiment <a href="http://www.washingtonpost.com/wp-dyn/content/article/2007/04/04/AR2007040401721.html">here</a>. It's well worth your time.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=G0-s5vaixCM:r93QUZ0f8GA:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=G0-s5vaixCM:r93QUZ0f8GA:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=G0-s5vaixCM:r93QUZ0f8GA:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=G0-s5vaixCM:r93QUZ0f8GA:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/07/01/stop-and-smell-the-roses/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/07/01/stop-and-smell-the-roses/</feedburner:origLink></item>
		<item>
		<title>jQuery Dropdown Menu</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/AOe85eQogFM/</link>
		<comments>http://www.search-this.com/2009/03/17/jquery-dropdown-menu/#comments</comments>
		<pubDate>Tue, 17 Mar 2009 18:28:38 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Add new tag]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=849</guid>
		<description><![CDATA[In this short article we will use jQuery to produce this dropdown menu. Over the past six months I have been using a lot of jQuery and have fallen in love with it. For those not familiar with jQuery it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, [...]]]></description>
			<content:encoded><![CDATA[<p>In this short article we will use jQuery to produce this <strong><a href="http://www.search-this.com/examples/drop-down-menu/" target="_blank">dropdown menu</a></strong>. Over the past six months I have been using a lot of jQuery and have fallen in love with it. For those not familiar with jQuery it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. All this and for only 19KB! How nice is that? They claim that, "jQuery will change the way that you write JavaScript." And they are right. Companies such as Google, Dell, Bank of America, Major League Baseball, Digg, NBC, CBS, Netflix, Technorati, WordPress, Drupal, Mozilla and many others use jQuery too. Ok, that's enough of a plug, let's look at the code:</p>
<div class="igBar"><span id="ljavascript-37"><a href="#" onclick="javascript:showPlainTxt('javascript-37'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-37">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.down-list'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">width</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.dropdown-menu'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">width</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>-<span style="color: #CC0000;color:#800000;">2</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.dropdown-menu'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">hover</span><span style="color: #66cc66;">&#40;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.menu-first'</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addClass</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slide-down'</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.down-list'</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">slideDown</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">100</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; obj = <span style="color: #000066; font-weight: bold;">this</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.down-list'</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">slideUp</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">100</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.menu-first'</span>, obj<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">removeClass</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slide-down'</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<h2>Code Breakdown</h2>
<div class="igBar"><span id="ljavascript-38"><a href="#" onclick="javascript:showPlainTxt('javascript-38'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-38">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.down-list'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">width</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.dropdown-menu'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">width</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>-<span style="color: #CC0000;color:#800000;">2</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This gets the class <em>.down-list</em> and sets its width equal to the width of the <em>.dropdown-menu's</em> width minus two. As you may already know or were able to deduce the dollar sign ($) is used to select HTML elements in the page. The $ method accepts a CSS selector(s) as argument(s), so if you want to select a specific element by it's id or it's class as in the case here you can  use the $("#myElementId") code which returns a reference to the DOM element. Learning all the jQuery selectors is very important in mastering jQuery, but is not the scope of this article.</p>
<div class="igBar"><span id="ljavascript-39"><a href="#" onclick="javascript:showPlainTxt('javascript-39'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-39">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.dropdown-menu'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">hover</span><span style="color: #66cc66;">&#40;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This code attaches the hover event to all <em>.dropdown-menu</em> classes. Short and sweet. The <a href="http://docs.jquery.com/Events/hover">hover</a> event uses two functions: over and out. Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires.</p>
<div class="igBar"><span id="ljavascript-40"><a href="#" onclick="javascript:showPlainTxt('javascript-40'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-40">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.menu-first'</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addClass</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slide-down'</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.down-list'</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">slideDown</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">100</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;obj = <span style="color: #000066; font-weight: bold;">this</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.down-list'</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">slideUp</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">100</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.menu-first'</span>, obj<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">removeClass</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slide-down'</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The first function is called when someone mouses over a dropdown menu. It adds the class <em>slide-down</em> to the menu and then animates it by <a href="http://docs.jquery.com/Effects/slideDown">sliding down</a>. The 100 in the slideDown method is the speed of the animation measured in milliseconds.</p>
<p>The second function is called when they mouse out. The part to notice here is the additional function in the <a href="http://docs.jquery.com/Effects/slideUp">slideUp</a> method. This is a callback function; it fires when the animation is complete. So in this case when the user mouses off our dropdown menu it will animate up and then remove the class <em>slide-down</em>. And that will wrap up our dropdown menu.</p>
<p>As you can see, very little code to achieve this common web effect thanks to jQuery.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=AOe85eQogFM:o3F8NsHpgrc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=AOe85eQogFM:o3F8NsHpgrc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=AOe85eQogFM:o3F8NsHpgrc:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=AOe85eQogFM:o3F8NsHpgrc:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/03/17/jquery-dropdown-menu/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/03/17/jquery-dropdown-menu/</feedburner:origLink></item>
		<item>
		<title>ASP.NET – Sending Email Both in HTML and Plain Text</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/PwmuD80wd1E/</link>
		<comments>http://www.search-this.com/2009/02/05/aspnet-sending-email-both-in-html-and-plain-text/#comments</comments>
		<pubDate>Thu, 05 Feb 2009 15:36:56 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[ASP.NET]]></category>
		<category><![CDATA[email]]></category>
		<category><![CDATA[html email]]></category>
		<category><![CDATA[send email]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=804</guid>
		<description><![CDATA[In this article you will learn how to send email using ASP.NET. Yes, there are plenty of other articles that cover sending email via .NET, but after spending a day doing research, I was amazed at how many articles failed to provide either a correct solution or a real world example. I found that many [...]]]></description>
			<content:encoded><![CDATA[<p>In this article you will learn how to send email using ASP.NET. Yes, there are plenty of other articles that cover sending email via .NET, but after spending a day doing research, I was amazed at how many articles failed to provide either a correct solution or a real world example. I found that many articles suggest you create your HTML email by using a string with the HTML markup in it. That's crazy and not at all a real world solution, at least not for most situations. In this article we will look at a more realistic solution. One in which we use a regular HTML file as our template for the email. The template file will be a standard HTML file with the exception of some placeholders that we will use to populate our content and images right before we send the email. Think mail-merge in Microsoft Word. Finally, we will also learn how to send the email in such a way that if the email recipient's mail-client can't render HTML they will get an alternate plain text version.</p>
<p>Let's start by looking at the code in its entirety; the people that just want to grab the code and use it can do so. I will then explain the code.</p>
<div class="igBar"><span id="lcsharp-51"><a href="#" onclick="javascript:showPlainTxt('csharp-51'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-51">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// CREATE EMAIL</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// first we create a plain text version and set it to the AlternateView</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// then we create the HTML version</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MailMessage msg = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> MailMessage<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">From</span> = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> MailAddress<span style="color: #000000;">&#40;</span>TextBoxYourEmail.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">Subject</span> = <span style="color: #808080;">"Event: "</span> + labelEventName.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail1.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// create a string to hold all email addresses</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">StringBuilder sbEmailTo = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> StringBuilder<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span>TextBoxEmail1.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail2.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail2.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail2.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail3.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail3.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail3.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail4.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail4.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail4.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail5.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail5.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail5.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #FF0000;">String</span> plainEmail = TextBoxYourName.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">" has invited you to an event! <span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span> <span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Event Name: "</span> + labelEventName.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">"<span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Event Date: "</span> + eventTextBox.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">"<span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Event Description: "</span> + labelEventDescription.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">"<span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span> <span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Message: "</span> + TextBoxPersonalMessage.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//first we create the Plain Text part</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">AlternateView plainView = AlternateView.<span style="color: #0000FF;">CreateAlternateViewFromString</span><span style="color: #000000;">&#40;</span>plainEmail, <span style="color: #0600FF;">null</span>, <span style="color: #808080;">"text/plain"</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">AlternateViews</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>plainView<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//now create the HTML version</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MailDefinition message = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> MailDefinition<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">BodyFileName</span> = <span style="color: #808080;">"email.htm"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">IsBodyHtml</span> = <span style="color: #0600FF;">true</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">From</span> = TextBoxYourEmail.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">Subject</span> = <span style="color: #808080;">"Zoo Event: "</span> + labelEventName.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//embed images for the email</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">EmbeddedMailObject emo = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> EmbeddedMailObject<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo.<span style="color: #0000FF;">Path</span> = <span style="color: #808080;">@"~\Images\email\hdr_roar.gif"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo.<span style="color: #0000FF;">Name</span> = <span style="color: #808080;">"hdr"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">EmbeddedMailObject emo2 = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> EmbeddedMailObject<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo2.<span style="color: #0000FF;">Path</span> = <span style="color: #808080;">@"~\Images\email\box_top.gif"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo2.<span style="color: #0000FF;">Name</span> = <span style="color: #808080;">"box_top"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">EmbeddedObjects</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>emo<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">EmbeddedObjects</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>emo2<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//Build replacement collection to replace fields in email.htm file</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ListDictionary replacements = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> ListDictionary<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%EVENTDATE%&gt;"</span>, eventTextBox.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%EVENTNAME%&gt;"</span>, labelEventName.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%FROMNAME%&gt;"</span>, TextBoxYourName.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%EVENTDESCRIPTION%&gt;"</span>, labelEventDescription.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%PERSONALMESSAGE%&gt;"</span>, TextBoxPersonalMessage.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//now create mail message using the mail definition object</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//the CreateMailMessage object takes a source control object as the last parameter, </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//if the object you are working with is webcontrol then you can just pass &quot;this&quot;, </span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//otherwise create a dummy control as below.</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MailMessage msgHtml = message.<span style="color: #0000FF;">CreateMailMessage</span><span style="color: #000000;">&#40;</span>sbEmailTo.<span style="color: #0000FF;">ToString</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>, replacements, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> LiteralControl<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">AlternateView htmlView = AlternateView.<span style="color: #0000FF;">CreateAlternateViewFromString</span><span style="color: #000000;">&#40;</span>msgHtml.<span style="color: #0000FF;">Body</span>, <span style="color: #0600FF;">null</span>, “text/html”<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">AlternateViews</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>htmlView<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// send email now (check web.config)</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">SmtpClient smtp = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> SmtpClient<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">smtp.<span style="color: #0000FF;">Send</span><span style="color: #000000;">&#40;</span>msg<span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<h2>The Setup</h2>
<p>Add the <strong>System.Net.Mail</strong> namespace. The System.Net.Mail namespace contains everything we need to send email using a Simple Mail Transfer Protocol (SMTP) server for delivery. </p>
<p>Modify the <strong>Web.config</strong> file to include the below:</p>
<div class="igBar"><span id="lcode-52"><a href="#" onclick="javascript:showPlainTxt('code-52'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CODE:</span>
<div id="code-52">
<div class="code">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;system.<span style="">net</span>&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;mailSettings&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &lt;smtp from=<span style="color:#CC0000;">"admin@company.com"</span>&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &lt;network host=<span style="color:#CC0000;">"localhost"</span> port=<span style="color:#CC0000;">"25"</span>&nbsp; /&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &lt;/smtp&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;/mailSettings&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &lt;/system.<span style="">net</span>&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The kicker and not well documented part to note is the from="admin@company.com" in the smtp tag. You can change the from address later, but the <strong>MailDefinition </strong>class needs this here.</p>
<p>That's it for setup. Now let's look at the first chunk of code.</p>
<h2>Create The Plain Text Version</h2>
<div class="igBar"><span id="lcsharp-53"><a href="#" onclick="javascript:showPlainTxt('csharp-53'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-53">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MailMessage msg = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> MailMessage<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>
The <strong>MailMessage </strong>class represents an email message that can be sent using the <strong>SmtpClient </strong>class. </p>
<div class="igBar"><span id="lcsharp-54"><a href="#" onclick="javascript:showPlainTxt('csharp-54'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-54">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">From</span> = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> MailAddress<span style="color: #000000;">&#40;</span>TextBoxYourEmail.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">Subject</span> = <span style="color: #808080;">"Event: "</span> + labelEventName.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail1.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Pretty straight-forward. This just assigns the <em>From</em>, <em>Subject </em>and <em>To </em>properties to our mail message.</p>
<div class="igBar"><span id="lcsharp-55"><a href="#" onclick="javascript:showPlainTxt('csharp-55'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-55">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// create a string to hold all email addresses</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">StringBuilder sbEmailTo = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> StringBuilder<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span>TextBoxEmail1.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail2.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail2.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail2.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail3.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail3.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail3.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail4.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail4.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail4.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>!<span style="color: #FF0000;">String</span>.<span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #000000;">&#40;</span>TextBoxEmail5.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> msg.<span style="color: #0000FF;">To</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>TextBoxEmail5.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; sbEmailTo.<span style="color: #0000FF;">Append</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">", "</span> + TextBoxEmail5.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>In this example they have the option of sending the email to more than one recipient. So we perform a check on the four optional text-boxes to see if they have email addresses and if they are not empty then we add them to our <strong>MailMessage </strong>instance. In addition, we append them to our <strong>StringBuilder </strong> instance which we will end up using later.</p>
<div class="igBar"><span id="lcsharp-56"><a href="#" onclick="javascript:showPlainTxt('csharp-56'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-56">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #FF0000;">String</span> plainEmail = TextBoxYourName.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">" has invited you to an event! <span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span> <span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Event Name: "</span> + labelEventName.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">"<span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Event Date: "</span> + eventTextBox.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">"<span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Event Description: "</span> + labelEventDescription.<span style="color: #0000FF;">Text</span> + <span style="color: #808080;">"<span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span> <span style="color: #008080; font-weight: bold;">\r</span><span style="color: #008080; font-weight: bold;">\n</span>"</span> +</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #808080;">"Message: "</span> + TextBoxPersonalMessage.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//first we create the Plain Text part</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">AlternateView plainView = AlternateView.<span style="color: #0000FF;">CreateAlternateViewFromString</span><span style="color: #000000;">&#40;</span>plainEmail, <span style="color: #0600FF;">null</span>, <span style="color: #808080;">"text/plain"</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">AlternateViews</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>plainView<span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Here we simply create a string which we'll use as our plain-text email message. But remember, we only want to use the plain-text version of the email if their mail client does not support HTML. Therefore we use the <strong>AlternateView </strong> class and add it to our <strong>MailMessage </strong>instance. We could have chosen not to use the alternate view and just made it the body of our <strong>MailMessage </strong>instance, but not this time.</p>
<p>That's it for the plain-text version, now we will handle the HTML version.</p>
<h2>Create The HTML Version</h2>
<div class="igBar"><span id="lcsharp-57"><a href="#" onclick="javascript:showPlainTxt('csharp-57'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-57">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//now create the HTML version</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MailDefinition message = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> MailDefinition<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">BodyFileName</span> = <span style="color: #808080;">"email.htm"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">IsBodyHtml</span> = <span style="color: #0600FF;">true</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">From</span> = TextBoxYourEmail.<span style="color: #0000FF;">Text</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">Subject</span> = <span style="color: #808080;">"Zoo Event: "</span> + labelEventName.<span style="color: #0000FF;">Text</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Notice we use the <strong>MailDefinition </strong>class this time and not the <strong>MailMessage </strong> class as we did with the plain-text version. That's because it's the <strong>MailDefinition </strong>class that allows us to to create an email from an HTML file. Notice the <em>BodyFileName </em> property that we have set to our "email.htm" file. This is just a regular old HTML file. Lastly, we set the <em>IsBodyHtml </em>property to true.</p>
<div class="igBar"><span id="lcsharp-58"><a href="#" onclick="javascript:showPlainTxt('csharp-58'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-58">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//embed images for the email</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">EmbeddedMailObject emo = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> EmbeddedMailObject<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo.<span style="color: #0000FF;">Path</span> = <span style="color: #808080;">@"~\Images\email\hdr_roar.gif"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo.<span style="color: #0000FF;">Name</span> = <span style="color: #808080;">"hdr"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">EmbeddedMailObject emo2 = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> EmbeddedMailObject<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo2.<span style="color: #0000FF;">Path</span> = <span style="color: #808080;">@"~\Images\email\box_top.gif"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">emo2.<span style="color: #0000FF;">Name</span> = <span style="color: #808080;">"box_top"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">EmbeddedObjects</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>emo<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #0000FF;">EmbeddedObjects</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>emo2<span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The above code adds two images to the HTML file. The <strong>EmbeddedMailObject </strong>represents an item to embed in a mail message. Notice the <em>Name </em>property. This is important because in our HTML file (email.htm) we have this <strong>&lt;img src="cid:hdr" alt="" /&gt;</strong> code which is where it maps to the image. This way of adding images to our <strong>MailDefinition </strong> object will send the images with the email. If you don't wish to send images with your email you may choose to simply add absolute paths to your images in your HTML file like normal. Just make sure the paths are absolute.</p>
<div class="igBar"><span id="lcsharp-59"><a href="#" onclick="javascript:showPlainTxt('csharp-59'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-59">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//Build replacement collection to replace fields in email.htm file</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ListDictionary replacements = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> ListDictionary<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%EVENTDATE%&gt;"</span>, eventTextBox.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%EVENTNAME%&gt;"</span>, labelEventName.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%FROMNAME%&gt;"</span>, TextBoxYourName.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%EVENTDESCRIPTION%&gt;"</span>, labelEventDescription.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">replacements.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">"&lt;%PERSONALMESSAGE%&gt;"</span>, TextBoxPersonalMessage.<span style="color: #0000FF;">Text</span><span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This is an important part. This is where we pass in fields to our HTML template. Within our HTML file we find this <strong>&lt;%EVENTDATE%&gt; </strong>. This is a placeholder that we use to pass in content. Pretty cool eh? Almost like a mail-merge in Word. So all the above gets mapped into our HTML template. Now we see the power of this solution. It sure beats creating a huge string. We have a regular old HTML file with the placeholders that we pass in the content. Any future changes can be done right in the HTML file. Nice...</p>
<p>Now the last code section:</p>
<div class="igBar"><span id="lcsharp-60"><a href="#" onclick="javascript:showPlainTxt('csharp-60'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">C#:</span>
<div id="csharp-60">
<div class="csharp">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//now create mail message using the mail definition object</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//the CreateMailMessage object takes a source control object as the last parameter, </span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//if the object you are working with is webcontrol then you can just pass &quot;this&quot;, </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">//otherwise create a dummy control as below.</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MailMessage msgHtml = message.<span style="color: #0000FF;">CreateMailMessage</span><span style="color: #000000;">&#40;</span>sbEmailTo.<span style="color: #0000FF;">ToString</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>, replacements, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> LiteralControl<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">AlternateView htmlView = AlternateView.<span style="color: #0000FF;">CreateAlternateViewFromString</span><span style="color: #000000;">&#40;</span>msgHtml.<span style="color: #0000FF;">Body</span>, <span style="color: #0600FF;">null</span>, “text/html”<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">msg.<span style="color: #0000FF;">AlternateViews</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>htmlView<span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #008080; font-style: italic;">// send email now (check web.config)</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">SmtpClient smtp = <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #008000;">new</span></a> SmtpClient<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">smtp.<span style="color: #0000FF;">Send</span><span style="color: #000000;">&#40;</span>msg<span style="color: #000000;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The <strong>CreateMailMessage </strong> method creates the email message and does the merging of our <em>replacement </em>list with the placeholders. We also pass in the string that we created earlier. Remember the string held all the email recipient addresses. The last parameter is looking for a control that owns the <strong>MailDefinition</strong>. We don't have one so we just pass in a dummy control. </p>
<p>All that remains is to send the email message via the smtp protocol. If everything in your <strong>Web.config</strong> file is set up correctly your email should be on the way. </p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=PwmuD80wd1E:Ycr6XObtyYY:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=PwmuD80wd1E:Ycr6XObtyYY:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=PwmuD80wd1E:Ycr6XObtyYY:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=PwmuD80wd1E:Ycr6XObtyYY:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/02/05/aspnet-sending-email-both-in-html-and-plain-text/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/02/05/aspnet-sending-email-both-in-html-and-plain-text/</feedburner:origLink></item>
		<item>
		<title>Oh, The Irony…</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/gO0LKZQJxXs/</link>
		<comments>http://www.search-this.com/2009/01/26/oh-the-irony/#comments</comments>
		<pubDate>Mon, 26 Jan 2009 17:10:28 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Windows 7]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=782</guid>
		<description><![CDATA[So this morning I thought I would take a look at some of the videos that showcase Windows 7. Maybe get excited about some of the new features, get my hopes up, why not? I went to their website but CAN'T view the videos!
First I get the, "Additional plugins are required to display all the [...]]]></description>
			<content:encoded><![CDATA[<p>So this morning I thought I would take a look at some of the videos that showcase Windows 7. Maybe get excited about some of the new features, get my hopes up, why not? I went to <a href="http://www.microsoft.com/windows/windows-7/beta-videos.aspx">their website</a> but CAN'T view the videos!</p>
<p>First I get the, "<strong>Additional plugins are required to display all the media on this page.</strong>" bar, which is not a problem in and of itself. I realize I need to get the Silverlight plugin. So I try to do so and get this <a href="http://www.search-this.com/wp-content/uploads/2009/01/win7b.gif"><strong>error message</strong></a>.</p>
<p><a href="http://www.search-this.com/wp-content/uploads/2009/01/win7a.gif"><br />
<img src="http://www.search-this.com/wp-content/uploads/2009/01/win7a-300x95.gif" alt="win7a" title="win7a" width="300" height="95" class="alignnone size-medium wp-image-783" /><br />
</a><br />
[ <a href="http://www.search-this.com/wp-content/uploads/2009/01/win7a.gif">Click to enlarge</a> ]</p>
<p>I'm not going to switch browsers in order to view videos people...</p>
<p>Oh Microsoft, why do you do this to yourself? I can't keep defending you forever...</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=gO0LKZQJxXs:tLhq1-eSD0g:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=gO0LKZQJxXs:tLhq1-eSD0g:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=gO0LKZQJxXs:tLhq1-eSD0g:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=gO0LKZQJxXs:tLhq1-eSD0g:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/01/26/oh-the-irony/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/01/26/oh-the-irony/</feedburner:origLink></item>
		<item>
		<title>This Just In – The Internet Is Popular</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/B8ZfqZo8EME/</link>
		<comments>http://www.search-this.com/2009/01/16/this-just-in-the-internet-is-popular/#comments</comments>
		<pubDate>Fri, 16 Jan 2009 15:57:48 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Entertainment]]></category>
		<category><![CDATA[Internet Marketing]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=777</guid>
		<description><![CDATA[The Internet has now surpassed all media except television as a news source, according to consumers surveyed in December 2008 by the Pew Research Center for the People and the Press. 
In December 2008, 40% of respondents said they got most of their news about national and international issues from the Internet, up from just [...]]]></description>
			<content:encoded><![CDATA[<p>The Internet has now surpassed all media except television as a news source, according to consumers surveyed in December 2008 by the<em> Pew Research Center for the People and the Press</em>. </p>
<p>In December 2008, 40% of respondents said they got most of their news about national and international issues from the Internet, up from just 24% in September 2007.</p>
<p>Pew said it was the <strong>first time since it started surveying that consumers relied more on the Internet for news than on newspapers</strong>.</p>
<p>Television was still the main source for national and international news, at 70%. </p>
<p><img src="http://www.search-this.com/wp-content/uploads/2009/01/100748.gif" alt="100748" title="100748" width="324" height="278" class="alignnone size-full wp-image-778" /></p>
<p>For young people, however, the Internet now rivals TV as a news source. Nearly six out of 10 Americans younger than 30 said they got most of their national and international news online; the exact same percentage said TV was the main way they got their news. </p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=B8ZfqZo8EME:_Kkv7pNfJAQ:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=B8ZfqZo8EME:_Kkv7pNfJAQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=B8ZfqZo8EME:_Kkv7pNfJAQ:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=B8ZfqZo8EME:_Kkv7pNfJAQ:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/01/16/this-just-in-the-internet-is-popular/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/01/16/this-just-in-the-internet-is-popular/</feedburner:origLink></item>
		<item>
		<title>Blog Blazers Book Review</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/xi1Rqg_4tcA/</link>
		<comments>http://www.search-this.com/2009/01/09/blog-blazers-book-review/#comments</comments>
		<pubDate>Fri, 09 Jan 2009 14:54:43 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[book review]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=767</guid>
		<description><![CDATA[
Stephane Grenier was kind enough to send me a copy of his new book Blog Blazers - 40 Top Bloggers Share Their Secrets. I'm glad he did, it's a very enjoyable read. It's a lot like what the Random Bits podcast offers its listeners. In fact the book interviews both Jonathan Snook and Yaro Starak [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.search-this.com/wp-content/uploads/2009/01/blogblazers.jpg" alt="" title="blogblazers" width="240" height="240" align="left" /></p>
<p>Stephane Grenier was kind enough to send me a copy of his new book <strong><a href="http://www.blogblazers.com/">Blog Blazers - 40 Top Bloggers Share Their Secrets</a></strong>. I'm glad he did, it's a very enjoyable read. It's a lot like what the <strong><a href="http://www.search-this.com/random-bits/">Random Bits</a></strong> podcast offers its listeners. In fact the book interviews both <strong><a href="http://www.search-this.com/2008/01/28/random-bits-podcast-with-jonathan-snook-part-1/">Jonathan Snook</a></strong> and <strong><a href="http://www.search-this.com/2008/01/28/random-bits-podcast-with-jonathan-snook-part-1/">Yaro Starak</a></strong> which have been interviewed here before on the Random Bits podcast. You'll also find interviews with notables like Seth Godin, Neil Patel, David Seah and 35 other top bloggers.</p>
<p>The books main goal is to provide you and your blog some insight into what it takes to be successful. Reminding you that "A new blog comes online every 1.4 seconds" it sure doesn't hurt to learn from some of the most successful bloggers to date.</p>
<p>In Blog Blazers, you'll learn the secrets of 40 top bloggers, as they all weigh in on such questions as:</p>
<p>- What's your best tip for writing a successful blog post?<br />
- What are your main avenues for marketing your blog?<br />
- What was your most successful blog post ever?<br />
- What's the most common mistake new bloggers make?<br />
- What turns you off most when visiting a blog?<br />
- What's the best way to make money from your blog?<br />
- Which books and websites do you recommend to new bloggers?<br />
- Which five blogs do you regularly read?<br />
- and many more! </p>
<p>It's a quick and easy read and well worth any bloggers time.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=xi1Rqg_4tcA:y5E-8_zqQ_0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=xi1Rqg_4tcA:y5E-8_zqQ_0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=xi1Rqg_4tcA:y5E-8_zqQ_0:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=xi1Rqg_4tcA:y5E-8_zqQ_0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/01/09/blog-blazers-book-review/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/01/09/blog-blazers-book-review/</feedburner:origLink></item>
		<item>
		<title>Articles You May Have Missed in 2008, But Shouldn’t Have</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/6Y0UMPBpIrY/</link>
		<comments>http://www.search-this.com/2009/01/02/articles-you-may-have-missed-in-2008-but-shouldnt-have/#comments</comments>
		<pubDate>Fri, 02 Jan 2009 16:04:15 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Search Engine Optimization]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=764</guid>
		<description><![CDATA[Happy New Year all, here are some articles from the past year that we think are worth a read:


Let’s All Get Inline (In a Block, In a Block)


Thinking Outside The SEO Box


Fix Your CSS


10 Things Any Web Developer Worth Their Spit Should Know


Easy Vertical Centering with CSS


WordPress Plugin: Comment Info Tip


Greasing Gmail


CSS - An Absolute [...]]]></description>
			<content:encoded><![CDATA[<p>Happy New Year all, here are some articles from the past year that we think are worth a read:</p>
<ul>
<li>
<a href="http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/">Let’s All Get Inline (In a Block, In a Block)</a>
</li>
<li>
<a href="http://www.search-this.com/2008/08/06/thinking-outside-the-seo-box/">Thinking Outside The SEO Box</a>
</li>
<li>
<a href="http://www.search-this.com/2008/07/14/fix-your-css/">Fix Your CSS</a>
</li>
<li>
<a href="http://www.search-this.com/2008/06/24/10-things-any-web-developer-worth-their-spit-should-know/">10 Things Any Web Developer Worth Their Spit Should Know</a>
</li>
<li>
<a href="http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/">Easy Vertical Centering with CSS</a>
</li>
<li>
<a href="http://www.search-this.com/2008/05/05/wordpress-plugin-comment-info-tip/">WordPress Plugin: Comment Info Tip</a>
</li>
<li>
<a href="http://www.search-this.com/2008/04/21/greasing-gmail/">Greasing Gmail</a>
</li>
<li>
<a href="http://www.search-this.com/2008/04/09/css-an-absolute-mess/">CSS - An Absolute Mess</a>
</li>
<li>
<a href="http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/">Scrolling, Scrolling, Scrolling</a>
</li>
<li>
<a href="http://www.search-this.com/2008/03/03/how-to-promote-your-blog-so-what/">How to Promote Your Blog - So What?</a>
</li>
<li>
<a href="http://www.search-this.com/2008/02/13/disjointed-css/">Disjointed CSS </a>
</li>
<li>
<a href="http://www.search-this.com/2008/01/28/random-bits-podcast-with-jonathan-snook-part-1/">Random Bits Podcast with Jonathan Snook, Part 1</a>
</li>
<li>
<a href="http://www.search-this.com/2008/01/07/random-bits-podcast-with-yaro-starak/">Random Bits Podcast with Yaro Starak</a>
</li>
<li>
<a href="http://www.search-this.com/2008/02/06/web-developer-crossword-puzzle/">Web Developer Crossword Puzzle</a>
</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=6Y0UMPBpIrY:xLDdRpV_RpQ:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=6Y0UMPBpIrY:xLDdRpV_RpQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=6Y0UMPBpIrY:xLDdRpV_RpQ:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=6Y0UMPBpIrY:xLDdRpV_RpQ:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2009/01/02/articles-you-may-have-missed-in-2008-but-shouldnt-have/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2009/01/02/articles-you-may-have-missed-in-2008-but-shouldnt-have/</feedburner:origLink></item>
		<item>
		<title>What to Get Your Geek for Christmas 2008</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/M2mNdsRNsrw/</link>
		<comments>http://www.search-this.com/2008/11/29/what-to-get-your-geek-for-christmas-2008/#comments</comments>
		<pubDate>Sat, 29 Nov 2008 17:42:16 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Entertainment]]></category>
		<category><![CDATA[Stuff]]></category>
		<category><![CDATA[Website Tools]]></category>
		<category><![CDATA[christmas]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=738</guid>
		<description><![CDATA[It’s the most wonderful time of the year… 
Yep it’s that time of the year again, time to go shopping for that special geek you love. Here are a handful of gifts any geek is sure to love.
ATI Radeon HD 4870-X2 DDR5 2GB PCI-Express x16

This video card is smoking fast. Right now it’s the fastest [...]]]></description>
			<content:encoded><![CDATA[<p><em>It’s the most wonderful time of the year… </em><br />
Yep it’s that time of the year again, time to go shopping for that special geek you love. Here are a handful of gifts any geek is sure to love.</p>
<h2><a href="http://www.newegg.com/Product/Product.aspx?Item=N82E16814102768">ATI Radeon HD 4870-X2 DDR5 2GB PCI-Express x16</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/ati-radeon-4870.jpg" alt="ATI Radeon 4870 x2" title="ati-radeon-4870" class="size-full wp-image-739" width="278" align="left" height="134"></p>
<p>This video card is smoking fast. Right now it’s the fastest card on the market. Pick up one of these, or two in crossfire mode and play Call of Duty 4 and feel like you’re right there in the action! I have one on my new rig and oh man does it make CoD4 look great!</p>
<div class="clearfix"></div>
<h2><a href="http://pc.ign.com/objects/818/818215.html">Left 4 Dead</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/left-4-dead.jpg" alt="Left 4 Dead" title="left-4-dead" class="size-full wp-image-740" width="160" align="right" height="233"></p>
<p>For starters it’s Valve. Not enough? Well you get to kill Zombies! That’s always fun. Lots and lots of zombies. And you can play in co-op mode with 3 of your buddies. Setting out to do for co-op gaming what Counter-Strike did for team combat, Left 4 Dead is an ambitious survival horror game. Running on the Source engine, Left 4 Dead leaves four armed survivors of a world overrun with zombies, and they must fight their way out to escape the outbreak. It’s a blast. It’s like I’m Will Smith in <em>I am Legend</em>.</p>
<div class="clearfix"></div>
<h2><a href="http://gear.ign.com/articles/926/926024p1.html">Captain Kirk’s Replica Chair</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/captains-chair.jpg" alt="Captains Chair" title="captains-chair" class="size-full wp-image-741" width="276" align="left" height="139"></p>
<p>“Kirk to bridge, someone………has…….stolen my……..chair.” And for the right price, that person can be you. Trekkies across the globe practically drowned in their own geekdom when it was first reported that Diamond Select, a popular sci-fi and comic toy store, was planning on releasing a life-sized Original Series captain’s chair for purchase.</p>
<div class="clearfix"></div>
<h2><a href="http://www.amazon.com/Sony-DPF-D70-7-inch-Digital-Photo/dp/B0013A12H6/ref=sr_1_8?ie=UTF8&amp;s=photo&amp;qid=1227675394&amp;sr=1-8">Sony Photo Frame</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/sony-frame.jpg" alt="" title="sony-frame" class="alignnone size-full wp-image-742" width="245" align="right" height="178"></p>
<p>Now you can display your digital photo collection in breathtakingly vivid color–on a Sony Digital Photo Frame. Choose from a variety of slide show options, and watch your photo memories come to life on this stylish frame. And when not displaying images, you can set it to one of its clock or calendar modes–making it a great addition to any home or office.</p>
<div class="clearfix"></div>
<h2><a href="http://www.amazon.com/gp/product/B000UHE8YM/ref=s9sdps_c1_23_at2-rfc_p-frt_p-3237_p_si1?pf_rd_m=ATVPDKIKX0DER&amp;pf_rd_s=center-1&amp;pf_rd_r=1SA0ACBRVVP2BN1NRFG9&amp;pf_rd_t=101&amp;pf_rd_p=463383351&amp;pf_rd_i=507846">Logitech G15 Gaming Keyboard</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/keyboard.jpg" alt="" title="Keyboard" class="alignnone size-full wp-image-743" width="300" align="left" height="207"></p>
<p>Good intel and proper gear are the keys to victory. With the Logitech G15 keyboard, you get both. Now you can easily discover on which server your friends are playing Battlefield 2142, be notified when your World of Warcraft battleground becomes available and know exactly who’s talking in Ventrilo with the Logitech G15 keyboard’s exclusive GamePanel LCD. You can also create useful macros on the fly that play back with a single press of one of the six G keys. As every key features illuminated characters, with three levels of brightness, you can keep playing late into the night.</p>
<div class="clearfix"></div>
<h2><a href="http://www.amazon.com/Iron-Ultimate-Two-Disc-Live-Blu-ray/dp/B001GAPC1K/ref=sr_tr_bbs_sr_1?ie=UTF8&amp;s=dvd&amp;qid=1227674407&amp;sr=8-1">Iron Man (Ultimate Two-Disc Edition Blu-ray)</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/ironman.jpg" alt="" title="ironman" class="alignnone size-full wp-image-744" width="137" align="right" height="177"></p>
<p>While I don’t have a blu-ray player yet. If I did this would be the first movie that I pick up. This movie was so fun to watch and the effects were just perfect. I would love to watch this on a nice 1080p screen. Hint hint Santa…</p>
<p>Any word of The Avengers movie?</p>
<div class="clearfix"></div>
<h2><a href="http://www.amazon.com/Band-Brothers-Blu-ray-John-Adams/dp/B00129H7VS/ref=sr_1_1?ie=UTF8&amp;s=dvd&amp;qid=1227674544&amp;sr=1-1">Band of Brothers (Blu-ray)</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/band-of-brothers.jpg" alt="" title="band-of-brothers" class="alignnone size-full wp-image-745" width="134" align="left" height="150"></p>
<p>This is a movie series that everyone should own. It should be required viewing material for all. It leaves you humbled and grateful for the men and women who have sacrificed so that we may enjoy the freedoms that we have. </p>
<div class="clearfix"></div>
<h2><a href="http://www.newegg.com/Product/Product.aspx?Item=N82E16819115200">Intel Core i7 Extreme Edition Quad-Core Processor</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/intel-i7.jpg" alt="" title="intel-i7" class="alignnone size-full wp-image-746" width="129" height="188" align="right" ></p>
<p>Conquer the world of extreme gaming with the fastest performing processor on the planet: the Intel® Core™ i7 processor Extreme Edition: 3.20 GHz core speed, 8 processing threads with Intel HT technology, 8 MB of Cache and 3 Channels of DDR3 1066 MHz memory. This is the fastest processor that money can buy. It’s not cheap, but with great power comes… a really big price tag. </p>
<div class="clearfix"></div>
<h2><a href="http://www.newegg.com/Product/Product.aspx?Item=N82E16883227118">iBUYPOWER Gamer Supreme 962i Intel Core i7 920(2.66GHz) 6GB DDR3 500GB NVIDIA GeForce GTX 260</a></h2>
<p><img src="http://www.search-this.com/wp-content/uploads/2008/11/ibuypower.jpg" alt="" title="ibuypower" class="alignnone size-full wp-image-747" width="145" height="145" align="left" ><br />
I just purchased a new computer from <a href="http://www.ibuypower.com/">ibuypower</a> and am loving it. They don't have the best customer service, but they do build great computers and for great prices. The computer I got is smoking and for about half the price you would pay on Dell. If you're in the market for a new gaming rig and you don't feel like building it yourself, the take a look at ibuypower and see what you think.</p>
<div class="clearfix"></div>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=M2mNdsRNsrw:MTpWwiJSi4E:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=M2mNdsRNsrw:MTpWwiJSi4E:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=M2mNdsRNsrw:MTpWwiJSi4E:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=M2mNdsRNsrw:MTpWwiJSi4E:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2008/11/29/what-to-get-your-geek-for-christmas-2008/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2008/11/29/what-to-get-your-geek-for-christmas-2008/</feedburner:origLink></item>
		<item>
		<title>Lijit’s Integration with WordPress</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/KHozlxFbM2Q/</link>
		<comments>http://www.search-this.com/2008/11/03/lijits-integration-with-wordpress/#comments</comments>
		<pubDate>Mon, 03 Nov 2008 17:54:46 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Website Tools]]></category>
		<category><![CDATA[lijit]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=732</guid>
		<description><![CDATA[
I spoke to you back in January about Lijit. Remember I showed you that Lijit allows you to easily create your own search engine. One that searches your blog, bookmarks, photos, blogroll, and more. 
I really liked Lijit then but I was disappointed that I couldn't integrate the Lijit search functionality into WordPress. That is [...]]]></description>
			<content:encoded><![CDATA[<p><img src='http://www.search-this.com/wp-content/uploads/2007/12/lijit.png' alt='lijit.png' align='left' style='padding-right:10px' width='179' height='128' /></p>
<p>I spoke to you back in January about <a href="http://www.search-this.com/2008/01/02/lijit-is-cool/">Lijit</a>. Remember I showed you that Lijit allows you to easily create your own search engine. One that searches your blog, bookmarks, photos, blogroll, and more. </p>
<p>I really liked Lijit then but I was disappointed that I couldn't integrate the Lijit search functionality into WordPress. That is let Lijit take over my search box that was already there and is ALREADY there in just about every other blog too. Instead you had to put a widget on your page. I felt like this was such a mistake I actually went to visit Lijit in Boulder and told them so. Well I'm happy to say that they have listened and now allow you to let their search take over your search box. Here's what they say:</p>
<blockquote><p>Lijit's integration with WordPress.org just keeps getting better! Now you can either install the Lijit Search widget OR have Lijit power your existing WordPress search box. As if that weren’t exciting enough, our Lijit stats will automatically display within your WordPress dashboard for one-stop stats viewing too.
</p></blockquote>
<p>Go ahead and have a look, try the search located in the top left corner....</p>
<p>If you like it you can find the <a href="http://wordpress.org/extend/plugins/wp-lijit-wijit/">Lijit WordPress plugin here</a>.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=KHozlxFbM2Q:ZU2JtrtM4iM:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=KHozlxFbM2Q:ZU2JtrtM4iM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=KHozlxFbM2Q:ZU2JtrtM4iM:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=KHozlxFbM2Q:ZU2JtrtM4iM:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2008/11/03/lijits-integration-with-wordpress/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2008/11/03/lijits-integration-with-wordpress/</feedburner:origLink></item>
		<item>
		<title>Free Reference Sheets</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/lfZGdTWrPEI/</link>
		<comments>http://www.search-this.com/2008/10/27/free-reference-sheets/#comments</comments>
		<pubDate>Tue, 28 Oct 2008 03:28:30 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Website Tools]]></category>
		<category><![CDATA[reference sheets]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=735</guid>
		<description><![CDATA[Thanks to the people over at DZone for creating free cheat sheets for developers. They have created some really nice reference sheets for just about everything web related: Ajax, C#, ASP.NET, Springs, PHP, Java, Struts, IntelliJ IDEA, Design Patterns, jQuery Selectors, CSS and many more.
Each sheet is done by a respected professional in that discipline [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.search-this.com/wp-content/uploads/2008/10/5358.png" alt="" title="Reference Sheet" width="206" height="266" class="alignleft size-full wp-image-737" style="padding-right:8px;" />Thanks to the people over at <a href="http://www.dzone.com/links/index.html">DZone</a> for creating <strong><a href="http://refcardz.dzone.com/">free cheat sheets for developers</a></strong>. They have created some really nice reference sheets for just about everything web related: Ajax, C#, ASP.NET, Springs, PHP, Java, Struts, IntelliJ IDEA, Design Patterns, jQuery Selectors, CSS and many more.</p>
<p>Each sheet is done by a respected professional in that discipline -- Jon Skeet, author of <em>C# in Depth</em> did the C# sheet and Molly Holzschlag, author of <em>The Zen of CSS Design</em> did the CSS sheet. Of course these sheets aren't intended to teach you, but simply there to aid you in those things that you usually end up looking up. </p>
<p>So far I have downloaded the C#, ASP.NET and jQuery sheets. They're handy and they're free, what else do you need to know than that. Enjoy.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=lfZGdTWrPEI:n-F4QYpAcqs:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=lfZGdTWrPEI:n-F4QYpAcqs:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=lfZGdTWrPEI:n-F4QYpAcqs:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=lfZGdTWrPEI:n-F4QYpAcqs:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2008/10/27/free-reference-sheets/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2008/10/27/free-reference-sheets/</feedburner:origLink></item>
		<item>
		<title>New Job at a Web Dev Agency!</title>
		<link>http://feedproxy.google.com/~r/search-this/~3/hFYy8BlWHhc/</link>
		<comments>http://www.search-this.com/2008/10/22/new-job-at-a-web-dev-agency/#comments</comments>
		<pubDate>Wed, 22 Oct 2008 16:51:45 +0000</pubDate>
		<dc:creator>Golgotha</dc:creator>
				<category><![CDATA[Search Engine Optimization]]></category>

		<guid isPermaLink="false">http://www.search-this.com/?p=733</guid>
		<description><![CDATA[
After seven years of being a software developer I have finally done it - I've joined a web agency! On November 3rd I will be joining Malenke &#124; Barnhart here in Denver. I'm pretty excited about it. It looks like a real fun place to work, Xbox 360 on down time, dress however you want [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.search-this.com/wp-content/uploads/2008/10/mb.jpg" alt="" title="MB" width="243" height="154" class="alignleft size-full wp-image-734" /></p>
<p>After seven years of being a software developer I have finally done it - I've joined a web agency! On November 3rd I will be joining <a href="http://www.mbarnhart.com/"><strong>Malenke | Barnhart</strong></a> here in Denver. I'm pretty excited about it. It looks like a real fun place to work, Xbox 360 on down time, dress however you want and drink beer on Fridays. All while producing incredible top quality work. Here is some of their work:</p>
<ul>
<li><a href="http://www.denver.org/">Denver.org</a></li>
<li><a href="http://www.compareford.com/regionSelector.php">Ford</a></li>
<li><a href="http://www.denverzoo.org/">Denver Zoo</a></li>
<li><a href="http://www.howmuchshakecanyoutake.com/ ">Quiznos</a></li>
<li><a href="http://www.girlscoutsofcolorado.org/">Girl Scouts</a></li>
</ul>
<p>So for those of you that have worked for an agency before, do you have any advice for me?</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/search-this?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/search-this?i=hFYy8BlWHhc:xBnhXj21Sro:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/search-this?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/search-this?i=hFYy8BlWHhc:xBnhXj21Sro:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/search-this?i=hFYy8BlWHhc:xBnhXj21Sro:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/search-this?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/search-this?a=hFYy8BlWHhc:xBnhXj21Sro:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/search-this?d=l6gmwiTKsz0" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.search-this.com/2008/10/22/new-job-at-a-web-dev-agency/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://www.search-this.com/2008/10/22/new-job-at-a-web-dev-agency/</feedburner:origLink></item>
	</channel>
</rss><!-- Dynamic page generated in 7.269 seconds. --><!-- Cached page generated by WP-Super-Cache on 2010-03-13 03:02:10 -->
