<?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>Blog Smarter &#187; jquery</title>
	<atom:link href="http://mattdunlap.org/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://mattdunlap.org</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 29 Jul 2010 17:32:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>A Sexy, but Evil, Mailchimp Newsletter Popup</title>
		<link>http://mattdunlap.org/website-development/javascript/a-sexy-but-evil-mailchimp-newsletter-popup.html</link>
		<comments>http://mattdunlap.org/website-development/javascript/a-sexy-but-evil-mailchimp-newsletter-popup.html#comments</comments>
		<pubDate>Wed, 21 Jul 2010 18:30:17 +0000</pubDate>
		<dc:creator>Matt Dunlap</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[mailchimp]]></category>
		<category><![CDATA[popup]]></category>

		<guid isPermaLink="false">http://mattdunlap.org/?p=1661</guid>
		<description><![CDATA[If you haven't noticed, I like mailchimp for email newsletters but I'm not a big fan of there "evil popup" option. You don't have a lot of control over the look and feel of it, so I decided to make my own. Plus, I was looking to learn more about Jquery too...]]></description>
			<content:encoded><![CDATA[<p>If you haven&#8217;t noticed, I like <a href="http://mattdunlap.org/internet-business-strategies/email-newsletters/how-to-track-subscribers-with-mailchimp-and-wordpress.html">mailchimp for email newsletters</a> but I&#8217;m not a big fan of their &#8220;evil popup&#8221; option. You don&#8217;t have a lot of control over the look and feel of it, so I decided to make my own. I also want to learn as much as I can about Jquery.</p>
<p>This plugin is built with <a href="http://jquery.com/">Jquery</a> and <a href="http://fancybox.net/">Fancybox</a>. The plugin is very simple. It  sets a timer to display a fancybox with a <a rel="nofollow" href="http://eepurl.com/Cjmv">Mailchimp</a> newsletter subscription form. I use an iframe to display the content in the popup.</p>
<p>Below is the meat of the plugin. So if you want to build this type of popup for a normal website, you can see there is not much to it.</p>
<pre class="brush: plain;">
&lt;script&gt;
jQuery(document).ready(window.setTimeout(&quot;call_script();&quot;, 6000));
function call_script()
{
//the fancybox can take a few arguments for appearance
$.fancybox();
}
&lt;/script&gt;
</pre>
<h2>What is an Evil popup?</h2>
<p><img class="aligncenter size-full wp-image-1739" title="jquery evil popup mailchimp" src="http://mattdunlap.org/wp-content/uploads/2010/07/pop.jpg" alt="jquery evil popup mailchimp" width="640" height="362" /></p>
<p>First of all, I personally don&#8217;t think these types of pop-ups are that evil. Of course, I&#8217;m talking about my popup which only pops up once, then it remembers the visitor as to not appear again. Unless that visitor deletes all their cookies. I completely agree that popups on every page can be very annoying.</p>
<p>I also think that when comparing annoyance to effectiveness, this plugin is well worth it.</p>
<p>Look at the results from when problogger.net author Darren Rowse <a href="http://www.problogger.net/archives/2008/10/23/how-to-drastically-increase-subscriber-numbers-to-your-email-newsletter/">used it on his photography website</a>. Pretty impressive results, but, I have noticed that he doesn&#8217;t have the popup anymore. Another blogger that uses the popup effectively is <a href="http://johnchow.com">John Chow</a>. He swears by it.</p>
<p>Jquery lightbox popups are not as bad as the old javascript popups. First, they look better, and second, all you have to do is click anywhere on the screen to make them disappear.</p>
<h2>But aren&#8217;t you disrespecting your audience with popups?</h2>
<p>I read this in a <a href="http://www.bloggingtips.com/2008/12/05/newsletter-pop-ups/">comment stream about popups</a>. Every website should have goals and if the popup works to achieve your goals, then use it. Of course the main argument is that you should create killer content so that people will WANT to subscribe without being coerced by a &#8220;call to action&#8221; popup. On the other hand, if you make killer content, people will just close the popup and continue to read your website. The benefit is that you have presented them with your main selling point by using the popup.</p>
<div class="quote_box"><strong> Anyhow, if you like it </strong><strong><a href="http://mattdunlap.org/plugins/wp-list-popup.zip">download it here</a></strong><strong>, if you don&#8217;t like it, then don&#8217;t <a href="http://mattdunlap.org/plugins/wp-list-popup.zip">download it here</a></strong><strong>. </strong></div>
<h2>Instructions</h2>
<p>Download, and then activate the plugin. You will need to add your own mailchimp email form. In the plugin folder there is file called &#8220;display.php&#8221; which is the iframe content. You can either edit that file or point the Fancybox to another webpage.</p>
<p>I&#8217;m really interested in your opinion about popups. Have you used them? Do you banish websites that use them? Do you wish you could do multiple popups in the same page???</p>
<p>Leave a comment and let me know</p>
<img src="http://mattdunlap.org/?ak_action=api_record_view&id=1661&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://mattdunlap.org/website-development/javascript/a-sexy-but-evil-mailchimp-newsletter-popup.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Anythingslider Update &#8211; How to display pages instead of posts</title>
		<link>http://mattdunlap.org/website-development/wordpress/anythingslider-update-how-to-display-pages-instead-of-posts.html</link>
		<comments>http://mattdunlap.org/website-development/wordpress/anythingslider-update-how-to-display-pages-instead-of-posts.html#comments</comments>
		<pubDate>Tue, 13 Jul 2010 20:43:38 +0000</pubDate>
		<dc:creator>Matt Dunlap</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[anythingslider]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://mattdunlap.org/?p=1645</guid>
		<description><![CDATA[The Anythingslider WordPress plugin displays the most recent posts by default, but what if you want to display pages instead?]]></description>
			<content:encoded><![CDATA[<p>The Anythingslider WordPress plugin displays the most recent posts by default, but what if you want to display pages instead?</p>
<p>I&#8217;m not going to release another plugin with additional display settings because, I&#8217;m too busy&#8230; But if anyone else wants to jump on the project, I&#8217;m more then happy to add you as a contributor.</p>
<p>If you are unfamiliar with the plugin, you can <a href="http://mattdunlap.org/website-development/wordpress/jquery-anything-slider-plugin-for-wordpress-magazine-themes.html">read about here</a>, and I&#8217;ve already answered one question about how to display <a href="http://mattdunlap.org/website-development/wordpress/how-to-display-images-only-in-the-wordpress-anythingslider.html">images only in the anythingslider</a></p>
<p><strong>I think there are 3 possible ways to do this effectively.</strong></p>
<ol>
<li>use the WordPress function <a href="http://codex.wordpress.org/Function_Reference/get_pages">get_pages</a>();<br />
This is probably all you need. It&#8217;s just like <a href="http://codex.wordpress.org/Template_Tags/get_posts">get_posts</a>, but if I&#8217;m not mistaken it grabs pages instead of posts. I would recommend using this function if you are making a lot of pages that change constantly.<strong>This should do the trick. Just change get_posts to get_pages on line 155 in content-slider.php</strong></p>
<pre class="brush: plain;">
$posts = get_pages('numberposts='.$number_of_posts);
    foreach($posts as $post)
    {
    	anything_get_li($post);
    }
</pre>
</li>
<li>Since the plugin already uses get_posts you can make very minor changes to the arguments passed to the plugin. Currently I only pass the number of posts to return. Get_posts can also take a post_type argument, or include argument. Of course the default post_type is post, but it can be post, page, or attachment&#8230; I think with WP 3.0 you can even make you own types, but I haven&#8217;t work with any custom types yet.If you use include, you just pass all the page ids. Include will override all other arguments. Since pages shouldn&#8217;t change often, this might be a good solution for you<strong>Make changes to the arguments as follows</strong>
<pre class="brush: plain;">
$posts = get_posts('post_type=page&amp;numberposts='.$number_of_posts);
//or
$posts = get_posts('include=2,5,67,45');
//this will only add 4 pages with the specified IDs
</pre>
</li>
<li>Lastly, you can try to use <a href="http://codex.wordpress.org/Function_Reference/WP_Query#Interacting_with_WP_Query">wp_query</a>&#8230; But IMO is overkill for this.</li>
</ol>
<p>The anythingslider, is simply a list (li) with the content of each post as a list item. You can also go in an create custom, hardcoded list items.</p>
<img src="http://mattdunlap.org/?ak_action=api_record_view&id=1645&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://mattdunlap.org/website-development/wordpress/anythingslider-update-how-to-display-pages-instead-of-posts.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to display images only in the WordPress AnythingSlider</title>
		<link>http://mattdunlap.org/website-development/wordpress/how-to-display-images-only-in-the-wordpress-anythingslider.html</link>
		<comments>http://mattdunlap.org/website-development/wordpress/how-to-display-images-only-in-the-wordpress-anythingslider.html#comments</comments>
		<pubDate>Sun, 13 Jun 2010 20:16:15 +0000</pubDate>
		<dc:creator>Matt Dunlap</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[anythingslider]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[premium]]></category>

		<guid isPermaLink="false">http://mattdunlap.org/?p=1247</guid>
		<description><![CDATA[I should have covered this when making the plugin, especially since most content sliders are image based. The reason why I chose to use the Jquery Anythingslider was because you have all the freedom to use any type of content you want. HTML, Flash, Video, Images are all easily embeddable. The plugin I have available comes [...]]]></description>
			<content:encoded><![CDATA[<p>I should have covered this when making the plugin, especially since most content sliders are image based. The reason why I chose to use the Jquery Anythingslider was because you have all the freedom to use any type of content you want. HTML, Flash, Video, Images are all easily embeddable.</p>
<p>The plugin I have available comes with two divs by default. One div is for an image for the blog post, and the other div is for the title, excerpt, and permalink.</p>
<p>Here is how to only display the blog post image.</p>
<p>There is a function in the plugin that displays the slides. The function is called &#8220;anything_get_li&#8221; and I pass the $post as the argument. You can then build the slide with HTML</p>
<p><strong>Example of a full image slide</strong></p>
<pre name='code' class="php">function anything_get_li($post)
{
setup_postdata($post);
?&gt;
&lt;li&gt;

&lt;/li&gt;
&lt;?</pre>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1252" title="WordPress Content slider" src="http://mattdunlap.org/wp-content/uploads/2010/06/as_full.jpg" alt="wordpress content slider" width="640" height="299" /></p>
<p><a href="http://mattdunlap.org/download/content-slider.php.txt">Here is a link the updated file</a>. I just commented out the old display and added the full image width display. To use the file, just &#8220;save as&#8221; and remove the .txt extension. Then you can overwrite the content-slider.php file in the plugin. This is not the plugin, this is just an edit to a file in the plugin.<br />
<a href="http://mattdunlap.org/website-development/wordpress/jquery-anything-slider-plugin-for-wordpress-magazine-themes.html">get full anything slider wordpress plugin here</a></p>
<img src="http://mattdunlap.org/?ak_action=api_record_view&id=1247&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://mattdunlap.org/website-development/wordpress/how-to-display-images-only-in-the-wordpress-anythingslider.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Jquery Anything Slider Plugin for WordPress Magazine Themes</title>
		<link>http://mattdunlap.org/website-development/wordpress/jquery-anything-slider-plugin-for-wordpress-magazine-themes.html</link>
		<comments>http://mattdunlap.org/website-development/wordpress/jquery-anything-slider-plugin-for-wordpress-magazine-themes.html#comments</comments>
		<pubDate>Sun, 13 Jun 2010 05:44:16 +0000</pubDate>
		<dc:creator>Matt Dunlap</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[magazine themes]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://mattdunlap.org/?p=1208</guid>
		<description><![CDATA[There are a lot of content sliders floating around. I recently made this one for my personal website. It's based on the Anything slider Jquery plugin. I have made available two plugins for the content slider. The slider Jquery code is the same, but the CSS style is different.]]></description>
			<content:encoded><![CDATA[<p>There are a lot of content sliders floating around. I recently made this one for my personal website. It&#8217;s based on the <a href="http://css-tricks.com/anythingslider-jquery-plugin/">Anything slider Jquery plugin</a>. I have made available two plugins for the content slider. The slider Jquery code is the same, but the CSS style is different.</p>
<p>The slider will work on all WordPress websites, but the there is no way to make sure the slider looks good in all websites. This is due to the different widths and heights of websites. Therefore, I&#8217;ll try to outline the easiest way to get the content slider and the images in the slider to look their best.</p>
<p>After you activate the content slider plugin, first thing you will need to do it adjust the width to fit into your content sections.</p>
<ul>
<li>The stylesheet for the content slider is located in a folder called css in the plugin folder.</li>
<li>I have added &#8220;border:0px solid #cc0000&#8243; so you can set that to 1 to show a border around the elements if you just can&#8217;t seem to get it to look right. When everything looks correct. You should set the border to 0.</li>
<li>The content slider will display in a div with a class called <strong>.anythingslider. </strong>I think you can set this to 100%, but if that doesn&#8217;t work, set it to the fixed full width of the area in pixels.</li>
<li>the slides are in a class called <strong>.wrapper. </strong> This cannot be a percent, it has to be a fixed width.</li>
<li><strong>.anythingslider ul li</strong> has to be the same width as the <strong>.wrapper</strong> class.</li>
<li><strong>#thumbnav</strong> and <strong>#start-stop</strong> need the &#8220;top&#8221; attribute equal the <strong>.wrappe</strong>r height.</li>
</ul>
<p>That&#8217;s about it for CSS style. but you also need to make sure that your images are big enough to fit in the image section. I use two div&#8217;s in each slider. The left div shows an image from the post and the right div shoes the post title and excerpt. You can add images to the slider without having to add them to the post. I use the fullsize image, centered in the left div. You can use the built in wordpress image editor (2.9+) to make sure the image fits properly.</p>
<p>to display the content slider, you need to call this</p>
<pre name='code' class="php">&lt;?
$number_of_posts = 10 //optional, default is 5
anything_content_slider($number_of_posts);
?&gt;</pre>
<p>I&#8217;m assuming that you are using a magazine style theme with this plugin. You can also download my theme be subscribing to my newsletter. It has the Anything Slider plugin included.</p>
<p><strong>Confused, watch this video to see how to add images to the content slider from a post.</strong><br />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="505" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/IN5ySaQcfrE&amp;hl=en_US&amp;fs=1&amp;" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="505" src="http://www.youtube.com/v/IN5ySaQcfrE&amp;hl=en_US&amp;fs=1&amp;" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>The first plugin uses most of the original styling from the anythingslider.</p>
<p><a href="http://mattdunlap.org/download/anythingslider_wordpress.zip">Download the plugin here</a></p>
<p><img class="aligncenter size-full wp-image-1212" title="Jquery Anythingslider for wordpress" src="http://mattdunlap.org/wp-content/uploads/2010/06/anythingslider.jpg" alt="" width="640" height="304" /></p>
<p>The second plugin is the one I used on my websites. The Javascript  is the same but I have a different style. This one also uses CSS3 custom fonts which might not work in all browsers&#8230; Actually I know it doesn&#8217;t work in IE.</p>
<p><a href="http://mattdunlap.org/download/md-content-slider.zip">Download the plugin here</a></p>
<p><img class="aligncenter size-full wp-image-1231" title="anything slider with style jquery" src="http://mattdunlap.org/wp-content/uploads/2010/06/as_md.jpg" alt="" width="640" height="325" /></p>
<p>You cannot active both plugins at the same time. They will create conflicting errors. You can add them both to your plugin directory, but only one can be activated at a time.</p>
<img src="http://mattdunlap.org/?ak_action=api_record_view&id=1208&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://mattdunlap.org/website-development/wordpress/jquery-anything-slider-plugin-for-wordpress-magazine-themes.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Twitter Spy &#8211; Real Time News Plugin For WordPress</title>
		<link>http://mattdunlap.org/internet-business-strategies/twitter/twitter-spy-real-time-news-plugin-for-wordpress.html</link>
		<comments>http://mattdunlap.org/internet-business-strategies/twitter/twitter-spy-real-time-news-plugin-for-wordpress.html#comments</comments>
		<pubDate>Wed, 09 Sep 2009 03:31:46 +0000</pubDate>
		<dc:creator>Matt Dunlap</dc:creator>
				<category><![CDATA[Twitter]]></category>
		<category><![CDATA[geocoder]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[real time]]></category>
		<category><![CDATA[widget]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://mattdunlap.org/?p=547</guid>
		<description><![CDATA[Real time news is all the rage. Tweets coming from Twitter are being used to drive social movements, advertise services, and connect people instantly. What if you could move those conversations to your website and have them update in real time?

I made Twitter Spy to do just that. Deliver any type of message feed from Twitter to your Wordpress blog, in real time.]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-554" style="margin: 10px; border:none;" title="twitter_feed" src="http://mattdunlap.org/wp-content/uploads/2009/09/twitter_feed.jpg" alt="twitter_feed" width="300" height="230" />Real time news is all the rage. Tweets coming from Twitter are being used to drive social movements, advertise services, and connect people instantly. What if you could move those conversations to your website and have them update in real time?</p>
<p>I made Twitter Spy to do just that. Deliver any type of message feed from Twitter to your WordPress blog, in real time.</p>
<p><strong>Features:</strong></p>
<ol>
<li>Real time refresh using jquery. As soon as it&#8217;s tweeted, Twitter Spy will display it on the website</li>
<li>Unlimited feed options. You can create search queries for the news to deliver based on keywords and/or location.</li>
<li>Advanced query options allow you to deliver the exact news feed. For example, Let&#8217;s say you have a blog about parenting and babies. You can set up a query like &#8220;baby #baby -Celtics&#8221;. This query will get all tweets about babies, and not deliver tweets about &#8220;Big Baby&#8221;. Big Baby is a basketball player for the boston Celtics. I doubt any moms are tweeting about him.</li>
<li>Low memory usage. I&#8217;ve let it run for hours on my browser with no problems.</li>
<li>No database install. I use cookies to get the most recent news so your website is not downloading large files.</li>
</ol>
<p>Built with<a href="http://leftlogic.com/lounge/articles/jquery_spy2"> jquery spy</a>. It also uses <a href="http://code.google.com/apis/maps/documentation/services.html#Geocoding">Google geocoder</a> to get the longitude and latitude for location specific news feeds. You also need php 5 because I use simplexml</p>
<p><a href="http://smartlegacy.com/real-estate-tweets">Example of plugin</a></p>
<p><a href="http://mattdunlap.org/plugins/twitter-spy.zip">Download the Twitter-Spy plugin here</a></p>
<p><strong>How to use:</strong></p>
<ol>
<li>Install just like any other plugin.</li>
<li>Once activated, go to settings &gt; Twitter Spy and configure it. The plugin makes a WordPress page for you. Both keywords and location is optional. Meaning you can make a news feed about real estate without a location, or only get the tweets about real estate within x-miles of your desired location. You can also use only location without keywords to get all the tweets from people in a certain area.</li>
<li>There is a sidebar widget that will use the same keywords and location as the full page plugin.</li>
</ol>
<p>You can only make one twitter spy page with this plugin, but you can manually add the function if you need more then one page with different search criteria.</p>
<pre name='code' class="php">display_spy('spycontainer', '"real estate"', "Real Estate", "37.7723230 -122.2148970", "The Bay Area", "50mi", 20);</pre>
<p>Oakland CA geolocated is 37.7723230 -122.2148970</p>
<p>There are a couple bugs I&#8217;m working out.</p>
<ol>
<li>the tweets are suppose to fade in&#8230; but something with WP is breaking that.</li>
<li>since I use cookies, sometimes, the most recent tweet will get tweeted twice on page reload&#8230;</li>
</ol>
<p>Please try it, and let me know what you think. I&#8217;m also open to any future additions to it.</p>
<img src="http://mattdunlap.org/?ak_action=api_record_view&id=547&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://mattdunlap.org/internet-business-strategies/twitter/twitter-spy-real-time-news-plugin-for-wordpress.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
