Wikizone - Benutzerbeiträge [de]

JQuery - Snippets

2012-04-18T16:43:34Z

94.216.224.222: /* jQuery - overlay, modal box, lightbox, tooltips */

Nützliche jQuery Schnipsel
== Links ==
[[JavaScript - Snippets]]

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

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

== Formulare ==
=== 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();

== 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 - Snippets

2012-04-18T14:18:02Z

94.216.224.222: /* Eingaben Validieren */

== Links ==
[[jQuery - Snippets]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>

== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.