Bearbeiten von „JQuery - Snippets“

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">
<!--
HTTP_GET_VARS=new Array();
strGET=document.location.search.substr(1,document.location.search.length);
if(strGET!='')
    {
    gArr=strGET.split('&');
    for(i=0;i<gArr.length;++i)
        {
        v='';vArr=gArr[i].split('=');
        if(vArr.length>1){v=vArr[1];}
        HTTP_GET_VARS[unescape(vArr[0])]=unescape(v);
        }
    }
 
function GET(v)
{
if(!HTTP_GET_VARS[v]){return 'undefined';}
return HTTP_GET_VARS[v];
}
 
document.writeln ('Erste Var:' + GET('text') + ' du');
document.writeln ('Zweite Var:' + GET('text2') + ' da draussen');
// -->
</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>

==== Radio Buttons ====

== 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 &raquo; Site title here</title>

	<!-- Meta Tags -->
	<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="#" />
	
	<!-- Fav icon -->
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

	<!-- JavaScript setup -->
	<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>
	
	<!-- CSS -->
	<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" />
	
	<!--[if IE]>
	<link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />
	<![endif]-->
	
</head>
<body>
	<div id="container">
	
		<div id="header">
			<h1>Title of page goes here</h1>
			<h2>Subtitle of page goes here</h2>
		</div><!-- end header 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><!-- end nav 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><!-- end main div -->

		<div id="footer">
			<p>&copy;2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
		</div><!-- end footer div -->
		
	</div><!-- end container 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>
	
<!-- place Google Analytics code here -->

</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[*/
<!--
//var j = jQuery.noConflict();
$(document).ready(function() {
    hideAllItems();	

    $("h5").hover( 
      function () {
         showItem($(this));
      }, 
      function () {
        hideItem($(this));
      }

    );
 
});

function hideAllItems(){
    $(".bodytext").hide();	
}

function showItem(myItem){
      myItem.next().fadeIn(250);
      myItem.parent().addClass("topLine");
    //myItem.parents().append($("<span> ***</span>"));
    //myItem.parents().("p").fadeIn(250);
    //myItem.parents().append($("<span> ***</span>"));
}

function hideItem(myItem){
    myItem.next().fadeOut(250);
    myItem.parent().removeClass("topLine");
    //hideAllItems();
    //myItem.find("span:last").remove();

}
// -->
	/*]]>*/
</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>