<?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; javascript</title>
	<atom:link href="http://www.dmitri.me/blog/category/javascript/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>Hypnotic effect with Rahael</title>
		<link>http://www.dmitri.me/blog/hypnotic-effect-with-rahael/</link>
		<comments>http://www.dmitri.me/blog/hypnotic-effect-with-rahael/#comments</comments>
		<pubDate>Wed, 30 Jun 2010 13:49:22 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[HTML and CSS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[raphael]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=382</guid>
		<description><![CDATA[Open fullscreen

]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dmitri.me/misc/ball/">Open fullscreen</a><br />
<iframe scrolling="no" src="http://www.dmitri.me/misc/ball/" width="550" height="550" frameborder="0"></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/hypnotic-effect-with-rahael/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>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>
