Firefox4 mit MenuMatic wollten nicht ganz so wie ich. In meiner Navigation wurd ein Punkt zweizeilig und somit die ganze Höhe meines Menüs falsch, was zur Folge hatte das unten ein Stück abgeschnitten wurde.

Da sich über CSS keine Lösung finden ließ habe ich die js-Datei (MenuMatic_0.68.3-source.js) wie folgt geändert:
Zeile 737 einfach um +2 erhöht.

1

this.width = this.childMenu.getFirst().getCoordinates().width+2;

Ich hoffe das hilft dem ein oder anderen weiter…

Ähnliche Artikel

• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

Ich wollte heute in einem Projekt einfach nur das Suchfeld, welches default als Wert “Suche” drin stehen hat, auf klick ins Feld leeren und, sollte der User nichts anderes eingegeben haben beim Verlassen das Feld wieder mit diesem Standardwert füllen.

Hier der Code:

1
2
3
4
5
6
7
8
9
10

$('.search').focus(function() {
	value=$(this).val();
	$(this).attr("value","");
});
 
$('.search').blur(function() {
	if($(this).val()=="") {
		$(this).val(value);
	}
});

Ich hoffe das hilft dem ein oder anderen…

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 17. September 2009 -- jCryption – HTML-Form Encryption Plugin

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
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

Einen Click handler einem Element hinzufügen
Einem Element einen Click handler mitzugeben ist wohl mit das einfachste.

1
2
3

$('#idDesElements').click(function(){
    window.alert("Click handler ausgelöst!");
});

Mehrer Click handler einem Element hinzufügen
Einem Element kann übrigens mehr als nur ein Click handler zugewiesen werden.
Wird das Element geklickt, werden alle handler der Reihe nach ausgeführt.

1
2
3
4
5
6

$('#idDesElements').click(function(){
    window.alert("Click handler 1!");
});
$('#idDesElements').click(function(){
    window.alert("Click handler 2");
});

Click Handler entfernen
Um Click Handler wieder zu entfernen reicht ein einfaches unbind.

1

$('#idDesElements').unbind('click');

Click Handler hinzufügen und gleichzeitig entfernen
Da wir mit jQuery ja die wunderschöne Methode des Chainings zur verfügung haben, können wir einem einem Element alle Ihm bisher zugeordneten Click Handler entziehen und gleichzeitig einen neuen hinzufügen.

1
2
3

$('#idDesElements').unbind('click').click(function(){
    window.alert("neuer Click handler ausgelöst!");
});

Click Handler und Anker
Wenn man einen Click Handler an einen Linkanker aufruft, aber nicht will das der Browser dem Link folgt, nachdem der Handler aufgerufen wird muss zusätzlich einfach ein return false;

1
2
3
4

$('#idDesElements').click(function(){
    window.alert("Click handler");
    return false;
});

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 26. November 2009 -- jQuery HowTo: Traversing

Was passiert hier? Basis ist diese HTML Struktur:

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

<div id="someParent" style="border: 1px dotted #ccc">Parent
<div>
 Child1
</div>
<div class="move">
 Child2
</div>
<div>
 Child3
</div>
<div class="move not">
 Child4
</div>
</div>
 
<div id="someWrapper">
<a  id="testone" href="#">Move all</a>
<a id="testtwo" href="#">Move filtered</a>
</div>

Folgender Javascript-Code führt die Animation aus. Ausgehend von dem Link wird mit den Methoden parent das div “someWrapper” selektiert, prev wählt das vorige Element mit der id “someParent” und schlussendlich werden mit children alle Elemente innerhalb von “someParent” selektiert.
Die id’s im Beispiel dienen nur der Veranschaulichung. Die zu animierenden Elemente werden ausschließlich über die Struktur des DOM gefunden.

jQuery Code für “Move all”:

1
2
3
4

jQuery("#testone").click(function () {
    jQuery(this).parent().prev().children().animate({'paddingLeft':'20px'},200);
     return false;
});

Nun zur fortgeschrittenen Variante. Basis dafür sind die jQuery Funktion, filter und not.
jQuery Code für “Move filtered”:

1
2
3
4

jQuery("#testtwo").click(function () {
   jQuery(this).parent().prev().children().filter(".move").not(".not").animate({'paddingLeft':'20px'},200);
    return false;
});

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 14. November 2010 -- fadeToggle – die Neue in jQuery 1.4.4
• 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

Das ganze basiert auf jQuery UI und beinhaltete folgende Widgets:

• Lightbox (Demo)
• Formular (Demo)
• Tabs (Demo)
• sortierbare Tabellen (Demo)

Alle Infos zum Projekt, sowie Demos, Doku usw findet man im Wiki von github.

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 12. Juni 2009 -- Bessere Textfelder – prettyComments jQuery Plugin

Da für die Seite MooTools im Einsatz ist hab ich das ganze mit folgenden 2 Zeilen code gelöst:

1
2

var height = new Number($$('#content').getStyle('height').map(function(it){ return it.toInt();}));
$$('#container').setStyle('height', height + 420);

wobei +420 die Höhe des oberen Bereichs (Header, Navi, Newsblock) darstellt.
Liest man mit MooTools getStyle(‘height’) die Höhe des Containers aus so bekommt man z.b. 800px raus, daher wird die Funktion toInt() benötigt welche aus diesem String die Number 800 macht.

Ähnliche Artikel

• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! Den gleichen Selektor nicht mehrmals aufrufen

Anstatt:

1
2
3

$('div.class').css ('color', '#000000');
$('div.class').text ('Hier steht Text');
$('div.class').addClass ('highlighted');

sollte man:

1
2
3
4

var $div = $('div.class');
$div.css ('color', '#000000');
$div.text ('Hier steht Text');
$div.addClass ('highlighted');

verwenden.

Alternativ kann man das ganze auch chainen.

1

$('div.class').css ('color', '#000000').text ('Hier steht ein Text').addClass ('highlighted');

Ähnliche Artikel

• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery
• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem

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