<?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>Opportune Solutions &#187; Technical</title>
	<atom:link href="http://www.opportuneinc.com/tag/technical/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.opportuneinc.com</link>
	<description>Website for Opportune Solutions</description>
	<lastBuildDate>Fri, 26 Feb 2010 16:08:55 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>A Barage of System Problems</title>
		<link>http://www.opportuneinc.com/2009/06/a-barage-of-system-problems/</link>
		<comments>http://www.opportuneinc.com/2009/06/a-barage-of-system-problems/#comments</comments>
		<pubDate>Thu, 25 Jun 2009 00:01:57 +0000</pubDate>
		<dc:creator>Chris Barlow</dc:creator>
				<category><![CDATA[Operating System]]></category>
		<category><![CDATA[Technical]]></category>

		<guid isPermaLink="false">http://www.opportuneinc.com/?p=171</guid>
		<description><![CDATA[The latter half of last week and now early this week, I have just been hit with a lot of system problems and a lot of down time.  To sum this up, my Adobe Creative Suite then my Microsoft Office suites stopped working.  Both indicated licensing and user access permissions were no longer [...]]]></description>
			<content:encoded><![CDATA[<p>The latter half of last week and now early this week, I have just been hit with a lot of system problems and a lot of down time.  To sum this up, my Adobe Creative Suite then my Microsoft Office suites stopped working.  Both indicated licensing and user access permissions were no longer valid.  In fact, my licensing was fine, it just stopped working properly on my system.</p>
<p>I use 3 licensed applications extensively and two of them failed in the same day.  Fortunately, all the open source applications I use don&#8217;t and probably will never have a similar problem.  Just to be fair, I think the Office problem started because of the fixes necessary to get the creative suite working.<br />
<span id="more-171"></span><br />
So you might say, just reinstall or repair the applications and your back to work.  Not the case.  I could not repair them, reinstall them and in the case of Adobe, I couldn&#8217;t even delete it.</p>
<p>At Adobe&#8217;s request, I used the following 2 programs to resolve the problem.<br />
1. MSICUU2.exe &#8211; This is a program from microsoft which allows you to remove programs that the standard microsoft installer will not uninstall. AKA Windows Installer Cleanup Utility (http://support.microsoft.com/kb/290301)</p>
<p>2. Wincs3clean.exe &#8211; An adobe program that cleans up the registry.  I think this cause my office problem.</p>
<p>I reinstalled Adobe, Adobe worked and Office did not.  I could install and uninstall Office, but the current user could not run any applications.  After some searching on the Internet, I found that you could run the applications as administrator.</p>
<p>There is a program called SetACL.exe that allowed me to fix the problem.  This modified some permission in the registry that I would rather not have changed, but after 24 hours of unproductivity, I was getting desparate.  Anyway, this did the trick.<br />
setacl -ot reg -on &#8220;HKLM\Software\Microsoft\Windows\CurrentVersion\Installer\UserData\S-1-5-18\Components&#8221; -actn setprot -op &#8220;dacl:np;sacl:nc&#8221; -rec yes</p>
<p>Since then, I have had a couple Blue Screen of Death (BSOD) crashes due to my video card and running multiple monitors.  I have updated the display driver but still got a BSOD.  After more searching, the problem is being seen on both WinXP and Vista, both 32 and 64-bit systems with both ATI and nVidia video cards.  One person said installing a second video card and running one monitor off each video card works rather than plugging 2 monitors into the same video card fixed their problem.</p>
<p>That doesn&#8217;t seem like a good solution to me, besides I don&#8217;t have a second PCI express 16x slot for a second video card.  Some people reported multiple crashes per day.  I am doing much better than that.</p>
<p>I guess I am just lucky that way!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.opportuneinc.com/2009/06/a-barage-of-system-problems/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Helpful Hints for Form Input</title>
		<link>http://www.opportuneinc.com/2009/05/helpful-hints-for-form-input/</link>
		<comments>http://www.opportuneinc.com/2009/05/helpful-hints-for-form-input/#comments</comments>
		<pubDate>Thu, 21 May 2009 19:22:45 +0000</pubDate>
		<dc:creator>Chris Barlow</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Technical]]></category>

		<guid isPermaLink="false">http://www.opportuneinc.com/?p=157</guid>
		<description><![CDATA[When you have limited space on your home page or any other page for that matter, it is nice to provide a little more helpful information for the use where form space is limited. Now, by just adding a single attribute to your input text, your will get the gray help text in your input [...]]]></description>
			<content:encoded><![CDATA[<p>When you have limited space on your home page or any other page for that matter, it is nice to provide a little more helpful information for the use where form space is limited. Now, by just adding a single attribute to your input text, your will get the gray help text in your input box.</p>
<p><code>&lt;input <span class="standout">hintvalue="Search ..."</span> class="smallbox" name="s" type="text" autocomplete="off"  /&gt;</code></p>
<p>Just add the javascript from this article and any styles that you want and you are done.  Here is a working example.  Click in the boxes and watch it work.</p>
<p><iframe src="http://www.opportuneinc.com/downloads/helpful-input.html" scrolling="auto"<br />
height="50" width="150" frameborder="1" align="left"></iframe><br />
<span id="more-157"></span></p>
<h4>How it works</h4>
<p>The guts of the work is done in javascript in two objects.  The first is a simple object called ClassName that will add or remove a class name from any object like the input tag.  You could just set the className of the object and then delete it when done, but the ClassName object allows for multiple classes to be set on the input tag.</p>
<div class="dean_ch" style="white-space: nowrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">ClassName = <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; add: <span class="kw2">function</span> <span class="br0">&#40;</span>obj, clsName<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>!ClassName.<span class="me1">exists</span><span class="br0">&#40;</span>obj,clsName<span class="br0">&#41;</span><span class="br0">&#41;</span> obj.<span class="me1">className</span>+=obj.<span class="me1">className</span>?<span class="st0">&#8216; &#8216;</span>+clsName:clsName;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; remove: <span class="kw2">function</span> <span class="br0">&#40;</span>obj, clsName<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; obj.<span class="me1">className</span>=obj.<span class="me1">className</span>.<span class="me1">replace</span><span class="br0">&#40;</span>obj.<span class="me1">className</span>.<span class="me1">match</span><span class="br0">&#40;</span><span class="st0">&#8216; &#8216;</span>+clsName<span class="br0">&#41;</span>?<span class="st0">&#8216; &#8216;</span>+clsName:clsName,<span class="st0">&#8221;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; exists: <span class="kw2">function</span> <span class="br0">&#40;</span>obj, clsName<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">new</span> RegExp<span class="br0">&#40;</span><span class="st0">&#8216;<span class="es0">\\</span>b&#8217;</span>+clsName+<span class="st0">&#8216;<span class="es0">\\</span>b&#8217;</span><span class="br0">&#41;</span>.<span class="me1">test</span><span class="br0">&#40;</span>obj.<span class="me1">className</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>The Hint object is the main object that makes everything work.  It performs 5 primary functions.  It initializes all input tags that have the hintvalue attribute set with an onFocus and onBlur event to show or hide the hint.  When the form is submitted, any hints will be removed so the server gets the intended value.  There is also a function to dynamically attach an event to any html/dom object.</p>
<div class="dean_ch" style="white-space: nowrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">Hint = <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; cls_name: <span class="st0">&quot;hint_display&quot;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; attr_name: <span class="st0">&quot;hintvalue&quot;</span>,</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; show: <span class="kw2">function</span> <span class="br0">&#40;</span>inputObj<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>inputObj.<span class="me1">target</span><span class="br0">&#41;</span> inputObj = inputObj.<span class="me1">target</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>inputObj.<span class="me1">srcElement</span><span class="br0">&#41;</span> inputObj = inputObj.<span class="me1">srcElement</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>inputObj.<span class="me1">value</span>.<span class="me1">length</span> == <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ClassName.<span class="me1">add</span><span class="br0">&#40;</span>inputObj, Hint.<span class="me1">cls_name</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputObj.<span class="me1">value</span> = inputObj.<span class="me1">getAttribute</span><span class="br0">&#40;</span>Hint.<span class="me1">attr_name</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; hide: <span class="kw2">function</span> <span class="br0">&#40;</span>inputObj<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>inputObj.<span class="me1">target</span><span class="br0">&#41;</span> inputObj = inputObj.<span class="me1">target</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>inputObj.<span class="me1">srcElement</span><span class="br0">&#41;</span> inputObj = inputObj.<span class="me1">srcElement</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ClassName.<span class="me1">exists</span><span class="br0">&#40;</span>inputObj, Hint.<span class="me1">cls_name</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>inputObj.<span class="me1">getAttribute</span><span class="br0">&#40;</span>Hint.<span class="me1">attr_name</span><span class="br0">&#41;</span> == <span class="kw2">null</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputObj.<span class="me1">setAttribute</span><span class="br0">&#40;</span>Hint.<span class="me1">attr_name</span>, inputObj.<span class="me1">value</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputObj.<span class="me1">value</span> = <span class="st0">&quot;&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; ClassName.<span class="me1">remove</span><span class="br0">&#40;</span>inputObj, Hint.<span class="me1">cls_name</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; submit: <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; tags = document.<span class="me1">getElementsByTagName</span><span class="br0">&#40;</span><span class="st0">&quot;INPUT&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//submit: function (formObj) {</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//tags = formObj.getElementsByTagName(&quot;INPUT&quot;);</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i = <span class="nu0">0</span>; i &lt; tags.<span class="me1">length</span>; i++<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ClassName.<span class="me1">exists</span><span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>, Hint.<span class="me1">cls_name</span><span class="br0">&#41;</span><span class="br0">&#41;</span> tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">value</span> = <span class="st0">&quot;&quot;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; listen: <span class="kw2">function</span><span class="br0">&#40;</span>element, evtName, funcPtr<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw1">typeof</span> element == <span class="st0">&#8217;string&#8217;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element = document.<span class="me1">getElementById</span><span class="br0">&#40;</span>element<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>element.<span class="me1">addEventListener</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.<span class="me1">addEventListener</span><span class="br0">&#40;</span>evtName, funcPtr, <span class="kw2">false</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>element.<span class="me1">attachEvent</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">&#8216;on&#8217;</span>+evtName, funcPtr<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">return</span> <span class="kw2">false</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; init: <span class="kw2">function</span><span class="br0">&#40;</span>parentObj<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//if (parentObj == null) parentObj = document;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; parentObj = document;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> tags = parentObj.<span class="me1">getElementsByTagName</span><span class="br0">&#40;</span><span class="st0">&quot;INPUT&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i = <span class="nu0">0</span>; i &lt; tags.<span class="me1">length</span>; i++<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">getAttribute</span><span class="br0">&#40;</span>Hint.<span class="me1">attr_name</span><span class="br0">&#41;</span> != <span class="kw2">null</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hintval = tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">getAttribute</span><span class="br0">&#40;</span>Hint.<span class="me1">attr_name</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">value</span> == hintval || tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">value</span> == <span class="st0">&quot;&quot;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">value</span>=hintval;ClassName.<span class="me1">add</span><span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>, Hint.<span class="me1">cls_name</span><span class="br0">&#41;</span>;<span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span> ClassName.<span class="me1">remove</span><span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>, <span class="kw1">this</span>.<span class="me1">cls_name</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Now add the events</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>!Hint.<span class="me1">listen</span><span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>, <span class="st0">&#8216;blur&#8217;</span>, Hint.<span class="me1">show</span><span class="br0">&#41;</span> ||</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; !Hint.<span class="me1">listen</span><span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>, <span class="st0">&#8216;focus&#8217;</span>, Hint.<span class="me1">hide</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// if we can&#8217;t add the events, no hints.</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>.<span class="me1">value</span>=<span class="st0">&quot;&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ClassName.<span class="me1">remove</span><span class="br0">&#40;</span>tags<span class="br0">&#91;</span>i<span class="br0">&#93;</span>, Hint.<span class="me1">cls_name</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span><span class="br0">&#40;</span>j=<span class="nu0">0</span>; j&lt;document.<span class="me1">forms</span>.<span class="me1">length</span>; j++<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Hint.<span class="me1">listen</span><span class="br0">&#40;</span>document.<span class="me1">forms</span><span class="br0">&#91;</span>j<span class="br0">&#93;</span>, <span class="st0">&#8217;submit&#8217;</span>, Hint.<span class="me1">submit</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
</ol>
</div>
<p>Finally, call the hint initialization when the page is fully loaded and add any styles to make the boxes and text display like you want them to.</p>
<div class="dean_ch" style="white-space: nowrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">Hint.<span class="me1">listen</span><span class="br0">&#40;</span>window, <span class="st0">&#8216;load&#8217;</span>, Hint.<span class="me1">init</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<div class="dean_ch" style="white-space: nowrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/* css styles */</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/* What will the hint text look like? &nbsp;This will make it gray */</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">.hint_display</span> <span class="br0">&#123;</span><span class="kw1">color</span>:<span class="re0">#<span class="nu0">666666</span></span><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2"><span class="coMULTI">/* Now, make the the search box have small text and a blue border */</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">.smallbox</span> <span class="br0">&#123;</span>font-size<span class="re2">:<span class="nu0">70</span></span>%;border-color<span class="re2">:blue</span>;<span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<h4>A Little Explanation</h4>
<p>After more than a year of absolutely positioning divs to put the hint text above a text box and dealing with all the cross browser issues that came with that, not to mention more markup and quite a bit of time, I finally resorted to changing the value of the text box to show the hint and just add a class to allow it to look like a hint.</p>
<p>This has solved all positioning problems associated with the divs approach.  The only problems now are that you cannot use an image as the hint like this website and the hint must be hidden when the form is submitted.  Not much can be done about the images and that is not a big problem for me.  As for the submitting issue, I have added an event to each form to remove the hint text when the form is submitted.  So, why is that a problem?  Some forms are submitted through a custom function and sometimes ajax is used to validate form fields on the fly.  These will still work, but care must be taken to capture the value correctly.  I.e. If ajax also validates a field on the onBlur event, that listener must be registered before the hints onBlur event.</p>
<h4>Put it all together</h4>
<p>Include the following javascript file in your web page and add the hintvalue attribute to your input tag and you are ready to go.<br />
<a href="http://www.opportuneinc.com/downloads/helpful-input.js" title="Input Hints - Javascript only">Input Hints - Javascript only</a></p>
<p>See the full example here: <a href="http://www.opportuneinc.com/downloads/helpful-input.html" title="Input Hints - full example with html/css/javascript">Input Hints - full example with html/css/javascript</a></p>
<h4>Conclusion</h4>
<p>This is a very simple and easy to use set of functions to provide a fully functional hint and any input field.  Give it a try.</p>
<p>Challenge to anyone who wants to try: Because of the events added to form fields and the form itself, an excellent extension to this would be to add a validate attribute to the field that would act as a regular expression to check in the onBlur.</p>
<p>Any takers?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.opportuneinc.com/2009/05/helpful-hints-for-form-input/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New Website Released</title>
		<link>http://www.opportuneinc.com/2009/04/new-website-released/</link>
		<comments>http://www.opportuneinc.com/2009/04/new-website-released/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 22:03:41 +0000</pubDate>
		<dc:creator>Chris Barlow</dc:creator>
				<category><![CDATA[Business]]></category>
		<category><![CDATA[Technical]]></category>

		<guid isPermaLink="false">http://www.opportuneinc.com/?p=1</guid>
		<description><![CDATA[Opportune Solutions has released this all-new website.  Those of you who visited the old site will notice that the logo has changed.  Officially, the Opportune Solutions logo is still the old version which is only 3 colors and 2D.  The new logo, although now only based two colors is actually made up [...]]]></description>
			<content:encoded><![CDATA[<p>Opportune Solutions has released this all-new website.  Those of you who visited the old site will notice that the logo has changed.  Officially, the Opportune Solutions logo is still the old version which is only 3 colors and 2D.  The new logo, although now only based two colors is actually made up of many colors to properly highlight, shade and create the reflection.<br />
<span id="more-1"></span></p>
<p><!-- div style="vertical-align:top;float:left;"><img title="OppSol Old" src="http://www.opportuneinc.com/wp-content/uploads/2009/04/oppsolsml.png" mce_src="http://www.opportuneinc.com/wp-content/uploads/2009/04/oppsolsml.png" alt="Old OppSol Logo" align="left" /></div>
<div style="vertical-align:top;float:right;" mce_style="vertical-align:top;float:right;"><img title="OppSol New" src="http://www.opportuneinc.com/wp-content/uploads/2009/04/osi_logo.png" mce_src="http://www.opportuneinc.com/wp-content/uploads/2009/04/osi_logo.png" alt="New OppSol Logo" align="right" /></div>
<p><br style="clear:both" mce_style="clear:both" / --></p>
<div>
<div id="attachment_4" class="wp-caption alignleft" style="width: 260px"><img class="size-full wp-image-4" title="OppSol Old" src="http://www.opportuneinc.com/wp-content/uploads/2009/04/oppsolsml.png" alt="Old Logo with 3 colors" width="250" height="69" /><p class="wp-caption-text">Old Logo with 3 colors</p></div>
<div id="attachment_6" class="wp-caption alignright" style="width: 250px"><img class="size-full wp-image-6" title="OppSol New" src="http://www.opportuneinc.com/wp-content/uploads/2009/04/osi_logo.png" alt="New 3-D Logo" width="240" height="118" /><p class="wp-caption-text">New 3-D Logo with many colors</p></div>
</div>
<p><br style="clear:both" /></p>
<p>I have always read and assumed that a logo should only be 2 or three colors, but I don&#8217;t think that is the case with today&#8217;s media.  There are certainly some things where only 2 colors are important, like an embroidered company logo on a sweat shirt.  There aren&#8217;t many though and having a logo that is more appealing and eye catching probably outweighs any benefits of having fewer colors.</p>
<p>In the not too distant future, Opportune Solutions may officially switch to the new one.  I may make a two color version for when it is needed, but I bet it will just gather dust if that is possible in the digital age.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.opportuneinc.com/2009/04/new-website-released/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
