<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	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>Comments on: Metadata within HTML comments</title>
	<atom:link href="http://james.padolsey.com/javascript/metadata-within-html-comments/feed/" rel="self" type="application/rss+xml" />
	<link>http://james.padolsey.com/javascript/metadata-within-html-comments/</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 02 Feb 2012 18:03:26 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2</generator>
	<item>
		<title>By: Web Standardista</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-15309</link>
		<dc:creator>Web Standardista</dc:creator>
		<pubDate>Mon, 29 Jun 2009 21:52:30 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-15309</guid>
		<description>Another option...

http://docs.jquery.com/Internals/jQuery.data</description>
		<content:encoded><![CDATA[<p>Another option&#8230;</p>
<p><a href="http://docs.jquery.com/Internals/jQuery.data">http://docs.jquery.com/Internals/jQuery.data</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: James</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14773</link>
		<dc:creator>James</dc:creator>
		<pubDate>Mon, 22 Jun 2009 16:51:38 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14773</guid>
		<description>@prafuitu, lol, silly me! :P</description>
		<content:encoded><![CDATA[<p>@prafuitu, lol, silly me! <img src='http://james.padolsey.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> </p>
]]></content:encoded>
	</item>
	<item>
		<title>By: prafuitu</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14766</link>
		<dc:creator>prafuitu</dc:creator>
		<pubDate>Mon, 22 Jun 2009 15:52:52 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14766</guid>
		<description>:)) You&#039;ve got to be kidding me:
&lt;pre lang=&quot;javascript&quot;&gt;
$(&#039;.column&#039;).each(function(){
    // *this* IS the DOM element! 
    // There&#039;s no need to convert it into a jQuery object
    var data = commentData( this ); 
    var columnWidth = data.width;
});
&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p> <img src='http://james.padolsey.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ) You&#8217;ve got to be kidding me:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span class="br0">&#40;</span><span class="st0">'.column'</span><span class="br0">&#41;</span>.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
    <span class="co1">// *this* IS the DOM element! </span>
    <span class="co1">// There's no need to convert it into a jQuery object</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> commentData<span class="br0">&#40;</span> <span class="kw1">this</span> <span class="br0">&#41;</span><span class="sy0">;</span> 
    <span class="kw2">var</span> columnWidth <span class="sy0">=</span> data.<span class="me1">width</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div></div>

]]></content:encoded>
	</item>
	<item>
		<title>By: Evan Byrne</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14258</link>
		<dc:creator>Evan Byrne</dc:creator>
		<pubDate>Tue, 16 Jun 2009 01:04:58 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14258</guid>
		<description>@James, still, it just doesn&#039;t seem right to me...</description>
		<content:encoded><![CDATA[<p>@James, still, it just doesn&#8217;t seem right to me&#8230;</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Jon</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14234</link>
		<dc:creator>Jon</dc:creator>
		<pubDate>Mon, 15 Jun 2009 15:44:03 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14234</guid>
		<description>Thanks James, excellent article and much better than what I was doing (lots of dives inside a hidden div).</description>
		<content:encoded><![CDATA[<p>Thanks James, excellent article and much better than what I was doing (lots of dives inside a hidden div).</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: James</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14231</link>
		<dc:creator>James</dc:creator>
		<pubDate>Mon, 15 Jun 2009 15:30:52 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14231</guid>
		<description>@Jon, &lt;code&gt;$(this)&lt;/code&gt; is a jQuery object - &lt;code&gt;commentData&lt;/code&gt; requires a DOM element reference. Here, try this:

&lt;pre lang=&quot;javascript&quot;&gt;
$(&#039;.column&#039;).each(function(){
    var data = commentData( $(this)[0] ); // [0] references the DOM element
    var columnWidth = data.width;
});
&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>@Jon, <code>$(this)</code> is a jQuery object &#8211; <code>commentData</code> requires a DOM element reference. Here, try this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span class="br0">&#40;</span><span class="st0">'.column'</span><span class="br0">&#41;</span>.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> commentData<span class="br0">&#40;</span> $<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// [0] references the DOM element</span>
    <span class="kw2">var</span> columnWidth <span class="sy0">=</span> data.<span class="me1">width</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div></div>

]]></content:encoded>
	</item>
	<item>
		<title>By: Jon</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14230</link>
		<dc:creator>Jon</dc:creator>
		<pubDate>Mon, 15 Jun 2009 15:28:47 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14230</guid>
		<description>All I wanted to be able to do was this...

&lt;pre lang=&quot;javascript&quot;&gt;
$(&#039;.column&#039;).each(function(){
    var data = commentData($(this));
    var columnWidth = data.width;
});
&lt;/pre&gt;

I&#039;m probably just being thick but if each column had an ID then I could do this....

&lt;pre lang=&quot;javascript&quot;&gt;
$(&#039;.column&#039;).each(function(){
    var data = commentData(document.getElementById($(this).attr(&#039;ID&#039;)));
    var columnWidth = data.width;
});
&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>All I wanted to be able to do was this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span class="br0">&#40;</span><span class="st0">'.column'</span><span class="br0">&#41;</span>.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> commentData<span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw2">var</span> columnWidth <span class="sy0">=</span> data.<span class="me1">width</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div></div>

<p>I&#8217;m probably just being thick but if each column had an ID then I could do this&#8230;.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span class="br0">&#40;</span><span class="st0">'.column'</span><span class="br0">&#41;</span>.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> commentData<span class="br0">&#40;</span>document.<span class="me1">getElementById</span><span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">attr</span><span class="br0">&#40;</span><span class="st0">'ID'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw2">var</span> columnWidth <span class="sy0">=</span> data.<span class="me1">width</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div></div>

]]></content:encoded>
	</item>
	<item>
		<title>By: James</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14229</link>
		<dc:creator>James</dc:creator>
		<pubDate>Mon, 15 Jun 2009 15:14:14 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14229</guid>
		<description>@Lim, Sorry about that, just updated it. :)


@Jon, why would you want to supply it with a selector? The data is tied to the parent (&lt;code&gt;commentNode.parentNode&lt;/code&gt;). This technique does not require the element to have an ID. The only reason I&#039;ve given the element an ID in the example was to illustrate how you might extract that data via JavaScript. 

@Evan, Sometimes, you may need to have a large amount of data existing within the document so you can use it when the user interacts with the page - this is preferred over Ajax when you have a small dataset and when interactivity is likely. There are many different applications. Read:

 - &lt;a href=&quot;http://loadaveragezero.com/app/drx/Data_Formats/Metadata&quot; rel=&quot;nofollow&quot;&gt;http://loadaveragezero.com/app/drx/Data_Formats/Metadata&lt;/a&gt;
 - &lt;a href=&quot;http://www.1729.com/blog/HtmlAnnotations.html&quot; rel=&quot;nofollow&quot;&gt;http://www.1729.com/blog/HtmlAnnotations.html&lt;/a&gt;
 - &lt;a href=&quot;http://www.mail-archive.com/discuss@jquery.com/msg06489.html&quot; rel=&quot;nofollow&quot;&gt;http://www.mail-archive.com/discuss@jquery.com/msg06489.html&lt;/a&gt;

Also have a look at jQuery&#039;s &quot;&lt;a href=&quot;http://plugins.jquery.com/project/metadata&quot; rel=&quot;nofollow&quot;&gt;metadata&lt;/a&gt;&quot; plugin (created by John Resig himself) to see an alternative implemenation.</description>
		<content:encoded><![CDATA[<p>@Lim, Sorry about that, just updated it. <img src='http://james.padolsey.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>@Jon, why would you want to supply it with a selector? The data is tied to the parent (<code>commentNode.parentNode</code>). This technique does not require the element to have an ID. The only reason I&#8217;ve given the element an ID in the example was to illustrate how you might extract that data via JavaScript. </p>
<p>@Evan, Sometimes, you may need to have a large amount of data existing within the document so you can use it when the user interacts with the page &#8211; this is preferred over Ajax when you have a small dataset and when interactivity is likely. There are many different applications. Read:</p>
<p> &#8211; <a href="http://loadaveragezero.com/app/drx/Data_Formats/Metadata">http://loadaveragezero.com/app/drx/Data_Formats/Metadata</a><br />
 &#8211; <a href="http://www.1729.com/blog/HtmlAnnotations.html">http://www.1729.com/blog/HtmlAnnotations.html</a><br />
 &#8211; <a href="http://www.mail-archive.com/discuss@jquery.com/msg06489.html">http://www.mail-archive.com/discuss@jquery.com/msg06489.html</a></p>
<p>Also have a look at jQuery&#8217;s &#8220;<a href="http://plugins.jquery.com/project/metadata">metadata</a>&#8221; plugin (created by John Resig himself) to see an alternative implemenation.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Evan Byrne</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14227</link>
		<dc:creator>Evan Byrne</dc:creator>
		<pubDate>Mon, 15 Jun 2009 14:07:20 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14227</guid>
		<description>Why would you want to store data inside HTML anyways? I don&#039;t think I have/will ever come across a situation where I would have to do something like this.</description>
		<content:encoded><![CDATA[<p>Why would you want to store data inside HTML anyways? I don&#8217;t think I have/will ever come across a situation where I would have to do something like this.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Jon</title>
		<link>http://james.padolsey.com/javascript/metadata-within-html-comments/comment-page-1/#comment-14226</link>
		<dc:creator>Jon</dc:creator>
		<pubDate>Mon, 15 Jun 2009 14:03:14 +0000</pubDate>
		<guid isPermaLink="false">http://james.padolsey.com/?p=928#comment-14226</guid>
		<description>It should be fairly easy to modify this so that you can supply it with a jQuery selector or a jQuery object, which would be useful when the element doesn&#039;t have an ID, but my brain isn&#039;t working today.

Would this be easy enough?</description>
		<content:encoded><![CDATA[<p>It should be fairly easy to modify this so that you can supply it with a jQuery selector or a jQuery object, which would be useful when the element doesn&#8217;t have an ID, but my brain isn&#8217;t working today.</p>
<p>Would this be easy enough?</p>
]]></content:encoded>
	</item>
</channel>
</rss>

