Zusammenhängende Formularfelder - Steuern des aktiven Feldes mit JS
Möchte man z.b. ausweisdaten, seriennummern oder ähnliches per HTML
Formular abfragen, möchte man es vielleicht erreichen, dass der Cursor
direkt von Feld zu Feld springt, nachdem die ausreichende Anzahl Zeichen
eingegeben wurde. Dies kann einfach mittels JavaScript erreicht werden.
Formular abfragen, möchte man es vielleicht erreichen, dass der Cursor
direkt von Feld zu Feld springt, nachdem die ausreichende Anzahl Zeichen
eingegeben wurde. Dies kann einfach mittels JavaScript erreicht werden.
CODE:
<script type="text/javascript">
<!--
function skip_field(testid,length,next)
{
var doc=document.getElementById(testid);
if(doc.value.length>=length)
{
document.test.elements[next].focus();
}
}
//-->
<!--
function skip_field(testid,length,next)
{
var doc=document.getElementById(testid);
if(doc.value.length>=length)
{
document.test.elements[next].focus();
}
}
//-->
Focus von beliebigen HTML Elementen entfernen
Hat man ein Element geklickt, und dadurch z.B. einen AJAX Request ausgelöst,
bleibt meist ein Focus auf dem Element. Dies wäre an sich nicht weiter schlimm.
würde der nicht so übel aussehen!
Diesen Focus kann man einfach mit der JavaScript Methode blur() entfernen.
oder wie in meinem Fall mit Prototype:
bleibt meist ein Focus auf dem Element. Dies wäre an sich nicht weiter schlimm.
würde der nicht so übel aussehen!
Diesen Focus kann man einfach mit der JavaScript Methode blur() entfernen.
CODE:
<a href="#bla" onfocus="this.blur()">bla</a>
oder wie in meinem Fall mit Prototype:
CODE:
$('element').blur();
Internet Explorer 6 & 7, Focus auf Input Elemente nach AJAX Request
Bei einem aktuellen Projekt trat ein seltsames Problem auf.
In jedem Formular wird auf das erste Feld manuell ein focus() gesetzt,
dass man sehr benutzerfreundlich durch die Felder tabben kann und
sofort loslegen kann.
Nachdem ich wie gewohnt zunächst alles in Safari & Firefox entwickelt habe,
war ich sehr erstaunt, dass das focus() nicht an allen Stellen des Projektes
zu sehen war. Nach kurzer Zeit habe ich entdeckt, dass der Focus nur bei
den Seiten nicht angezeigt wird, wo der Inhalt per AJAX nachgeladen wurde.
Es gibt eine sehr einfache wenn auch sehr unschöne Lösung für das Problem.
Man kann den Focus einfach doppelt aufrufen, das habe ich dann in einer
Funktion implementiert, um es einfach wieder zu entfernen, wenn eine andere
Lösung möglich ist.
In jedem Formular wird auf das erste Feld manuell ein focus() gesetzt,
dass man sehr benutzerfreundlich durch die Felder tabben kann und
sofort loslegen kann.
Nachdem ich wie gewohnt zunächst alles in Safari & Firefox entwickelt habe,
war ich sehr erstaunt, dass das focus() nicht an allen Stellen des Projektes
zu sehen war. Nach kurzer Zeit habe ich entdeckt, dass der Focus nur bei
den Seiten nicht angezeigt wird, wo der Inhalt per AJAX nachgeladen wurde.
Es gibt eine sehr einfache wenn auch sehr unschöne Lösung für das Problem.
Man kann den Focus einfach doppelt aufrufen, das habe ich dann in einer
Funktion implementiert, um es einfach wieder zu entfernen, wenn eine andere
Lösung möglich ist.
CODE:
function focus(name)
{
$(name).focus();
// called focus twice due to a bug with ie!!!
$(name).focus();
}
{
$(name).focus();
// called focus twice due to a bug with ie!!!
$(name).focus();
}
Vorschau von Webseiten
Speziell für Referenzen auf eigen Projekte benötigt man immer Screenshots. Die Seiten ändern sich und man sollte die Screenshots auch immer aktuell halten.
Neulich bin ich auf websnapr gestoßen.
Dies bringt die gewünschte Funktion mit sich und hat auch gleich eine komfortable JavaScript Lösung parat über die man das ganze elegant Lösen kann. Dies kann man an obigem Link sehen.
Neulich bin ich auf websnapr gestoßen.
Dies bringt die gewünschte Funktion mit sich und hat auch gleich eine komfortable JavaScript Lösung parat über die man das ganze elegant Lösen kann. Dies kann man an obigem Link sehen.
Multi List Drag & Drop - Part 2!
Mich hat es mal wieder gepackt, und ich hab das Multi List Package upgedated.
Wofür ein Urlaub doch gut ist
Ich will es kurz und schmerzlos machen, hier findet ihr den alten Beitrag, mit allen wichtigen Informationen.
Allerdings ist das Package flexibler geworden, nachdem ich gedacht habe man sollte die Listen einfach erwitern können. Zusätzlich habe ich die addLoadEvent unterstützung eingebaut.
Update: Es gibt mal wieder eine erweiterung. Ab jetzt kann man die Class komfortabel selber erweitern und muss sich um die Updates nicht mehr sorgen. Man erzeugt eine angepasste Klasse die die sajax Klasse erweitert. In dieser Klasse werden alle Einstellungen getätigt, und man kann die update_db Funktion überschreiben, mit welcher die Daten geschrieben werden.
download - demo and simple documentation
Viel Spaß!
Wofür ein Urlaub doch gut ist
Ich will es kurz und schmerzlos machen, hier findet ihr den alten Beitrag, mit allen wichtigen Informationen.
Allerdings ist das Package flexibler geworden, nachdem ich gedacht habe man sollte die Listen einfach erwitern können. Zusätzlich habe ich die addLoadEvent unterstützung eingebaut.
Update: Es gibt mal wieder eine erweiterung. Ab jetzt kann man die Class komfortabel selber erweitern und muss sich um die Updates nicht mehr sorgen. Man erzeugt eine angepasste Klasse die die sajax Klasse erweitert. In dieser Klasse werden alle Einstellungen getätigt, und man kann die update_db Funktion überschreiben, mit welcher die Daten geschrieben werden.
download - demo and simple documentation
Viel Spaß!
IFrames mit variabler Höhe
Bei Iframes ist eine Breite von 100% kein Problem, dies lässt sich technisch ohne Probleme realisieren. Bei der Höhe ist dies allerdings nicht möglich da dann immer 100% der gesamten Höhe genommen werden.
Daher kann man sich nur mit JavaScript aushelfen. Dieses Javascript wird beim onLoad ausgeführt. onLoad kann nicht nur bei body Elementen sondern auch bei iframe Elementen verwendet werdenten verwendet. Allerdings kann Safari mit den onLoad Elementen nicht viel Anfangen, dies ist das Hauptproblem. Da kann man sich nur helfen, indem man in den body einen onload hinzufügt der die Größe speichert.
Das passende JavaScript dazu:
Danke an Alex für die "Inspiration"
Daher kann man sich nur mit JavaScript aushelfen. Dieses Javascript wird beim onLoad ausgeführt. onLoad kann nicht nur bei body Elementen sondern auch bei iframe Elementen verwendet werdenten verwendet. Allerdings kann Safari mit den onLoad Elementen nicht viel Anfangen, dies ist das Hauptproblem. Da kann man sich nur helfen, indem man in den body einen onload hinzufügt der die Größe speichert.
Das passende JavaScript dazu:
CODE:
function getIframeHeight1() {
fix = 300; // fixe höhe
min = 100; //mindes höhe
max = 300; //max höhe
if(fix>max) return fix; // wenn fix größer als max => fix
if(fix>min && fix
if (window.innerHeight) {
h = window.innerHeight;
} else if (document.body && document.body.offsetHeight) {
h = document.body.offsetHeight;
}
if(h
if(h>max) return max;
return h;
}
function adjustIframe()
{
document.getElementById('iframe1').height=getIframeHeight1();
}
fix = 300; // fixe höhe
min = 100; //mindes höhe
max = 300; //max höhe
if(fix>max) return fix; // wenn fix größer als max => fix
if(fix>min && fix
if (window.innerHeight) {
h = window.innerHeight;
} else if (document.body && document.body.offsetHeight) {
h = document.body.offsetHeight;
}
if(h
if(h>max) return max;
return h;
}
function adjustIframe()
{
document.getElementById('iframe1').height=getIframeHeight1();
}
Danke an Alex für die "Inspiration"
Multi List Drag & Drop - Sajax!
Als ich über die Seite von Tom Westcott gestolpert bin war mir klar, ich muss das in mein neues CMS einbinden. Ich hatte mir damals schon vorgestellt dass das für die Inhaltsstruktur oder für die Sidebar interessant sein könnte, aber ich war damals noch in der Planungsphase.
Als ich dann die Implementation in Serendipity die ich durch Garvin's SuperBlog entdeckt habe getestet habe, war mir klar, genau das will ich auch. Allerdings hat mir nur die AJAX Implementierung zugesagt, da ich ganz genau weiss da manche kunden bei so futuristischen Anwendungen sicher vergessen das abzuschicken. Daher muss das automatisch gemacht werden. Tom hat glücklicherweise auch gleich beide Methoden bereitgestellt.
Allerdings war der Code sehr verworren, und daher habe ich angefangen den Code neu aufzubauen, da ich vor allem im CMS das dann schon sauber einbauen wollte. Anstelle der umfangreicheren Implementation reicht nun folgendes:
Danach muss noch der Pfad in der sajax Datei angepasst werden, dass das einbinden der styles und des JS auch funktioniert.
Die Funktion update_db sollte dann auch an die Gegebenheiten angepasst werden. Die Funktion greift auf die global Datenbankverbindung zu.
Das Auslesen wird dann direkt in dem File gemacht in dem Sie die Liste anzeigen möchten.
Um dies zu vereinfachen habe ich eine Bespiel Datei mitgeliefert, in der Sie das alles sehen können. Dazu auch der passende SQL dump.
Beispielseite - Download
Als ich dann die Implementation in Serendipity die ich durch Garvin's SuperBlog entdeckt habe getestet habe, war mir klar, genau das will ich auch. Allerdings hat mir nur die AJAX Implementierung zugesagt, da ich ganz genau weiss da manche kunden bei so futuristischen Anwendungen sicher vergessen das abzuschicken. Daher muss das automatisch gemacht werden. Tom hat glücklicherweise auch gleich beide Methoden bereitgestellt.
Allerdings war der Code sehr verworren, und daher habe ich angefangen den Code neu aufzubauen, da ich vor allem im CMS das dann schon sauber einbauen wollte. Anstelle der umfangreicheren Implementation reicht nun folgendes:
CODE:
/**
* db settings
*/
$cfg['server']['host'] = "localhost"; // server
$cfg['server']['user'] = "root"; // dbuser
$cfg['server']['pass'] = ""; // password
$cfg['server']['db'] = "sajaxdemo"; // dbname
/**
* start the connection
*/
$conn = mysql_connect ($cfg['server']['host'],
$cfg['server']['user'],
$cfg['server']['pass']);
$result = mysql_select_db ($cfg['server']['db'],$conn);
/**
* include the sajax file
*/
include("sajax.php");
* db settings
*/
$cfg['server']['host'] = "localhost"; // server
$cfg['server']['user'] = "root"; // dbuser
$cfg['server']['pass'] = ""; // password
$cfg['server']['db'] = "sajaxdemo"; // dbname
/**
* start the connection
*/
$conn = mysql_connect ($cfg['server']['host'],
$cfg['server']['user'],
$cfg['server']['pass']);
$result = mysql_select_db ($cfg['server']['db'],$conn);
/**
* include the sajax file
*/
include("sajax.php");
Danach muss noch der Pfad in der sajax Datei angepasst werden, dass das einbinden der styles und des JS auch funktioniert.
CODE:
var $sajax_path='thirdparty/sajax/';
Die Funktion update_db sollte dann auch an die Gegebenheiten angepasst werden. Die Funktion greift auf die global Datenbankverbindung zu.
Das Auslesen wird dann direkt in dem File gemacht in dem Sie die Liste anzeigen möchten.
Um dies zu vereinfachen habe ich eine Bespiel Datei mitgeliefert, in der Sie das alles sehen können. Dazu auch der passende SQL dump.
Beispielseite - Download
Thickbox
Soeben habe ich ein sehr nette Erweiterung für Webseiten entdeckt.
die Thickbox .
Dadurch wird es möglich wie eine Art Popup im selben Browserfenster zu verwenden. Sieht echt sehr schick aus, ich muss mir nur mal einen sinvollen Einsatz überlegen, dass ich es mal im Detail testen kann.
die Thickbox .
Dadurch wird es möglich wie eine Art Popup im selben Browserfenster zu verwenden. Sieht echt sehr schick aus, ich muss mir nur mal einen sinvollen Einsatz überlegen, dass ich es mal im Detail testen kann.
FCKedit Pt. II
Selbst das Update auf die 2.2 Version brachte keine Verbesserung.
Aber dafür eine entscheidende Erkenntnis:
Das wird alles verhunzt weil der HTML Code nicht komplett XHTML valid war.
Ist ja ein sinniger Grund.
Der Haken ist nur, dass quasi alles versaut wird was nicht 100% XHTML ist.
Und bei Bedienung durch Kunden kann alles mögliche passieren.
Und ich weiss wovon ich rede
Ich bitte daher die OS-Gemeinde, behebt die Probleme.
Komisch ist auch, im IE gibt es das Problem, im FF quasi nicht.
Und wenn ich schon mecker, ICH WILL SAFARI SUPPORT!!
Aber dafür eine entscheidende Erkenntnis:
Das wird alles verhunzt weil der HTML Code nicht komplett XHTML valid war.
Ist ja ein sinniger Grund.
Der Haken ist nur, dass quasi alles versaut wird was nicht 100% XHTML ist.
Und bei Bedienung durch Kunden kann alles mögliche passieren.
Und ich weiss wovon ich rede
Ich bitte daher die OS-Gemeinde, behebt die Probleme.
Komisch ist auch, im IE gibt es das Problem, im FF quasi nicht.
Und wenn ich schon mecker, ICH WILL SAFARI SUPPORT!!
FCKeditor
Ich bin ja ein echter Fan des FCKeditors. Aber was muss ich da auf einer Kundenseite sehen?
Er macht lauter unsinnige tags, Übermäßig p & a Tags,... Ich kann es mir nicht erklären.
Dadurch wird das ganze Layout zerhagelt,... Und wenn ich das von Hand korrigiere bringt mir
das rein gar nichts. Beim nächsten öffnen und speichern ist wieder alles im Eimer.
So eine Scheiße!!!
Nachdem ich nicht herausfinden konnte welche Version ich in meinem CMS einsetze update ich einfach mal auf 2.2 vom Dezember
Mal kucken ob das was bringt. Immerhin hab ich nun Frust abgelassen.
Er macht lauter unsinnige tags, Übermäßig p & a Tags,... Ich kann es mir nicht erklären.
Dadurch wird das ganze Layout zerhagelt,... Und wenn ich das von Hand korrigiere bringt mir
das rein gar nichts. Beim nächsten öffnen und speichern ist wieder alles im Eimer.
So eine Scheiße!!!
Nachdem ich nicht herausfinden konnte welche Version ich in meinem CMS einsetze update ich einfach mal auf 2.2 vom Dezember
Mal kucken ob das was bringt. Immerhin hab ich nun Frust abgelassen.
