<?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>Kolodvor &#187; JavaScript</title>
	<atom:link href="http://www.kolodvor.net/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kolodvor.net</link>
	<description>ruby, rails, javascript, jquery, ...</description>
	<lastBuildDate>Mon, 16 Jan 2012 15:24:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Set focus on first field with Prototype</title>
		<link>http://www.kolodvor.net/2010/01/02/set-focus-on-first-field-with-prototype/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=set-focus-on-first-field-with-prototype</link>
		<comments>http://www.kolodvor.net/2010/01/02/set-focus-on-first-field-with-prototype/#comments</comments>
		<pubDate>Sat, 02 Jan 2010 14:32:02 +0000</pubDate>
		<dc:creator>vlado</dc:creator>
				<category><![CDATA[Prototype]]></category>
		<category><![CDATA[focus]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[selectors]]></category>

		<guid isPermaLink="false">http://kolodvor.net/?p=91</guid>
		<description><![CDATA[If you are using jQuery see this post. To set focus on first text field with Prototype I prefer something like this var firstField = $$('input:text:visible').first(); if (firstField) firstField.focus(); but you can also try with Form.focusFirstElement or Form.findFirstElement]]></description>
			<content:encoded><![CDATA[<p>If you are using <a href="http://www.jquery.com">jQuery</a> see <a href="http://kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery">this</a> post.</p>
<p>To set focus on first text field with Prototype I prefer something like this</p>
<pre class="code">
  var firstField = $$('input:text:visible').first();
  if (firstField)
    firstField.focus();
</pre>
<p>but you can also try with <a href="http://api.prototypejs.org/dom/form.html#focusfirstelement-class_method">Form.focusFirstElement</a> or <a href="http://api.prototypejs.org/dom/form.html#findfirstelement-class_method">Form.findFirstElement</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kolodvor.net/2010/01/02/set-focus-on-first-field-with-prototype/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Stripe table rows with Prototype</title>
		<link>http://www.kolodvor.net/2009/09/16/stripe-table-rows-with-prototype/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=stripe-table-rows-with-prototype</link>
		<comments>http://www.kolodvor.net/2009/09/16/stripe-table-rows-with-prototype/#comments</comments>
		<pubDate>Wed, 16 Sep 2009 20:35:30 +0000</pubDate>
		<dc:creator>vlado</dc:creator>
				<category><![CDATA[Prototype]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[stripe rows]]></category>
		<category><![CDATA[table]]></category>
		<category><![CDATA[tables]]></category>
		<category><![CDATA[zebra]]></category>

		<guid isPermaLink="false">http://kolodvor.net/?p=19</guid>
		<description><![CDATA[I&#8217;ve spend a lot of time with Prototype last few days, and this is going to be my first post related to prototype. So let&#8217;s see how to stripe the table using prototype, I think you will be surprised how &#8230; <a href="http://www.kolodvor.net/2009/09/16/stripe-table-rows-with-prototype/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve spend a lot of time with <a href="http://www.prototypejs.org">Prototype</a> last few days, and this is going to be my first post related to prototype. So let&#8217;s see how to stripe the table using prototype, I think you will be surprised how easy it is.</p>
<p>HTML for our table will look like</p>
<p><span id="more-19"></span></p>
<pre class="code">
&lt;table class="zebra"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Col1&lt;/th&gt;
      &lt;th&gt;Col2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;11&lt;/td&gt;
      &lt;td&gt;12&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;21&lt;/td&gt;
      &lt;td&gt;22&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;31&lt;/td&gt;
      &lt;td&gt;32&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>
<p>We will also need some CSS to change the background of the even rows and to highlight the row mouse is over</p>
<pre class="code">
table.zebra tr.even {
  background-color:#eee;
}
table.zebra tr:hover {
  background-color:#ccc;
}
</pre>
<p>And now all we need is as simple as</p>
<pre class="code">
$$('table.zebra tbody tr:nth-child(even)').each(function(tr) {
  tr.addClassName('even');
});
</pre>
<p>One thing to notice is that <span style="font-style:italic">tr:hover</span> selector won&#8217;t work in IE 6. If you care about IE6, solution could be to observe row for mouseover event and to add hover class dynamically.</p>
<p>You should add</p>
<pre class="code">
$$('table.zebra tbody tr').each(function(tr) {
  tr.observe('mouseover', function() {
    tr.addClassName('hover');
  }
});
</pre>
<p>and change <span style="font-style:italic">table.zebra tr:hover</span> to </p>
<pre class="code">
table.zebra tr.hover {
  background-color:#ccc;
}
</pre>
<p>Looks like this won&#8217;t be a last post devoted to <a href="http://www.prototypejs.org">Prototype</a> <img src='http://www.kolodvor.net/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.kolodvor.net/2009/09/16/stripe-table-rows-with-prototype/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

