Wikizone - Benutzerbeiträge [de]

JQuery - Snippets

2014-08-12T09:39:41Z

87.165.13.189: /* Animation */

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/

http://www.jquery4u.com/

== Each ==
[[jQuery - Nested each / verschachtelte Liste]]

http://www.jquery4u.com/jquery-functions/jquery-each-examples/
<pre>
//DOM ELEMENTS
$("div").each(function(index, value) {
console.log('div' + index + ':' + $(this).attr('id'));
});
//outputs the ids of every div on the web page
//ie - div1:header, div2:body, div3:footer

//ARRAYS
var arr = [ "one", "two", "three", "four", "five" ];
jQuery.each(arr, function(index, value) {
console.log(this);
return (this != "three"); // will stop running after "three"
});
//outputs: one two three

//OBJECTS
var obj = { one:1, two:2, three:3, four:4, five:5 };
jQuery.each(obj, function(i, val) {
console.log(val);
});
//outputs: 1 2 3 4 5
</pre>
=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
Siehe auch [[JQuery - AJAX]]
=== 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>

Kleines Hide Show Script wenn eine Checkbox ausgewählt ist:
<pre>
$("input[name='calib_as_offered']").change(function() {
if ($("input[name='calib_as_offered']").is(":checked")){
$("#contact_address").show();
$("#offer_nr_wrap").show();
}
else {
$("#contact_address").hide();
$("#offer_nr_wrap").hide();
}
});

</pre>

==== Radio Buttons ====

'''Change Listener für Radio Buttons''' (Quelle: http://stackoverflow.com/questions/10167395/how-can-i-attach-a-listener-to-multiple-radio-buttons Zugriff: 2013-08)
<pre>
$('input:radio').on('change', function(){
//access value of changed radio group with $(this).val()
});
</pre>

Quelle der folgenden Beispiele: http://mabraham.de/jquery-radio-buttons-auslesen-und-manipulieren/ (Zugriff 2013-08)

'''Wert (value) einer Radio Group auslesen.'''
<pre>
$('#radio-button-value').click(function(){
alert($("input[name='radio-button-gruppe']:checked").val());
});
</pre>

'''Radio Button gewählt checked ?'''
<pre>
$('#element').click(function() {
if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
</pre>
<pre>
$('#radio-button-is-set').click(function(){
alert(typeof $("input[name='radio-button-gruppe']:checked").val() != 'undefined');
});
</pre>

'''Radio Button anhand seiner Id auswählen (check)'''
<pre>
$('#radio-checked-by-id').click(function(){
$("#gruppe1").attr("checked","checked");
});
</pre>

'''Radio Button über Wert auswählen (check) '''
<pre>
$('#radio-checked-by-value').click(function(){
$("input[name='radio-button-gruppe'][value='2']").attr("checked","checked");
});
</pre>

'''Radio Button abwählen'''
<pre>
$('#radio-uncheck').click(function(){
$("input[name='radio-button-gruppe']: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]]‎

Hinweis: damit fadeIn oder show funktionieren indem jQuery den Stil display: none und display: block hinzufügt. Eventuell muß das Element zuerst mit hide() o.ä. versteckt werden. Z.B.:
$(".myElement").hide().fadeIn(500);
vorsicht mit visibility: hidden im CSS. Dies führt dazu, daß man das Element trotz show() nicht sieht.

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

== Animation ==
$('#gbreslib-details-wrap').fadeTo('slow', 1,function() {scrollToAnchor("gbres_details_anchor");});

=== show / hide ===
.show(fast)
.hide(500)
...

== Elemente find / traversing / selecting ==
=== Elemente zählen ===
.length
=== n-tes Element ansprechen ===
<pre>
.eq(n) //js function -> better performance
$(".myClass:eq(1)") //jQuery selector -> bad performance but flexible
.eq(-1) //last element
// test if available

</pre>
=== Element vorhanden ? ===
Beispiel:
<pre>
function getPidFromPn(pn){
var myId = '';
if( $(".page:eq("+(pn)+")").length > 0){
myId = $(".page:eq("+pn+")").attr("id");
}
return myId;
}
</pre>

== Diverses ==
=== Attribute vorhanden? ===
<pre>
myAttr = $(this).attr('myAttr');
if (typeof myAttr !== typeof undefined && myAttr !== false && myAttr !== "false") {
// Attribut ist vorhanden und nicht "false" -> tu was
}
</pre>
=== Attribut auslesen / setzen ===
var meinWert = $(this).attr("myAttr");
$(this).attr("myAttr","meinWert");

JQuery - Snippets

2014-08-12T09:28:07Z

87.165.13.189: /* Animation */

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/

http://www.jquery4u.com/

== Each ==
[[jQuery - Nested each / verschachtelte Liste]]

http://www.jquery4u.com/jquery-functions/jquery-each-examples/
<pre>
//DOM ELEMENTS
$("div").each(function(index, value) {
console.log('div' + index + ':' + $(this).attr('id'));
});
//outputs the ids of every div on the web page
//ie - div1:header, div2:body, div3:footer

//ARRAYS
var arr = [ "one", "two", "three", "four", "five" ];
jQuery.each(arr, function(index, value) {
console.log(this);
return (this != "three"); // will stop running after "three"
});
//outputs: one two three

//OBJECTS
var obj = { one:1, two:2, three:3, four:4, five:5 };
jQuery.each(obj, function(i, val) {
console.log(val);
});
//outputs: 1 2 3 4 5
</pre>
=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
Siehe auch [[JQuery - AJAX]]
=== 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>

Kleines Hide Show Script wenn eine Checkbox ausgewählt ist:
<pre>
$("input[name='calib_as_offered']").change(function() {
if ($("input[name='calib_as_offered']").is(":checked")){
$("#contact_address").show();
$("#offer_nr_wrap").show();
}
else {
$("#contact_address").hide();
$("#offer_nr_wrap").hide();
}
});

</pre>

==== Radio Buttons ====

'''Change Listener für Radio Buttons''' (Quelle: http://stackoverflow.com/questions/10167395/how-can-i-attach-a-listener-to-multiple-radio-buttons Zugriff: 2013-08)
<pre>
$('input:radio').on('change', function(){
//access value of changed radio group with $(this).val()
});
</pre>

Quelle der folgenden Beispiele: http://mabraham.de/jquery-radio-buttons-auslesen-und-manipulieren/ (Zugriff 2013-08)

'''Wert (value) einer Radio Group auslesen.'''
<pre>
$('#radio-button-value').click(function(){
alert($("input[name='radio-button-gruppe']:checked").val());
});
</pre>

'''Radio Button gewählt checked ?'''
<pre>
$('#element').click(function() {
if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
</pre>
<pre>
$('#radio-button-is-set').click(function(){
alert(typeof $("input[name='radio-button-gruppe']:checked").val() != 'undefined');
});
</pre>

'''Radio Button anhand seiner Id auswählen (check)'''
<pre>
$('#radio-checked-by-id').click(function(){
$("#gruppe1").attr("checked","checked");
});
</pre>

'''Radio Button über Wert auswählen (check) '''
<pre>
$('#radio-checked-by-value').click(function(){
$("input[name='radio-button-gruppe'][value='2']").attr("checked","checked");
});
</pre>

'''Radio Button abwählen'''
<pre>
$('#radio-uncheck').click(function(){
$("input[name='radio-button-gruppe']: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]]‎

Hinweis: damit fadeIn oder show funktionieren indem jQuery den Stil display: none und display: block hinzufügt. Eventuell muß das Element zuerst mit hide() o.ä. versteckt werden. Z.B.:
$(".myElement").hide().fadeIn(500);
vorsicht mit visibility: hidden im CSS. Dies führt dazu, daß man das Element trotz show() nicht sieht.

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

== Animation ==
$('#gbreslib-details-wrap').fadeTo('slow', 1,function() {scrollToAnchor("gbres_details_anchor");});

=== show / hide ===
.show(fast)
.hide(500)
...

== Diverses ==
=== Attribute vorhanden? ===
<pre>
myAttr = $(this).attr('myAttr');
if (typeof myAttr !== typeof undefined && myAttr !== false && myAttr !== "false") {
// Attribut ist vorhanden und nicht "false" -> tu was
}
</pre>
=== Attribut auslesen / setzen ===
var meinWert = $(this).attr("myAttr");
$(this).attr("myAttr","meinWert");