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

<channel>
	<title>Winn &#187; Development</title>
	<atom:link href="http://winn.ws/archives/category/development/feed" rel="self" type="application/rss+xml" />
	<link>http://winn.ws</link>
	<description>Standards-based design &#38; development</description>
	<lastBuildDate>Wed, 01 Feb 2012 05:30:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Payflow with Rails</title>
		<link>http://winn.ws/archives/1024</link>
		<comments>http://winn.ws/archives/1024#comments</comments>
		<pubDate>Wed, 01 Feb 2012 05:30:15 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=1024</guid>
		<description><![CDATA[I have been working with the PayPal Payflow and a gem called ActiveMerchant. I had the need to basicly create models around the payment system. This ment when i am talking to the ActiveRecord model I will always be talking to ActiveMerchant (Payflow). This can be done by simply calling ActiveMerchant every time you need [...]]]></description>
			<content:encoded><![CDATA[<p>I have been working with the PayPal Payflow and a gem called <a href="http://activemerchant.org/">ActiveMerchant</a>. I had the need to basicly create models around the payment system. This ment when i am talking to the ActiveRecord model I will always be talking to ActiveMerchant (Payflow).</p>
<p>This can be done by simply calling ActiveMerchant every time you need it in the controller but the models again will never be updated without going to ActiveMerchant. So to keep my controllers looking clean here is what i did.</p>
<h3>Dirty Controller</h3>
<p>I have two models:</p>
<ul>
<li><strong>Profile</strong></li>
<li><strong>Payments</strong></li>
</ul>
<p>Profile relates to the recurring profile i am creating in Payflow and Payment relates to one time purchases. My controller as of now was making a request to payflow to look up the profile id then update it if needed. Then it would make another request to add another profile if the user needed more then one (in this case the user can have up to 4 profiles). On top of all the payflow requests I also needed to create and or update the database. So the controller method started to get a little crowded.</p>
<h3>Clean Controller</h3>
<p>To solve this issue and clean up my controller i simply moved the payflow request directly into the model. I took advantage of using <code> before_validation </code> to make a call to a method inside the model on create. The method looks something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> create_profile
        response = Activemerchant.<span style="color:#9900CC;">gateway</span>.<span style="color:#9900CC;">recurring</span><span style="color:#006600; font-weight:bold;">&#40;</span>price, <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">card</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>:starting_at <span style="color:#006600; font-weight:bold;">=&gt;</span> start, <span style="color:#ff3333; font-weight:bold;">:periodicity</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">frequency</span>, <span style="color:#ff3333; font-weight:bold;">:comment</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">comment</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        <span style="color:#9966CC; font-weight:bold;">if</span> !response.<span style="color:#9900CC;">success</span>?
            <span style="color:#CC0066; font-weight:bold;">raise</span> <span style="color:#CC00FF; font-weight:bold;">StandardError</span>, response.<span style="color:#9900CC;">message</span>
        <span style="color:#9966CC; font-weight:bold;">else</span>
            <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">profile_id</span> = response.<span style="color:#9900CC;">profile_id</span>
        <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>So now in one swoop i was able to make the ActiveMerchant and DB calls all in the model. In the method above i am simply making the payflow call then if the response is successful i am assigning the profile_id then saving in my controller.</p>
<p><strong>NOTE:</strong> i do have &#8216;validates :profile_id, :presence => true&#8217; so if the request to payflow failed it will not pass validation thus kicking and error back to the user letting them know.</p>
<p>So the solution is not really the &#8220;Rails way&#8221; but i believe it is the best way to handel this need. If you have questions regarding this or need more information on how to do something like this yourself&#8230; Let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/1024/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Upgrade rails</title>
		<link>http://winn.ws/archives/1009</link>
		<comments>http://winn.ws/archives/1009#comments</comments>
		<pubDate>Fri, 06 Jan 2012 03:29:20 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=1009</guid>
		<description><![CDATA[Upgrade rails 3.0.x to 3.1 In a small project I am working on with a friend i needed to upgrade the rails 3.0.3 application to a rails 3.1.1 application. This is very simple but can create some issues with your config files and any other core files you have edited. First we need to change your GemFile: [...]]]></description>
			<content:encoded><![CDATA[<h3>Upgrade rails 3.0.x to 3.1</h3>
<p>In a small project I am working on with a friend i needed to upgrade the rails 3.0.3 application to a rails 3.1.1 application. This is very simple but can create some issues with your config files and any other core files you have edited.</p>
<p>First we need to change your GemFile:</p>
<p>From</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">gem <span style="color:#996600;">'rails'</span>, <span style="color:#996600;">'3.0.3'</span></pre></div></div>

<p>to</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">gem <span style="color:#996600;">'rails'</span>, <span style="color:#996600;">'3.1.1'</span></pre></div></div>

<p>Next we need to install any missing gems by running:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">bundle update</pre></div></div>

<p>Then we finish by updating rails, NOTE this is the time where you need to make sure you have copy&#8217;s of your edited config files. This command will give you the option to overwrite your config files.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">rake rails:update</pre></div></div>

<blockquote><p>After cherry picking though the change conflicts I ran all my tests and they passed. I restarted the server and everything works!</p></blockquote>
<p>Hope this helped anyone upgrading your rails app!</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/1009/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Getting started with Netflix API</title>
		<link>http://winn.ws/archives/955</link>
		<comments>http://winn.ws/archives/955#comments</comments>
		<pubDate>Wed, 14 Sep 2011 05:50:13 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Netflix]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=955</guid>
		<description><![CDATA[Netflix API I am sure all of us know what Netflix is and may use it every day. Did you know Netflix has an API allowing developers like myself to harness the power of Netflix in any application? Well in a recent project I have been working very closely with this API, so i am [...]]]></description>
			<content:encoded><![CDATA[<h3>Netflix API</h3>
<p>I am sure all of us know what Netflix is and may use it every day. Did you know Netflix has an API allowing developers like myself to harness the power of Netflix in any application? Well in a recent project I have been working very closely with this API, so i am going to show you some basics for connecting to this API via Ruby on Rails, the OAuth gem and Crack gem.</p>
<p><span id="more-955"></span></p>
<h3>Getting Started</h3>
<p>First things first, you must register your application with Netflix <a target="_blank" href="http://developer.netflix.com/">here</a>. Now that you&#8217;re all registered you can start the fun stuff.</p>
<h3>Gems</h3>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">gem <span style="color:#996600;">&quot;oauth&quot;</span>
gem <span style="color:#996600;">&quot;crack&quot;</span>, <span style="color:#ff3333; font-weight:bold;">:require</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;crack/xml&quot;</span></pre></div></div>

<p>For my application I had to create a library for the Rails app, as there are just no good Netflix gems available. So first i started with authentication, below is how i setup my library.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> Netflix
&nbsp;
    <span style="color:#9966CC; font-weight:bold;">def</span> initialize<span style="color:#006600; font-weight:bold;">&#40;</span>user<span style="color:#006600; font-weight:bold;">&#41;</span>
        <span style="color:#0066ff; font-weight:bold;">@user</span> = user
        <span style="color:#0066ff; font-weight:bold;">@token</span> = <span style="color:#6666ff; font-weight:bold;">OAuth::Token</span>.<span style="color:#9900CC;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span>@user.<span style="color:#9900CC;">netflix_accesstoken</span>, <span style="color:#0066ff; font-weight:bold;">@user</span>.<span style="color:#9900CC;">netflix_accesstokensecret</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
    <span style="color:#9966CC; font-weight:bold;">def</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">consumer</span>
          <span style="color:#0066ff; font-weight:bold;">@consumer</span> = <span style="color:#6666ff; font-weight:bold;">OAuth::Consumer</span>.<span style="color:#9900CC;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;token&quot;</span>, <span style="color:#996600;">&quot;secret&quot;</span>, 
                    <span style="color:#006600; font-weight:bold;">&#123;</span>:site <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;http://api.netflix.com&quot;</span>,
                    <span style="color:#ff3333; font-weight:bold;">:request_token_url</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;http://api.netflix.com/oauth/request_token&quot;</span>,
                    <span style="color:#ff3333; font-weight:bold;">:access_token_url</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;http://api.netflix.com/oauth/access_token&quot;</span>,
                    <span style="color:#ff3333; font-weight:bold;">:authorize_url</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;https://api-user.netflix.com/oauth/login&quot;</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></td></tr></table></div>

<p>Now we are able to make a call and connect to Netflix by simply calling the library (after requiring it into our controller).</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> index
   netflix = Netflix.<span style="color:#9900CC;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span>@user<span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Now we have an instance of &#8220;Netflix&#8221; authenticated and ready to make a call to the API. So now I added a simple method call info, this method would allow me to get any information about the Netflix user that was returned. NOTE all Netflix responses are in XML so this is where Crack comes into play.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> info
        response = Netflix.<span style="color:#9900CC;">consumer</span>.<span style="color:#9900CC;">request</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:get</span>, <span style="color:#996600;">&quot;/users/#{@user.netflix_id}&quot;</span>, <span style="color:#0066ff; font-weight:bold;">@token</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>:scheme <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:query_string</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        user = <span style="color:#6666ff; font-weight:bold;">Crack::XML</span>.<span style="color:#9900CC;">parse</span><span style="color:#006600; font-weight:bold;">&#40;</span>response.<span style="color:#9900CC;">body</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        <span style="color:#0000FF; font-weight:bold;">return</span> user<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;user&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span>
 <span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Now we can simply call:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> index
   netflix = Netflix.<span style="color:#9900CC;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span>@user<span style="color:#006600; font-weight:bold;">&#41;</span>
   <span style="color:#0066ff; font-weight:bold;">@user_info</span> = netflix.<span style="color:#9900CC;">info</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<h3>More later</h3>
<p>I will have more about the Netflix API soon, the above covers the basics of using it and getting information back. Next time i hope to cover the login and register process for getting the Netflix users token and secret for use later.</p>
<p>More information can be found at the <a href="http://developer.netflix.com/" target="_blank">Netflix Developer center</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/955/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery back button</title>
		<link>http://winn.ws/archives/951</link>
		<comments>http://winn.ws/archives/951#comments</comments>
		<pubDate>Sun, 31 Jul 2011 20:30:44 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Jquery]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=951</guid>
		<description><![CDATA[Ever needed to create a back button that acts like the browser back button? I rarely need this but in a latest project for an online assessment it was needed to allow the user to go back and look at the assessment content. I was using both jQuery and jQuery UI, so I will also [...]]]></description>
			<content:encoded><![CDATA[<p>Ever needed to create a back button that acts like the browser back button? I rarely need this but in a latest project for an online assessment it was needed to allow the user to go back and look at the assessment content. I was using both jQuery and jQuery UI, so I will also explain the class &#8220;button&#8221; along with &#8220;back&#8221;.<br />
<span id="more-951"></span></p>
<h3>The code</h3>
<p>Let&#8217;s cover the jQuery first.

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.button&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">button</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.back'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		parent.<span style="color: #660066;">history</span>.<span style="color: #000066;">back</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Now the HTML</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;a class=&quot;button back&quot; href=&quot;#&quot;&gt;Back&lt;/a&gt;</pre></div></div>

<p>The above back link/button is now a functioning back button. Make sure you include both jQuery and jQuery UI.</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/951/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Models in Skoot</title>
		<link>http://winn.ws/archives/945</link>
		<comments>http://winn.ws/archives/945#comments</comments>
		<pubDate>Sat, 16 Jul 2011 17:33:58 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Platforms]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Skoot]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=945</guid>
		<description><![CDATA[Models are the &#8220;M&#8221; in &#8220;MVC&#8221;, and play a key roll in keeping your separation.What I will be covering here can be taken to most PHP frameworks with a little tweak. Below I will cover how to use the Models in the Skoot PHP framework. First a little about Skoot: This small but powerful PHP [...]]]></description>
			<content:encoded><![CDATA[<p>Models are the &#8220;M&#8221; in &#8220;MVC&#8221;, and play a key roll in keeping your separation.What I will be covering here can be taken to most PHP frameworks with a little tweak.</p>
<p>Below I will cover how to use the Models in the Skoot PHP framework. First a little about Skoot:</p>
<p>This small but powerful PHP “micro” framework is a result from another  project. I started using a “micro” framework called NiceDog, NiceDog is a  very cool little one file framework that is super simple to use and get  started with. It lacks the basic needs such as a database layer and  theme helpers but it’s great to use for projects that don’t need a full  framework with all the bells and whistles.</p>
<p>The name Skoot comes from my dog “Skooter” he’s a little black MinPin.  The Skoot framework adds the basic database layer and layout functions  into NiceDog making it more powerful and giving you a big jump start on  any small project.</p>
<h3>Let&#8217;s Start</h3>
<p>Looking into the basic setup the &#8220;welcome&#8221; controller we will see no reference to the model in any way. We can simple do that by building a construct:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> Welcome<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">UsersModel</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> User<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Above we are making a call to the Users model from the welcome controller. You can now access any of your model actions from &#8220;$this-&gt;UserModel-&gt;ACTION&#8221;. Let look at how to make sure the model is usable and of correct setup.</p>
<h3>The Model</h3>
<p>Below is how to construct a model in Skoot PHP framework:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">class</span> Users <span style="color: #000000; font-weight: bold;">extends</span> M <span style="color: #009900;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">function</span> test<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
      <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Test&quot;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>All models extend the class &#8220;M&#8221;, just like controllers extend &#8220;C&#8221;.</p>
<p>Now lets make a call to the model from the controller:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> index<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
   <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">UsersModel</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">test</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>The above output would be &#8220;Test&#8221;.</p>
<h3>Don&#8217;t have Skoot?</h3>
<ul>
<li><a href="http://github.com/gregwinn/Skoot">Get Skoot!</a></li>
<li><a href="http://github.com/gregwinn/Skoot/wiki">Skoot Docs</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/945/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Capistrano and PHP</title>
		<link>http://winn.ws/archives/924</link>
		<comments>http://winn.ws/archives/924#comments</comments>
		<pubDate>Wed, 01 Jun 2011 14:30:17 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=924</guid>
		<description><![CDATA[Capistrano loves PHP also! When I say Capistrano to most PHP developer they think Ruby on Rails right away. This is mostly the case because Capistrano got it’s fame from the Rails community. Capistrano has been good to thousands and thousands of Rails developers so why can it do the same for a PHP developer [...]]]></description>
			<content:encoded><![CDATA[<p><img title="PHP" alt="Capistrano" src="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2011/01/phpicon.jpg" class="codeicon"></p>
<h3>Capistrano loves PHP also!</h3>
<p>When I say Capistrano to most PHP developer they think Ruby on Rails right away. This is mostly the case because Capistrano got it’s fame from the Rails community. Capistrano has been good to thousands and thousands of Rails developers so why can it do the same for a PHP developer here or there? Well i have great news for you, it can.  In fact you can start using it on your current project today!</p>
<p><span id="more-924"></span></p>
<h3>Whats needed to start using Capistrano?</h3>
<p>Well Capistrano runs as a gem on Ruby, so you will need to install Ruby on your system.</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">sudo aptitude install ruby build-essential libopenssl-ruby ruby1.8-dev</pre></div></div>

<p>After you have Ruby installed you can now run a simple command to install one of the greatest gem’s of all time.</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">sudo gem install capistrano</pre></div></div>

<p>Now lets setup Capistrano in your project new or existing. To do so lets just run a simple command in the root directory of your project.</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">capify .</pre></div></div>

<p style="text-align:center;"><script type="text/javascript"><!--
google_ad_client = "pub-9763253940568418";
/* 468x15, created 5/28/10 */
google_ad_slot = "4528267187";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<p>After that lets edit your configuration file; below are the important items you should add or edit.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">ssh_options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:keys</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#006600; font-weight:bold;">%</span>w<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">/</span>Users<span style="color:#006600; font-weight:bold;">/</span>username<span style="color:#006600; font-weight:bold;">/</span>.<span style="color:#9900CC;">ssh</span><span style="color:#006600; font-weight:bold;">/</span>id_rsa<span style="color:#006600; font-weight:bold;">&#41;</span>
default_run_options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:pty</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#0000FF; font-weight:bold;">true</span>
set <span style="color:#ff3333; font-weight:bold;">:use_sudo</span>, <span style="color:#0000FF; font-weight:bold;">true</span>
set <span style="color:#ff3333; font-weight:bold;">:application</span>, <span style="color:#996600;">&quot;App Name&quot;</span>
set <span style="color:#ff3333; font-weight:bold;">:repository</span>,  <span style="color:#996600;">&quot;git@gitpath.git&quot;</span>
set <span style="color:#ff3333; font-weight:bold;">:branch</span>, <span style="color:#996600;">&quot;master&quot;</span>
&nbsp;
set <span style="color:#ff3333; font-weight:bold;">:scm</span>, <span style="color:#ff3333; font-weight:bold;">:git</span>
<span style="color:#008000; font-style:italic;"># Or: `accurev`, `bzr`, `cvs`, `darcs`, `git`, `mercurial`, `perforce`, `subversion` or `none`</span>
&nbsp;
role <span style="color:#ff3333; font-weight:bold;">:web</span>, <span style="color:#996600;">&quot;url.com&quot;</span>                          <span style="color:#008000; font-style:italic;"># Your HTTP server, Apache/etc</span>
role <span style="color:#ff3333; font-weight:bold;">:app</span>, <span style="color:#996600;">&quot;url.com&quot;</span>                          <span style="color:#008000; font-style:italic;"># This may be the same as your `Web` server</span>
&nbsp;
set <span style="color:#ff3333; font-weight:bold;">:deploy_to</span>, <span style="color:#996600;">&quot;/var/www/app&quot;</span>
&nbsp;
namespace <span style="color:#ff3333; font-weight:bold;">:apache</span> <span style="color:#9966CC; font-weight:bold;">do</span>
  <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:stop</span>, <span style="color:#ff3333; font-weight:bold;">:start</span>, <span style="color:#ff3333; font-weight:bold;">:restart</span>, <span style="color:#ff3333; font-weight:bold;">:reload</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>action<span style="color:#006600; font-weight:bold;">|</span>
    desc <span style="color:#996600;">&quot;#{action.to_s.capitalize} Apache&quot;</span>
    task action, <span style="color:#ff3333; font-weight:bold;">:roles</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:web</span> <span style="color:#9966CC; font-weight:bold;">do</span>
      invoke_command <span style="color:#996600;">&quot;/etc/init.d/apache2 #{action.to_s}&quot;</span>, <span style="color:#ff3333; font-weight:bold;">:via</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> run_method
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<h3>Now it’s time!</h3>
<p>Run the following command to setup the directory structure.</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">cap deploy:setup</pre></div></div>

<h3>Now lets deploy your code!</h3>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">cap deploy:cold</pre></div></div>

<h3>What about updates?</h3>
<p>Well cap will let you take care of this by simply running update like so:</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family:monospace;">cap deploy:update</pre></div></div>

<p>Want more? Checkout this older post: <a href="http://wiki.ocssolutions.com/Step-by-step_setup_using_Capistrano_2.0_and_Mongrel">http://wiki.ocssolutions.com/Step-by-step_setup_using_Capistrano_2.0_and_Mongrel</a></p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/924/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Codeigniter Views</title>
		<link>http://winn.ws/archives/919</link>
		<comments>http://winn.ws/archives/919#comments</comments>
		<pubDate>Wed, 04 May 2011 02:50:05 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[CodeIgniter]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=919</guid>
		<description><![CDATA[Multiple views! Did you know you can load multiple views in a Codeigniter controller method? I have always believed it was one view to one action, but that is not the case! CodeIgniter will intelligently handle multiple calls to $this->load->view from within a controller. If more than one call happens they will be appended together. [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2011/01/phpicon.jpg" class="codeicon" alt="php"></p>
<h3>Multiple views!</h3>
<p>Did you know you can load multiple views in a Codeigniter controller method? I have always believed it was one view to one action, but that is not the case! CodeIgniter will intelligently handle multiple calls to $this->load->view from within a controller. If more than one call happens they will be appended together. For example, you may wish to have a header view, a menu view, a content view, and a footer view. </p>
<p><span id="more-919"></span></p>
<h4>Example:</h4>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> Page <span style="color: #000000; font-weight: bold;">extends</span> CI_Controller <span style="color: #009900;">&#123;</span>
&nbsp;
   <span style="color: #000000; font-weight: bold;">function</span> anypage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
   <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$data</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'page_title'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'Title'</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'header'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'nav'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'content'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$data</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'footer'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>To make this easier you can store views within sub folders.</p>
<h3>Storing Views within Sub-folders</h3>
<p>Your view files can also be stored within sub-folders if you prefer that type of organization. When doing so you will need to include the folder name loading the view.</p>
<h4>Example:</h4>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'folder_name/view_name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Thanks for reading, hope this helped!</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/919/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Skoot PHP Framework</title>
		<link>http://winn.ws/archives/905</link>
		<comments>http://winn.ws/archives/905#comments</comments>
		<pubDate>Sat, 05 Mar 2011 05:26:19 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=905</guid>
		<description><![CDATA[Skoot a micro framework This small but powerful PHP “micro” framework is a result from another project. I started using a “micro” framework called NiceDog. NiceDog is a very cool little one file framework that is super simple to use and get started with. It lacks the basic needs such as a database layer and [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2011/01/phpicon.jpg" class="codeicon" alt="php"></p>
<h3>Skoot a micro framework</h3>
<p>This small but powerful PHP “micro” framework is a result from another project. I started using a “micro” framework called NiceDog. NiceDog is a very cool little one file framework that is super simple to use and get started with. It lacks the basic needs such as a database layer and theme helpers but it’s great to use for projects that don’t need a full framework with all the bells and whistles.</p>
<p><span id="more-905"></span><br />
<a class="colorbox" href="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2010/06/skooter_large.jpg"><img src="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2010/06/skooter_75.jpg" class="codeicon" alt="Skoot" /></a></p>
<p>The name Skoot comes from my dog “Skooter” he’s a little black MinPin. The Skoot framework adds the basic database layer and layout functions into NiceDog making it more powerful and giving you a big jump start on any small project.</p>
<h3 class="clear">Getting started</h3>
<p>After you take a look at the demo code provided in the checkout over at Github you will quickly see that is very easy to use. Creating new methods is as simple as adding a new function like so:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> index<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">layout_tamplate</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'views/layouts/welcome.php'</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">render</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'views/welcome/index.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h4>Database layer</h4>
<p>The database layer is much like codeigniter&#8217;s. So if your a CI fan like i am then you&#8217;ll quickly understand. Below are some basic methods:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// A basic select</span>
<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">db</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">select</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'*'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">from</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'users'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$query</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">db</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getQuery</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// A more complex query:</span>
<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">db</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">select</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'*'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">from</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'users'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">where</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'status'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><a href="https://github.com/gregwinn/Skoot/wiki/Method-chaining">View more examples here.</a></p>
<p><a href="https://github.com/gregwinn/Skoot">Download the framework and start building!</a></p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/905/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stock info with ystock</title>
		<link>http://winn.ws/archives/893</link>
		<comments>http://winn.ws/archives/893#comments</comments>
		<pubDate>Mon, 14 Feb 2011 05:10:07 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[ystock]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=893</guid>
		<description><![CDATA[A new side project I have been working on is in the financial industry. This project needs to pull stock information such as; price, change, and volume of a any stock. The source i will be getting this information from is Yahoo! Finance. Yahoo produces a cvs file with just the information i need, so it's good news! The next task is to build something i can use over and over, something portable i can take from this project and implement on the next.]]></description>
			<content:encoded><![CDATA[<p><img class="codeicon" src="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2008/02/2ndstepimage.png" alt="Rails Ystock Gem" title="Ruby on Rails"  /></p>
<h3>Gem Ystock</h3>
<p>A new side project I have been working on is in the financial industry. This project needs to pull stock information such as; price, change, and volume of a any stock. The source i will be getting this information from is Yahoo! Finance. Yahoo produces a cvs file with just the information i need, so it&#8217;s good news! The next task is to build something i can use over and over, something portable i can take from this project and implement on the next. In rails 3 plugins seem to be old news so i decided on creating a gem named &#8216;ystock&#8217; for Yahoo Stock information. (NOTE: I have no affiliation with Yahoo, this gem simply uses their service)</p>
<p><span id="more-893"></span></p>
<p>The project is hosted with github: <a href="https://github.com/gregwinn/ystock">https://github.com/gregwinn/ystock</a>, and the gem is hosted at RubyGems.org: <a href="http://rubygems.org/gems/ystock">http://rubygems.org/gems/ystock</a>. Below is how to install and use my new gem!</p>
<h4>Install</h4>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> gem <span style="color: #c20cb9; font-weight: bold;">install</span> ystock</pre></div></div>

<p>After installation you can now include this into your Gemfile</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">gem <span style="color:#996600;">'ystock'</span></pre></div></div>

<h4>Usage</h4>
<p><a href="http://github.com/gregwinn/ystock/wiki/Usage">http://github.com/gregwinn/ystock/wiki/Usage</a></p>
<p>After you have installed the gem and included it into your Gemfile you can now start to use ystock.</p>
<p><strong>1.</strong> In a controller you can do the following: </p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> SomeController <span style="color:#006600; font-weight:bold;">&lt;</span> ApplicationController
   <span style="color:#9966CC; font-weight:bold;">def</span> index
      <span style="color:#0066ff; font-weight:bold;">@stock</span> = Ystock.<span style="color:#9900CC;">get_stock</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'appl'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
   <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p><strong>2.</strong> In your view you may display the results:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;p&gt;The price of Apple stock is: $&lt;%=@stock[:price]%&gt;&lt;/p&gt;</pre></div></div>

<h4>Available data</h4>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;%=@stock[:price]%&gt;
&lt;%=@stock[:change]%&gt;
&lt;%=@stock[:volume]%&gt;</pre></div></div>

<p>Thanks for reading, i hope this gem is of use to you in any future projects!</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/893/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Is an element visible?</title>
		<link>http://winn.ws/archives/890</link>
		<comments>http://winn.ws/archives/890#comments</comments>
		<pubDate>Wed, 02 Feb 2011 03:31:38 +0000</pubDate>
		<dc:creator>Greg Winn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Jquery]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://winn.ws/?p=890</guid>
		<description><![CDATA[How to tell if an element is visible with jQuery jQuery makes it easy to determine if an element is visible or hidden with a simple function &#8216;is()&#8217; when used in conjunction with the element and a selector &#8216;:visible&#8217; you can now determine if in fact an element is visible or not. I will cover [...]]]></description>
			<content:encoded><![CDATA[<h3>How to tell if an element is visible with jQuery</h3>
<p>jQuery makes it easy to determine if an element is visible or hidden with a simple function &#8216;is()&#8217; when used in conjunction with the element and a selector &#8216;:visible&#8217; you can now determine if in fact an element is visible or not. I will cover some basic usage examples and show you how I implemented this in my own application.</p>
<p><span id="more-890"></span></p>
<h4>Getting started:</h4>
<p>Let&#8217;s include jquery.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;/js/jquery.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Now that jquery is included we can start using it&#8217;s wonderful magic! Below is some basic html:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;holder&quot;&gt;
  &lt;p id=&quot;warning&quot;&gt;This is a warning!&lt;/p&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<p>Let&#8217;s say we want to detect if #warning is visible or not we would simply call the element, then use the &#8216;is()&#8217; function in conjunction with &#8216;:visible&#8217; like so:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#warning'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">':visible'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'The Warning is visible'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>As you see the alert would pop open and tell us the element is visible. It&#8217;s also very simply to revers the logic and see if it&#8217;s NOT visible:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#warning'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">':visible'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'The Warning is NOT visible'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h4>How I used this</h4>
<p>Well, my example was very similar to how i used this, i was looking for a flash message in rails, if the message was visible to the user then i wanted to to slide up after a few seconds. So i will use the same example above as it&#8217;s very close to mine.</p>
<p style="text-align:center;"><img src="http://d45jz936mo8n8.cloudfront.net/wp-content/uploads/2011/02/visible_howto_jquery.jpg" alt="Is an element visible?" /></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;holder&quot;&gt;
  &lt;p id=&quot;warning&quot;&gt;You have logged in!&lt;/p&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<p>As you see the warning is visible and now below is he JS to handle it:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#warning'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">':visible'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// Delay 5 seconds then slide up</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#warning'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">delay</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'5000'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>You can add &#8216;delay()&#8217; function to almost anything, it beats out having to use a &#8216;setTimeOut&#8217; but that&#8217;s for another post.</p>
]]></content:encoded>
			<wfw:commentRss>http://winn.ws/archives/890/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Database Caching 2/49 queries in 0.013 seconds using disk: basic
Object Caching 621/721 objects using disk: basic
Content Delivery Network via Amazon Web Services: CloudFront: d45jz936mo8n8.cloudfront.net

Served from: winn.ws @ 2012-02-05 06:06:40 -->
