<?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>homepagebewertung.de &#187; jQuery</title>
	<atom:link href="http://www.homepagebewertung.de/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.homepagebewertung.de</link>
	<description>WebNews, WebTec und mehr</description>
	<lastBuildDate>Fri, 18 Jun 2010 06:13:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Geolocation Overlay mit Googles Location API und jQuery</title>
		<link>http://www.homepagebewertung.de/2010/04/01/geolocation-overlay-mit-googles-location-api-und-jquery/</link>
		<comments>http://www.homepagebewertung.de/2010/04/01/geolocation-overlay-mit-googles-location-api-und-jquery/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 11:36:58 +0000</pubDate>
		<dc:creator>Schecke</dc:creator>
				<category><![CDATA[WebTec]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Geolocation]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.homepagebewertung.de/?p=337</guid>
		<description><![CDATA[Vor kurzem habe ich ein neues Projekt fertiggestellt (http://www.sae-alumni.org) welches anfangs nur für Deutschland, Österreich und die Schweiz ausgeliefert werden soll. Alle anderen Länder bekommen ein Overlay, wie bei den Lightboxes, zu sehen und können dann auf Ihre lokalisierte Version wechseln. Das ganze ging mit jQuery und Googles Location API sehr schnell und einfach! Für [...]]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p>Vor kurzem habe ich ein neues Projekt fertiggestellt (<a href="http://www.sae-alumni.org">http://www.sae-alumni.org</a>) welches anfangs nur für Deutschland, Österreich und die Schweiz ausgeliefert werden soll. Alle anderen Länder bekommen ein Overlay, wie bei den Lightboxes, zu sehen und können dann auf Ihre lokalisierte Version wechseln.</p>
<p>Das ganze ging mit jQuery und Googles Location API sehr schnell und einfach!<br />
<span id="more-337"></span><br />
Für das Overlay habe ich das jQuery-Plugin <a href="http://www.ericmmartin.com/projects/simplemodal/">Simplemodal</a> verwendet, mit diesem kann man einfach Overlays erzeugen.<br />
Sollte noch kein jQuery eingebunden sein empfehle ich den Weg über Googles &#8220;Contend Delivery Service&#8221; und die jsapi. Außerdem binde ich gleich Simplemodal mit ein, den Pfad muss man natürlich anpassen.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;google.load(&quot;jquery&quot;, &quot;1.4.2&quot;);&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.simplemodal-1.3.3.min.js&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>Zum testen könnt Ihr folgendes CSS von SimpleModal verwenden und dann anpassen:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"> <span style="color: #808080; font-style: italic;">/* Overlay */</span>
<span style="color: #cc00cc;">#overlay</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span><span style="color: #993333;">wait</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Container */</span>
<span style="color: #cc00cc;">#container</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">580px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">400px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Verdana</span><span style="color: #00AA00;">,</span> Arial<span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">16px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>background<span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>text-align<span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#container</span> .contact-<span style="color: #000000; font-weight: bold;">content</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">40px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #3333ff;">:link</span><span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #3333ff;">:active</span><span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #3333ff;">:visited</span><span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #3333ff;">:hover</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#container</span> a.modal-close<span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #6666ff;">.modal-close</span><span style="color: #3333ff;">:link</span><span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #6666ff;">.modal-close</span><span style="color: #3333ff;">:active</span><span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #6666ff;">.modal-close</span><span style="color: #3333ff;">:visited </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">1.2em</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">-4px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#container</span> a<span style="color: #6666ff;">.modal-close</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#9bb3b3</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Jetzt noch das Javascript mit Googles Location-API einbinden. In meinem Fall habe ich geprüft, ob der Client nicht aus DE, AT oder CH kommt. Zur Abfrage können alle <a href="http://www.iso.org/iso/iso-3166-1_decoding_table">ISO-3166-1 Codes</a> verwendet werden.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</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: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>google.<span style="color: #660066;">loader</span>.<span style="color: #660066;">ClientLocation</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #003366; font-weight: bold;">var</span> loc <span style="color: #339933;">=</span> google.<span style="color: #660066;">loader</span>.<span style="color: #660066;">ClientLocation</span><span style="color: #339933;">;</span>
     <span style="color: #003366; font-weight: bold;">var</span> countryCode <span style="color: #339933;">=</span> loc.<span style="color: #660066;">address</span>.<span style="color: #660066;">country_code</span><span style="color: #339933;">;</span>
     <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>countryCode <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;DE&quot;</span> <span style="color: #339933;">&amp;&amp;</span> countryCode <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;AT&quot;</span> <span style="color: #339933;">&amp;&amp;</span> countryCode <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;CH&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&lt;div id=&quot;</span>overlay<span style="color: #3366CC;">&quot;&gt;Visible for other Countries&lt;/div&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#overlay&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">modal</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
            closeHTML<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;&lt;a class=&quot;</span>modal<span style="color: #339933;">-</span><span style="color: #000066;">close</span><span style="color: #3366CC;">&quot; title=&quot;</span><span style="color: #000066;">Close</span><span style="color: #3366CC;">&quot; href=&quot;</span>#<span style="color: #3366CC;">&quot;&gt;x&lt;/a&gt;&quot;</span><span style="color: #339933;">,</span>
            position<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;15%&quot;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
            opacity<span style="color: #339933;">:</span><span style="color: #CC0000;">80</span><span style="color: #339933;">,</span>
            overlayId<span style="color: #339933;">:</span> <span style="color: #3366CC;">'overlay'</span><span style="color: #339933;">,</span>
            containerId<span style="color: #339933;">:</span> <span style="color: #3366CC;">'container'</span><span style="color: #339933;">,</span>
            onClose<span style="color: #339933;">:</span> container.<span style="color: #000066;">close</span>
        <span style="color: #009900;">&#125;</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;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> container <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066;">close</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>dialog<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#overlay&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#container&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</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;">&#125;</span></pre></div></div>

<p>Jetzt noch das div#overlay aus obigen JavaScript mit dem entsprechenden Inhalt füllen, fertig.</p>

<!-- google_ad_section_end -->
]]></content:encoded>
			<wfw:commentRss>http://www.homepagebewertung.de/2010/04/01/geolocation-overlay-mit-googles-location-api-und-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Fundstück] Vergleich zwischen der jQuery und YUI3 Syntax</title>
		<link>http://www.homepagebewertung.de/2010/03/27/fundstuck-vergleich-zwischen-der-jquery-und-yui3-syntax/</link>
		<comments>http://www.homepagebewertung.de/2010/03/27/fundstuck-vergleich-zwischen-der-jquery-und-yui3-syntax/#comments</comments>
		<pubDate>Sat, 27 Mar 2010 08:53:35 +0000</pubDate>
		<dc:creator>Schecke</dc:creator>
				<category><![CDATA[WebTec]]></category>
		<category><![CDATA[Fundstück]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[YUI]]></category>

		<guid isPermaLink="false">http://www.homepagebewertung.de/?p=327</guid>
		<description><![CDATA[Super gemacht! Ein Vergleich der aktuellen jQuery 1.4.2 und der YUI3 Syntax, inkl. kurzer Erläuterungen.]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p><a href="http://www.homepagebewertung.de/wp-content/uploads/2010/03/jQuery-YUI3-Rosetta-Stone.jpg"><img class="alignnone size-medium wp-image-328" title="jQuery - YUI3 Vergleich" src="http://www.homepagebewertung.de/wp-content/uploads/2010/03/jQuery-YUI3-Rosetta-Stone-500x190.jpg" alt="" width="500" height="190" /></a></p>
<p>Super gemacht! Ein <a href="http://carlos.bueno.org/jq-yui.html">Vergleich</a> der aktuellen jQuery 1.4.2 und der YUI3 Syntax, inkl. kurzer Erläuterungen.</p>

<!-- google_ad_section_end -->
]]></content:encoded>
			<wfw:commentRss>http://www.homepagebewertung.de/2010/03/27/fundstuck-vergleich-zwischen-der-jquery-und-yui3-syntax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Fundstück] jQuery 1.4 Dokumentation als CHM-Datei</title>
		<link>http://www.homepagebewertung.de/2010/03/09/fundstuck-jquery-1-4-dokumentation-als-chm-datei/</link>
		<comments>http://www.homepagebewertung.de/2010/03/09/fundstuck-jquery-1-4-dokumentation-als-chm-datei/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 16:40:00 +0000</pubDate>
		<dc:creator>Schecke</dc:creator>
				<category><![CDATA[WebTec]]></category>
		<category><![CDATA[Dokumentation]]></category>
		<category><![CDATA[Fundstück]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.homepagebewertung.de/?p=279</guid>
		<description><![CDATA[Nicht schlecht, hier die Dokumentation von jQuery zum lokalen öffnen als CHM-Datei.]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p><img class="alignnone size-medium wp-image-280" title="Jquery 1.4 Full Documentation In Chm Format" src="http://www.homepagebewertung.de/wp-content/uploads/2010/03/Jquery-1.4-Full-Documentation-In-Chm-Format-Web-Designer-And-Web-Developer_s-Hideout-500x187.jpg" alt="" width="500" height="187" /></p>
<p>Nicht schlecht, hier die <a href="http://www.dailybloggr.com/2010/03/the-social-media-cheatsheet-infographic/">Dokumentation von jQuery</a> zum lokalen öffnen als CHM-Datei.</p>

<!-- google_ad_section_end -->
]]></content:encoded>
			<wfw:commentRss>http://www.homepagebewertung.de/2010/03/09/fundstuck-jquery-1-4-dokumentation-als-chm-datei/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Glimmer &#8211; jQuery um Animationen erweitern</title>
		<link>http://www.homepagebewertung.de/2010/02/26/glimmer-jquery-um-animationen-erweitern/</link>
		<comments>http://www.homepagebewertung.de/2010/02/26/glimmer-jquery-um-animationen-erweitern/#comments</comments>
		<pubDate>Fri, 26 Feb 2010 10:17:47 +0000</pubDate>
		<dc:creator>Schecke</dc:creator>
				<category><![CDATA[WebTec]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Library]]></category>

		<guid isPermaLink="false">http://www.homepagebewertung.de/?p=220</guid>
		<description><![CDATA[Glimmer ist eine Animations-Bibliothek die auf jQuery aufsetzt und viele vordefinierte Animationsarten wie z.B. easeInElastic, easeOutBounce, swing oder howdyOut. Damit lassen sich schnell ansprechende Animationen in die Website einbauen ohne sich selbst groß über die Bewegungsabläufe z.B. bei einer Beschleunigung Gedanken machen zu müssen. Zum Glimmer &#8211; Lab Beispiel-Animationen]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p><a class="content-image" href="http://www.homepagebewertung.de/wp-content/uploads/2010/02/Glimmer-Lab-MIX-Online.jpg"><img class="alignnone size-medium wp-image-221" title="Glimmer - Lab" src="http://www.homepagebewertung.de/wp-content/uploads/2010/02/Glimmer-Lab-MIX-Online-500x132.jpg" alt="" width="500" height="132" /></a></p>
<p>Glimmer ist eine Animations-Bibliothek die auf jQuery aufsetzt und viele vordefinierte Animationsarten wie z.B. easeInElastic, easeOutBounce, swing oder howdyOut. Damit lassen sich schnell ansprechende Animationen in die Website einbauen ohne sich selbst groß über die Bewegungsabläufe z.B. bei einer Beschleunigung Gedanken machen zu müssen.</p>
<p>Zum <a href="http://visitmix.com/labs/glimmer/">Glimmer &#8211; Lab</a><br />
<a href="http://visitmix.com/labs/glimmer/samples/freestyle.html">Beispiel-Animationen </a></p>

<!-- google_ad_section_end -->
]]></content:encoded>
			<wfw:commentRss>http://www.homepagebewertung.de/2010/02/26/glimmer-jquery-um-animationen-erweitern/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

