JQuery - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 1: | Zeile 1: | ||
Nützliche jQuery Schnipsel | Nützliche jQuery Schnipsel | ||
| + | == 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> | ||
== XHTML 1.0 Template mit jQuery == | == XHTML 1.0 Template mit jQuery == | ||
Version vom 28. Oktober 2011, 10:49 Uhr
Nützliche jQuery Schnipsel
Resize des Browserfensters feststellen
<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>
XHTML 1.0 Template mit jQuery
<!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>
<!-- 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>©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>
JavaScript nachladen während die Seite schon angezeigt wird
// 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!')
}
