Das ganze liegt an der neuen Render Engine die Firefox spendiert bekommen hat.
Um das Problem in den Griff zu bekommen, ohne sideeffects für andere Browser zu bekommen macht Ihr einfach folgendes.

Eure jqtransform.css auf, in Zeile 90 (.jqTransformInputInner div input {) änder Ihr die height jetzt von 31px auf auto.

Das war´s schon….

Ähnliche Artikel

• 24. Juni 2009 -- ifixpng2 & pngFix – Transparenz für den IE6
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann

Wer dies tun möchte und die entsprechende Einstellung nicht finden kann, dem sei hier eine kleine Hilfe geboten. Dazu müsst ihr die jqtransform.css öffnen und in Z.36 dem Selektor “button.jqTransformButton span span” die neue Eigenschaft width zuweisen.
Das kann dann beispielsweise wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13

button.jqTransformButton span span {
	background: transparent url(img/btn_left.gif) no-repeat top left;
	color: #333;
	padding: 10px 4px 0px 8px;
	font-weight: normal;
	font-size: 12px;
	line-height: 13px;
	display: block;
	text-decoration: none;
	height: 33px;
	width:auto;
	min-width: 100px;
}

Ähnliche Artikel

• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

Ein kleiner Workaround dafür ist, die Berechnung des Size-Attributs im js-Code zu entfernen. Selbstverständlich mit der Folge, dass dieses Attribut nicht mehr zu diesem Zweck eingesetzt werden kann. Was ich persönlich als nicht weiter schlimm erachte, da zur Best Practice des Webprogrammieres gehört, die Festlegung von Oberflächeneigenschaften über das CSS zu definieren.

Nun zum Workaround:

1
2
3
4
5

// Z. 107 in der jquery.transform.js
	if($input.attr('size')){
		inputSize = $input.attr('size')*10;
		$input.css('width',inputSize);
	}

Diesen Codeteil könnt ihr einfach löschen, da es zur falschen Berechnung der Breite für die Textfelder führt. Ich konnte keine ungewollten Seiteneffekte feststellen. Wenn ihr etwas findet, wäre ich dankbar für Kommentare.

Ähnliche Artikel

• 5. August 2009 -- Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen

Schwieriger wird es schon wenn mehrere Plugins auf ein Formular angewendet werden, bei denen die Plugins eigene DOM-Elemente hinzufügen. Beispielsweise jqTransform

Glücklicherweise bietet das validate Plugin dafür eine wunderbare Funktion, nämlich errorPlacement.
Die Funktion sieht so aus:

1
2
3

 errorPlacement: function(error, element) {
     error.appendTo( element.TRAVERSINGFUNKTION );
   },

Nehmen wir ein Formular:

1
2
3
4
5
6
7

<form action="somescript.php" id="form" method="get">
   <input type="text" name="user">
   <label><label> 
   <input type="text" name="pw">
   <label><label>
</form>
 <div id="error"></div>

Per Default wird vom validate Plugin ein Label-Tag hinter jedes input-Feld eingefügt. Will man nun den error an einer anderen Stelle zeigen kann man die Funktion folgendermaßen umschreiben:

1
2
3
4
5

$("#form").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.next() );
   }   
});

Die Fehlermeldungen würde nun ausgehend vom input (element) in das nächste DOM Element, in unserem Fall das label-Tag, geschrieben werden.
Natürlich haben wir mit diesem Beispiel nur wieder das Ausgangsverhalten des Plugins erreicht. Dieses Prinzip lässt leicht auf komplexere Anwendungsfälle übertragen. Wie beispielsweise bei erwähntem jqTransform, bei dem um das input-Feld mehrere Divs gelegt werden. Die Fehlermeldung des Validate Plugins wird dann unterhalb (auf z-Ebene) der Felder angezeigt. Durch travesieren durch den DOM-Baum können die Fehlermeldungen beliebig positioniert werden.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

Mitentwickelt wurde es von John Resig, einem der Urväter von jQuery.

Es überzeugt durch seine Funktionsvielfalt, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.
Das könnte dann wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head> 
    <script type="text/javascript" src="path/to/jquery.js"></script> 
    <script type="text/javascript" src="path/to/form.js"></script> 
 
    <script type="text/javascript"> 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Formular wurde gesendet!"); 
            }); 
        }); 
    </script> 
</head>
<body>
<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Kommentar: <textarea name="kommentar"></textarea> 
    <input type="submit" value="Abschicken" /> 
</form>
</body>

Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar als Ajax Request an das im form-tag angegebene Skript.
Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie reset, manueller submit, Erstellung eines querystring, etc.

Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:

• target
• url
• success
• …

Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:

1
2
3
4
5
6
7
8
9
10
11

// Optionobjekt mit gesetzten Attributen
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    success:    function() { 
        alert('Erfolgreich abgeschickt!'); 
    } 
}; 
 
// Options einfach der Mehthode ajaxForm als Parameter übergeben
$('#myForm').ajaxForm(options);

Einfacher lässt sich ein Ajaxformular kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei Malsup.

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

CSS:

1
2
3

        .active{
	      color: red;
        }

HTML:

1
2
3
4
5
6

<ul id="liste">
	<li>eins</li>
	<li>zwei</li>
	<li>drei</li>
	<li>vier</li>
</ul>

jQuery:

1
2
3
4
5

$(document).ready(function() {
		$('#liste li').click(function(){
			$(this).closest('li').addClass('active').siblings().removeClass('active');
		});
	});

Eine kleine Demo des ganzen

Ähnliche Artikel

• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen

Das ganze kann man jetzt sehr elegant und einfach mit diesem kleinen jQuery Plugin lösen.

Datei einbinden

1

<input type="text" class="clearField" value="What's your name?" />

Funktion hinzufügen

1
2
3
4
5
6

$(document).ready(function() {
	$('.clearField').clearField({
		blurClass: 'myBlurredClass',
		activeClass: 'myActiveClass'
	});
});

und das input Field entsprechend einbinden.

1

<input type="text" class="clearField" value="What's your name?" />

Fertig!

Alle Dateien zum Downlad findet Ihr auf der offiziellen Plugin Seite.

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

Wer kennt das nicht, bettet man eine Schrift nicht als Bild ein hat man mit CSS allein so gut wie keine Möglichkeiten grafische Effekte auf die Schrift anzuwenden.
Gerade bei Headlines kann dies aber doch ab und an ganz schön sein.
Dem ganzen kann jetzt Abhilfe geschaffen werden mit diesem schönen jQuery Plugin habt ihr nun die Möglichkeit Outlines, Schatten, Verläufe und Spiegelungen an eurem Text zu verankern.
Das Plugin ist nur 7kb groß und kommt gänzlich ohne Bilder aus, so wie es z.B. manche PHP-Funktionen tun wenn sie mit Text arbeiten.

Das Plugin ist denkbar einfach zu nutzen. Einfach die Files downloaden und einbinden.

1
2

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery-FontEffect-1.0.0.min.js" type="text/javascript"><!--mce:1--></script>

und anschließend aufrufen

1
2

$('#id1').FontEffect({ outline:true, shadow:true })
$('#id2').FontEffect({ gradient:true, mirror:true, mirrorColor:"#298d79" })

Das Plugin kommt mit über 20 versch. Einstellmöglichkeiten für Farbe, Position, Transparenz usw… daher.
Eine vollständige Liste der Optionen, jede Menge Demos, einen Konfigurator sowie alle Dateien zum Download findet Ihr auf der Plugin Homepage.
Auf der Seite werden auch Mögliche Fragen bzgl. User resizing, Fonts, Box model, Divs usw angesprochen.

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery

Ich bin schon vor ein Paar Tagen auf dieses Plugin gestoßen und wollte es euch heute noch kurz vorstellen.
Mit AnythingZoomer für jQuery habt Ihr die Möglichkeit einzelne Elemente eurer Seite vergrößert darzustellen.
Dazu müsst Ihr einfach nur mit der Maus über die entsprechenden Stellen fahren und der Rest wird über CSS geregelt.

Hier gibts verschieden Demos und das Plugin zum Download.

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

About

Neulich abend saß ich auf dem Sofa und wollte mich über mein iPhone bei Facebook anmelden, bei der Eingabe meines Passwortes fiel mir wieder dieses kleine Detail auf, welches die Eingabe des Passwortes doch etwas angenehmer macht.

Der ein oder andere iPhone-Besitzer weiß wovon ich rede. Davon das im Eingabefeld immer für kurze Zeit der zuletzt eingegeben Buchstabe des Passworts zu sehen ist, was dem User doch mehr Sicherheit gibt das seine Eingabe korrekt war.

Ich dachte mir sowas könnte auch für normale Formulare ganz schön sein und deshalb haben wir ein kleines jQuery-Plugin geschrieben welches dieses Verhalten imitiert.

How to use

jQuery myPass nutzt die jQuery Javascript library.

Ihr müsst nur die beiden Dateien in eueren Header einbinden.

1
2

<script src="_js/jquery.js" type="text/javascript"></script>
<script src="_js/jquery.myPass-1.0.js" type="text/javascript"></script>

Options

Um das Plugin zu aktivieren und einzustellen müsst Ihr nun nur noch folgendes in euren Header schreiben

1
2
3
4
5

	$('.myTextField').myPass({
			charReplace : '%u2665',
			charDuration : 1000
 
	});

• charReplace: Hiermit könnt Ihr einstellen durch welches Zeichen die Buchstaben ersetzt werden sollen.Als default ist der Standard-Punkt eingestellt. Weitere Zeichen findet Ihr hier.Nehmt einfach die letzten 4 Zahlen des Unicode und setzt %u davor. z.B. charReplace : ‘%u2665′ um statt dem • ein ♥ zu verwenden.
• charDuration: Hiermit könnt Ihr einstellen wie lange das letzte Zeichen angezeigt werden soll.

HTML

Im HTML-Teil eurer Seite legt Ihr nun einfach ein ganz normales Textfeld an, gebt diesem einen Namen und die Klasse welche Ihr oben eingetragen habt.

In diesem fall .myTextField.

1
2
3
4

<form action="test.php" method="post">
<input class="myTextField" name="password" type="text" />
<input name="Send" type="submit" value="submit" />
</form>

Nach dem senden des Formulars könnt Ihr eure Daten ganz einfach z.B. über PHP verarbeiten.

1

echo $_POST['password'];

Download & Demo

Demonstration – Plugin in Action

Download – Alle Dateien zum Download

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield