<?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>Wanderwort by Roman Ernst &#187; Web 2.0</title>
	<atom:link href="http://wanderwort.de/tag/web-20/feed/" rel="self" type="application/rss+xml" />
	<link>http://wanderwort.de</link>
	<description>Interkulturelle Wortkolletionen in Ruby, PHP, XHTML, CSS nah am Strom der Gesellschaft</description>
	<lastBuildDate>Mon, 14 Mar 2011 15:10:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>select any HTML text in element with jQuery</title>
		<link>http://wanderwort.de/2009/11/19/select-any-html-text-in-element-with-jquery/</link>
		<comments>http://wanderwort.de/2009/11/19/select-any-html-text-in-element-with-jquery/#comments</comments>
		<pubDate>Thu, 19 Nov 2009 15:25:44 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Arbeit]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=170</guid>
		<description><![CDATA[The following script jQuery extension selects any text from a given jQuery selector. Tested with Firefox and Safari &#8211; should work in IE6+ as well. jQuery.fn.extend&#40;&#123; selectText: function&#40;&#41; &#123; var text = $&#40;this&#41;&#91;0&#93;; if &#40;$.browser.msie&#41; &#123; var range = document.body.createTextRange&#40;&#41;; range.moveToElementText&#40;text&#41;; range.select&#40;&#41;; &#125; else if &#40;$.browser.mozilla &#124;&#124; $.browser.opera&#41; &#123; var selection = window.getSelection&#40;&#41;; var range [...]]]></description>
			<content:encoded><![CDATA[<p>The following <del datetime="2009-11-19T15:26:12+00:00">script</del> <ins datetime="2009-11-19T15:26:37+00:00">jQuery extension</ins> selects any text from a given jQuery selector. Tested with Firefox and Safari &#8211; should work in IE6+ as well.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  selectText<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: #003366; font-weight: bold;">var</span> text <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: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">msie</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> range <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">createTextRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      range.<span style="color: #660066;">moveToElementText</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      range.<span style="color: #660066;">select</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: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">mozilla</span> <span style="color: #339933;">||</span> $.<span style="color: #660066;">browser</span>.<span style="color: #660066;">opera</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> selection <span style="color: #339933;">=</span> window.<span style="color: #660066;">getSelection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #003366; font-weight: bold;">var</span> range <span style="color: #339933;">=</span> document.<span style="color: #660066;">createRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      range.<span style="color: #660066;">selectNodeContents</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      selection.<span style="color: #660066;">removeAllRanges</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      selection.<span style="color: #660066;">addRange</span><span style="color: #009900;">&#40;</span>range<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">safari</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> selection <span style="color: #339933;">=</span> window.<span style="color: #660066;">getSelection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      selection.<span style="color: #660066;">setBaseAndExtent</span><span style="color: #009900;">&#40;</span>text<span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> text<span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <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: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>To use it simly do:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> shortSelector <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">selectText</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> longSelector <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul#names li:contains(&quot;Hampel&quot;)'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">selectText</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>written on top of <a href="http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse">Source</a> and <a href="http://www.codingforums.com/archive/index.php/t-105808.html">Source</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2009/11/19/select-any-html-text-in-element-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery and stopPropagation</title>
		<link>http://wanderwort.de/2009/01/12/jquery-and-stoppropagation/</link>
		<comments>http://wanderwort.de/2009/01/12/jquery-and-stoppropagation/#comments</comments>
		<pubDate>Mon, 12 Jan 2009 15:01:58 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://wanderwort.de/?p=40</guid>
		<description><![CDATA[Often you might not even notice the following problem: Imagine you got a table row or a list element including several links. By default you defined a function like $&#40;'table tr'&#41;.click&#40;function&#40;event&#41; &#123; target = $&#40;this&#41;.find&#40;'a:first'&#41;.attr&#40;'href'&#41;; open&#40;target, '_self'&#41;; &#125;&#41; In this case the function finds the first defined link in our row and links it to [...]]]></description>
			<content:encoded><![CDATA[<p>Often you might not even notice the following problem: Imagine you got a table row or a list element including several links. By default you defined a function like</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'table tr'</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>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  target <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;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a:first'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>target<span style="color: #339933;">,</span> <span style="color: #3366CC;">'_self'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>In this case the function finds the first defined link in our row and links it to the row itself.<br />
If we click on the link, we get redirected to the defined target. But as the link is lying in our linked row, this click will also be executed and our target is loaded twice. Even though the user won&#8217;t notice it, functions like deleting or answering will throw errors.<br />
jQuery got a very nice core function to suppress the second loading. </p>
<p><a href="http://docs.jquery.com/Types/Event#event.stopPropagation.28.29">stopPropagation()</a></p>
<p>We are using this function to stop the propagation of our click-event like shown:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'table tr'</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>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  target <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;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a:first'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>target<span style="color: #339933;">,</span> <span style="color: #3366CC;">'_self'</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: #009900;">&#40;</span><span style="color: #3366CC;">'table tr a'</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>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  event.<span style="color: #660066;">stopPropagation</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></pre></div></div>

<p>It reminds me of a &#8220;return false;&#8221;. Just look for the bind function here:<br />
 <a href="http://jquery.bassistance.de/api-browser/">jQuery API Browser</a>. There you may find more details on similiar cases, too.</p>
<p>UPDATE for Internet Explorer</p>
<p>As this won&#8217;t work in MS&#8217; IE, you have to use the similar</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">event.<span style="color: #660066;">cancelBubble</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span></pre></div></div>

<p>(<a href="http://msdn.microsoft.com/de-de/library/system.windows.browser.htmleventargs.stoppropagation(VS.95).aspx">Source</a>)</p>
<p>If you put both behind each other, IE would still throw some errors. So you should try following if-function if you are using jQuery:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">    agent <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">browser</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>agent.<span style="color: #660066;">msie</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		event.<span style="color: #660066;">cancelBubble</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		event.<span style="color: #660066;">stopPropagation</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2009/01/12/jquery-and-stoppropagation/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>TalentRun startet heute</title>
		<link>http://wanderwort.de/2007/12/17/talentrun-startet-heute/</link>
		<comments>http://wanderwort.de/2007/12/17/talentrun-startet-heute/#comments</comments>
		<pubDate>Mon, 17 Dec 2007 11:24:31 +0000</pubDate>
		<dc:creator>pex</dc:creator>
				<category><![CDATA[Gemachtes]]></category>
		<category><![CDATA[Arbeit]]></category>
		<category><![CDATA[TalentRun]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://wanderwort.de/2007/12/17/talentrun-startet-heute/</guid>
		<description><![CDATA[Mein neuestes Projekt in Sachen Frontend Entwicklung für die Firma TalentRun GmbH in Hamburg neigt sich seinem Ende und ist heute als Beta für Freunde und Tester auf talentrun.de online gegangen. Aktuelle Infos findet Ihr zum Beispiel im Videointerview mit Gruenderszene.de auf Sevenload oder in der letzten Pressemeldung der GEMA Wer die Plattform testen möchte, [...]]]></description>
			<content:encoded><![CDATA[<p>Mein neuestes Projekt in Sachen Frontend Entwicklung für die Firma TalentRun GmbH in Hamburg neigt sich seinem Ende und ist heute als Beta für Freunde und Tester auf <a href="http://www.talentrun.de">talentrun.de</a> online gegangen.</p>
<p>Aktuelle Infos findet Ihr zum Beispiel im Videointerview mit <a href="http://de.sevenload.com/videos/bEsnKI1/talentrun">Gruenderszene.de auf Sevenload</a> oder in der letzten <a href="http://www.gema.de/presse/pressemitteilungen/pressemitteilung/?tx_ttnews[tt_news]=676&#038;tx_ttnews[backPid]=76&#038;cHash=518141f71c">Pressemeldung der GEMA</a></p>
<p>Wer die Plattform testen möchte, kann sich natürlich gern melden und seine Freischaltung beschleunigen.<br />
Anbei noch eine kleine Beschreibung der Grundidee der Karaoke-Plattform..<br />
<span id="more-10"></span></p>
<p>Singstar hat den Weg bereitet und nun können Karaoke-Begeisterte sogar kostenlos und ohne teure Hardware zum Sternchen werden. Das Portal <strong>www.TalentRun.de </strong>bietet seinen Usern in drei Hauptbereichen alles, was das Web 2.0-Herz begehrt.</p>
<p>Im Bereich <strong>„Singen &amp; Aufnehmen“</strong> sind der stimmlichen Kreativität keine Grenzen gesetzt. Für den User steht eine große Auswahl an bekannten Songs bereit. Einzig ein Mikrofon und Rhythmusgefühl benötigt das Talent, um den Text des Liedes abzulesen und zur Melodie seine Version des gewählten Liedes aufzunehmen. Die Flash-Applikation ist einfach und intuitiv zu bedienen und wird direkt im Browser abgespielt, ein Softwaredownload ist also nicht nötig. Damit auch eine professionelle Gesamtperformance entsteht kann sogar eine Webcam angeschlossen werden. Das eigene Musikvideo ist fertig.</p>
<p>Andere User können die Aufnahmen nun im Bereich <strong>„Anhören &amp; Ansehen“</strong> bewerten und auch kommentieren. Sie können sich als Fans outen oder auch selbst von anderen Usern zum Star gekürt werden. Damit entsteht ein Gemeinschaftsgefühl der ganz besonderen Art, schnell sind neue Freundschaften geschlossen, über die Grenzen des Wohnzimmers hinaus.</p>
<p>Wer wissen will, wie gut die gesangliche Leistung im Vergleich zu anderen ist, kann sich im Bereich <strong>„Contests und Duelle“</strong> mit anderen Usern messen. Hier stehen bereits Contests bereit, an denen der User teilnehmen kann. Ihm steht allerdings auch frei, einen eigenen ins Leben zu rufen. In den privaten Contests steht die Anerkennung der Community im Vordergrund, es sind aber auch offizielle Contests geplant, bei denen die User einen Preis gewinnen können.<br />
In den USA haben sich ähnliche Plattformen bereits durchgesetzt. Der Gedanke, seine Lieblingssongs alleine oder auf einer Party mit Freunden einmal selbst performen zu können und es dann online auch immer wieder zum Ansehen bereit zu haben ist ein sehr reizvoller. In Zeiten des Web 2.0, in der die Selbstdarstellung ein zentraler Bestandteil ist, erhält die Anerkennung der Community eine mindestens eben so große Bedeutung.</p>
<p align="center"><a href="http://wanderwort.de/wp-content/uploads/2007/12/dsc00078.JPG" title="TalentRun Online Karaoke"><img src="http://wanderwort.de/wp-content/uploads/2007/12/dsc00078.thumbnail.JPG" alt="TalentRun Online Karaoke" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://wanderwort.de/2007/12/17/talentrun-startet-heute/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

