MooTools MenuMatic – Firefox 4 zweizeilig Problem

Die Zeit der neuen Browser. Und auch wenn alles schön und neu ist, heute morgen hatte ich dann auch gleich das erste kleine Problem.

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…

jQuery Mobile – Web-Apps mit jQuery

Endlich ist es soweit. jQuery Mobile 1.0 Alpha 2 ist released. Und meiner Meinung nach beginnt damit ein neuer Abschnitt in der Entwicklung mobiler Seiten, bzw. von Web-Apps auf touch-fähigen Smartphones.

War der erste Alpha release noch sehr buggy, merkt man dass seit dem rund 200 Tickets berarbeitet wurden und auch viele Wünsche der User aus dem Forum einzug gefunden haben. Das jQuery Mobile Team selbst sagt:
Overall the quality of jQuery Mobile has been greatly improved. A number of subsystems have been rewritten (both for clarity and for performance) and cross-browser compatibility has seen a marked increase in quality.

Die Performance im allgemeinen wurde verbessert, neue CSS-Klassen und statische Methoden hinzugefügt und vieles mehr. Den kompletten Überblick bekommt man in den release notes.

Nachdem schon javascript Plugins wie jqTouch, iUi, jo, SproutCore u.a einen ersten Ausblick auf die Entwicklung Mobiler-Apps gegeben haben und auch von Entwicklern gut angenommen wurden, so ist jetzt mit jQuery Mobile wohl eines der, wenn nicht das, mächtigste Framework zum entwickeln Mobiler-Anwendungen auf dem Markt.

Ich habe heute mal mit meinem iPhone die ersten Tests gemacht und muss sagen, mir gefiel sehr was ich gesehen habe. Gerade die Demos waren sehr vielversprechend.

Die Key-features im Überblick:

• Basierend auf dem jQuery Core. Somit eine geringe Lernkurve, da die Syntax weitestgehend gleich bleibt.
• Kompatibel mit allen großen Mobilen Plattformen. – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo.
• Leightweight. Mit gereade mal 12k im der komprimierten-Version.
• HTML5 gestützte Konfiguration.
• Automatische installation
• Volle WAI-ARIA Unterstützung
• Neue Events wie z.B. das unterstützen von Touch-Events
• Neue Plugins wie z.B. für das Theming

Das Top-Features ist, dass wirklich alle großen Mobilen Plattformen out of the Box unterstützt werden.
Hier gibt es auch noch mal einen schönen Überblick welche Platformen genau unterstützt werden. Mobile Graded Browser Support.
Wir sind gespannt wie es hier weiter geht und werden das Thema jQuery Mobile als festen Bestandteil hier im Blog integrieren und in nächster Zeit auch eine kleine Tutorial-Serie dazu starten.

Links zu den wichtigsten jQuery Mobile Seiten:

• jQuery Mobile Website
• Forum
• Blog
• Demos

Praxistipp: jqTransform Button width einstellen

So nett und schön das jqTransform Plugin auch ist, macht es i.A. doch ein paar kleine Probleme. Neben der unterschiedlichen Interpretation der Breite von Textfeldern in FF und IE, lässt sich auch die Breite der Standardbuttons nicht aus dem eigenen CSS einstellen.

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;
}

Praxistipp – jqTransform width bug

Wer jqTransform schon einmal benutzt hat wird sicherlich festgestellt haben, dass der Internet Explorer und der Firefox Browser die Textfelder in einer unterschiedlichen Breite darstellen.
Das ist zurückzuführen auf das size-Attribut, dass selbst wenn nicht im input Feld verankert im IE mitberücksichtigt wird.

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.

Praxistipp – position absolute – parent height anpassen mit MooTools

Gestern bin ich auf ein kleines Problem mit einem absolut positionierten Div gestoßen.
Ich musste ein Div absolut positionieren doch sein parent Container sollte die Höhe entsprechend anpassen.
Da man ja mit absolute das Div aus dem Dokumentenfluß reißt geht das mit herkömmlichem CSS leider nicht.

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.

Tipp! Den gleichen Selektor nicht mehrmals aufrufen

Und noch ein kleiner Tipp! Oftmals kommt es vor das man einem Element mehrere Methoden mitgeben muss.
Hier sollte man vermeiden den Selektor nicht zu oft zu verwenden.

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');

Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery

Anbei nur ein kleiner Tipp! wie man einfach ein li auf klick highlighten kann und dem aktiven li die Klasse wieder entzieht.

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