Archiv für April, 2009

Apr200929

Oliver Storm

0

jQuery – Was sollte man bzgl. Performacne beachten

Ich bin soeben über einen schönen Artikel zum Thema Performance und jQuery gestolpert.

In dem Artikel geht es darum was man beachten sollte um optimale Performance mit jQuery zu erzielen.
Es werden Themen wie warum man ID als selektor nutzen sollte, oder warum man besser Tags als Klassen nehmen sollte usw. angeschnitten.
jQuery Performance Rules

Apr200922

Stefan Huissel

0

Online Thumbnail Generator für Webseiten

Unabhängig von alles JS-Frameworks will ich mal einen kleinen Service vorstellen, mit dem man sehr einfach Thumbails von Websites darstellen kann.
Alles was man dafür benötigt ist ein Account auf Pageglimpse. Nach erfolgreicher Registrierung gibt man auf seiner Seite dem img-Tag als src Attribut einfach einen absoluten Link. Dieser kann dann wie folgt aussehen:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

mysrc_thumb

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

  • devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
  • url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
  • size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.

Apr200919

Stefan Huissel

32

Formulare mit AJAX und jQuery – Ein kleines Tutorial

AJAX ist eine vom Prinzip her sehr einfache Technologie. Request mit JS abschicken, Anfrage mit serverseitigem Skript verarbeiten und Ergebnis wieder im Browser ausgeben bzw. anzeigen. Allerdings steckt der Teufel wie immer im Detail. Dieser Post ist eine kleine Anleitung wie man AJAX mit einem Formular einsetzen kann. Weit einfacher ist dies mit der Verwendung eines JS-Frameworks, hier jQuery.

So zunächste einmal der Standardaufbau in HTML für ein Formular.

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="block">
<div class="done">
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
	<div class="myForm">
	<form method="post" action="saveData.php">
	<div class="input">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="input">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="input">
		<label>Kommentar</label>
		<textarea name="kommentar" class="text textarea" /></textarea>
	</div>
	<div class="input">
 
		<input type="submit" id="submit"/>
		<div class="loading_icon"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

Nichts besonderes. Jedes Input Feld ist noch mit einem beschreibenden Label versehen. Zur einfacheren Gestaltung sind die einzelnen inputs mit ihren Labeln in einem div gehüllt. Die Divs mit der Klasse “loading_icon” und “done” sind zum Startzeitpunkt unsichtbar.
Das CSS dazu könnte man so umsetzen:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

body{
        text-align:center;
}
 
.loading_icon {
	float:right;
	background:url(ajax-loader.gif) no-repeat 1px;
	height:30px;
	width:30px;
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px;
	padding-left:20px;
	font-size:12px;
	width:70%;
	margin:20px auto;
	display:none
}
 
.clear {clear:both}
 
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.input * {
	padding:5px;
	margin:2px;
	font-size:12px;
}
.input label {
	float:left;
	width:75px;
	font-weight:700
}
.input input.text {
	float:left;
	width:270px;
	padding-left:20px;
}
.input .textarea {
	height:120px;
	width:270px;
	padding-left:20px;
}
 
.input #submit {
	float:right;
	margin-right:10px;
}

So. Nun können wir uns endlich um den AJAX-Request kümmern. Schauen wir uns an wie wir die Daten nun weiter verarbeiten und an das PHP-Skript weiterleiten.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(document).ready(function() {
  //click event für submit button
  ('#submit').click(function () {
 
  //Daten von den HTML Feldern in JS-Vars übersetzen
  var name = $('input[name=name]');
  var email = $('input[name=email]');
  var website = $('input[name=website]');
  var comment = $('textarea[name=comment]');
 
  //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen 
  //String
  var data = 'name=' + name.val() + '&email=' + email.val()
  + '&comment='  + encodeURIComponent(kommentar.val());
 
  //alle Textfelder deaktivieren
  $('.text').attr('disabled','true');
 
  //Icon während des Requests einblenden
  $('.loading_icon').show();
 
  //Request abschicken
  $.ajax({
	//Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen
	url: "saveData.php",
	//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
        //bei größeren Datenmengen
	type: "GET",
	//Daten die gesendet werden sollen			
	data: data,
 
	//bei Antwort des Requests (Response)
	success: function (reqCode) {
	//wenn saveData.php true bzw. den Status 1 zurückliefert
		if (reqCode==1) {
			//verstecken des Formulars
			$('.form').fadeOut('slow');
			//anzeigen der Erfolgsmeldung
			$('.done').fadeIn('slow');
 
		//wenn der Request eine Form von false zurückschickt, Fehler ausgeben.
		} else{
                        alert('Fehler beim Abschicken des Formulares.');
                }
	}
});
 
	return false;
        //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und         
        //sich nicht wie ein normales Form mit Seiten Refresh verhält.
	});
});

All magic is done ;) …

Demo

Apr200917

Oliver Storm

1

jQuery API Browser v1.3 für den Desktop

jquery-api

Unter http://api.jquery.com/ findet man den API Browser von jQuery v1.3.
Ein ziemlich nützliches Teil wenn man schnell mal Hilfe bei der Entwicklung braucht.

Der Browser stellt die komplette API mit all Ihren Kernfunktionen übersichtlich dar.

Aber das schönste daran ist, dass ganze gibt es auch als AIR-Applikation für den Desktop. Einfach installieren und schon hat man die ganze Geschichte jederzeit und schnell verfügbar.

Inhalte im Überblick:

  • Die aktuelle jQuery und jQuery UI Dokumentation.
  • Die Möglichkeit Seiten die man häufig braucht als Favoriten zu markieren.
  • Syntax Highlighting in den Code-Beispielen.
  • Live Demo´s innerhalb des Browsers.
  • Links zum editieren und experimentieren mit Code-Beispielen.

Apr200916

Oliver Storm

0

jQuery´d Bread Crumb – jBreadCrumb

jbreadcrumb3

Zwar nicht ganz neu, dafür wie ich finde immer noch beeindruckend. Und für die unter euch die es nicht kennen evtl. ein Highlight. jBreadCrumb – Das jQuery-Plugin zur modernen Darstellung von Breadcrumbs.

Das Plugin wurde für Breadcrumbs geschrieben welche mit extrem tief verschachtelten oder langen Seitennamen umgehen müssen und hat daher auch die Fähigkeit einzuklappen.
Das schöne ist das sich der Einklappeffekt anhand der Anzahl der Elemente oder der Länge einstellen lässt.

Das Plugin nutzt weiter noch das easing Plugin von jQuery zum ein- bzw. aufklappen der Inhalte.

Um das Plugin zu nutzen braucht Ihr nur etwas in der Art:

?View Code JAVASCRIPT
1
2
3

jQuery(document).ready(function(){
	jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
})

Eine Demo sowie die Dateien zum Download findet Ihr auf der offiziellen Seite.

Apr200915

Stefan Huissel

0

jQuery versus CSS

An einem kleinen Beispiel soll gezeigt werden inwiefern CSS und ein JS-Framework gleiche Funktionalitäten bieten aber auch gleichzeitig wo Unterschiede liegen.
Folgendes Codestück legt ein Zoom Icon über ein Bild rein unter zuhilfe von CSS. Hierbei wird ein leeres span-Tag eingefügt auf das wir später unser Icon legen wollen.

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11

<div id="picGallery">
    <h2>CSS-Code</h2>
    <a href="someBigPic.jpg">
        <span></span>
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <span></span>
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Das CSS sähe dabei so aus:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#picGallery{
    width:       100%;
    overflow:  hidden;
}
#picGallery a {
    position:   relative;
    float:         left;
    margin:     5px;
}
#picGallery a span {
   display:none;
   background-image:url(zoom.png);
   background-repeat:no-repeat;
   width:48px;
   height:48px;
   position:absolute;
   left:15px;
   top:15px;
}
#picGallery img {
   border:    solid 1px #999;
   padding:  5px;
}
#picGallery  a:hover span {
   display:   block;
}

Soweit sogut. Nun mit Hilfe von jQuery. Der HTML Teil ist fast identsich. Allerdings brauchen wir hier die span-Tags noch nicht.

?View Code HTML
1
2
3
4
5
6
7
8
9

<div id="picGallery">
    <h1>jQuery Code</h1>
    <a href="someBigPic.jpg">
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Der JS-Code erzeugt den span und kümmert sich um das Einblenden..

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11

   $(document).ready(function(){
      //Füge jedem a-tag in dem div mit der id "picGallery" ein span-Tag hinzu
      $("#picGallery a").append("<span></span>");
      //Standard fading Funktionen von jQuery
      $("#gallery2 a").hover(function(){
      $(this).children("span").fadeIn(600);
      },
      function(){
      $(this).children("span").fadeOut(200);
      });
});

Das wars auch schon. Natürlich muss das CSS im HTML Dokument referenziert werden, allerdings kann dann die a:hover Eigenschaft weggelassen werden. Bei Click würde das Bild in einem neuen Fenster geöffnet, bei Bedarf ließe sich noch ein Bildergalerie Skript damit verbinden. Ich hoffe das bei Gelegenheit noch vorstellen zu können.
Viel Erfolg!!

Apr200914

Oliver Storm

0

Notimoo – Mac Growl für MooTools

Mit Notimoo kommt die vom Mac bekannte Anwendung “Growl” für MooTools.
Mit Growl benachrichtigen Programme auf dem Mac den User darüber wenn etwas passiert.

Notimoo selbst zeigt dem User Notzien im “Growl-Style” am Rand der Seite an.

Einfaches Beispiel für die Implementierung:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12

// Now I create the manager so it will display notifications from the left bottom corner
var notimooManager = new Notimoo({
   locationVType: 'bottom',
   locationHType: 'left'
});
 
// Showing a notification that does not disappear.
notimooManager.show({
    title: 'Testing notification',
    message: 'This notification will not disapper on its own. You must click on it to close.',
    sticky: true
});

Das ganze Notimoo Projekt wird unter der MIT license bei Google Code gehostet.
Eine Demo des ganzen findet Ihr hier.

Apr200912

Stefan Huissel

0

jQuery UI CSS Framework

Heute mal ein kleiner Exkurs auf die Oberflächengestaltung das vereinfachte Zusammenarbeiten zwischen Entwickler und Designer.
jQuery bietet ein eigenes CSS Framework. Im Gegensatz zu YAML, wohl eines der bekanntetesten Frameworks in diesem Bereich, ist das UI CSS Framework meiner Meinung nach weitaus einfacher zu handhaben, allerdings auch nicht ganz so mächtig. In erster Linie werden Bezeichnungen für Elemente durch Klassen vorgegeben. Nun hält man sich einfach an diese Standards und man kann das “Look a like” seiner Oberflächenkomponenten durch Austauschen der Themes schnell und einfach ändern.

Auch wird die Umsetzung von “Rounded corners” mit CSS3 unterstützt. Natürlich in den Browsern, die sich nach dieser W3C Empfehlung richten. Der IE6 gehört natürlich nicht dazu, hierfür muss auch mit dem jQuery CSS Framework individuell angepasst werden. Genauso werden bisher noch keine transparente png’s im IE6 unterstützt, was sich aber bald ändern soll. Aber hierfür ist bisher noch der alte CSS pngfix notwenig.
Allgemein mehr über das CSS Framework könnt ihr unter Theming API herausfinden.

Auch äußerst interessant ist der ThemeRoller. Hält man sich an die Standards der Theming API lassen sich damit einfach ansprechende Benutzeroberflächen gestalten, die auf die eigene Seite als CSS übernommen werden können.

Apr200908

Stefan Huissel

0

jQuery Media Plugin zum Einbinden verschiedener Mime-Types

Neulich bin ich auf ein jQuery Plugin gestoßen um verschiedene Player oder Media Files ganz einfach mit jQuery einzubinden. Eine kleine Auflistung der Player:

  • Quicktime
  • Flash
  • Windows Media Player
  • Real Player
  • Silverlight
  • iFrame

Es lassen sich damit auch direkt Dateien aufrufen, die dann mittels einem der genannten Player abgespielt werden. Vorrausgesetzt natürlich, dass das jeweilige Plugin des Players bereits im Browser installiert ist. Das Media Plugin besitzt ansich eine recht einfache Funktionsweise. Es ersetzt einfache a-Tags auf eine Media-File durch den für den Browser notwendigen Einbettungscode, der weitaus länger und komplexer ist.

Ein kleines Beispiel wie man mittels diesem Plugin eine PDF direkt auf der Website anzeigen kann:

?View Code JAVASCRIPT
1
2

//Aufruf des Media Plugins mit zwei Optionen(normalerweise innerhalb des DOM-Ready Events)
$('a.media').media({width:500, height:400});

Der HTML-Code müsste dann folgendermaßen aussehen:

?View Code HTML
1
2
3
4
5
6

<script type="text/javascript" src="jquery.media.js"></script>
 
<!-- metadata ist ebenfalls ein plugin das in diesem Beispiel zur Anzeige der Größe gebraucht wird -->
<script type="text/javascript" src="jquery.metadata.js"></script>
 
<a class="media" href="guice.pdf">PDF File</a>

That’s it. Zu finden ist das Ganze hier..

Apr200908

Oliver Storm

0

Text-Overflow – jQuery Plugin ellipsis

Es gibt einige CSS-Features welche Microsoft schon seit längerem den Entwicklern im Internet Explorer zur Verfügung stellt. Eines dieser Features ist die Eigenschaft “text-overflow”, welche jetzt auch in CSS3 verankert ist und bereits in Safari und Opera verankert ist. Das einzige Problem ist, Firefox unterstützt es noch nicht. (Wird es aber wohl ab Version 3.1 tun)

Text-Overflow zeigt dem User, wenn der Text länger ist als der Container der ihn beinhaltet, einen kleinen Hinweis an das es mehr Text gibt.
Im Normallfall einfach in Form von drei Punkten.

Devon Govett hat ein kleines jQuery-Plugin geschrieben welches diese Eigenschaft jetzt auch für Firefox verfügbar macht.
Gerade im Bereich CMS oder ähnlichem ist dies Interessant. Da man sich hiermit String-Manipulationen mittels PHP o.ä. schenken kann.

Ein einfaches Beispiel:

?View Code JAVASCRIPT
1

$("#id").ellipsis(true);

Das Plugin findet ihr hier sowie die Demo hier.

« ältere Beiträge