Freitag, März 11th, 2011
Ich wollte dynamische Textarea haben wie sie in Facebook gibt. So habe ich im Netz nach Lösungen gesucht und bin über mehrere Lösungen/Plugins gestolpert wie hier, hier oder hier, es gibt noch mehr.
Alle diese Lösungen waren mir zu Groß und zu Komplex. Ich möchte nicht noch ein jQuery im jQuery haben, sondern Kurz und Schmerzlos. Dazu waren ein paar Ansätze nicht so Flexibel, da sie die Größe des Textarea an den Umbrüchen des Inhalts bestimmen und das muss wiederum mit ein paar Wrapper CSS Methoden gefixt werden, was wiederum viel eingriff in den Quelltext des Projekts bedeutet.
Die ganzen Unzufriedenheiten haben mich dazu veranlasst selber zu experimentieren. Und nach kurzer Zeit fand ich eine EinfachGenialeLösung so wie eine Axt, sie hat nur ein Beil und Keil das wars!
Mein Ansatz braucht etwas CSS und nur maximal 400Bytes kleinen jQuery Plugin.
textarea.input {
width:500px;
line-height:16px;
height:16px;
}<textarea class="input" name="name">Dynamischer Inhalt</textarea>
jQuery.fn.elasticArea = function() {
return this.each(function(){
function resizeTextarea() {
this.style.height = this.scrollHeight/2 + 'px';
this.style.height = this.scrollHeight + 'px';
}
$(this).keypress(resizeTextarea)
.keydown(resizeTextarea)
.keyup(resizeTextarea)
.css('overflow','hidden');
resizeTextarea.call(this);
});
};
$('textarea.input').elasticArea();Dieser Ansatz funktioniert mit der Eigenschaft scrollHeight. Sie ist sehr Präzise und gibt genau die maximale Höhe der Textarea mit Inhalt. So nehme ich sie, Teile durch die Hälfte und setze sie der Textarea als Höhe ein. Danach wird sie wieder als Textarea Höhe gesetzt. Das macht die Textarea dynamisch in beide Richtungen wenn neuer Text eingefügt oder gelöscht wird und es passiert so schnell, dass man nichts davon mitkriegt.
Das ganze ist Dynamisch und wurde miniklein gehalten. So kann jeder selbst den Code nach seinen Wünschen erweitern falls er noch maximale Höhe haben möchte, die Höhe per Parameter übergeben ohne die CSS an zufassen oder sonstige Schnickschnacks.
Getestet hab ich in gängigen Browsern. Kann sein das irgend wo noch was hängt, aber alle von mir getesteten neue Browser haben es ohne Probleme geschluckt.
Eingesetzt können diese Elastischen Textareas als Input Felder. Weil ohne Inhalt sind sie so groß wie Inputs und können dynamisch mit dem Inhalt wachsen.
Hier ist noch eine Live Demo.
Das wars und mehr brauche ich nicht.
Posted in Tipps | 1 Comment »
Donnerstag, März 10th, 2011
Vor ein paar Wochen habe ich lange nach einer Lösung gesucht und aufgegeben, weil auch die CKEditor Event Seite war mir nicht genug. Heute hab ich es nochmal probiert und fand hier die Lösung:
var ckeditorInstance = CKEDITOR.replace("mytextarea");
ckeditorInstance.on("instanceReady", function()
{
this.document.on("keyup", CKCHANGED);
this.document.on("paste", CKCHANGED);
}
);
function CKCHANGED() {
formchanged = 1;
}Gebraucht wird die Lösung um zu erkennen ob der User den Inhalt im CKEditor Textarea geändert hat und ihn beim verlassen der Seite zu warnen, dass er sein Code verändert hat ohne gespeichert zu haben. (Ich benutze es mit jQuery)
var formchanged = 0;
var submitted = 0;
$(document).ready(function() {
$('form').each(function(i,n){
$('input', n).change(function(){formchanged = 1});
$('textarea', n).change(function(){formchanged = 1});
$('select', n).change(function(){formchanged = 1});
$(n).submit(function(){submitted=1});
});
});
window.onbeforeunload = confirmExit;
function confirmExit()
{
if(formchanged == 1 && submitted == 0)
return "Sie verlassen die Seite ohne gespeichern zu haben.";
else
return;
}Posted in Tipps | No Comments »
Mittwoch, Dezember 17th, 2008
Heute hab ich ein Tipp vom Freund bekommen über 25 jQuery Tipps. Sofort angeschaut und war begeistert über alle diese Tipps, da sie richtig gut sind.
Der Beste der mir gefallen hat, dass man jQuery nicht mehr von eigenem Server laden kann sondern man lässt den jQuery Script von dem Google Server laden.
Ich hab auch schon Google für mich genutzt für den jYoup Player nur bei jQuery kannte ich nicht den Pfad.
Die Vorteile sind, dass man den Traffic spart und auch dem User spart man die Zeit, falls er schon jQuery von Google gecached hat. Da Google 99% online ist, braucht man auch keine Angst darüber haben das der Script mal nicht da ist.
Hier ist ein Beispiel:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
Und hier sind die besten Tipps für jQuery: 25 excellent tips
Posted in Meine Links, Tipps, jYoup | 1 Comment »
Montag, Juni 9th, 2008
Da hat sich jemand eine Große Arbeit geleistet die vielen Plugins zu sammeln.
Eine sehr große Sammlung an guten Perlen.
http://www.sastgroup.com/jquery/240-plugins-jquery
Posted in Meine Links | No Comments »
Mittwoch, Mai 14th, 2008
Wenn man in JavaScript versucht mit wenig Code den grössten Erfolg zu erzielen, kommt man immer wieder in eine Routine rein die den Code mit JavaScript Methoden aufbläht. Um das zu vermeiden, kann man jQuery nutzen. Schon hat man an eigenem Code sehr viel gespart und das Ergebnis lässt sich sehen.
Simon Willison hat das in eine Präsentation gepackt + die Beispiele auf seiner Seite abgelegt.
Es sind sehr schöne Beispiele entstanden die mir gefallen haben und auch die Präsentation ist informativ geworden. Für jQuery Lehrlinge zu empfehlen.
Posted in Allgemein, Slides | No Comments »
