Kategorie: Web-Development

Internet Explorer 7 mit jQuery Ajax: „Bezeichner, Zeichenfolge oder Zahl erwartet“

Wenn der Internet Explorer 7 (es scheint als würden manche User noch damit surfen) beim jQuery Ajax Aufruf den Fehler „Bezeichner, Zeichenfolge oder Zahl erwartet“ meldet, gibt es dafür eine ganz simple Lösung.

Man hat ein Komma zu viel in seinen Angaben für den Ajax aufruf. Jeder halbwegs vernünftige / intelligente / gute / neue Browser versteht es, wenn hinter diesem – in der Tat unsauberen – Komma keine weiteren Angaben mehr folgen und ignoriert es. Nicht so der IE7. Hier wird sauberer Source-Code scheinbar noch richtig groß geschrieben.

Folgend ein Beispiel für den Aufruf der vom IE7 nicht vollendet wird:

$.ajax({
	type: "POST",
	url: "some.php",
	data: { name: "John", location: "Boston" }, // <--- Komma
});

Folgendes hingegen funktioniert (man achte auf das Komma in Zeile 4):

$.ajax({
	type: "POST",
	url: "some.php",
	data: { name: "John", location: "Boston" }
});

Danke Internet Explorer (7), dass du so auf die Sauberkeit unseres Codes achtest!

Flowplayer 5 im HTML 5 Modus mit mehreren Videos auf einer Seite

Ich habe gerade mehrere Stunden damit verbracht den aktuellen Flowplayer 5 im HTML 5 Modus in Gang zu bringen. Das Problem dabei war, dass es auf einer Seite mehrere Video-Objekte gab, der Flowplayer allerdings nur das erste initialisiert hat. Nach einigen Stunden hin und her habe ich sämtliche Daten exakt wie auf der Flowplayer Seite eingebunden – allerdings funktionierte es noch immer nicht.

Die Lösung…

War dann der Wechsel auf die gleiche jQuery Version, die auch auf der Flowplayer Seite integriert wurde – und siehe da. It works! Verwendet wird nun jQuery Version 1.8.3 und wird wie gewohnt über die Google CDNs eingebunden.

Falls ihr also auch das Problem habt, checkt mal eure jQuery Version.

Mit TYPO3 Rich Snippets nutzen

Rich Snippets reichern Suchergebnisse bei Google um Bilder, Daten, Listen oder Deeplinks an. In der Praxis steigern Snippets die Klickraten in den SERPs auch mal locker um 20 Prozent oder mehr. Ohne weitere SEO-Maßnahmen sind so mehr Seitenbesucher möglich.

Eine Steigerung der CTR optimiert die Effektivität der Positionen in den SERPs. Mit Rich Snippets stehen für bestimmte Anwendungsfälle wirkungsvolle Möglichkeiten zur Verfügung. Um diese nutzen zu können, muss der HTML-Code einer Website um Microdaten erweitert werden. Die Zahl der Lösungen für TYPO3 ist heute noch gering. Wir haben für euch einmal ausgewählte Lösungen für viel versprechende Snippets zusammengestellt:

Author-Snippet

Das wohl am einfachsten zu realisierende Rich Snippet ist das Author-Snippet. Das Author-Snippet sorgt für eine Anzeige des Google+ Profilbildes und Profildaten in den Suchergebnissen. Um dieses einer Website hinzuzufügen reicht das Integrieren eines speziellen Links auf das Google Profil.

<a href="[profile_url]?" rel="author">Google</a>

Seitenweit kann der Autor im Setup des Root Ordners zum Beispiel mit diesem TypoScript gesetzt werden:

page.headerData.9999 = TEXT
page.headerData.9999.value = <link rel="author" href="[profile_url]?" />

9999 und [profile_url] sind Samples und müssen gegen passende Werte ersetzt werden.

Snippet für Bewertungen

Mit der Extension Ratings gibt es für TYPO3 eine Rating-Erweiterung, die „out-of-the-Box“ Rich Snippets nicht unterstützt. Also: den Profi ranlassen oder versuchen, mit den Tipps von Martin Wandl die Rating-Extension selbst anzupassen.

Weiterlesen

Google Maps API: Distanzbasiertes, serverseitiges clustern von Markern

Hat man sehr viele Marker auf einer Google Maps Karte, kann es sehr schnell sehr unübersichtlich werden. Oft überlagern sich die Marker Icons und man erkennt nichts mehr. Ihr kennt das auch?

Heute zeigen wir euch, wie ihr Google Maps Marker serverseitig durch eine Cluster-Funktion schickt, damit eure Karten immer schön übersichtlich bleiben. Ein Cluster bildet in unserem Fall einen Punkt, der die in seiner Umgebung befindlichen Marker zusammenfasst und deren Anzahl darstellt.

Fangen wir an:

Wir beginnen mit einer einfachen MySQL Datenbank Abfrage zum Auslesen aller unserer Google Map Marker in einem PHP Array.Hinweis: Diese Abfrage dient lediglich als simples Beispiel und sollte so nicht Live genutzt werden.

// Neues Marker Array definieren
$alleMarker = array();
 
$sql = "SELECT * FROM mapping_marker";
$qry = mysql_query($sql);
while($res = mysql_fetch_array($qry)) {
	$alleMarker[] = $res;
}

stroeer_01Würden wir nun dieses Marker Array ausgeben, fänden wir – je nach Menge und Distanz der Marker – möglicherweise rechts stehendes Bild vor.

Dieses Bild zeigt das Mapping Tool der Außenwerbefirma Ströer mit einigen, jedoch noch wenigen Markern (auf der Ströer Karte werden nur maximal 250 Marker angezeigt).

Die Marker liegen einfach übereinander, damit kann – zumindest ich persönlich – nicht viel anfangen.

Weiterlesen

Facebook Like Button XFBML in validem XHTML 1.1 – Version 4.0

Es ist wieder soweit. Eine neue und vielleicht letzte Version des beliebten Facebook Object Validation Scriptes ist verfügbar. Damit lassen sich XFBML Tags von Facebook (z.B. Like-Button) auch in XHTML 1.1 W3C-Konform einbinden. Lasst euch überzeugen, denn die Neuerungen sprechen für sich.

Was ist neu?

Dieses neue Facebook Object Validation Script stellt alle Vorgänger in den Schatten. Die Neuerungen betreffen den Rechenaufwand des Besuchers sowie die Dateigröße der JavaScript Datei.

Dateigröße: Wie schon in Version 2 ist die Dateigröße sehr gering – es sind gerade einmal 930 Byte. Hinzu kommen keine weiteren JavaScript Dateien.

Funktion: In der neuen Version wird nicht einfach alles ersetzt wie in unserem Vorgänger, der Version 2. Auch wird nicht nach einer zusätzlich angegeben Klasse gesucht wie in Version 1 und Version 3.

Es werden vordefinierte Standard-Tags gesucht (div, span, p, ul, li – Die Liste kann natürlich in der JavaScript Datei erweitert werden) und geschaut ob in den gefunden Tags ein <!– FBML xxx FBML –> existiert. Existiert nun kein XFBML Object in dem gefunden Tag, wird dieses verworfen und weiter gesucht. Existiert ein Object wird es sichtbar gemacht.

Weiterlesen

Klick-Zähler für HTML Links im Facebook-Style

Mit unserem neuen Script könnt ihr sehen wie oft bestimmte Links oder Downloads angeklickt wurden. Dieses Script verwenden wird auch bei uns im eigenen Blog und ist euch bestimmt schon einmal aufgefallen. Schicke Counts im Facebook Stil!

Unsere Idee war es ein Script zu entwicklen, welches die Anzahl der Klicks auf einen Link oder Download anzeigt. Am besten im schicken und modernen Facebook Like-Button Stil.

Es ist uns gelungen ein solches Script zu erstellen und möchten euch dieses natürlich nicht vorenthalten.


Update

Nun gibt es den Download Counter auch für jQuery!


Die Funktion

Nach dem Einbinden unseres JavaScripts sowie Mootools muss dem Link im Prinzip nur noch die Klasse class=“downloadCounter“ mitgeteilt werden. Danach werden ein paar Elemente, welche Ihr mittels CSS auf eure eigenen Bedürfnisse anpassen könnt angehangen und die entsprechende Funktion vollautomatisch hergestellt.

Weiterlesen

Mit CSS angepasste Select- und Checkboxen: So geht’s!

Dass insbesondere Select-Boxen in HTML so gut wie nicht mit CSS Befehlen angepasst werden können ist wahrscheinlich jedem bekannt. Dennoch haben wir uns um eine vernünftige Lösung dieser Eigenheit gekümmert, welche wir euch Heute präsentieren. Zudem ist es nun möglich auch Checkboxen mit eigenen Grafiken zu versehen.

Select-Boxen können im Normalfall nur minimal mit CSS angepasst werden, sehen in nahezu jedem Browser anders aus und passen optisch des öfteren einfach nicht zum Rest der Formular-Elemente.

Das leidige Thema „Select-Boxen anpassen“ hat nun endlich ein Ende.

Wir haben ein Script entwicklet, welches dieses Thema nun endgültig bequem und nahezu vollautomatisch löst. Das vorgestellte Script basiert auf JavaScript und Mootools, somit ist das Select- und Checkbox-Styling nur für Besucher mit aktiviertem JavaScript sichtbar. Für alle anderen nutzer bleiben natürlich die Original-Elemente erhalten.

Weiterlesen

Facebook Markup Language in validem XHTML 1.1 – Version 3.0

Eine neue Version des beliebten fbValidation-Scripts ist ab sofort verfügbar. Es wurden ein paar Schwachstellen der Version 2 behoben welche die Ausführung anderer JavaScripts blockierte (z.B. Google Maps via API).

Einleitung

Dieser Artikel basiert auf unseren vorherigen Artikel FBML in XHTML 1.1 – Version 1.0 und FBML in XHTML 1.1 – Version 2.0.

Da es in Version 2 unseres Scripts leider Fehler beim ausführen anderer JavaScripts gab, welche beim laden der Seite genutzt werden, haben wir nun hier die Lösung.


Update

Es ist eine neue Version mit verbesserter Technik, geringerer Dateigröße und vereinfachter Integration verfügbar. Nutze diesen Artikel und somit die neue Technik: Facebook XFBML in validem XHTML 1.1 – Version 4.0.


Im Prinzip ist es eine Verbesserung der Version 1.

Mit dieser Version lassen sich z.B. Google Maps (via API) und andere JavaScripte wieder beim öffnen der Seite ausführen. Dennoch ist diese Version besser als die erste, da wir hier wiederum nur eine JavaScript Datei haben, welche geladen und verarbeitet werden muss und keine CSS-Styles gesetzt werden müssen.

Weiterlesen