<?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>Chanel's Blog &#187; attributes</title>
	<atom:link href="http://cmunezero.com/tag/attributes/feed/" rel="self" type="application/rss+xml" />
	<link>http://cmunezero.com</link>
	<description>Where code meets love... and a lot of awkward silences...</description>
	<lastBuildDate>Tue, 11 May 2010 21:17:39 +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>jQuery: Syncronising Multiple Objects and Animations</title>
		<link>http://cmunezero.com/2008/09/02/jquery-syncronising-multiple-objects-and-animations/</link>
		<comments>http://cmunezero.com/2008/09/02/jquery-syncronising-multiple-objects-and-animations/#comments</comments>
		<pubDate>Tue, 02 Sep 2008 17:40:59 +0000</pubDate>
		<dc:creator>chanel</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[animate]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[attributes]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[dhtml]]></category>
		<category><![CDATA[dom]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[interval]]></category>
		<category><![CDATA[jquery javascript]]></category>
		<category><![CDATA[timer interval]]></category>
		<category><![CDATA[timers]]></category>

		<guid isPermaLink="false">http://cmunezero.com/?p=78</guid>
		<description><![CDATA[I was just told to do some crazy animations involving multiple css attributes on multiple DOM objects.  With jQuery and its animate method, this is fairly easy to do:

$&#40;obj1&#41;.animate&#40;&#123;height:10,width:32,margin:30,left:5&#125;&#41;;
$&#40;obj2&#41;.animate&#40;&#123;height:20,width:62,margin:20,left:45&#125;&#41;;
$&#40;obj3&#41;.animate&#40;&#123;height:30,width:92,margin:10,left:25&#125;&#41;;
$&#40;obj4&#41;.animate&#40;&#123;height:40,width:122,margin:00,left:23&#125;&#41;;

Well everything is not entirely prefect because each animation occurs within its own timer interval.  If one animation is slighter more complex than the other, [...]]]></description>
			<content:encoded><![CDATA[<p>I was just told to do some crazy animations involving multiple css attributes on multiple DOM objects.  With <a href="http://jquery.com">jQuery</a> and its <a href="http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback">animate</a> method, this is fairly easy to do:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>obj1<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">32</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span><span style="color: #CC0000;">30</span><span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span>obj2<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">20</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">62</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span><span style="color: #CC0000;">20</span><span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">45</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span>obj3<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">30</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">92</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">25</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span>obj4<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">40</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">122</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span>00<span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">23</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Well everything is not entirely prefect because each animation occurs within its own timer interval.  If one animation is slighter more complex than the other, it forces the rest of the animations to wait.  This problem compounds itself to create an &#8220;easing&#8221; affect where the animation appears exponentially instead of linearly.  This is due to how browsers fail to isolate different javascript timers or tabs from affecting each other.  </p>
<p>Now my quest is to find an animation plugin where you can animate multiple objects with their own parameters in a single animation timer interval to ensure smooth, linear animation.  If I can&#8217;t find one, this might be my chance to finally submit something back to jQuery.  It might look something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>
    <span style="color: #009900;">&#123;</span>obj<span style="color: #339933;">:</span> obj1<span style="color: #339933;">,</span> params<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">32</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span><span style="color: #CC0000;">30</span><span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #009900;">&#123;</span>obj<span style="color: #339933;">:</span> obj2<span style="color: #339933;">,</span> params<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">20</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">62</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span><span style="color: #CC0000;">20</span><span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">45</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #009900;">&#123;</span>obj<span style="color: #339933;">:</span> obj3<span style="color: #339933;">,</span> params<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">30</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">92</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">25</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #009900;">&#123;</span>obj<span style="color: #339933;">:</span> obj4<span style="color: #339933;">,</span> params<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>height<span style="color: #339933;">:</span><span style="color: #CC0000;">40</span><span style="color: #339933;">,</span>width<span style="color: #339933;">:</span><span style="color: #CC0000;">122</span><span style="color: #339933;">,</span>margin<span style="color: #339933;">:</span>00<span style="color: #339933;">,</span>left<span style="color: #339933;">:</span><span style="color: #CC0000;">23</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://cmunezero.com/2008/09/02/jquery-syncronising-multiple-objects-and-animations/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Firefox: Viewing Entire Title Attribute</title>
		<link>http://cmunezero.com/2008/06/12/firefox-viewing-entire-title-attribute/</link>
		<comments>http://cmunezero.com/2008/06/12/firefox-viewing-entire-title-attribute/#comments</comments>
		<pubDate>Thu, 12 Jun 2008 04:27:02 +0000</pubDate>
		<dc:creator>chanel</dc:creator>
				<category><![CDATA[web]]></category>
		<category><![CDATA[attribute]]></category>
		<category><![CDATA[attributes]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[comic]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[dom]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[plug-in]]></category>
		<category><![CDATA[plug-ins]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[title]]></category>
		<category><![CDATA[title attribute]]></category>
		<category><![CDATA[titles]]></category>
		<category><![CDATA[web-comic]]></category>
		<category><![CDATA[webcomic]]></category>
		<category><![CDATA[xkcd]]></category>

		<guid isPermaLink="false">http://cmunezero.com/2008/06/12/firefox-viewing-entire-title-attribute/</guid>
		<description><![CDATA[One of my biggest pet peeves about Firefox was the inability to see the entire title attribute of a DOM element.  The title attribute is the text you see in a small pop-up box when you hover over an image, link, or anything on a page.  It allows the site to give further [...]]]></description>
			<content:encoded><![CDATA[<p>One of my biggest pet peeves about Firefox was the inability to see the entire title attribute of a DOM element.  The title attribute is the text you see in a small pop-up box when you hover over an image, link, or anything on a page.  It allows the site to give further information about any element on a page.  </p>
<p>The developers at Firefox decided to truncate that text to 60 characters so the user won&#8217;t get a huge text box covering their screen whenever they hovered over an element with a long title attribute.  In most cases, this would be just fine but I happen to be a big fan of <a href="http://www.xkcd.com">xkcd</a>, a geeky internet web-comic which uses the title attribute to add funny quips.</p>
<p>Using the <a href="https://addons.mozilla.org/en-US/firefox/addon/1715">Long Titles</a> extension, you never have to dig around to read the entire title attribute again.  Being such an open browser, I find it rather annoying that Firefox developers refuse to make it an option in about:config to change the cutoff limit for title attributes.</p>
]]></content:encoded>
			<wfw:commentRss>http://cmunezero.com/2008/06/12/firefox-viewing-entire-title-attribute/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
