Bring down IE 6

- ,
Bring Down IE 6

Bring Down IE 6

Heute bin ich wieder einmal über eine Seite im Internet gestolpert welche sich mit einem Übel befasst welches uns Web-Entwickler seit Jahren quält. Diese Seite wurde vom englischen Web-Entwickler Magazine .net erstellt. Der Internet Explorer 6, welcher im Jahre 2001 erschienen ist, hat laut der Seite noch immer über 20% Marktanteil. Für alle Hersteller von Webseiten ist er jedoch eine Qual da er wichtige moderne Web-Standards nicht unterstützt und somit den Entwicklern oft viele Stunden zusätzliche Arbeit verschafft. Mit der Webseite bringdownie6.com möchten sie den Untergang des veralteten Browsers einläuten. Ich mich ihnen anschliessen und fordere alle auf, welche noch den Internet Explorer 6 benützten auf den modernen Internet Explorer 8 zu wechseln. Wenn ihr gleich beim umsteigen seid, kann ich euch aber eigentlich nur empfehlen gleich auf Mozilla Firefox oder Apple Safari zu wechseln. Beide Browser haben ein aktives und innovatives Entwickler Team hinter sich welche bemüht sind die modernen Standards zu unterstützen und weiter zu entwickeln.

Bild verkleinern auf eine maximale Grösse

-

Wenn man ein Upload für Bilder hat, will man meistens die Grösse des Bildes beschränken welches hochgeladen werden soll. Die einfachste Möglichkeit dazu wäre, einfach eine Fehlermeldung auszugeben falls ein zu grosses Bild hochgeladen wurde. Doch wer ärgert sich nicht auch immer darüber wenn man ein Formular zweimal abschicken muss nur weil jetzt es nicht 100% ausgefüllt hat? Ist es nun nicht nur ein Feld, welches nicht ausgefüllt wurde, sondern gleich ein zu grosses Bild ärgert man sich nur noch mehr. Dies muss nicht sein, denn wir können das bild auch direkt auf dem Server verkleinern.
Ich habe eine kleine Funktion geschrieben welche genau dies macht:


function resizeImage($img_src, $maxheight, $maxwidth, $quality=90)
{
	// fals eine Grösse 0 ist wird sie auf 99999 gesetzt damit sie nicht beachted wird
	if($maxheight == 0) $maxheight = 99999;
	if($maxwidth == 0) $maxwidth = 99999;

	// Grösse auslesen
	$size        = getimagesize($img_src);
	$width_orig  = $size[0];
	$height_orig = $size[1];

	// Diese Boolean Variable entscheidet ob was am Bild geändert werden muss
	$redraw = false;

	if($height_orig > $maxheight && $maxheight != 0)
	{
		// ist das Bild zu hoch wird die Breite proportional zur Maximalhöhe verkleinert
		$newheight = $maxheight;
		$newwidth  = ceil($width_orig * $newheight / $height_orig);
		$redraw    = true;
	}
	else
	{
		$newwidth  = $width_orig;
		$newheight = $height_orig;
	}

	if($newwidth > $maxwidth && $maxwidth != 0)
	{
		// Ist das Bild zu breit wird die Breite proportional zur Breite verkleinert
		$newwidth  = $maxwidth;
		$newheight = ceil($newheight * $newwidth / $width_orig);
		$redraw    = true;
	}

	// falls nun das Bild verkleinert werden muss wird es nun neu gezeichnet.
	if($redraw)
	{
		// der Dateityp wird ermittelt
		$file_arr = explode(".", $img);
		$file_type = strtolower($file_arr[count($file_arr)-1]);

		// Das Bild muss je nach Dateityp anders eingelesen werden
		if($file_type == "png")
		{
			imagealphablending($img_src, true);
			$src_img = ImageCreateFromPNG($img_src);
		}
		elseif($file_type == "gif")
		{
			imagealphablending($img_src, true);
			$src_img = ImageCreateFromGIF($img_src);
		}
		else
			$src_img = ImageCreateFromJPEG($img_src);

		// Ein weisses Bild mit der oben berechneten Grösse wird erstellt
		$handle = ImageCreateTrueColor($newwidth, $newheight);
		$white = ImageColorAllocate($handle, 255, 255, 255);
		imagefill($handle, 1, 1, $white);

		// Unser Bild wird nun verkleinert und auf das eben erstellte weisse Bild gelegt.
		imageCopyResampled ($handle, $src_img, 0, 0, 0, 0, $newwidth, $newheight, $width_orig,  $height_orig);

		// Das alte Bild wird mit dem neuem überschrieben
		if ($file_type == 'png')
			imagepng($handle, $img_src, $quality);
		else if ($file_type == 'gif')
			imagegif($handle, $img_src);
		else
			imagejpeg($handle, $img_src, $quality);

		return 'Bild wurde verkleinert';
	}
		else return 'Bld musste nicht verkleinert werden';
}

jQuery Plugin qTip

- , ,

Heute ist der erste Release Candidate vom jQuery Plugin qTip rausgekommen. Es ermöglicht einem auf einfache Art und Weise coole Tooltips zu bauen ohne dafür grossen Aufwand betreiben zu müssen. Es bieted aber nicht nur die Möglichkeit einfach und schnell Tooltips zu erstellen sondern erlaubt es auch duch die API Schnittstelle die Funktionalität vollkommen zu dynamisieren oder auch erweitern.

// Einfaches Tooltip über alle Links
$('a').qtip({ content: 'Mein Tooltip' });

// Tooltip mit dynamischen Inhalt
$("#dynamisches_tooltip").qtip({
	content: {
		url: 'localcontent.html'
	}
});

Man kann die Tooltips aber auch nach belieben gestalten über das style Attribut:

$("gestyltes_tooltip").qtip({
	content: 'Dieses Tooltip ist hübsch',
	style: {
		width: 500,
		padding: 5,
		background: '#ccc',
		color: 'black',
		textAlign: 'center',
		border: {
			width: 7,
			radius: 2,
			color: '#fff'
		}
	}
});

Es gibt aber auch vorgefertigste Styles, welche man einfach über style.name aktivieren kann und man nur noch gewisse kleinigkeiten anpassen/überschreiben muss.
Zudem bieted das API Attribut diverse Callbacks welche man erstellen kann. Ein keines Beispiel:

$('#api_funktionen').qtip({
	content: 'mein Inhalt',
	api: {
		onFocus: function ()
		{
			// Bei Mousover färbt sicht das Element rot
			this.css('color','red');
		}
	}
})

Alles in allem ein sehr gelungenes Plugin mit vielen Möglichkeiten es zu erweitern. Zudem steht der Ersteller im Forum aktiv zur Rede und Antwort.