Kategorie: JavaScript

JavaScript Probleme,Tipps und Tricks

Kategorien
jQuery

jQuery UI Autocomplete mit extraParams für zusätzliche GET Variablen

In jQuery UI gibt es eine sehr gute Autocomplete Funktion, die ich auf der Seite CD Shop Berlin eingebaut habe (Schnellsuche oben links). Dabei werden beim Eintippen Vorschläge unterbreitet.

$(document).ready(function() {
 $("input#suche").autocomplete(
 {
 autoFocus: false,
 delay:300,
 minLength: 3,
 select: function(event, ui) {document.advanced_search.submit();},
 source: function(request, response) {
 $.ajax({
 url: "autocomplete.php",
 dataType: "json",
 data: {
 term : $('#schnellsuche').val(),
 verkauf : $('input[name=verkauf]').is(':checked'), },
 success: function(data) {
 response(data);
 }
 });
 }
 }
 );
});

Dabei ist zu beachten, dass der Parameter extraParams von jQuery UI 1.8 aktuell ignoriert wird und man dies über den eingebauten Ajax Request lösen muss.

Serverseitige stehen dann die Variablen mit $_GET[‚term‘], $_GET[‚verkauf‘]  zur Verfügung.

 

Kategorien
jQuery

jQuery: Ist eine Checkbox checked

Ohne eine ID vergeben zu müssen und mit Hilfe des name-Attributs funktioniert das mit jQuery so:

$checked = $('input[name=myName]').is(':checked');
Kategorien
JavaScript Web Frontend

Google Maps JavaScript API V3 und Utility Library V3 Tutorial

Google Maps Karten sind auf fast jeder Webseite aufzufinden. Die neueste Version Google Maps JavaScript API V3 bietet:

  • erweiterte Unterstützung für mobile Geräte
  • Integration von Google Street View
  • verbesserte Performance
  • Weiterentwicklungen  in Zukunft, da Version V2 als veraltet erklärt wurde seitens Google
  • es wird kein API Schlüssel mehr benötigt, wie bei V2
Weiterlesen „Google Maps JavaScript API V3 und Utility Library V3 Tutorial“
Kategorien
JavaScript Webdeveloper Tools

Javascript Debbuging mit Firebug

Javascript ist nicht einfach zu programmieren und zu debuggen. Die einfachste Möglichkeit Variablen zu überwachen ist diese mit alert auszugeben.

alert($var);

Die Methode stößt natürlich bei mehreren Variablen und Schleifen an seine Grenzen, weil es zu einer Klick-Orgie kommt.

Die beste und einfachste Möglichkeit bietet Firebug, ein Plugin für Firefox, welches jeder Web Developer standardmäßig installiert haben sollte. Damit lassen sich mit dem console.log Befehl Objekte, Arrays und Variablen auf der Firebug Konsole ausgeben.

console.log($array);

Weitere Funktionen sind:

  • Performance Messung von Javascript Funktionen
  • Stack Tracing inklusive der Input Variablen der Funktionen auf dem Stack mit console.trace()
  • Object Inspection mit console.dir()
Kategorien
JavaScript Web Frontend

Google Earth API

Google bietet seit Jahren seinen freien Service Google Earth an, mit dem man die Möglichkeit hat, Daten auf einem Erdball  und einer detailierten 3D Erdoberfläche zu visualisieren.
Für mein nesues Projekt wo-bin-ich-jetzt.de, einen weltweiten GEO-Informationsservice, habe ich Google Earth eingebunden.


Sehenswürdigkeiten in Berlin
Die zentrale Developer Seite mit reichhaltigen Ressourcen bietet einen sehr guten Überblick über die API und einen Developer Guide und eine Google Earth API Reference.
Der User muss ähnlich wie bei Flash ein Plugin installieren, um Google Earth Daten anschauen zu können. Für die Entwicklung muss ein Google Maps API Key beantragt werden und dann kann es losgehen.

Probleme mit Google Earth

Wieso wird mein Marker nicht angezeigt?

Das kann daran liegen, dass der Zoom Faktor in der Ansicht so hoch ist, dass der Marker zwar da ist, aber nicht sichtbar. Aushilfe bringt setScale(10.0) für den 10 fachen Zoomfaktor:

var icon = ge.createIcon('');
 icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
 var style = ge.createStyle(''); //create a new style
 style.getIconStyle().setIcon(icon); //apply the icon to the style
 style.getIconStyle().setScale(10.0); //
 placemark.setStyleSelector(style); //apply the style to the placemark

Long als Variablen Name für Longitude (Breitengrad)

Der Fehler ist schnell gemacht, aber man sollte nie eine Variable long benennen, weil damit der Datentyp Long interpretiert wird, besser longitude verwenden.

Kategorien
jQuery

verschieben von absolut positionierten Elementen mit jQuery

Wenn man alle Elemente bspw. aus generiertem HTML verschieben will, bietet sich jQuery an.

Folgendes HTML habe ich aus einem PDF zu HTML Umwandlungsprogramm erhalten:

<div style="position:absolute;top:97;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:121;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:145;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:170;left:293"><nobr><span class="ft2">Text </span></nobr></div>

Um die Inline Styles zu verändern und die Div-Blöcke um 100px zu verschieben nach rechts und nach unten kann folgender Code verwendet werden:

        $(document).ready(function() {
            $('div').each(function() {
                var offset = $(this).offset();
                alert("left: " + offset.left + ", top: " + offset.top );
                $(this).css('left', offset.left + 100);
                $(this).css('top', offset.top + 100);
            });
        });