Code completion für jQuery in NetBeans 7.1
26. Januar 2012
Tach,
NetBeans rühmt sich ja schon lange damit, dass sie code completion für JavaScript Dateien und Libraries haben. Unter anderem auch für jQuery. In der Doku findet man dazu sogar einen recht ausführlichen Artikel.
Leider hat das bei mir nie funktioniert und ich konnte auch nach ausführlichem googlen nichts finden, was mir half.
Heute bin ich aber endlich auf die Lösung gestoßen:
Man darf die Datei nicht umbenennen!
Ich hatte meine Datei immer in jquery.js umbenannt. Damit klappts aber nicht.
Die Datei muss, z.B. für die aktuellste Version 1.7.1, jquery-1.7.1.js heißen!
Im Moment bin ich mir noch nicht sicher, warum das so ist und ob das Absicht ist oder ob es sich um einen Bug handelt. Allerdings könnte ich mir vorstellen, dass es mit der Doku zusammenhängt, die neben der code completion angezeigt wird. Diese Doku muss aus dem Netz gezogen werden, da sie nicht in der JavaScript Datei enthalten ist.
Klappt übrigens auch perfekt mit der komprimierten Version jquery-1.7.1.min.js.
Begeistert bin ich davon allerdings nicht. Ich würde meine Dateien eigentlich gerne so benennen, wie ich es will.
Neue Methode für Textarea Autoresize
1. November 2011
Neue interessante Methode, um eine Textarea zu erzeugen, die ihre Höhe automatisch dem Inhalt anpasst:
http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
Prototype 1.7 vs. jQuery 1.4.3+ Workaround
7. Januar 2011
Bin gerade auf ein Problem gestoßen und möchte hier schnell meine Lösung festhalten.
Situation
Man will prototype und jQuery parallel benutzen. Dafür gibt es ja bekanntlich jQuery.noConflict().
Problem
Ab Version 1.4.3 von jQuery klappt das nicht mehr richtig. Version 1.4.2 funktioniert bei mir perfekt.
Siehe: jQuery Bugtracker und jQuery Forum
Lösung
Im Bugreport bzw. im Forum wird ein Fix für jQuery vorgeschlagen.
Ich bin den anderen Weg gegangen und habe prototype gepatcht.
Ist vielleicht nicht die schönste und beste Lösung, aber es funktioniert bei mir bisher ohne Probleme.
--- prototype.js.orig 2010-11-16 21:33:26.000000000 +0100
+++ prototype.js 2011-01-07 21:06:39.039888000 +0100
@@ -5971,7 +5971,7 @@
var elements = [], classNames = (/\s/.test(className) ? $w(className) : null);
if (!classNames && !className) return elements;
- var nodes = $(element).getElementsByTagName('*');
+ var nodes = Prototype.$alias(element).getElementsByTagName('*');
className = ' ' + className + ' ';
for (var i = 0, child, cn; child = nodes[i]; i++) {
@@ -5985,7 +5985,7 @@
};
return function(className, parentElement) {
- return $(parentElement || document.body).getElementsByClassName(className);
+ return Prototype.$alias(parentElement || document.body).getElementsByClassName(className);
};
}(Element.Methods);
@@ -6080,3 +6080,5 @@
}
});
})();
+
+Prototype.$alias = $;
Download: prototype.js.patch
Update (17.03.2011):
Inzwischen scheint der Bug seitens jQuery in Version 1.5.1 gefixt zu sein.
#8033 jQuery 1.4.4+ fails to load on pages with old Prototype (< = 1.5) or Current Prototype + Scriptaculous in IE
logisches XOR in Javascript
25. Juni 2010
Habe gerade festgestellt, dass es in Javascript kein logisches XOR gibt.
Hier die Alternative:
if( !foo != !bar ) {
...
}
Google gibt seine Font API frei
19. Mai 2010
Google hat heute seine WebFont API und sein Font Verzeichnis freigegeben.
Damit lassen sich einfach beliebige Schritarten in die eigene Seite einbinden.
Ein kleines Beispiel:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Lobster', serif;
font-size: 32px;
text-shadow: 4px 4px 4px #aaa;
}
.rot {
-moz-transform:rotate(-25deg);
}
</style>
</link></head>
<body>
<h1>sabel's blog!</h1>
<h1 class="rot">sabel's blog!</h1>
</body>
</html>
ergibt:
Google erklärt auch, was es da genau macht.
Außerdem gibts noch ne JavaScript-Lib dazu.
Nette Geschichte, mal sehen ob sich das durchsetzt.
Deutsches Datum bei Facebook
12. Oktober 2009
Kurz ein kleines Greasemonkey Script um deutsche Datumsanzeigen bei Facebook zu erzeugen.
Mit Datumsanzeigen mein ich den title-Tag der Angaben bei “Vor X Minuten” usw.
// ==UserScript==
// @name FacebookDate
// @namespace bla
// @include http://www.facebook.com/*
// ==/UserScript==
function xpath(src,query) {
var res = document.evaluate(query, src, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
res.length = res.snapshotLength;
res.item = res.snapshotItem;
return (res.snapshotLength > 0) ? res : false;
}
var res = xpath(document,"//abbr[@class='timestamp']");
if(res){
for(var i=0; i < res.length; i++){
var d = new Date(Date.parse(res.item(i).title));
res.item(i).title = d.getDate() + "." + ((d.getMonth() + 1) % 12) + "." + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
}
Hier das Script zum Download facebookdate.user.
TextboxList jQuery mit Prototype
11. Oktober 2009
Hi,
ich habe mich heute mit der genialen Bibliothek TextboxList von Guillermo Rauch beschäftigt.
Er bietet neben der ursprünglichen MooTools Version auch eine jQuery Portierung an.
Zum Glück. Denn das ermöglicht mir als Prototype-Jünger dieses brilliante Stück Code ebenfalls zu verwenden.
Es gibt zwar eine Prototype-Portierung, allerdings ist die schon bisschen eingestaubt.
Die Jungs von TheWebFellas haben vor ein paar Monaten mal alle in diversen Blogs rumfliegenden Patches gesammelt und eine aktualisierte Variante in ihrem github zur Verfügung gestellt. Aber wie sie selbst sagen, haben sie es nicht ausgiebig getestet.
Dank der sehr nützlichen noConflict() Methode von jQuery lassen sich aber Prototype und jQuery gleichzeitig nutzen, solange man ein paar Kleinigkeiten beachtet.
Hier also mein Weg, wie ich TextboxList zum Laufen gebracht habe.
Da ich jQuery sonst nicht verwende habe ich
jQuery.noConflict();
direkt ans Ende der jQuery.js Datei gepackt. Damit steht die $-Funktion von jQuery nicht mehr zur Verfügung. TextboxList ist für diesen Fall schon vorbereitet.
Allerdings muss die Datei GrowingInput.js noch ein wenig angepasst werden. Hierzu ein (sehr) kleiner Patch von mir.
Im kompletten sieht das dann in etwa so aus:
<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="GrowingInput.js" type="text/javascript" charset="utf-8"></script>
<script src="TextboxList.js" type="text/javascript" charset="utf-8"></script>
<!--
Folgender Block wird nur benötigt, wenn man noConflict() nicht direkt wie ich
in die jQuery.js packt.
-->
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
jQuery(function(){
var t = new TextboxList('#form_tags_input');
t.add('Tag 1').add('Tag 2').add('Tag 3');
});
</script>
Das Endergebnis sieht dann in etwa so aus.
Bis jetzt läuft alles soweit. Aber evtl. melde ich mich ja wieder mit weiteren Workarounds ;)
Google Maps, panTo() und openInfoWindowHtml()
22. September 2009
Hi,
heute bin ich mal wieder über ein Problem beim arbeiten mit der Google Maps API gestoßen.
Will man den Kartenausschnitt auf einen Marker zentrieren, genauer gesagt mittels panTo() mit einer Animation, und danach das Info-Fenster des Markers anzeigen, funktioniert das Zentrieren der Karte nicht, da das Erscheinen des Info-Fensters die Animation beendet.
Hier ein Workaround für das Problem. Ich konnte keine “schönere” Lösung finden. Auch der onOpenFn Callback-Parameter der openInfoWindowHtml() Funktion hat nicht funktioniert.
var p = new GLatLng(48.891041,11.185246);
var m = new GMarker(p);
var evt = GEvent.addListener(map,'moveend',function(){
m.openInfoWindowHtml('Inhalt des Info-Fensters');
GEvent.removeListener(evt);
});
map.panTo(p);
Vielleicht hilfts ja dem ein oder anderen.
gzip komprimierte Javascript- und CSS-Dateien
15. Juli 2009
Hi,
im letzten Post habe ich über eine komprimierte Variante der neuesten Prototype-Version geschrieben. Wie versprochen werde ich in diesem Post erklären, wie man so eine mit gzip-komprimierte Datei möglichst elegant und flexibel in seine Seite einbindet.
Dazu legt man einfach eine .htaccess-Datei mit folgendem Inhalt an:
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteCond %{REQUEST_FILENAME} ^.+\.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [QSA,L]
RemoveType .gz
AddEncoding x-gzip .gz
Wichtig: der Apache muss mod_rewrite aktiviert haben!
Jetzt muss man nur noch für alle Dateien, die man komprimiert ausliefern will eine entsprechende Variante mit dem Suffix .gz im gleichen Verzeichnis in dem das Original liegt anlegen.
Ist eine solche gzip Datei vorhanden wird diese anstatt der unkomprimierten Variante übertragen, ansonsten ändert sich nichts.
Hinweis: folgende Zeile war bei mir zwingend nötig um die globale Einstellung vom Apache zu überschreiben. Keine der Lösungen, die im Netz gefunden habe, weist darauf hin!
RemoveType .gz
Unterstützt ein Browser keine Komprimierung (sowas gibts hoffentlich nicht mehr, selbst der IE4 kann das) werden die Regeln einfach ignoriert.
Das wars auch schon. Mit dieser kleinen, aber feinen Lösung verkürzt man die Ladezeit seiner Seite erheblich.
Prototype 1.6.1 RC3 compressed/packed
15. Juli 2009
Tach,
endlich mal wieder ein neuer Eintrag hier :)
Ich benutze für meine Projekte ja immer prototype und die aktuelle stabile Version (1.6.0.3) ist leider nicht kompatibel zum IE8. Da der aktuelle Release Candidate sehr stabil aussieht und bei meinen Tests alles funktioniert hat, wollte ich die neue Version auch produktiv einsetzen.
Ich habe bisher immer eine komprimierte Version (protopacked) von prototype benutzt, das mit shrinkVars und co auf unter 50kb komprimiert wurde.
Leider steht diese minimierte Version nicht für den aktuellen RC zur Verfügung, es gibt lediglich protoaculous, was eine Kombination aus Prototype und script.aculo.us ist. Da ich zweiteres aber so gut wie nie brauche, sind mir die zusätzlichen Bytes zu viel.
Ich habe daher meine eigene Variante erzeugt. Dazu habe ich mehrere JavaScript Komprimier-Tools probiert und nur zwei davon funktionierten mit der neuen Prototype Version.
YUI Compressor
http://developer.yahoo.com/yui/compressor/
java -jar yuicompressor-2.4.2.jar -o yui.js prototype.js
yui.js (80kb)
yui.js.gz (24kb)
ShrinkSafe
http://dojotoolkit.org/docs/shrinksafe
java -jar shrinksafe.jar prototype.js > shrink.js
shrink.js (96kb)
shrink.js.gz (27kb)
Original Prototype
http://www.prototypejs.org
prototype.js (137kb)
prototype.js.gz (31kb)
Man sieht, dass man durch gzip Komprimierung jede Menge rausholen kann.
Die Optimierung des JS-Codes kann man sich auch sparen, aber ein paar KB sind doch rauszuholen.
Wie man gzip-komprimierte JS-Dateien nun in eine Seite einbindet, erklär ich im nächsten Post.