kulturbanause blog » JavaScript http://kulturbanause.de Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um Webdesign, Social Media und digitale Bildbearbeitung Sat, 04 Feb 2012 11:03:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Klasse zum <body> hinzufügen wenn JavaScript (jQuery) aktiv ist http://kulturbanause.de/2012/01/klasse-zum-body-hinzufugen-wenn-javascript-jquery-aktiv-ist/ http://kulturbanause.de/2012/01/klasse-zum-body-hinzufugen-wenn-javascript-jquery-aktiv-ist/#comments Mon, 16 Jan 2012 07:33:05 +0000 Jonas Hellwig http://kulturbanause.de/?p=7067 js-per-jqueryMit diesem winzigen Snippet könnt ihr dem body-Tag eures HTML-Dokuments eine Klasse zuweisen, sofern JavaScript beim Besucher aktiv ist. Das Prinzip ist denkbar einfach: Wir fügen die entsprechende Klasse per jQuery hinzu. Wenn JavaScript deaktiviert ist, wird folglich auch keine Klasse zugewiesen. Kopiert das nachfolgende Snippet in den head oder footer eurer Website. Wenn JavaScript …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> js-per-jquery

Mit diesem winzigen Snippet könnt ihr dem body-Tag eures HTML-Dokuments eine Klasse zuweisen, sofern JavaScript beim Besucher aktiv ist. Das Prinzip ist denkbar einfach: Wir fügen die entsprechende Klasse per jQuery hinzu. Wenn JavaScript deaktiviert ist, wird folglich auch keine Klasse zugewiesen.

Kopiert das nachfolgende Snippet in den head oder footer eurer Website. Wenn JavaScript aktiv ist, wird dem body die Klasse "js" zugewiesen.
jQuery wird übrigens über Google eingebunden. Wenn das Framework bei euch bereits aktiv ist, könnt ihr die obere Zeile also weglassen. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('body').addClass('js');
  });
</script>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2012/01/klasse-zum-body-hinzufugen-wenn-javascript-jquery-aktiv-ist/feed/ 2 JavaScript-Events im Responsive Webdesign mit Breakpoints.js http://kulturbanause.de/2012/01/javascript-events-im-responsive-webdesign-mit-breakpoints-js/ http://kulturbanause.de/2012/01/javascript-events-im-responsive-webdesign-mit-breakpoints-js/#comments Tue, 10 Jan 2012 08:29:16 +0000 Jonas Hellwig http://kulturbanause.de/?p=7150 breakpoint-js"Responsive Webdesign" ist in aller Munde, doch für komplexe Seitenstrukturen und Usability-Konzepte reicht CSS alleine häufig nicht mehr aus. Das Script Breakpoint.js erlaubt es JavaScript-Events an bestimmte Media Queries zu knüpfen. Wird ein bestimmter Viewport erreicht oder verlassen, löst das Script ein Event aus. Der große Vorteil von Breakpoint.js ist, dass das Script nicht versucht …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> breakpoint-js

"Responsive Webdesign" ist in aller Munde, doch für komplexe Seitenstrukturen und Usability-Konzepte reicht CSS alleine häufig nicht mehr aus.
Das Script Breakpoint.js erlaubt es JavaScript-Events an bestimmte Media Queries zu knüpfen. Wird ein bestimmter Viewport erreicht oder verlassen, löst das Script ein Event aus.

Der große Vorteil von Breakpoint.js ist, dass das Script nicht versucht ein spezielles Problem zu lösen sondern sehr allgemein funktioniert und dadurch universell einsetzbar ist. Mit den Möglichkeiten von JavaScript in Kombination mit CSS lassen sich auch aufwändige mobile Website benutzerfreundlich umsetzen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2012/01/javascript-events-im-responsive-webdesign-mit-breakpoints-js/feed/ 3 HTML-Elemente per JavaScript (jQuery) ersetzen http://kulturbanause.de/2011/12/html-elemente-per-javascript-jquery-ersetzen/ http://kulturbanause.de/2011/12/html-elemente-per-javascript-jquery-ersetzen/#comments Thu, 01 Dec 2011 09:21:22 +0000 Jonas Hellwig http://kulturbanause.de/?p=6823 jquery-logo-iconMit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> jquery-logo-icon

Mit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet als dem Googlebot; Stichwort Cloaking. Ihr solltet beim Content-Replacement also immer genau prüfen, was der User und was Google sieht.

Demo

Die folgende Demo-Datei zeigt drei unterschiedliche Möglichkeiten HTML-Elemente per JavaScript zu ersetzen.
Mit der jQuery-Funktion .text() wird der Inhalt eines bestimmten HTML-Elements durch einen alternativen Inhalt ersetzt. Mit .load() ersetzt ihr den Inhalt eines HTML-Elements durch den Inhalt einer externen Datei und .replaceWith() ersetzt nicht nur den Inhalt, sondern auch ausgewählte HTML-Elemente.

Demo in neuem Fenster öffnen

Code

Und so sieht der Quellcode der oben gezeigten Demo-Datei aus. Ich habe alle Funktionen per Kommentar direkt im Code erklärt. Ihr könnt die Dateien der Demo auch herunterladen.

Demodateien herunterladen

Beachtet bitte, dass die Funktion .load() in einer lokalen Version u.U. nicht funktioniert. 

...
<body>
<ul>
  <li><a href="#" id="buttonText">Inhalte per .text() ersetzen</a></li>
  <li><a href="#" id="buttonLoad">Inhalte per .load() ersetzen</a></li>
  <li><a href="#" id="buttonReplace">Inhalte per .replaceWith() ersetzen</a></li>
  <li><a href="#" onClick="window.location.reload()">Demo neu laden</a></li>
</ul>

<div id="container">
  <h2 id="topic">Überschrift</h2>
  <div id="content">Inhalt</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
		// .text()
		$("#buttonText").click(function(){
			$("#topic").text("Mit .text() ersetzte Überschrift"); // Der Inhalt von #topic wird durch den Inhalt von .text() ersetzt
			$("#content").text("Mit .text() ersetzter Inhalt"); // Der Inhalt von #content wird durch den Inhalt von .text() ersetzt
		});

		// .load()
		$("#buttonLoad").click(function(){
			$('#container').load('ajax/content.html'); // Der gesamte Inhalt von #container wird durch den Inhalt der Datei "ajax/content.html" ersetzt.
		});

		// .replace()
		$("#buttonReplace").click(function(){
			$('#container').replaceWith("<div id='new'><h2>Alles mit .replace() ersetzt</h2><div>Jetzt musst du die Demo neu laden, da sich alle Elemente verändert haben. </div>"); // Sowohl das Element #container als auch der gesamte enthaltene Content wird durch den Inhalt von .replace() ersetzt.
		});
  });
</script>
</body>
...

Wenn ihr euch weiter mit diesem Thema befassen möchtet, empfehle ich euch folgende weiterführende Links zu den hier beschriebenen Funktionen und Themen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/12/html-elemente-per-javascript-jquery-ersetzen/feed/ 3 Elemente mit jQuery auf- und zufahren lassen (slide toggle) und parallel das Icon austauschen http://kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/ http://kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/#comments Thu, 17 Nov 2011 06:32:01 +0000 Jonas Hellwig http://kulturbanause.de/?p=6756 jquery-slide-toggleIch habe beim Aufräumen meiner Dropbox ein praktisches Snippet zum Slide-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden. Ich habe eine Basis-Datei erstellt, die nur …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> jquery-slide-toggle

Ich habe beim Aufräumen meiner Dropbox ein praktisches Snippet zum Slide-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden.
Ich habe eine Basis-Datei erstellt, die nur den elementaren Code der Funktion enthält. Zusätzlich habe die Demo optisch aufbereitet und ebenfalls als Download bereitgestellt. Das Mini-Script kann aber auch einfach kopiert und sofort eingesetzt werden.

Aufbereitete Demo

Zunächst einmal die mit CSS3 gestaltete Demo-Version. Diese Demo dient dazu den Effekt so zu zeigen wie ich ihn mir auch auf einer Website vorstellen kann. Achtet darauf, dass das Icon sich je nach Zustand verändert.

Der Download beinhaltet eine HTML-Datei und eine Mini-Sprite mit der Grafik des Buttons.

Dateien dieser Demo herunterladen

Basis-Version ohne Design

Wie eingangs erwähnt habe ich auch eine Basis-Version erstellt. Diese Datei enthält nur den Code der für die Funktion auch wirklich benötigt wird. Wenn ihr die Funktion also schnell einsetzen wollt, müsst ihr nicht erst ein gestaltetes Beispiel umbauen.

Der HTML- und JavaScript-Code des Beispiels sieht wie folgt aus: Das Grundgerüst bildet eine Definitionsliste. Innerhalb des Definition Term dt wird die Überschrift und der "Mehr lesen"-Link eingebunden. Die per CSS ausgeblendete Definition Definition dd beinhaltet den ausführlichen Text.

Per JavaScript wird bei einem Klick auf dt das nachfolgende dd-Element eingeblendet. Gleichzeitig wird die Klasse des a-Tags innerhalb von dt ausgetauscht. jQuery wird übrigens extern von Google eingebunden. 

<body>
<dl>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("dt").click(function(){ // trigger
		$(this).next("dd").slideToggle("fast"); // blendet beim Klick auf "dt" die nächste "dd" ein.
		$(this).children("a").toggleClass("closed open"); // wechselt beim Klick auf "dt" die Klasse des enthaltenen a-Tags von "closed" zu "open".
	});
});

</script>
</body>

Der CSS-Code des Beispiels ist ebenfalls sehr übersichtlich.

dd { display:none; }

.closed { background:red; }

.open { background:green; }

Der Download beinhaltet eine HTML-Datei in der alles enthalten ist.

Basis-Version herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/feed/ 10 Photoshop: Suchfunktion für Ebenen nachrüsten http://kulturbanause.de/2011/11/photoshop-suchfunktion-fur-ebenen-nachrusten/ http://kulturbanause.de/2011/11/photoshop-suchfunktion-fur-ebenen-nachrusten/#comments Thu, 10 Nov 2011 06:36:17 +0000 Jonas Hellwig http://kulturbanause.de/?p=6641 photoshop-script-ebene-suchenVor Kurzem habe ich mir noch einmal angeschaut welche Wünsche ihr für Photoshop CS6 geäußert habt und was davon in der kommenden Version voraussichtlich integriert werden wird. Unter anderem wurde sich eine Suchfunktion für Ebenen gewünscht, und da dieses Feature geradezu nach einer Script-Lösung schreit, habe ich mich auf die Suche gemacht. Mit einem Photoshop-Script …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> photoshop-script-ebene-suchen

Vor Kurzem habe ich mir noch einmal angeschaut welche Wünsche ihr für Photoshop CS6 geäußert habt und was davon in der kommenden Version voraussichtlich integriert werden wird. Unter anderem wurde sich eine Suchfunktion für Ebenen gewünscht, und da dieses Feature geradezu nach einer Script-Lösung schreit, habe ich mich auf die Suche gemacht. Mit einem Photoshop-Script lässt sich in den Version CS2+ die Suchfunktion nachträglich installieren. Zwar wäre eine "echte" Suche besser, aber da das Feature auch in der CS6 nicht erwartet wird, ist das Script die beste mir bekannte Lösung.

Photoshop-Script installieren

Ich habe das original Photoshop-Script auf morris-photographics.com entdeckt und für den eigenen Bedarf vom Englischen ins Deutsche übersetzt. Um das Script zu verwenden geht ihr wie folgt vor:

  1. Ladet euch das Script herunter und entpackt die Datei
  2. Verschiebt die Datei in folgendes Verzeichnis: Programme → Adobe Photoshop CSx → Presets → Scripts
  3. Startet Photoshop neu
  4. Ihr findet den neuen Menüeintrag unter Datei → Scripte → Ebenen suchen

Das Script tut was es soll und ihr werdet schnell merken, dass sich eindeutig benannte Ebenen lohnen. Nichts desto trotz wäre eine von Adobe integrierte Lösung wünschenswert, in der die Suchmaske in die Ebenenpalette integriert ist und über Hilfsfunktionen wie Auto-Vervollständigung etc. verfügt.

Original Version:
morris-photographics.com/photoshop/scripts/find-layer

Download Photoshop-Script

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/11/photoshop-suchfunktion-fur-ebenen-nachrusten/feed/ 0 CSS3 Vendor-Prefixes per JavaScript erzeugen: -prefix-free http://kulturbanause.de/2011/10/css3-vendor-prefixes-per-javascript-erzeugen-prefix-free/ http://kulturbanause.de/2011/10/css3-vendor-prefixes-per-javascript-erzeugen-prefix-free/#comments Wed, 19 Oct 2011 06:00:59 +0000 Jonas Hellwig http://kulturbanause.de/?p=6532 prefix-free-css3-script-logoDie meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> prefix-free-css3-script-logo

Die meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes benötigt.
Ein kleines JavaScript namens prefixfree.js erleichtert euch die Arbeit enorm.

Prefix Free verwenden

Ladet euch das JavaScript von dieser Seite herunter und bindet es im <head> (empfohlen) eurer Seite ein. Das Script erkennt anschließend automatisch <link> oder <style>-Tags und fügt die benötigten Prefixes hinzu. Ihr müsst nur noch die normalen CSS3-Befehle schreiben.
Es existiert übrigens auch ein winziges jQuery-Plugin des Scripts.

Prefix-Free Website auf GitHub

Ein paar Ausnahmen gibt es allerdings auch:

  • Per @import eingebundene Stylesheets werden nicht berücksichtigt.
  • Stylesheets die nicht direkt mit der Datei verbunden sind in welcher prefixfree.js eingebunden ist werden nicht berücksichtigt.
  • In einer lokalen Umgebung kann muss für Chrome und Opera die Interpretation manuell eingerichtet werden. Inline-Styles werden hingegen von Firefox und IE in lokalen Umgebungen nicht korrekt interpretiert. Mehr dazu hier.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/10/css3-vendor-prefixes-per-javascript-erzeugen-prefix-free/feed/ 5 Facebook-Problem? Like-Button auch im IE7/IE8 anzeigen http://kulturbanause.de/2011/08/facebook-problem-like-button-auch-im-ie7ie8-anzeigen/ http://kulturbanause.de/2011/08/facebook-problem-like-button-auch-im-ie7ie8-anzeigen/#comments Thu, 25 Aug 2011 05:58:03 +0000 Jonas Hellwig http://kulturbanause.de/?p=6149 ie7-ie8-facebook-like-buttonIm Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf? Facebook-API im …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> ie7-ie8-facebook-like-button

Im Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf?

Facebook-API im Footer eingebunden?

Eine häufige Ursache ist die Einbindung der Facebook-JavaScript-API im Footer de Website. In den letzten Jahren haben wir eigentlich gelernt, bestimmte Scripte am Ende der Seite einzubinden um den visuellen Seitenaufbau nicht auszubremsen. Der Internet Explorer 7/8 mag das allerdings nicht und zeigt den Facebook-Like-Button nicht an.
Um dieses Problem zu beheben müsst ihr die Facebook-API vor dem Like-Button einbinden.

dieser Code: 

<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

Muss also vor diesem Code im Dokument eingebunden werden: 

<fb:like href="<?php echo get_permalink(); ?>" show_faces="false" font="lucida grande" width="450" layout="button_count" action="like" send="true"></fb:like>

Bitte beachtet, dass beide Snippets je nach Bedarf noch individualisiert werden müssen. Mehr darüber erfahrt ihr hier.

Ob es sinnvoll ist die Scripte aus dem Footer zu entfernen, nur um den »gefällt mir«-Button auch im IE zu sehen muss natürlich jeder für sich selbst entscheiden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/facebook-problem-like-button-auch-im-ie7ie8-anzeigen/feed/ 5 Cutter.js: Textverkürzungen und “Weiterlesen”-Links per JavaScript http://kulturbanause.de/2011/08/cutter-js-textverkurzungen-und-weiterlesen-links-per-javascript/ http://kulturbanause.de/2011/08/cutter-js-textverkurzungen-und-weiterlesen-links-per-javascript/#comments Tue, 16 Aug 2011 13:55:38 +0000 Jonas Hellwig http://kulturbanause.de/?p=6051 cutter-js-logoModerne Websites werden häufig mit Teaser-Bereichen bestückt die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen "Weiterlesen"-Link anzeigen über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch "normale" Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> cutter-js-logo

Moderne Websites werden häufig mit Teaser-Bereichen bestückt die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen "Weiterlesen"-Link anzeigen über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch "normale" Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite oder lange Seiteninhalte über Teaser.
Wer WordPress als Rückgrat einer Website einsetzt, wird eine solche Funktion wohl meistens über die functions.php steuern; für kleine Websites, Portfolios oder andere statische Seiten muss jedoch eine andere Lösung her.

Cutter.js

Cutter.js nimmt euch die Arbeit ab und kürzt Texte unter Berücksichtigung der enthaltenen HTML-Tags.

via tagdocs.de

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/cutter-js-textverkurzungen-und-weiterlesen-links-per-javascript/feed/ 2 z-index-Bug im Internet Explorer 7 (IE7) mit jQuery lösen http://kulturbanause.de/2011/08/z-index-bug-im-internet-explorer-7-ie7-mit-jquery-losen/ http://kulturbanause.de/2011/08/z-index-bug-im-internet-explorer-7-ie7-mit-jquery-losen/#comments Wed, 03 Aug 2011 07:00:02 +0000 Jonas Hellwig http://kulturbanause.de/?p=5943 z-index-bug-ie7Der Internet Explorer 7 ist mittlerweile ja schon etwas angestaubt. Nichts desto trotz wird er in den meisten Web-Projekten noch berücksichtigt, was angesichts der Verbreitung des Browsers auch nach wie vor sinnvoll ist. Der Internet Explorer 7 ist allerdings für einige sehr ärgerliche Bugs bekannt, zu denen unter anderem auch der z-index-Bug gehört. Hierbei ordnet der IE7 …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> z-index-bug-ie7

Der Internet Explorer 7 ist mittlerweile ja schon etwas angestaubt. Nichts desto trotz wird er in den meisten Web-Projekten noch berücksichtigt, was angesichts der Verbreitung des Browsers auch nach wie vor sinnvoll ist. Der Internet Explorer 7 ist allerdings für einige sehr ärgerliche Bugs bekannt, zu denen unter anderem auch der z-index-Bug gehört. Hierbei ordnet der IE7 trotz korrekt vergebenem z-index Layout-Elemente falsch an. Bei Drop-Down-Navigationen oder ähnlichen überlappenden Bereichen kann dieser Fehler daher zu etlichen grauen Haaren führen. Ein Live-Beispiel des Bugs findet ihr hier. Der z-index-Bug lässt sich auf verschiedene Arten lösen. Eine sehr schnelle und komfortable Variante bietet jQuery. Mit wenigen Zeilen Code kann die fehlerhafte Funktionalität im IE7 nachgerüstet werden.
Da ich genau dieses Problem vor wenigen Tagen lösen musste, möchte ich euch hier einen möglichen Lösungsweg zeigen.

Folgender JavaScript-Code reicht aus um den Fehler zu beheben. jQuery muss natürlich bereits im Dokument eingebettet sein.
Da der Bug nicht in allen Browsern auftritt, sollte der Code über einen Conditional Comment nur für die entsprechende Internet Explorer Version geladen werden. Das folgende Beispiel zeigt die Integration inkl. dem Conditional Comment für den IE7. 

<!--[if IE 7 ]>
    <script>
    $(function() {
        var zIndexFix = 1000;
        $('div').each(function() {
            $(this).css('zIndex', zIndexFix);
            zIndexFix -= 10;
        });
    });
    </script>
<![endif]-->

Ob es sinnvoll ist einen solchen Bug mit JavaScript zu lösen muss je nach Projekt individuell bewertet werden. Sofern der Seitenbesucher JavaScript deaktiviert hat besteht der Fehler nämlich nach wie vor. Das hier gezeigte Beispiel ist nur eine Lösung von vielen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/z-index-bug-im-internet-explorer-7-ie7-mit-jquery-losen/feed/ 2 Google +1-Button lädt jetzt auch asynchron (= schneller) http://kulturbanause.de/2011/07/google-1-button-ladt-jetzt-auch-asynchron-schneller/ http://kulturbanause.de/2011/07/google-1-button-ladt-jetzt-auch-asynchron-schneller/#comments Sat, 30 Jul 2011 22:47:16 +0000 Jonas Hellwig http://kulturbanause.de/?p=5921 plusone-buttons-google-2Google hat ein Update des +1-Buttons bereitgestellt. In den erweiterten Optionen kann nun festgelegt werden, dass die Scripte des Buttons asynchron geladen werden. Diese Option führt dazu, dass der Google-Button schneller geladen wird und nicht wie bisher den Seitenaufbau spürbar ausbremst. Ich habe meinen früheren Artikel zur Integration des Buttons entsprechend angepasst. Solltet ihr das …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> plusone-buttons-google-2

Google hat ein Update des +1-Buttons bereitgestellt. In den erweiterten Optionen kann nun festgelegt werden, dass die Scripte des Buttons asynchron geladen werden. Diese Option führt dazu, dass der Google-Button schneller geladen wird und nicht wie bisher den Seitenaufbau spürbar ausbremst.

Ich habe meinen früheren Artikel zur Integration des Buttons entsprechend angepasst. Solltet ihr das Snippet verwenden, so prüft bitte euren Code.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/07/google-1-button-ladt-jetzt-auch-asynchron-schneller/feed/ 1 Externe Links in die Facebook-Fanpage einbinden http://kulturbanause.de/2011/06/externe-links-in-die-facebook-fanpage-einbinden/ http://kulturbanause.de/2011/06/externe-links-in-die-facebook-fanpage-einbinden/#comments Tue, 21 Jun 2011 05:50:29 +0000 Jonas Hellwig http://kulturbanause.de/?p=5590 facebook-fanpage-externer-linkFacebook ist bekannt dafür Unmengen an Daten und Verlinkungen zu sammeln, jedoch nur sehr eingeschränkt und unübersichtlich Daten wieder preiszugeben oder sich in der Sammelwut einschränken zu lassen. Unter anderem ist es nicht möglich einen Link aus der Navigation einer Facebook-Fanpage auf die eigene Website zu setzen. Zumindest nicht ohne Hack. Mit einer Zeile JavaScript …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> facebook-fanpage-externer-link

Facebook ist bekannt dafür Unmengen an Daten und Verlinkungen zu sammeln, jedoch nur sehr eingeschränkt und unübersichtlich Daten wieder preiszugeben oder sich in der Sammelwut einschränken zu lassen. Unter anderem ist es nicht möglich einen Link aus der Navigation einer Facebook-Fanpage auf die eigene Website zu setzen. Zumindest nicht ohne Hack.
Mit einer Zeile JavaScript und einem individuellen iFrame-Tab lässt sich der Besucher nämlich trotzdem weiterleiten.

iFrame-Tab erstellen und weiterleiten

Zunächst müsst ihr einen iframe-Tab zu eurer Facebook-Fanpage hinzufügen. Wie das geht, habe ich hier bereits geschrieben.
Die HTML- oder PHP-Datei, die innerhalb des iframe-Tabs geladen wird, füttert ihr anschließend mit folgendem Code. Als Ziel-URL gebt ihr eure Domain an. 

<html>
<body>
<script type="text/javascript" language="javascript">
top.location.href = 'http://kulturbanause.de';
</script>
</body>
</html>

Fügt die iframe-Tab-Anwendung wie gewohnt zu eurer Fanpage hinzu und testet die Funktion mit einem Benutzeraccount der keine Admin-Rechte für diese Fanpage hat. Der Besucher sollte nun kurzer Zeit auf die Ziel-Website weitergeleitet werden.

Ob Facebook diese Methode abstraft weiß ich nicht. Verboten (laut AGB) ist die Methode nicht. Der Einbau eines solchen Links ist jedoch trotzdem mit gewissen Risiken verbunden, da Facebook bereits in der Vergangenheit willkürlich und unwiderruflich Seiten gesperrt hat.

via: allfacebook

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/06/externe-links-in-die-facebook-fanpage-einbinden/feed/ 1 Scrollbalken in Facebook-iFrame-Tabs deaktivieren http://kulturbanause.de/2011/05/scrollbalken-in-facebook-iframe-tabs-deaktivieren/ http://kulturbanause.de/2011/05/scrollbalken-in-facebook-iframe-tabs-deaktivieren/#comments Wed, 04 May 2011 05:30:26 +0000 Jonas Hellwig http://kulturbanause.de/?p=5013 facebook-scrollerDie iframe-Tabs von Facebook haben eine Begrenzung von maximal 800 Pixeln Höhe. Sobald der Inhalt der Seite, die ihr per iframe-Tab integriert, höher als diese 800 Pixel ist, schneidet Facebook den Inhalt ab und bindet einen Scrollbalken ein. Es entsteht also für gewöhnlich eine sehr benutzerunfreundliche Seite mit zwei verschiedenen Scrollbalken: Einem im iframe und …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> facebook-scroller

Die iframe-Tabs von Facebook haben eine Begrenzung von maximal 800 Pixeln Höhe. Sobald der Inhalt der Seite, die ihr per iframe-Tab integriert, höher als diese 800 Pixel ist, schneidet Facebook den Inhalt ab und bindet einen Scrollbalken ein. Es entsteht also für gewöhnlich eine sehr benutzerunfreundliche Seite mit zwei verschiedenen Scrollbalken: Einem im iframe und einem im Browserfenster.
Mit folgendem Code-Snippet könnt ihr den Scroller entfernen und Facebook zwingen die volle Höhe der Seite anzuzeigen.

Scrollbalken deaktivieren

Alles was ihr benötigt um den Scroller auszublenden, ist folgendes Code-Snippet und die Application-ID eures iframe-Tabs. Die App-ID findet Ihr unter folgender Adresse: facebook.com/developers/apps.php

Kopiert folgendes Snippet in Eure HTML- bzw. PHP- Seite direkt hinter den öffnenden body-Tag:

<div id="fb-root">
<script src="http://connect.facebook.net/de_DE/all.js"></script>
<script>
FB.init({
appId : 'Hier gehört Eure App-ID hin',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow(100);
</script>
</div>

Vergesst nicht, die App-ID eures Tabs einzutragen. Anschließend könnt Ihr die Datei hochladen. Der Scrollbar sollte nun verschwunden sein.

Update:

Facebook hat den Code zur Entfernung von Scrollbalken zum 1. Januar 2012 verändert. Der oben abgebildete Code enthält jedoch bereits die Neuerungen. Details zu diesem Update könnt ihr auf AllFacebook nachlesen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/05/scrollbalken-in-facebook-iframe-tabs-deaktivieren/feed/ 9 Photoshop-Screencast: Arbeiten mit dem Skriptereignis-Manager http://kulturbanause.de/2011/01/photoshop-screencast-arbeiten-mit-den-skriptereignis-manager/ http://kulturbanause.de/2011/01/photoshop-screencast-arbeiten-mit-den-skriptereignis-manager/#comments Tue, 25 Jan 2011 14:03:22 +0000 Jonas Hellwig http://kulturbanause.de/?p=3845 skriptereignis-manager-photoshopIhr kennt doch sicher auch die ein oder andere Arbeit die Ihr in Photoshop überhaupt nicht leiden könnt und dennoch häufig erledigen müsst. Eine große Hilfe sind hier natürlich bereits die Aktionen mit denen Ihr Arbeitsvorgänge aufzeichen könnt um sie nicht andauernd wiederholen zu müssen. Mit dem Photoshop Skriptereignis-Manager könnt Ihr diese Aktionen nun an …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> skriptereignis-manager-photoshop

Ihr kennt doch sicher auch die ein oder andere Arbeit die Ihr in Photoshop überhaupt nicht leiden könnt und dennoch häufig erledigen müsst. Eine große Hilfe sind hier natürlich bereits die Aktionen mit denen Ihr Arbeitsvorgänge aufzeichen könnt um sie nicht andauernd wiederholen zu müssen. Mit dem Photoshop Skriptereignis-Manager könnt Ihr diese Aktionen nun an bestimmte Photoshop-Funktionen koppeln und somit vieles vollständig automatisieren.
In diesem vierminütigen Screencast möchte ich Euch die Funktionsweise an einem praktischen Bespiel verdeutlichen.

Welche Funktionen könnt Ihr mit Skripten automatisieren?

Ihr habt nun gesehen wie der Script-Manager grundsätzlich arbeitet. Es gibt natürlich eine Vielzahl an deutlich komplexeren und sinnvolleren Einsatzmöglichkeiten für dieses Hilfsmittel. So könnt vom Kopieren der Hintergrundebene bis zum Reset aller Systemkomponenten fast alles erreichen. Neben dem Pseudo-Scripting mit Aktionen können natürlich auch echte Skripte programmiert werden die anschließend noch tiefer ins System eingreifen. Einen Leitfaden zum Photoshop-Scripting findet Ihr übrigens in PDF-Form direkt im Installationsordner.

Habt Ihr Vorschläge für Aktionen oder Scripte die Ihr in Zukunft einsetzen werdet oder es vielleicht bereits tut?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/01/photoshop-screencast-arbeiten-mit-den-skriptereignis-manager/feed/ 2 Es muss ja nicht immer JavaScript sein http://kulturbanause.de/2011/01/es-muss-ja-nicht-immer-javascript-sein/ http://kulturbanause.de/2011/01/es-muss-ja-nicht-immer-javascript-sein/#comments Mon, 10 Jan 2011 21:17:46 +0000 Jonas Hellwig http://kulturbanause.de/?p=4243 pure-cssSpeckyboy hat vergangene Woche einen interessanten Artikel zum Thema JavaScript und CSS veröffentlicht den Ihr Euch unbedingt anschauen solltet wenn ihr Ihn noch nicht kennt. Es geht darum "typische" JavaScript-Lösungen mit reinem CSS umzusetzen. Es sind sicherlich für jeden ein paar Kniffe dabei die man vom ersten Gefühl her eher mit jQuery & Co. umgesetzt …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> pure-css

Speckyboy hat vergangene Woche einen interessanten Artikel zum Thema JavaScript und CSS veröffentlicht den Ihr Euch unbedingt anschauen solltet wenn ihr Ihn noch nicht kennt. Es geht darum "typische" JavaScript-Lösungen mit reinem CSS umzusetzen. Es sind sicherlich für jeden ein paar Kniffe dabei die man vom ersten Gefühl her eher mit jQuery & Co. umgesetzt hätte. Vielleicht könnt Ihr Euch so in Zukunft die ein oder andere JavaScript-Zeile sparen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/01/es-muss-ja-nicht-immer-javascript-sein/feed/ 0 iPhone-User auf optimierte Website umleiten http://kulturbanause.de/2010/07/iphone-benutzer-auf-optimierte-website-umleiten/ http://kulturbanause.de/2010/07/iphone-benutzer-auf-optimierte-website-umleiten/#comments Tue, 20 Jul 2010 15:41:57 +0000 Jonas Hellwig http://www.kulturbanause.de/?p=2300 iphone-redirectWenn Ihr für Eure Website zusätzlich eine iPhone-optimierte Version erstellt habt, so steht Ihr vor der Wahl ob standardmäßig alle iPhone-User auf diese mobile Seite weitergeleitet werden sollen oder ob der Besucher selbst entscheiden darf welche Website er besuchen möchte. Eine der vielfältigen Möglichkeiten ist das nachfolgende Script. Bindet einfach folgenden JavaScript-Code in den <body> …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> iphone-redirect

Wenn Ihr für Eure Website zusätzlich eine iPhone-optimierte Version erstellt habt, so steht Ihr vor der Wahl ob standardmäßig alle iPhone-User auf diese mobile Seite weitergeleitet werden sollen oder ob der Besucher selbst entscheiden darf welche Website er besuchen möchte. Eine der vielfältigen Möglichkeiten ist das nachfolgende Script. Bindet einfach folgenden JavaScript-Code in den <body> Eures Dokuments ein und ruft die Funktion anschließend über onLoad beim Laden der Seite auf.

JavaScript für den <body>

Fügt folgendes Script in Euer Dokument ein und passt die URLs und die Info-Nachricht entsprechend an.

<script type="text/javascript">
function ios_redirect() {
	if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
		var question = confirm("iPhone optimierte Version anzeigen?")
	if (question){
		window.location = "http://www.hier-der-pfad-zur-iphone-optimierten-website"; // user klickt auf OK
	}else{
		window.location = "http://www.hier-der-pfad-zur-standard-website"; // user klickt auf cancel
}}}
</script>

onLoad-Befehl für den öffnenden <body>-Tag

Innerhalb des öffnenden <body>-Tags muss die Funktion aufgerufen werden.

<body onLoad="ios_redirect();">

Wenn nun ein Besucher die Website mit dem iPhone aufruft erhält er eine System-Nachricht. Hier kann er wählen welche Version aufgerufen werden soll - also entweder die normale Seite oder die für das iPhone erstellte Website.

Fazit

Ich finde die Umsetzung ist eine sehr komfortable Lösung um dem Besucher die volle Freiheit bei der Benutzung Eurer Website zu überlassen. Allerdings habe ich im Hinterkopf, dass die Abfrage eines Besuchers mittels userAgent nicht die optimale Lösung ist. Wenn Ihr hier ein paar ergänzende Informationen beisteuern könnt bin ich Euch sehr dankbar.

Der Artikel wurde von diesem Beitrag inspiriert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2010/07/iphone-benutzer-auf-optimierte-website-umleiten/feed/ 12 Google Maps API – Strecken berechnen http://kulturbanause.de/2010/07/google-maps-api-strecken-berechnen/ http://kulturbanause.de/2010/07/google-maps-api-strecken-berechnen/#comments Thu, 01 Jul 2010 08:03:02 +0000 Jonas Hellwig http://www.kulturbanause.de/?p=2185 google-mapsVor einiger Zeit habe ich in einem kleinen Tutorial erklärt wie man mehrere Standorte in einer Google Karte anzeigen lässt. Auf 1stWebdesigner findet sich nun ein sehr lesenswerter Artikel der beschreibt wie Ihr die Google Maps API nutzen könnt um die Strecke zwischen zwei zuvor festgelegten Punkten zu berechnen. Wer keine Lust hat alles zu …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> google-maps

Vor einiger Zeit habe ich in einem kleinen Tutorial erklärt wie man mehrere Standorte in einer Google Karte anzeigen lässt. Auf 1stWebdesigner findet sich nun ein sehr lesenswerter Artikel der beschreibt wie Ihr die Google Maps API nutzen könnt um die Strecke zwischen zwei zuvor festgelegten Punkten zu berechnen. Wer keine Lust hat alles zu lesen kann auch einfach direkt das Beispiel laden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2010/07/google-maps-api-strecken-berechnen/feed/ 0 Mehrere Standorte in Google Maps anzeigen http://kulturbanause.de/2010/05/mehrere-standorte-in-google-maps-anzeigen/ http://kulturbanause.de/2010/05/mehrere-standorte-in-google-maps-anzeigen/#comments Sun, 09 May 2010 21:17:59 +0000 Jonas Hellwig http://www.kulturbanause.de/?p=1929 google-maps-markerGoogle Maps lässt sich bekanntlich kinderleicht in die eigene Website integrieren. Insbesondere auf der Kontaktseite eines Unternehmens oder auch einer Privatperson macht es durchaus Sinn Maps zu verwenden um den Besucher zu zeigen wo sich der Autor bzw. das Unternehmen befindet. Der Vorteil von Google Maps liegt dabei auf der Hand: Zum einen muss nicht …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> google-maps-marker

Google Maps lässt sich bekanntlich kinderleicht in die eigene Website integrieren. Insbesondere auf der Kontaktseite eines Unternehmens oder auch einer Privatperson macht es durchaus Sinn Maps zu verwenden um den Besucher zu zeigen wo sich der Autor bzw. das Unternehmen befindet. Der Vorteil von Google Maps liegt dabei auf der Hand: Zum einen muss nicht mühsam eine Karte gezeichnet werden, zum anderen bietet Google stets aktuelle Informationen, verschiedene Ansichten, Zoomstufen und Kartenausschnitte.
Doch angenommen es sollen mehrere Standorte auf der Karte angezeigt werden; zum Beispiel weil das Unternehmen mehr als eine Filiale hat oder weil der Blogger zeigen möchte wo er im letzten Urlaub war. Wie Ihr mittels der Google Maps API mehr als einen Standort in die Karte eintragt und darüber hinaus auch noch Startposition, Zoomstufe, Kartenlayout und den Inhalt der Infoboxen anpasst erfahrt Ihr in diesem Tutorial.

Demo anschauen

Google Maps API Key

Um Google Maps auf einer Website verwenden zu können braucht Ihr zunächst ein Google Konto. Sobald Ihr erfolgreich in Euer Konto eingeloggt seid muss ein so genannter API-Key generiert werden mit dem sich die Website später bei Google authentifiziert.
Den API-Key könnt Ihr unter folgender Adresse generieren lassen. Gebt dazu einfach die URL in die Eingabemaske ein und bestätigt die Nutzungsbedingungen. ...

Google Maps API Code

Elemente im head einbinden

Nun geht es daran die eigentliche Karte im Code einzubinden. Zunächst widmen wir uns dem head unserer Seite. Bindet zunächst nachfolgendes JavaScript ein und ersetzt im Code die Stelle XXX mit Eurem zuvor generierten API-Key.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=XXXXXXXXX" type="text/javascript"></script>

Elemente im body einbinden

Um Google Maps verwenden zu können benötigen wir ein OnLoad-Ereignis. Ersetzt Euer bereits bestehendes öffnende body-Element durch folgenden Code:

<body onload="initialize()" onunload="GUnload()">

Nun folgt der eigentliche Code zur Einbindung der Karte. Mittels Kommentaren habe ich die wichtigen Punkte erklärt möchte sie aber dennoch im Detail erläutern. Wir beginnen damit die Karte im Code zu aktivieren und einige globale Eigenschaften festzulegen. Die Karte wird innerhalb eines div-Containers erstellt dessen Bezeichnug wir am Anfang einmalig festlegen. In diesem Beispiel habe ich den div "map-container" genannt. Mittels Inline-CSS-Style legen wir die Abmessungen fest. Innerhalb des noscript-Bereichs wird ein alternativer Content eingebunden für den Fall, dass der Seitenbesucher kein JavaScript aktiviert hat.

<!-- Name des DIVs, Abmessungen -->
<div id="map-container" style="width: 500px; height: 300px"></div>
<noscript>
Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>
<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map-container"));

Anschließend folgt die Festlegung des Startpunktes. Neben den Koordinaten (Längen- und Breitenangaben) des Karten-Mittelpunktes wird der Zoomfakter und das Kartendesign festgelegt.
Um die Koordinaten zu bestimmen könnt Ihr Euch diverser Tools bedienen. Am praktischsten finde ich die folgende Website. Gebt einfach wie gewohnt die Adresse ein und Ihr bekommt die Koordinaten direkt innerhalb der Karte angezeigt.

Der Zoomfakter wird als Zahl angegeben. In diesem Beispiel habe ich eine mittlere Entfernung von "12" gewählt.

Als Darstellungsoptionen für das Kartendesign stehen die für Google Maps typischen Eigenschaften zur Verfügung.

  • G_NORMAL_MAP (Kartenansicht)
  • G_HYBRID_MAP (Satellitenansicht mit eingeblendeten Straßen)
  • G_SATELLITE_MAP (Satellitenansicht)


// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
map.setCenter(new GLatLng(51.213969,6.774424), 12, G_NORMAL_MAP);

Das folgende Snippet aktiviert den für Google Maps so typischen Marker und legt fest ob dieser per Klick einen Tooltip mit weiteren Informationen anzeigen soll.

function createMarker(point,html) {
var marker = new GMarker(point);

// Tooltip beim Klick auf den Marker anzeigen oder nicht.
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Google Maps

Nun ist es an der Zeit die unterschiedlichen Standorte anzuzeigen. Den folgenden Code-Abschnitt könnt Ihr beliebig oft einsetzen. Die Koordinaten berechnet Ihr mit dem oben bereits erwähnten Tool. Innerhalb des Tooltips kann HTML-Code geschrieben werden.

// Standort Anfang
var point = new GLatLng(51.21412,6.77418);
var marker = createMarker(point,'Dieser Inhalt wird im Tooltip angezeigt.')
map.addOverlay(marker);
// Standort Ende

Innerhalb einer Google Map können noch weitere Steuerungs- und Darstellungselemente eingeblendet werden.

// Navigationselemente einblenden
map.addControl(new GLargeMapControl());

// Kartentypen einblenden
map.addControl(new GMapTypeControl());

// Übersichtskarte einblenden
map.addControl(new GOverviewMapControl());

// Massstab einblenden
map.addControl(new GScaleControl());

Das Script wird natürlich auch wieder geschlossen.

}
}
</script>
Google Maps Head Up Display HUD API

Vollständiges Code-Beispiel

Falls Euch die obige Erklärung zu detailliert oder auch zu oberflächlich war könnt Ihr Euch hier das gesamte Beispiel noch einmal am Stück anschauen. In diesem Beispiel habe ich mehrere unterschiedliche Standorte angegeben.

Google Maps Hybrid Düsseldorf


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5v01sGhQl-TBXa5oRUTuZBRRPDlVThHigVAlpBtmoYerwQltWxTPLGvWHiwSXccBTGODkm08VMXoAQ"
            type="text/javascript"></script>
</head>

<body onload="initialize()" onunload="GUnload()">
<!-- Name des DIVs, Abmessungen -->
<div id="map-container" style="width: 500px; height: 300px"></div>
<noscript>
Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>
<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map-container"));

// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
map.setCenter(new GLatLng(51.223335,6.76981), 13, G_HYBRID_MAP);

function createMarker(point,html) {
var marker = new GMarker(point);

// Tooltip beim Klick auf den Marker anzeigen oder nicht.
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

// Standort Anfang
var point = new GLatLng(51.21412,6.77418);
var marker = createMarker(point,'Hier wohne ich')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.217894,6.762105);
var marker = createMarker(point,'Fernsehturm')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.227394,6.770754);
var marker = createMarker(point,'Rheintreppen')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.215056,6.752064);
var marker = createMarker(point,'Medienhafen')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.226211,6.774702);
var marker = createMarker(point,'Altstadt')
map.addOverlay(marker);
// Standort Ende

// Navigationselemente einblenden
map.addControl(new GLargeMapControl());

// Kartentypen einblenden
map.addControl(new GMapTypeControl());

// Übersichtskarte einblenden
map.addControl(new GOverviewMapControl());

// Massstab einblenden
map.addControl(new GScaleControl());

}
}
</script>
</body>
</html>

Demo anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2010/05/mehrere-standorte-in-google-maps-anzeigen/feed/ 20