Wikizone - Benutzerbeiträge [de]

E-Mail

2013-01-04T17:29:20Z

79.240.84.17: /* PHP */

== Mails aus Thunderbird exportieren ==
Für Updates kann man einfach die Ordnerstruktur in der die Mails liegen kopieren und wieder in der neuen Version abspeichern. Bei neueren Versionen funktioniert das Update automatisch.

===Export nach Outlook Express===
* Die betreffenden Mails als Anhang an sich selbst weiterleiten (die Mails werden dabei als *.eml Files in den Anhang gepackt.)
* Im Outlook Express die Mail herunterladen. Die Anhänge in einen beliebigen Mailordner ziehen - fertig. Die Mails enthalten alle Daten auch die Header-Daten. Wenn es Zugriffs-Probleme gibt einfach die Mails kurz auf der Festplatte zwischenspeichern, und erst danach in den Mailordner ziehen.

== Grundsätzlicher Ablauf einer Mailübertragung ==
von: http://www.lrz-muenchen.de/services/netzdienste/email/empfang/ (14.7.2006)
Um zu verstehen, was im DNS konfiguriert werden muß und weshalb, soll zuerst der Ablauf der Übertragung einer Mail beschrieben werden.

Jede Mailadresse besteht aus zwei Teilen, dem lokalen Teil links vom '@'-Zeichen und der Domain rechts davon. Die Domain bestimmt das Routing, d.h. den Weg vom Mailserver des Absenders zum Mailserver des Empfängers. Der linke Teil bestimmt, was der empfangende Mailserver mit der Mail machen soll. In der Regel wird er die Mail an eine lokal vorhandene Mailbox ausliefern.

Der sendende Mailserver muß feststellen, an welchen Rechner er die Mail schicken muß. Dies kann bereits der Zielrechner sein, auf dem sich die Mailbox befindet, oder ein erster Rechner auf dem Weg zum Zielrechner (store-and-forward-Prinzip). Die notwendige Information bekommt er entweder aus einer internen Konfiguration - für uns hier nicht weiter interessant - oder aus dem DNS.

Im DNS gibt es verschiedene Arten von Einträgen - sogenannte Resource Records -, bei denen einem Domainnamen bestimmte Informationen zugeordnet sind. Bei der Abfrage des DNS gibt man den Domainnamen und den Typ des Eintrags an und bekommt die zugehörige Information geliefert. Unter einem Domainnamen kann man verschiedene Dinge verstehen.

Beim Mailversand spielen drei Typen von Einträgen eine Rolle:

* A-Record: zu einem Domainnamen (Rechner) wird die zugehörige IP-Adresse ausgegeben. Besitzt ein Rechner mehrere IP-Adressen, so gibt es entsprechend viele A-Records zum Domainnamen.
* MX-Record: zu einem Domainnamen wird der zugehörige Mailserver ausgegeben. Meistens sind mehrere MX-Records zu einem Domainnamen konfiguriert. Zur Unterscheidung besitzt jeder MX-Record eine Priorität (kleine Zahl = große Priorität). Der MX-Record mit der höchsten Priorität ist der eigentliche Zielrechner, auf dem sich die Mailboxen befinden, die anderen MX-Records bezeichnen die Backup-Rechner für den Fall, daß der eigentliche Zielrechner nicht erreicht werden kann. Sie speichern die Mails nur temporär und versuchen periodisch die Mail an den eigentlichen Zielrechner weiterzuleiten.
* CNAME-Record: der Domainname ist ein Alias für den angegebenen Rechner. Dieser Eintrag wird für Mail kaum verwendet und daher im folgenden nicht weiter betrachtet (sollten Sie aber so einen Eintrag zum Mailempfang verwenden, wenden Sie sich bitte an Herrn Spirk, spirk@lrz.de, damit er Ihnen bei der Migration helfen kann).

Ablauf einer Mailübertragung (soweit es hier interessiert):

* Der sendende Mailserver fragt im DNS nach den MX-Records für die Domain in der Mailadresse.
* Gibt es keinen MX-Record, so wird die Existenz eines MX-Records mit Priorität 0 angenommen, der auf die nachgefragte Domain zeigt (in der Praxis heißt dies, der Domainname ist der Zielrechner, zu dem eine Verbindung aufgebaut werden muß).
* Gibt es MX-Records, so werden diese nach Priorität sortiert. Zeigt einer der MX-Records auf den anfragenden Mailserver selbst, so wird dieser MX-Record und alle anderen gleicher oder niedrigerer Priorität ignoriert und nur die MX-Records mit höherer Priorität beachtet.
* Für den Rechner aus dem MX-Record mit der höchsten Priorität wird eine Anfrage nach dem A-Record und damit nach der IP-Adresse des Rechners gestellt. Dieser A-Record muß existieren, sonst ist kein Mailaustausch möglich.
* Zu dieser IP-Adresse wird eine Verbindung aufgebaut und die Mail übertragen.
* Kann zu der IP-Adresse keine Verbindung aufgebaut werden, so wird der MX-Record mit der nächstniedrigeren Priorität genommen, der A-Record abgefragt und die Verbindung aufgebaut (Backup-Fall).
* Kommt zu keinem der Rechner aus den MX-Records eine Verbindung zustande, so bleibt die Mail am absendenden Mailserver liegen und der ganze Ablauf beginnt nach einiger Zeit von neuem.

Was bedeutet dies nun, wenn z.B. eine Mail von einem Mailserver aus dem Internet an die Mailadresse xyz@vetmed.uni-muenchen.de geschickt werden soll? Im DNS seien folgende MX- und A-Records eingetragen:

Domainname Typ Prio Wert
vetmed.uni-muenchen.de MX 10 cip-tf2.cip.vetmed.uni-muenchen.de
vetmed.uni-muenchen.de MX 20 mailrelay1.lrz-muenchen.de
vetmed.uni-muenchen.de MX 30 mailrelay2.lrz-muenchen.de

cip-tf2.cip.vetmed.uni-muenchen.de A 141.84.176.126
mailrelay1.lrz-muenchen.de A 129.187.254.101
mailrelay2.lrz-muenchen.de A 129.187.254.102

* Der sendende Mailserver bekommt auf Nachfrage im DNS diese drei MX-Records.
* Der MX-Record mit der höchsten Priorität zeigt auf cip-tf2.cip.vetmed.uni.lrz-muenchen.de. Der sendende Mailserver versucht daher zu diesem Rechner eine Verbindung aufzubauen. Da cip-tf2.cip.vetmed.uni.lrz-muenchen.de nicht zu den im MHN zugelassenen Mailrelays gehört, wird die Verbindung am Router zwischen B-WiN und MHN blockiert.
* Der MX-Record mit der nächst niedrigeren Priorität zeigt auf den Mailrelay mailrelay1.lrz-muenchen.de, der als Backup dient. Der Verbindungsaufbau kommt zustande, da mailrelay1.lrz-muenchen.de im Gegensatz zu cip-tf2.cip.vetmed.uni.lrz-muenchen.de zu den zugelassenen Mailrelays gehört, und so kann die Mail übertragen werden.
* mailrelay1.lrz-muenchen.de stellt fest, daß die Mail nicht lokal ausgeliefert, sondern an einen anderen Rechner weitergeleitet werden soll.
* Er holt sich ebenfalls die drei MX-Records.
* Da der zweite MX-Record auf ihn selbst zeigt, verwirft er diesen und - wegen der noch niedrigeren Priorität- auch den dritten und behält nur den ersten MX-Record.
* Er versucht eine Verbindung zu cip-tf2.cip.vetmed.uni.lrz-muenchen.de aufzubauen und die Mail zu übertragen. Dies gelingt, da sich die Mail bereits im MHN befindet und sich der Filter am Router nicht mehr auswirkt.

Daraus folgt, daß in Zukunft für jede Domain, für die Mail empfangen werden soll, mindestens 2 MX-Records existieren müssen. Dies gilt auch für den Mailserver, selbst wenn zur Zeit kein MX-Record für ihn definiert ist und alle E-Mails über den Domainnamen des Mailserver abgewickelt werden. Als Mailserver gelten in diesem Fall alle Rechner, auf denen sendmail oder ein ähnliches Programm zum Mailempfang/versand läuft.

Für cip-tf2.cip.vetmed.uni.lrz-muenchen.de sollten daher noch die folgenden MX-Records eingetragen werden:

Domainname Typ Prio Wert
cip-tf2.cip.vetmed.uni-muenchen.de MX 10 cip-tf2.cip.vetmed.uni-muenchen.de
cip-tf2.cip.vetmed.uni-muenchen.de MX 20 mailrelay1.lrz-muenchen.de
cip-tf2.cip.vetmed.uni-muenchen.de MX 30 mailrelay2.lrz-muenchen.de

Der MX-Record mit der höchsten Priorität zeigt auf den eigentlichen Mailserver, auf dem die Mailboxen liegen. Der MX-Record mit niedriger Priorität zeigt auf eines der Mailrelays, über den der direkte Empfang aus dem Internet abgewickelt wird. Zur Sicherheit sollte noch ein dritter MX-Record auf einen weiteren Mailrelay zeigen, damit bei Ausfall des ersten Mailrelays als Backup das zweite zur Verfügung steht.

Befinden sich die Mailboxen zu einer Domain auf dem Mailboxserver des LRZ (mailin.lrz-muenchen.de), so gibt es nur die zwei MX-Records auf die beiden Mailrelays mailrelay1.lrz-muenchen.de und mailrelay2.lrz-muenchen.de. Es darf kein MX-Record auf den Mailboxserver zeigen. E-Mails gelangen von den Mailrelays zum Mailboxserver über eine interne Kopplung. Es sind in diesem Fall also nur 2 MX-Records definiert:

Domainname Typ Prio Wert
jura.uni-muenchen.de MX 20 mailrelay1.lrz-muenchen.de
jura.uni-muenchen.de MX 30 mailrelay2.lrz-muenchen.de
Was ist also zu tun?
Es muß

1. festgelegt werden, über welche(n) Mailrelay(s) Mails empfangen werden sollen und
2. die entsprechende Konfiguration im DNS durchgeführt werden.

Daraus ergeben sich die folgenden Arbeitsschritte:

1. Überprüfung, ob es bereits MX-Records im DNS gibt:
* Stellen Sie fest, ob für Ihre Maildomain bereits MX-Records im DNS definiert sind, unter Unix z.B. mit nslookup -q=mx maildomain (s.a. nslookup auf LRZ-Nameserver)
* Zeigt einer der MX-Records bereits auf eines oder mehrere der Mailrelays (s. obige Tabelle), so sind Sie bereits fertig.
* Zeigt einer der MX-Records auf sunsrv5.lrz-muenchen.de (s. obiges Beispiel für jura.uni-muenchen.de) oder vielleicht sogar noch auf cd1.lrz-muenchen.de, so müssen diese Einträge auf die Mailrelays mailrelay1.lrz-muenchen.de und mailrelay2.lrz-muenchen.de geändert werden, s. weiter unten.
* Gibt es keinen MX-Record oder zeigt dieser nicht auf eines der Mailrelays, so muß ein Mailrelay ausgesucht werden.
2. Auswahl eines Mailrelays
* Gibt es in Ihrer Fakultät bereits ein Mailrelay, so bietet sich dieses an.
* Arbeiten Sie eng mit einer anderen Fakultät zusammen, die ein Mailrelay hat, so wäre dies eine weitere Möglichkeit.
* In jedem Fall ist es möglich, die zentralen Mailrelays des LRZ zu nutzen. Lassen Sie hierfür zwei MX-Records auf mailrelay1.lrz-muenchen.de und mailrelay2.lrz-muenchen.de eintragen, wobei die Priorität für mailrelay1.lrz-muenchen.de höher als die Priorität für mailrelay2.lrz-muenchen.de sein soll.
* Denken Sie bei der Auswahl an die Betriebsregeln des Mailrelays (neudeutsch: Policy). Hier gibt es Unterschiede, z.B. welche Mails von woher akzeptiert werden, wie sie weiterverarbeitet werden usw. So kann unter anderem die Größe der akzeptierten Mails unterschiedlich sein:
o srv.cip.physik.tu-muenchen.de akzeptiert 4 MByte große Mails
o die zentralen Relays des LRZ 20 MByte
o charly.bl.physik.tu-muenchen.de 100 MByte
o und die anderen Rechner aus obiger Liste haben bisher keine Größenbeschränkung.
Die Mail-Policy für die zentralen Mailrelays des LRZ finden sie unter http://www.lrz-muenchen.de/services/netzdienste/email/policy Vereinbarung mit dem Administrator des Mailrelays
3.
* Sprechen Sie zuerst mit dem Administrator des ausgesuchten Mailrelays, ob er bereit ist, Mails an Ihre Domain über sein Mailrelay zu leiten. Eventuell muß sein Mailrelay umkonfiguriert werden, damit er Mails für Ihre Domain auch entgegennimmt und nicht als unerwünschten Relay-Versuch ablehnt.
* Wollen Sie die Mails über die LRZ-Mailrelays leiten, so können Sie das jederzeit tun. Sie müssen nur dann mit uns Kontakt aufnehmen, wenn Ihre Maildomain keine Subdomain der von uns zur Zeit konfigurierten Domains ist, für die wir Mails akzeptieren. Mails an andere Domains werden als unerwünschter Relay-Versuch abgelehnt:

akzeptierte Domains
badw-muenchen.de
badw.de
isb.bayern.de
fh-muenchen.de
fh-weihenstephan.de
ku-eichstaett.de
lrz-muenchen.de
lrz.de
mgh.de
mhn.de
tu-muenchen.de
tum.de
uni-muenchen.de
weihenstephan.de
4. Konfiguration des DNS, Vereinbarung mit dem Administrator der DNS-Zone
* Nachdem Sie den zuständigen Mailserver festgelegt haben (und mit dem zuständigen Mailadministrator gesprochen haben), muß noch die Konfiguration im DNS erfolgen. Zuerst müssen Sie herausfinden, wer die Daten für Ihre Maildomain im DNS verwaltet, unter Unix z.B. durch nslookup -q=soa domainname. Gibt es dazu keine Antwort, müssen Sie die erste Subdomain auf der linken Seite streichen und erneut eine Abfrage stellen. Unter origin findet sich der Rechner, auf dem die DNS-Zone, d.h. die Daten für Ihre Domain verwaltet werden, und unter mail addr die Adresse des Administrators (der erste '.' muß durch ein '@' ersetzt werden).
* Nehmen Sie Kontakt mit diesem Administrator auf und lassen Sie MX-Records anhand obiger Erläuterung bzw. Beispiele eintragen, also einen auf Ihren Mailrechner und einen oder zwei auf die ausgesuchten Mailrelays. Denken Sie daran, daß sunsrv5.lrz-muenchen.de oder cd1.lrz-muenchen.de durch mailrelay1.lrz-muenchen.de und mailrelay2.lrz-muenchen.de ersetzt werden müssen.
* Werden die Daten vom DNS-Server des LRZ verwaltet, d.h.
o origin ist dfvgate.lrz-muenchen.de und
o mail addr ist hostmaster@lrz-muenchen.de und
o die MX-Records zeigen auf sunsrv5.lrz-muenchen.de,
so müssen Sie nichts tun. Wir stellen die MX-Records selbstständig auf mailrelay1.lrz-muenchen.de und mailrelay2.lrz-muenchen.de um. Im anderen Fall - also insbesondere für das erstmalige Eintragen von MX-Records - wenden Sie sich bitte an hostmaster@lrz-muenchen.de mit der Bitte eines Eintrags für Ihre Maildomain.

== E-Mail - Betreff und Inhaltstext automatisch befüllen ==
=== Link auf der Webseitet öffnet E-Mail Programm und füllt Inhalte aus ===
<pre>
<a href="mailto:name@domain.de?subject=Betreff&body=inhalt">Link</a>
</pre>
==== HTML Inhalte für Versand über URL vorbereiten / enkodieren====
Einige Sonderzeichen können nicht einfach über den body parameter in der URL versendet werden. Deshalb müssen die Inhalte zuerst kodiert werden.

=====PHP=====

<pre>
urlencode()
urldecode()

rawurlencode()
rewurldecode()
</pre>

Hierbei wandelt rawurlencode zusätzlich das Leerzeichen um. Bei Kompatibilitätsproblemen kann man es mit dem älteren urlencode probieren.

'''Beispiel'''

<pre>
<?php
echo urlencode ("Übertragener Wert: Ä");
?>
</pre>
Ergebnis:
%DCbertragener+Wert%3A+%C4

=====JavaScript=====

'''Beispiel'''
<pre>
var myEncodedUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);
</pre>

Zu Beachten:

encodeURI() enkodiert nicht:
: ~!@#$&*()=:/,;?+'

encodeURIComponent() enkodiert nicht:
~!*()'

Quelle: http://stackoverflow.com/questions/332872/how-to-encode-a-url-in-javascript (Zugriff 2012-12)

JQuery - Snippets

2013-01-04T13:49:07Z

79.240.84.17: /* GET-Variable in URL auslesen */

Nützliche jQuery Schnipsel
== Grundgerüst zum testen ==
<pre>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

<body>

<style type="text/css">
</style>

<script type="text/javascript">
$(document).ready(function() {

});

function newFunc(myParam){
alert('hello world')
}
</script>

<h1>Testpage</h1>

</body>
</html>
</pre>
== Links ==
[[JavaScript - Snippets]]

http://css-tricks.com/snippets/jquery/

=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
=== GET-Variable in URL auslesen ===
Diese muß extrahiert werden.

Beispiel 1:

Quelle: http://jquery-howto.blogspot.de/2009/09/get-url-parameters-values-with-jquery.html (Zugriff: 2013/01)

<pre>
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

Kurzform:
<pre>
function getUrlVars()
{
return window.location.href.slice(window.location.href.indexOf('?')).split(/[&?]{1}[\w\d]+=/);
}
</pre>

Aufruf von:
http://www.example.com/?me=myValue&name2=SomeOtherValue

ergibt folgendes Array:
<pre>
{
"me" : "myValue",
"name2" : "SomeOtherValue"
}
</pre>
Hinweis: Bei mir funktionierte es nicht mit Aufruf ohne Parameter. Dann entsteht nur ein nicht assoziatives Array. Das liegt wahrscheinlich daran, daß JavaScript eigentlich keine assoziativen Arrays kennt. Folgender Aufruf funktioniert aber:

<pre>
var first = getUrlVars()["me"];

// To get the second parameter
var second = getUrlVars()["name2"];
</pre>

Beispiel 2:

Etwas älteres Beispiel von: http://www.tutorials.de/javascript-ajax/149174-probleme-mit-dem-auslesen-von-variablen.html (Zugriff 2013/01)

<pre>
<SCRIPT type="text/javascript">

</SCRIPT>
</pre>

=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

=== Werte von Formularen auslesen ===
http://www.beier-christian.eu/blog/weblog/jquery-ausgewahlte-option-aus-select-box-auslesen/

==== Select Boxen ====
Hinweis, vieles ist natürlich auch mit anderen Elementen möglich.
<pre>
<label for="obst">Obst</label>
<select name="obst" id="obst">
<option value="1">Orange</option>
<option value="2">Apfel</option>
<option value="3">Banane</option>
</select>
</pre>

Wert auslesen
$('select#obst').val();

Text des Wertes auslesen
$('select#obst :selected').text();

Text mehrerer gewählter Optionen ausgeben:

<pre>
$('select#obst :selected').each(function(i, option) {
// Verarbeitung der Optionen
alert(option.value + ' ' + option.text);
});
</pre>
Beispiel: Alle gewählten Werte bei Veränderung in ein div (id=message) schreiben:
<pre>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text();
});
$("div#message").text(str);
}).change();
</pre>

==== Checkboxen ====
Links:
http://technosophos.com/node/223 (Zugriff 07-2012)

Beispiele
<pre>
// Checked ? Returns a boolean, true if checked, false otherwise
jQuery('#my-checkbox').is(':checked');

// Check checkbox - this sets the attribute checked="checked"
jQuery('#my-checkbox').attr('checked','checked');

// Uncheck checkbox (right way)
jQuery('#my-checkbox').removeAttr('checked');
</pre>
<pre>
// Check / Uncheck everything

// Check anything that is not already checked:
jQuery(':checkbox:not(:checked)').attr('checked', 'checked');

// Remove the checkbox
jQuery(':checkbox:checked').removeAttr('checked');
</pre>

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

=== Position eines Elements auslesen ===

<pre>
// get Pos of act Item
var position = $("#myElement").offset();
//console.log(position);

//set positon to other elements...
$("#otherElement").css(position);
$("#anotherElement").css("top",(position.top+5));

</pre>

== Usability ==
=== Loading Icon bis Seite komplett geladen ist ===
Quelle: siehe Links

<pre>
<head>
<meta charset='UTF-8'>
<title>Simple Loader</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
</head>

<body>
<img src="download.png" id="loader">
<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>

</pre>

Javascript

2013-01-04T13:41:24Z

79.240.84.17: /* JavaScript - Snippets */

== JavaScript Frameworks ==

[[jQuery]] - meine Empfehlung

[[jQTouch]]

jQuery mobile - meine Empfehlung

Sencha (mobil)

== JavaScript - nützliches ==
[[JSON]] Datenstrukturen

== JQuery Plugins ==

[[JQuery Tools (flowplayer.org)]]

== JavaScript - Snippets ==
=== Tipps, Tricks und Snippets ===
[[JavaScript - Snippets]]

[[JavaScript - Probleme lösen]]

== JavaScript - Events / Ereignisse ==
[[JavaScript - Event-Handler]]

JQuery - Snippets

2013-01-04T13:16:26Z

79.240.84.17: /* GET-Variable in URL auslesen */

Nützliche jQuery Schnipsel
== Grundgerüst zum testen ==
<pre>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

<body>

<style type="text/css">
</style>

<script type="text/javascript">
$(document).ready(function() {

});

function newFunc(myParam){
alert('hello world')
}
</script>

<h1>Testpage</h1>

</body>
</html>
</pre>
== Links ==
[[JavaScript - Snippets]]

http://css-tricks.com/snippets/jquery/

=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
=== GET-Variable in URL auslesen ===
Diese muß extrahiert werden.

Beispiel 1:

Quelle: http://jquery-howto.blogspot.de/2009/09/get-url-parameters-values-with-jquery.html (Zugriff: 2013/01)

<pre>
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

Kurzform:
<pre>
function getUrlVars()
{
return window.location.href.slice(window.location.href.indexOf('?')).split(/[&?]{1}[\w\d]+=/);
}
</pre>

Aufruf von:
http://www.example.com/?me=myValue&name2=SomeOtherValue

ergibt folgendes Array:
<pre>
{
"me" : "myValue",
"name2" : "SomeOtherValue"
}
</pre>

Beispiel 2:

Etwas älteres Beispiel von: http://www.tutorials.de/javascript-ajax/149174-probleme-mit-dem-auslesen-von-variablen.html (Zugriff 2013/01)

<pre>
<SCRIPT type="text/javascript">

</SCRIPT>
</pre>

=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

=== Werte von Formularen auslesen ===
http://www.beier-christian.eu/blog/weblog/jquery-ausgewahlte-option-aus-select-box-auslesen/

==== Select Boxen ====
Hinweis, vieles ist natürlich auch mit anderen Elementen möglich.
<pre>
<label for="obst">Obst</label>
<select name="obst" id="obst">
<option value="1">Orange</option>
<option value="2">Apfel</option>
<option value="3">Banane</option>
</select>
</pre>

Wert auslesen
$('select#obst').val();

Text des Wertes auslesen
$('select#obst :selected').text();

Text mehrerer gewählter Optionen ausgeben:

<pre>
$('select#obst :selected').each(function(i, option) {
// Verarbeitung der Optionen
alert(option.value + ' ' + option.text);
});
</pre>
Beispiel: Alle gewählten Werte bei Veränderung in ein div (id=message) schreiben:
<pre>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text();
});
$("div#message").text(str);
}).change();
</pre>

==== Checkboxen ====
Links:
http://technosophos.com/node/223 (Zugriff 07-2012)

Beispiele
<pre>
// Checked ? Returns a boolean, true if checked, false otherwise
jQuery('#my-checkbox').is(':checked');

// Check checkbox - this sets the attribute checked="checked"
jQuery('#my-checkbox').attr('checked','checked');

// Uncheck checkbox (right way)
jQuery('#my-checkbox').removeAttr('checked');
</pre>
<pre>
// Check / Uncheck everything

// Check anything that is not already checked:
jQuery(':checkbox:not(:checked)').attr('checked', 'checked');

// Remove the checkbox
jQuery(':checkbox:checked').removeAttr('checked');
</pre>

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

=== Position eines Elements auslesen ===

<pre>
// get Pos of act Item
var position = $("#myElement").offset();
//console.log(position);

//set positon to other elements...
$("#otherElement").css(position);
$("#anotherElement").css("top",(position.top+5));

</pre>

== Usability ==
=== Loading Icon bis Seite komplett geladen ist ===
Quelle: siehe Links

<pre>
<head>
<meta charset='UTF-8'>
<title>Simple Loader</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
</head>

<body>
<img src="download.png" id="loader">
<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>

</pre>

JQuery - Snippets

2013-01-04T13:07:36Z

79.240.84.17: /* Formulare */

Nützliche jQuery Schnipsel
== Grundgerüst zum testen ==
<pre>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

<body>

<style type="text/css">
</style>

<script type="text/javascript">
$(document).ready(function() {

});

function newFunc(myParam){
alert('hello world')
}
</script>

<h1>Testpage</h1>

</body>
</html>
</pre>
== Links ==
[[JavaScript - Snippets]]

http://css-tricks.com/snippets/jquery/

=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
=== GET-Variable in URL auslesen ===
Diese muß extrahiert werden.

Beispiel:

<pre>
<SCRIPT type="text/javascript">

</SCRIPT>
</pre>
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

=== Werte von Formularen auslesen ===
http://www.beier-christian.eu/blog/weblog/jquery-ausgewahlte-option-aus-select-box-auslesen/

==== Select Boxen ====
Hinweis, vieles ist natürlich auch mit anderen Elementen möglich.
<pre>
<label for="obst">Obst</label>
<select name="obst" id="obst">
<option value="1">Orange</option>
<option value="2">Apfel</option>
<option value="3">Banane</option>
</select>
</pre>

Wert auslesen
$('select#obst').val();

Text des Wertes auslesen
$('select#obst :selected').text();

Text mehrerer gewählter Optionen ausgeben:

<pre>
$('select#obst :selected').each(function(i, option) {
// Verarbeitung der Optionen
alert(option.value + ' ' + option.text);
});
</pre>
Beispiel: Alle gewählten Werte bei Veränderung in ein div (id=message) schreiben:
<pre>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text();
});
$("div#message").text(str);
}).change();
</pre>

==== Checkboxen ====
Links:
http://technosophos.com/node/223 (Zugriff 07-2012)

Beispiele
<pre>
// Checked ? Returns a boolean, true if checked, false otherwise
jQuery('#my-checkbox').is(':checked');

// Check checkbox - this sets the attribute checked="checked"
jQuery('#my-checkbox').attr('checked','checked');

// Uncheck checkbox (right way)
jQuery('#my-checkbox').removeAttr('checked');
</pre>
<pre>
// Check / Uncheck everything

// Check anything that is not already checked:
jQuery(':checkbox:not(:checked)').attr('checked', 'checked');

// Remove the checkbox
jQuery(':checkbox:checked').removeAttr('checked');
</pre>

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

=== Position eines Elements auslesen ===

<pre>
// get Pos of act Item
var position = $("#myElement").offset();
//console.log(position);

//set positon to other elements...
$("#otherElement").css(position);
$("#anotherElement").css("top",(position.top+5));

</pre>

== Usability ==
=== Loading Icon bis Seite komplett geladen ist ===
Quelle: siehe Links

<pre>
<head>
<meta charset='UTF-8'>
<title>Simple Loader</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
</head>

<body>
<img src="download.png" id="loader">
<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>

</pre>