<?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/"
	>

<channel>
	<title>Haragei - Spread the wisdom</title>
	<atom:link href="http://www.haragei.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.haragei.com/blog</link>
	<description>where samurai talk about web</description>
	<pubDate>Fri, 11 Sep 2009 16:54:53 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Jquery Category Search Input</title>
		<link>http://www.haragei.com/blog/jquery-category-search-input/</link>
		<comments>http://www.haragei.com/blog/jquery-category-search-input/#comments</comments>
		<pubDate>Fri, 11 Sep 2009 16:54:53 +0000</pubDate>
		<dc:creator>samurai</dc:creator>
		
		<category><![CDATA[Playground]]></category>

		<guid isPermaLink="false">http://www.haragei.com/blog/?p=31</guid>
		<description><![CDATA[How many times you had in your interface need for  search with more complexity than one input field? We know that we had, and we did something about it.
Here is a deal, the approach is bit new but not revolutionary and we want to share it with you. Best implementation can be in bigger search [...]]]></description>
			<content:encoded><![CDATA[<p>How many times you had in your interface need for  search with more complexity than one input field? We know that we had, and we did something about it.</p>
<p>Here is a deal, the approach is bit new but not revolutionary and we want to share it with you. Best implementation can be in bigger search option for any kind of search input you may require.</p>
<p><strong>Markup</strong></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;jquery.js&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;jquert.alt.text.plugin.js&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;form</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">&quot;post&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;search-category&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
					  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;input</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;category&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;hidden&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;All&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
					  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;span<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>All<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
					  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;span<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;javascript:void(null)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Prime<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/span<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;span<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;javascript:void(null)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Ultima<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/span<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;span<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;javascript:void(null)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Delta<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/span<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
					  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;span</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;last&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;javascript:void(null)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Sigma<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/span<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;search-box&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
					  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;input</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;q&quot;</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">&quot;Click to enter search query&quot;</span> <span style="color: #000066;">alt</span>=<span style="color: #ff0000;">&quot;Search All...&quot;</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;q&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;textbox&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;button</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;verify {e:['#q'],s:'You must enter search query.'}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Search<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/button<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
			  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/form<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Settings are in-page, no need for external js.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<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>
&nbsp;
	<span style="color: #006600; font-style: italic;">// search categories</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-category span'</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>
		<span style="color: #003366; font-weight: bold;">var</span> category <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>category.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-category span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</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: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;a href=&quot;javascript:void(null)&quot;&gt;'</span> <span style="color: #339933;">+</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/a&gt;'</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>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> text <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>category<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</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>category<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-category input'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-box input'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'alt'</span><span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-category'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'alt'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">' '</span> <span style="color: #339933;">+</span> text <span style="color: #339933;">+</span> <span style="color: #3366CC;">'...'</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-box input'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">hoverText</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">altText</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>
	<span style="color: #006600; font-style: italic;">// --</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// alternative text on inputs - call from plugin</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search-box input, .block-subscribe input'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">altText</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// --</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And little bit of plugin that is created for this usage.</p>
<p>Jquery alt text plugin</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// jquery.alttext plugin</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: #660066;">fn</span>.<span style="color: #660066;">altText</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$options<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> opts <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">altText</span>.<span style="color: #660066;">settings</span><span style="color: #339933;">,</span> $options <span style="color: #339933;">||</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</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: #003366; font-weight: bold;">var</span> $this <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> o <span style="color: #339933;">=</span> $.<span style="color: #660066;">meta</span> <span style="color: #339933;">?</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> opts<span style="color: #339933;">,</span> $this.<span style="color: #660066;">data</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> opts<span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">valBackup</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">focused</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">altText</span> <span style="color: #339933;">=</span> $this.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span>o.<span style="color: #660066;">source</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hoverText</span> <span style="color: #339933;">=</span> o.<span style="color: #660066;">hoverState</span> <span style="color: #339933;">?</span> $this.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span>o.<span style="color: #660066;">hoverSource</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>o.<span style="color: #660066;">hoverSource</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'title'</span><span style="color: #009900;">&#41;</span>
			<span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">title</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">unbind</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			$this.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">altText</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">,</span> o.<span style="color: #660066;">inactiveColor</span><span style="color: #009900;">&#41;</span>
&nbsp;
			.<span style="color: #000066;">focus</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;">this</span>.<span style="color: #660066;">focused</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">valBackup</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">valBackup</span> <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">altText</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">valBackup</span> <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hoverText</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
				<span style="color: #009900;">&#123;</span>
					$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> o.<span style="color: #660066;">activeColor</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> o.<span style="color: #660066;">activeCSS</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
			.<span style="color: #000066;">blur</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;">this</span>.<span style="color: #660066;">focused</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span>
				<span style="color: #009900;">&#123;</span>
					$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">altText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> o.<span style="color: #660066;">inactiveColor</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> o.<span style="color: #660066;">inactiveCSS</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
			.<span style="color: #660066;">hover</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>o.<span style="color: #660066;">hoverState</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span> <span style="color: #339933;">||</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</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;">this</span>.<span style="color: #660066;">altText</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">focused</span><span style="color: #009900;">&#41;</span>
					<span style="color: #009900;">&#123;</span>
						<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">valBackup</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hoverText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
&nbsp;
					$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> o.<span style="color: #660066;">hoverColor</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> o.<span style="color: #660066;">hoverCSS</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
				<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>o.<span style="color: #660066;">hoverState</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</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;">this</span>.<span style="color: #660066;">hoverText</span><span style="color: #009900;">&#41;</span>
					<span style="color: #009900;">&#123;</span>
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">valBackup</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
&nbsp;
					$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">focused</span> <span style="color: #339933;">?</span> o.<span style="color: #660066;">activeColor</span> <span style="color: #339933;">:</span> o.<span style="color: #660066;">inactiveColor</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">focused</span> <span style="color: #339933;">?</span> o.<span style="color: #660066;">activeCSS</span> <span style="color: #339933;">:</span> o.<span style="color: #660066;">inactiveCSS</span><span style="color: #009900;">&#41;</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>
		<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: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// isEmpty test function</span>
	$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">isEmpty</span> <span style="color: #339933;">=</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;">return</span>	<span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span>
				<span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">altText</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span>
				<span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">hoverText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// global settings</span>
	$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">altText</span>.<span style="color: #660066;">settings</span> <span style="color: #339933;">=</span>
	<span style="color: #009900;">&#123;</span>
		source<span style="color: #339933;">:</span> <span style="color: #3366CC;">'alt'</span><span style="color: #339933;">,</span>
		hoverState<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
		hoverSource<span style="color: #339933;">:</span> <span style="color: #3366CC;">'title'</span><span style="color: #339933;">,</span>
		hoverCSS<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> <span style="color: #3366CC;">'font-style'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'italic'</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		inactiveColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">'#666'</span><span style="color: #339933;">,</span>
		inactiveCSS<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> <span style="color: #3366CC;">'font-style'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'normal'</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		activeColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">'#333'</span><span style="color: #339933;">,</span>
		activeCSS<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> <span style="color: #3366CC;">'font-style'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'normal'</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		hoverColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">'#444'</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And now most importantly  link for<a href="http://www.haragei.com/playground/category-search-input/"> DEMO and SOURCE</a></p>



Share and Enjoy:


	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input" title="Digg"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input" title="Sphinn"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/sphinn.gif" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input" title="del.icio.us"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;t=Jquery%20Category%20Search%20Input" title="Facebook"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input" title="Mixx"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/mixx.png" title="Mixx" alt="Mixx" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input" title="Google"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input" title="StumbleUpon"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://twitter.com/home?status=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F" title="TwitThis"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/twitter.gif" title="TwitThis" alt="TwitThis" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;submitHeadline=Jquery%20Category%20Search%20Input&amp;submitSummary=How%20many%20times%20you%20had%20in%20your%20interface%20need%20for%20%C2%A0search%20with%20more%20complexity%20than%20one%20input%20field%3F%20We%20know%20that%20we%20had%2C%20and%20we%20did%20something%20about%20it.%0D%0A%0D%0AHere%20is%20a%20deal%2C%20the%20approach%20is%20bit%20new%20but%20not%20revolutionary%20and%20we%20want%20to%20share%20it%20with%20yo&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/yahoobuzz.gif" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F&amp;title=Jquery%20Category%20Search%20Input&amp;source=Haragei+-+Spread+the+wisdom+where+samurai+talk+about+web&amp;summary=How%20many%20times%20you%20had%20in%20your%20interface%20need%20for%20%C2%A0search%20with%20more%20complexity%20than%20one%20input%20field%3F%20We%20know%20that%20we%20had%2C%20and%20we%20did%20something%20about%20it.%0D%0A%0D%0AHere%20is%20a%20deal%2C%20the%20approach%20is%20bit%20new%20but%20not%20revolutionary%20and%20we%20want%20to%20share%20it%20with%20yo" title="LinkedIn"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a>
	<a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/printer.png" title="Print this article!" alt="Print this article!" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="mailto:?subject=Jquery%20Category%20Search%20Input&amp;body=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-category-search-input%2F" title="E-mail this story to a friend!"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/email_link.png" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.haragei.com/blog/jquery-category-search-input/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Jquery Horizontal Ticker</title>
		<link>http://www.haragei.com/blog/jquery-horizontal-ticker/</link>
		<comments>http://www.haragei.com/blog/jquery-horizontal-ticker/#comments</comments>
		<pubDate>Thu, 02 Apr 2009 14:32:50 +0000</pubDate>
		<dc:creator>samurai</dc:creator>
		
		<category><![CDATA[Playground]]></category>

		<category><![CDATA[jQuery]]></category>

		<category><![CDATA[open source]]></category>

		<guid isPermaLink="false">http://www.haragei.com/blog/?p=22</guid>
		<description><![CDATA[To you all who love jQuery, we present to you small snippet of how we use browser  supported marquee tag. Before we figured that in browser if you want to get cross browser compatibility there is no easy way to handle &#8220;ticker&#8221; functionality, we ended up with solution from ancient times of web.
Only downside of [...]]]></description>
			<content:encoded><![CDATA[<p>To you all who love jQuery, we present to you small snippet of how we use browser  supported marquee tag. Before we figured that in browser if you want to get cross browser compatibility there is no easy way to handle &#8220;ticker&#8221; functionality, we ended up with solution from ancient times of web.</p>
<p>Only downside of handling in this way is that you will use not so loved marquee tag, although in this way page will be valid, and browser will be very responsive on this behavior.</p>
<p>Here is short snippet :</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;jquery.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
&nbsp;
$<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;">try</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ticker_holder <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.ticker-holder'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ticker_text <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.ticker'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ticker_pos <span style="color: #339933;">=</span> ticker_text.<span style="color: #660066;">parentNode</span>.<span style="color: #660066;">offsetWidth</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> ticker_data <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>ticker_holder<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span>ticker_text<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span> <span style="color: #339933;">+</span> ticker_data <span style="color: #339933;">+</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sub-nav'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</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;">'marquee'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</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: #339933;">,</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;">'marquee'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">start</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;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</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></div></div>

<p>And you have <a title="Jquery Horizontal Ticker" href="http://www.haragei.com/playground/jquery-horisontal-ticker/index.html" target="_blank">DEMO</a> of this at our playground.</p>
<p>Feel free to add your thoughts, so maybe we can update this solution in better way in some near future.</p>



Share and Enjoy:


	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker" title="Digg"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker" title="Sphinn"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/sphinn.gif" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker" title="del.icio.us"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;t=Jquery%20Horizontal%20Ticker" title="Facebook"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker" title="Mixx"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/mixx.png" title="Mixx" alt="Mixx" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker" title="Google"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker" title="StumbleUpon"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://twitter.com/home?status=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F" title="TwitThis"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/twitter.gif" title="TwitThis" alt="TwitThis" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;submitHeadline=Jquery%20Horizontal%20Ticker&amp;submitSummary=To%20you%20all%20who%20love%20jQuery%2C%20we%20present%20to%20you%20small%20snippet%20of%20how%20we%20use%20browser%C2%A0%20supported%20marquee%20tag.%20Before%20we%20figured%20that%20in%20browser%20if%20you%20want%20to%20get%20cross%20browser%20compatibility%20there%20is%20no%20easy%20way%20to%20handle%20%22ticker%22%20functionality%2C%20we%20ende&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/yahoobuzz.gif" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F&amp;title=Jquery%20Horizontal%20Ticker&amp;source=Haragei+-+Spread+the+wisdom+where+samurai+talk+about+web&amp;summary=To%20you%20all%20who%20love%20jQuery%2C%20we%20present%20to%20you%20small%20snippet%20of%20how%20we%20use%20browser%C2%A0%20supported%20marquee%20tag.%20Before%20we%20figured%20that%20in%20browser%20if%20you%20want%20to%20get%20cross%20browser%20compatibility%20there%20is%20no%20easy%20way%20to%20handle%20%22ticker%22%20functionality%2C%20we%20ende" title="LinkedIn"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a>
	<a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/printer.png" title="Print this article!" alt="Print this article!" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="mailto:?subject=Jquery%20Horizontal%20Ticker&amp;body=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fjquery-horizontal-ticker%2F" title="E-mail this story to a friend!"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/email_link.png" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.haragei.com/blog/jquery-horizontal-ticker/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Konichiwa !</title>
		<link>http://www.haragei.com/blog/konichiwa/</link>
		<comments>http://www.haragei.com/blog/konichiwa/#comments</comments>
		<pubDate>Mon, 23 Mar 2009 17:14:57 +0000</pubDate>
		<dc:creator>samurai</dc:creator>
		
		<category><![CDATA[Haragei Dojo]]></category>

		<category><![CDATA[blog]]></category>

		<category><![CDATA[company]]></category>

		<category><![CDATA[Haragei]]></category>

		<guid isPermaLink="false">http://www.haragei.com/blog/?p=3</guid>
		<description><![CDATA[We were thinking rather to put company blog online bit later from site launch, however decision was made in favor and  of you all. The idea of Haragei Blog is to show you all of nifty and super-cool stuff that we train in our Dojo.
To be honest this is mainly made for promotion and getting [...]]]></description>
			<content:encoded><![CDATA[<p>We were thinking rather to put company blog online bit later from site launch, however decision was made in favor and  of you all. The idea of Haragei Blog is to show you all of nifty and super-cool stuff that we train in our Dojo.</p>
<p>To be honest this is mainly made for promotion and getting close to new and existing clients  (oh my we have those), however idea is also about sharing insight that we got during our past work.</p>
<p>Community is a key in terms of evolving as professional , and now we have that <em>hara</em> ( belly,gut )  feeling , that we are ready to share to you all.</p>
<p>Beside articles about topics such as  interface design and development, IA, actionscript, jquery and some cool back-end topics, we plan to post our personal thoughts about web industry. We like to think that this is a insight of how we think about internet business development that we so profound trust in.</p>
<p>We also believe that this is a best way to know each other, and let&#8217;s hope that this relationship will be everlasting &#8230;.</p>
<p>For all those who wants to look at our thoughts more closely  we use <a title="Twitter Haragei" href="http://www.twitter.com/haragei" target="_blank">twitter</a>, so please  follow us, for our not so daily thoughts.</p>



Share and Enjoy:


	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20" title="Digg"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20" title="Sphinn"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/sphinn.gif" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20" title="del.icio.us"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;t=Konichiwa%20%21%20" title="Facebook"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20" title="Mixx"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/mixx.png" title="Mixx" alt="Mixx" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20" title="Google"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20" title="StumbleUpon"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://twitter.com/home?status=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F" title="TwitThis"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/twitter.gif" title="TwitThis" alt="TwitThis" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;submitHeadline=Konichiwa%20%21%20&amp;submitSummary=We%20were%20thinking%20rather%20to%20put%20company%20blog%20online%20bit%20later%20from%20site%20launch%2C%20however%20decision%20was%20made%20in%20favor%20and%20%20of%20you%20all.%20The%20idea%20of%20Haragei%20Blog%20is%C2%A0to%20show%20you%20all%20of%20nifty%20and%20super-cool%20stuff%20that%20we%20train%20in%20our%20Dojo.%0D%0A%0D%0ATo%20be%20honest%20t&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/yahoobuzz.gif" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F&amp;title=Konichiwa%20%21%20&amp;source=Haragei+-+Spread+the+wisdom+where+samurai+talk+about+web&amp;summary=We%20were%20thinking%20rather%20to%20put%20company%20blog%20online%20bit%20later%20from%20site%20launch%2C%20however%20decision%20was%20made%20in%20favor%20and%20%20of%20you%20all.%20The%20idea%20of%20Haragei%20Blog%20is%C2%A0to%20show%20you%20all%20of%20nifty%20and%20super-cool%20stuff%20that%20we%20train%20in%20our%20Dojo.%0D%0A%0D%0ATo%20be%20honest%20t" title="LinkedIn"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a>
	<a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/printer.png" title="Print this article!" alt="Print this article!" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="mailto:?subject=Konichiwa%20%21%20&amp;body=http%3A%2F%2Fwww.haragei.com%2Fblog%2Fkonichiwa%2F" title="E-mail this story to a friend!"><img src="http://www.haragei.com/blog/wp-content/plugins/sociable/images/email_link.png" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.haragei.com/blog/konichiwa/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
