<?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>Alexander Zerr &#187; Plugin</title>
	<atom:link href="http://www.xelaz.de/tag/plugin/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.xelaz.de</link>
	<description>Meine Erfahrungen in der Web Entwicklung</description>
	<lastBuildDate>Mon, 26 Sep 2011 18:30:56 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Elastische Textareas mit jQuery</title>
		<link>http://www.xelaz.de/elastische-textareas-mit-jquery/</link>
		<comments>http://www.xelaz.de/elastische-textareas-mit-jquery/#comments</comments>
		<pubDate>Fri, 11 Mar 2011 10:27:34 +0000</pubDate>
		<dc:creator>Alexander Zerr</dc:creator>
				<category><![CDATA[Tipps]]></category>
		<category><![CDATA[Dynamisch]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Textarea]]></category>

		<guid isPermaLink="false">http://www.xelaz.de/?p=314</guid>
		<description><![CDATA[Ich wollte dynamische Textarea haben wie sie in Facebook gibt. So habe ich im Netz nach Lösungen gesucht und bin über mehrere Lösungen/Plugins gestolpert wie hier, hier oder hier, es gibt noch mehr. 
Alle diese Lösungen waren mir zu Groß und zu Komplex. Ich möchte nicht noch ein jQuery im jQuery haben, sondern Kurz und [...]]]></description>
			<content:encoded><![CDATA[<p>Ich wollte dynamische Textarea haben wie sie in Facebook gibt. So habe ich im Netz nach Lösungen gesucht und bin über mehrere Lösungen/Plugins gestolpert wie <a href="http://fer-menta.blogspot.com/2010/12/jquery-expanding-textarea.html" target="_blank">hier</a>, <a href="http://blogs.sitepoint.com/2009/07/30/build-auto-expanding-textarea-3/" target="_blank">hier</a> oder <a href="http://www.unwrongest.com/projects/elastic/" target="_blank">hier</a>, es gibt noch mehr. </p>
<p>Alle diese Lösungen waren mir zu Groß und zu Komplex. Ich möchte nicht noch ein jQuery im jQuery haben, sondern Kurz und Schmerzlos. Dazu waren ein paar Ansätze nicht so Flexibel, da sie die Größe des Textarea an den Umbrüchen des Inhalts bestimmen und das muss wiederum mit ein paar Wrapper CSS Methoden gefixt werden, was wiederum viel eingriff in den Quelltext des Projekts bedeutet. </p>
<p>Die ganzen Unzufriedenheiten haben mich dazu veranlasst selber zu experimentieren. Und nach kurzer Zeit fand ich eine EinfachGenialeLösung so wie eine Axt, sie hat nur ein Beil und Keil das wars!</p>
<p>Mein Ansatz braucht etwas CSS und nur maximal 400Bytes kleinen jQuery Plugin.</p>

<div class="wp_syntax"><div class="code"><pre class="css">textarea<span style="color: #6666ff;">.input</span> <span style="color: #66cc66;">&#123;</span>
    	width<span style="color: #3333ff;">:<span style="color: #933;">500px</span></span><span style="color: #66cc66;">;</span> 
    	line-height<span style="color: #3333ff;">:<span style="color: #933;">16px</span></span><span style="color: #66cc66;">;</span> 
    	height<span style="color: #3333ff;">:<span style="color: #933;">16px</span></span><span style="color: #66cc66;">;</span> 
<span style="color: #66cc66;">&#125;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre>&lt;textarea class=&quot;input&quot; name=&quot;name&quot;&gt;Dynamischer Inhalt&lt;/textarea&gt;</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript">jQuery.<span style="color: #006600;">fn</span>.<span style="color: #006600;">elasticArea</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">function</span> resizeTextarea<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">height</span> = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">scrollHeight</span><span style="color: #66cc66;">/</span><span style="color: #CC0000;">2</span> + <span style="color: #3366CC;">'px'</span>;
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">height</span> = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">scrollHeight</span> + <span style="color: #3366CC;">'px'</span>;
    <span style="color: #66cc66;">&#125;</span>
    $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">keypress</span><span style="color: #66cc66;">&#40;</span>resizeTextarea<span style="color: #66cc66;">&#41;</span>
    .<span style="color: #006600;">keydown</span><span style="color: #66cc66;">&#40;</span>resizeTextarea<span style="color: #66cc66;">&#41;</span>
    .<span style="color: #006600;">keyup</span><span style="color: #66cc66;">&#40;</span>resizeTextarea<span style="color: #66cc66;">&#41;</span>
    .<span style="color: #006600;">css</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'overflow'</span>,<span style="color: #3366CC;">'hidden'</span><span style="color: #66cc66;">&#41;</span>;
    resizeTextarea.<span style="color: #006600;">call</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>;
  <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>;
&nbsp;
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'textarea.input'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">elasticArea</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>Dieser Ansatz funktioniert mit der Eigenschaft scrollHeight. Sie ist sehr Präzise und gibt genau die maximale Höhe der Textarea mit Inhalt. So nehme ich sie, Teile durch die Hälfte und setze sie der Textarea als Höhe ein. Danach wird sie wieder als Textarea Höhe gesetzt. Das macht die Textarea dynamisch in beide Richtungen wenn neuer Text eingefügt oder gelöscht wird und es passiert so schnell, dass man nichts davon mitkriegt.</p>
<p>Das ganze ist Dynamisch und wurde miniklein gehalten. So kann jeder selbst den Code nach seinen Wünschen erweitern falls er noch maximale Höhe haben möchte, die Höhe per Parameter übergeben ohne die CSS an zufassen oder sonstige Schnickschnacks.</p>
<p>Getestet hab ich in gängigen Browsern. Kann sein das irgend wo noch was hängt, aber alle von mir getesteten neue Browser haben es ohne Probleme geschluckt.</p>
<p>Eingesetzt können diese Elastischen Textareas als Input Felder. Weil ohne Inhalt sind sie so groß wie Inputs und können dynamisch mit dem Inhalt wachsen.</p>
<p>Hier ist noch eine <a href="/wp-content/uploads/2011/03/textarea.html">Live Demo</a>.</p>
<p>Das wars und mehr brauche ich nicht.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xelaz.de/elastische-textareas-mit-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>LandPage für Wordpress</title>
		<link>http://www.xelaz.de/landpage-fur-wordpress/</link>
		<comments>http://www.xelaz.de/landpage-fur-wordpress/#comments</comments>
		<pubDate>Wed, 19 Aug 2009 17:34:34 +0000</pubDate>
		<dc:creator>Alexander Zerr</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Landing Pages]]></category>
		<category><![CDATA[LandPage]]></category>
		<category><![CDATA[Plugin]]></category>

		<guid isPermaLink="false">http://www.xelaz.de/?p=98</guid>
		<description><![CDATA[LandPage ist ein simples Plugin um raus zu finden ob der User von einer Suchmaschine kommt. Es existier ein fertiges Wordpress Plugin &#8220;landingsites&#8220;, doch er ist etwas Komplex für mich und so entwickelte ich eine Lösung die mir nur das nötigste gibt. Was mir sehr Wichtig war, das der Plugin keine Ressourcen verschwendet und so [...]]]></description>
			<content:encoded><![CDATA[<p>LandPage ist ein simples Plugin um raus zu finden ob der User von einer Suchmaschine kommt. Es existier ein fertiges Wordpress Plugin &#8220;<a target="_blank" href="http://bueltge.de/wp-landingsites-de-plugin/">landingsites</a>&#8220;, doch er ist etwas Komplex für mich und so entwickelte ich eine Lösung die mir nur das nötigste gibt. Was mir sehr Wichtig war, das der Plugin keine Ressourcen verschwendet und so kam ein kleiner PHP Script raus, welcher meine Erwartungen völlig erfühlt.</p>
<p>Das LandPage Plugin wird in den Wordpress Plugin Ordner rein geschmißen und in der Plugin Verwaltung aktiviert. Jetzt kann man überall im Code folgenden Schnipsel einbauen um den Usern die von einer Suchmaschine kommen, speziellen Content zu zeigen wie zum Beispiel Werbung.</p>

<div class="wp_syntax"><div class="code"><pre class="php"><span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066;">class_exists</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'Xelaz_LandPage'</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&amp;&amp;</span> Xelaz_LandPage<span style="color: #66cc66;">::</span><span style="color: #006600;">isLanding</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>  <span style="color: #66cc66;">&#123;</span>
  <span style="color: #808080; font-style: italic;">// Ich komme von einer Suchmaschine</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Ich hab kurze Zeit meine Referer beobachtet und Suchmaschinen rausgesucht über die User auf meinen Seiten landeten. So kam eine kleine Liste raus mit Suchmaschinen jeglichen Ursprungs.<br />
Die Überprüfung bezieht sich nur auf einen Schnipsel aus der Referer URL. Wenn der User von google.com, google.de oder images.google.de kommt suche ich nur nach dem Schnipsel &#8220;google.&#8221; und das reicht mir vollkommen.<br />
Wer natürlich das nicht so sieht, kann nach seinen Wünschen die Suchmaschinen Liste im Quellcode bearbeiten.</p>
<p>Hier sind die Suchmaschinen Schnipsel:</p>

<div class="wp_syntax"><div class="code"><pre class="php"><span style="color: #ff0000">$_searchMachine</span> <span style="color: #66cc66;">=</span> <span style="color: #000066;">array</span><span style="color: #66cc66;">&#40;</span>
	<span style="color: #ff0000;">'google.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'lycos.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'yahoo.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'msn.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'live.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'icq.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'t-online.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'yandex.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'ixquick.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'freenet.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'abacho.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'altavista.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'metager'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'gmx.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'web.de'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'fireball.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'alltheweb.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'excite.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'lycos.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'allteweb.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'aol.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'aolsvc.de'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'iwon.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'ask.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'cometsystems.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'hotbot.com'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'overture.com'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'metacrawler.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'netscape.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'looksmart.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'webcrawler.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'earthlink.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'viewpoint.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'gigablast.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'startpagina.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'mamma.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'seznam.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'scroogle.org'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'conduit.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'babylon.'</span><span style="color: #66cc66;">,</span>
	<span style="color: #ff0000;">'searchand.'</span>
<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">;</span></pre></div></div>

<p>Wenn ich was Vergessen hab, könnt ihr das in den Kommentaren hinterlegen.</p>
<p>Im Herzen des Plugins benutze ich die Funktion &#8220;str_replace&#8221; die ohne Reguläre Ausdrücke auskommt. Wie hier im Beispiel:</p>

<div class="wp_syntax"><div class="code"><pre class="php">&nbsp;
<span style="color: #ff0000">$list</span> <span style="color: #66cc66;">=</span> <span style="color: #000066;">array</span><span style="color: #66cc66;">&#40;</span>
  <span style="color: #ff0000;">'google'</span><span style="color: #66cc66;">,</span>
  <span style="color: #ff0000;">'yahoo'</span>
<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">;</span>
&nbsp;
<span style="color: #ff0000">$count</span> <span style="color: #66cc66;">=</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">;</span>
&nbsp;
<span style="color: #ff0000">$str</span> <span style="color: #66cc66;">=</span> <span style="color: #000066;">str_replace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000">$list</span> <span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'#'</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000">$_SERVER</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'HTTP_REFERER'</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000">$count</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">;</span>
&nbsp;
<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000">$count</span><span style="color: #66cc66;">&gt;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>	
  <span style="color: #ff0000;">'User kommt von einer Suchmaschine'</span><span style="color: #66cc66;">;</span></pre></div></div>

<p><strong>Download:</strong> <a href="/wp-content/uploads/2009/08/landpage.zip"><strong>LandPage.php</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.xelaz.de/landpage-fur-wordpress/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

