<?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>Dmitri's Blog &#187; jQuery</title>
	<atom:link href="http://www.dmitri.me/blog/category/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dmitri.me/blog</link>
	<description>Dmitri Smirnov. Web development in Estonia.</description>
	<lastBuildDate>Tue, 10 Aug 2010 12:07:30 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Hide outline border on A tag focus</title>
		<link>http://www.dmitri.me/blog/hide-outline-border-on-a-tag-focus/</link>
		<comments>http://www.dmitri.me/blog/hide-outline-border-on-a-tag-focus/#comments</comments>
		<pubDate>Thu, 15 Oct 2009 07:01:54 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[HTML and CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web-development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[outline]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=319</guid>
		<description><![CDATA[
.out1:focus { outline:1px dotted black; }

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar 
This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }
IE has non-standard HTML attribute hideFocus=&#8221;true&#8221; to solve this problem. Of [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">
.out1:focus { outline:1px dotted black; }
</style>
<p>When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:<br />
<a href="#" class="out1" onclick="return false">Foobar</a> <a href="#" class="out1" onclick="return false"><img src="/lj/l_toyota.png" alt="toyota" border="0" /></a></p>
<p>This can be easy fixed (f<strong>or all browsers except Internet Explorer!</strong>) by adding 1 line of CSS rule:<br />
<code>a:focus { outline: none; }</code></p>
<p>IE has non-standard HTML attribute <strong>hideFocus=&#8221;true&#8221;</strong> to solve this problem. Of course you don&#8217;t like to put this attribute in every &lt;A&gt; tag and submit buttons in your HTML. I have 2 working solutions for all browsers:</p>
<h3>CSS expression solution</h3>
<p><code>input, a {<br />
&nbsp;&nbsp;outline:expression(hideFocus='true');<br />
&nbsp;&nbsp;outline:none;<br />
}</code></p>
<h3>jQuery solution</h3>
<p><code>$("a, input").each(function() {<br />
&nbsp;&nbsp;$(this).attr("hideFocus", "true").css("outline", "none");<br />
});</code></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/hide-outline-border-on-a-tag-focus/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Notify bar</title>
		<link>http://www.dmitri.me/blog/notify-bar/</link>
		<comments>http://www.dmitri.me/blog/notify-bar/#comments</comments>
		<pubDate>Wed, 27 May 2009 10:11:47 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web-development]]></category>
		<category><![CDATA[notify]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=245</guid>
		<description><![CDATA[&#8216;Notify Bar&#8217; plugin

      Simple plugin (basically it&#8217;s not a plugin, but widget) to show notify bar
      (like on Twitter&#8217;s webpage).
      It&#8217;s very simple to use:
    

      
$(function () {
  $.notifyBar({
  [...]]]></description>
			<content:encoded><![CDATA[<h1>&#8216;Notify Bar&#8217; plugin</h1>
<p>
      Simple plugin (basically it&#8217;s not a plugin, but widget) to show notify bar<br />
      (like on Twitter&#8217;s webpage).<br />
      It&#8217;s very simple to use:
    </p>
<pre>
      <code>
$(function () {
  $.notifyBar({
    html: "Thank you, your settings were updated!",
    delay: 2000,
    animationSpeed: "normal"
  });
});
      </code>
    </pre>
<p>    and to your html page stylesheet:</p>
<pre>
<code>&lt;link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  /&gt;</code>
</pre>
<h3>$.notifyBar can pass next parameters:</h3>
<table border="1">
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td>html</td>
<td>What text will be inside bar, can be HTML</td>
<td>String [optional]</td>
<td>&#8220;Your message here&#8221;</td>
</tr>
<tr>
<td>delay</td>
<td>How long bar will be delayed, doesn&#8217;t count animation time.</td>
<td>Integer [optional]</td>
<td>2000</td>
</tr>
<tr>
<td>animationSpeed</td>
<td>How long this bar will be slided up and down</td>
<td>String | Integer [optional]</td>
<td>&#8220;normal&#8221;</td>
</tr>
<tr>
<td>jqObject</td>
<td>Own jquery object for notify bar</td>
<td>jQuery object [optional]</td>
<td>null</td>
</tr>
<tr>
<td>cls</td>
<td>You can set own CSS class for &#8216;Notify bar&#8217;. There is too premade clasess &#8220;error&#8221; and &#8220;success&#8221;</td>
<td>String</td>
<td></td>
</tr>
<tr>
<td>close</td>
<td>If set to true close button will be displayed</td>
<td>Boolean</td>
<td>false</td>
</tr>
</table>
<p><a href="/misc/notify/">See demonstration</a> or <a href="http://github.com/dknight/jQuery-Notify-bar">download source</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/notify-bar/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>Official Estonian currency rates with PHP</title>
		<link>http://www.dmitri.me/blog/estonian-currency-rates-php/</link>
		<comments>http://www.dmitri.me/blog/estonian-currency-rates-php/#comments</comments>
		<pubDate>Thu, 18 Dec 2008 11:35:21 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Wrong world]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[me]]></category>
		<category><![CDATA[web-development]]></category>
		<category><![CDATA[work]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=164</guid>
		<description><![CDATA[I had a bit free time today and I have written a PHP class which gets the official rates for Estonian crown. This class will be useful for internet shops or any other commercial organizations who need to keep their courses fresh.
You can download or check source. This stuff is really simple as hell, anyway [...]]]></description>
			<content:encoded><![CDATA[<p>I had a bit free time today and I have written a PHP class which gets the official rates for Estonian crown. This class will be useful for internet shops or any other commercial organizations who need to keep their courses fresh.</p>
<p>You can <a href="/misc/rates/Eesti-Money_Rates.zip">download</a> or <a href="/misc/rates/Money/Rates.phps">check source</a>. This stuff is really simple as hell, anyway there is a small documentation inside archive.<br />
<span id="more-164"></span></p>
<h3>Here you can see the most fresh Estonian currency rates</h3>
<p><iframe src="/misc/rates/fresh-rates.php" width="302px" height="1400px" frameborder="0" scrolling="no">Update your browser!</iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/estonian-currency-rates-php/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Navigation with arrows (jQuery)</title>
		<link>http://www.dmitri.me/blog/navigation-with-arrows-jquery/</link>
		<comments>http://www.dmitri.me/blog/navigation-with-arrows-jquery/#comments</comments>
		<pubDate>Wed, 05 Nov 2008 10:25:13 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web-development]]></category>
		<category><![CDATA[JavaScipt]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=115</guid>
		<description><![CDATA[I really like when gallery or application with pagination uses navigation with arrow keys. Like here.
Nice and fast navigation I think. So you can read the main article about this navigation on Lebedev&#8217;s site (or in Russian). This features is at least 3 years old and is used so rarely, but it&#8217;s so useful and [...]]]></description>
			<content:encoded><![CDATA[<p>I really like when gallery or application with pagination uses navigation with arrow keys. Like <a href="http://www.artlebedev.com/everything/routine/2008/11/05/">here</a>.</p>
<p>Nice and fast navigation I think. So you can read the main article about this navigation on <a href="http://www.artlebedev.com/tools/technogrette/js/arrow-navigation/">Lebedev&#8217;s site</a> (or in <a href="http://www.artlebedev.ru/tools/technogrette/js/arrow-navigation/">Russian</a>). This features is at least 3 years old and is used so rarely, but it&#8217;s so useful and makes users happy.</p>
<p>So I have written a tiny plugin for jQuery (based on the Andrey&#8217;s code) for this navigation. You can see <a href="/misc/arrows/">my demo</a> and price how useful it is.</p>
<p><span id="more-115"></span></p>
<p>The main idea is keep next/previous link somewhere. I prefer LINK tag to follow W3C specifications, but you can do it everywhere you want (DIV, SPAN, etc..), but only one condition: 4 element ids are reserved, here they are:</p>
<ol>
<li>arr-nav-right-link</li>
<li>arr-nav-left-link</li>
<li>arr-nav-up-link</li>
<li>arr-nav-down-link</li>
</ol>
<p>So our tags can be:<br />
<code>&lt;link href="right-page.html" id="arr-nav-right-link" /&gt;<br />
&lt;link href="left-page.html" id="arr-nav-left-link" /&gt;<br />
&lt;link href="right-page.html" id="arr-nav-up-link" /&gt;<br />
&lt;link href="right-page.html" id="arr-nav-down-link" /&gt;</code><br />
In common case galleries and pagination are generated by PHP, ASP.NET or whatever, so this links can be easily generated by server.</p>
<p>Ok, we have these tags, how to run script? It&#8217;s very simple to do:</p>
<p>Step 1. Include <a href="http://jquery.com">jQuery</a> library and plugin:<br />
<code>&lt;script type="text/javascript" src="js/jquery-1.2.6.mini.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="js/jquery.arrowNavigation.js"&gt;&lt;/script&gt;</code><br />
Step 2. Define a function:<br />
<code>&lt;script type="text/javascript"&gt;<br />
$(function() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;$(document).arrowsNavigation();<br />
});<br />
&lt;/script&gt;</code><br />
And press <strong>CTRL + corresponding arrow key</strong> and here you go!<br />
Note that there are some additional parameters for this function.<br />
<code>$().arrowNavigation([options, [callback]])</code></p>
<dl>Object <strong>options</strong></dl>
<dd>left &#8211; specifies the left URL.</dd>
<dd>right &#8211; specifies the right URL.</dd>
<dd>down &#8211; specifies the bottom URL.</dd>
<dd>up  &#8211; specifies the top URL.</dd>
<dl>Function<strong> callback</strong></dl>
<dd>Specifies the function, for example AJAX stuff or whatever you like. If is set there won&#8217;t be transaction between pages.</dd>
<p>Ok, thats all have fun, check <a href="/misc/arrows/js/jquery.arrowNavigation.js">source and download</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/navigation-with-arrows-jquery/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
