Daniel Koskinen danielck

## click-to-load.js
  asideContainer.on( 'click', '#load-asides', function(e) {
		e.preventDefault();

		loadAsides();
	} );

## conditional-loading.js
  // Load asides
	var asideLoader = $('#load-asides');
	var asideContainer = $('#sidebar');

	var loadAsides = function () {
		var href = asideLoader.attr('href');

		asideContainer.load( href + ' #sidebar-content');
	}

## condional-sidebar.php
<div id="sidebar">

<?php
// Check for the 'part' variable
$part = get_query_var('part');

// If this is a sidebar, show the dynamic content
if ( $part == 'sidebar' ) :
?>

## flexible-fluid-jquery-2.js
$(document).ready(function(){

    // check the window size when page loads
    checkWidth();

    // check on resize
    $(window).resize(function() {
        checkWidth();
    });


## flexible-fluid-jquery.js
function checkWidth () {
    if ($(window).width() > 1400) {
        $('body').attr('class','superwide');
        $('#title').text('Wide ('+$(window).width()+')');
        }
    else if ($(window).width() > 1100) {
        $('body').attr('class','wide');
        $('#title').text('Wide ('+$(window).width()+')');
        }
    else if ($(window).width() > 800) {

## flexible-fluid-css.css
#wrapper { margin: 0 auto; }
#header {overflow: hidden;}
#container,#content,#primary,#secondary,#tertiary
  {float:left;}
#footer {clear:left;width:100%;}

/* Wide ( over 1100px ) */
.wide #container {width:60%;}
.wide #content {width:66%;}
.wide #primary {width:34%;}

## flexible-fluid-html.html
<body class="normal>
<div id="wrapper">
    <div id="header"> ... </div>
    <div id="main">
        <div id="container">
            <div id="content"> ... </div>
            <div id="primary"> ... </div>
        </div>
        <div id="secondary"> ... </div>
        <div id="tertiary"> ... </div>

## css3-tyylit.css
* { margin: 0; padding: 0; font-size: 100%; }
body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	line-height: 1.4;
	padding: 1.5em;
}

/* Vanhemmat selaimet eivät ymmärrä uusia HTML5-elementtejä,
   joten ne pitää muistaa erikseen määritellä block- tai inline-tyyppisiksi.
*/

## fluid.css
/* Asetetaan kaikkien elementtien marginaalit perustilaan,
   nopea tapa varmistaa että millään elementillä ei ole valmiiksi marginaalia.

*/
* { margin: 0; padding: 0}

/* Perustyylit taustalle ja koko asiakirjalle, näitä kannattaa olla lisää!
   mm. listat, lomakkeet, em, strong, yms yms...
 */

## html-pohja.html
<!doctype html>

<html lang="fi">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Tekijän Nimi">
    <meta name="description" content="Sivun kuvaus: Tämä on ensimmäinen HTML-harjoitus.">
    <title>Kaksisarakkeinen sivu</title>
    <link href="fluid.css" rel="stylesheet"> <!-- Viittaus tyylitiedostoon -->
  </head>
	asideContainer.on( 'click', '#load-asides', function(e) {
	e.preventDefault();

	loadAsides();
	} );
	// Load asides
	var asideLoader = $('#load-asides');
	var asideContainer = $('#sidebar');

	var loadAsides = function () {
	var href = asideLoader.attr('href');

	asideContainer.load( href + ' #sidebar-content');
	}
	$(document).ready(function(){

	// check the window size when page loads
	checkWidth();

	// check on resize
	$(window).resize(function() {
	checkWidth();
	});
	function checkWidth () {
	if ($(window).width() > 1400) {
	$('body').attr('class','superwide');
	$('#title').text('Wide ('+$(window).width()+')');
	}
	else if ($(window).width() > 1100) {
	$('body').attr('class','wide');
	$('#title').text('Wide ('+$(window).width()+')');
	}
	else if ($(window).width() > 800) {
	#wrapper { margin: 0 auto; }
	#header {overflow: hidden;}
	#container,#content,#primary,#secondary,#tertiary
	{float:left;}
	#footer {clear:left;width:100%;}

	/* Wide ( over 1100px ) */
	.wide #container {width:60%;}
	.wide #content {width:66%;}
	.wide #primary {width:34%;}
	<body class="normal>
	<div id="wrapper">
	<div id="header"> ... </div>
	<div id="main">
	<div id="container">
	<div id="content"> ... </div>
	<div id="primary"> ... </div>
	</div>
	<div id="secondary"> ... </div>
	<div id="tertiary"> ... </div>
	* { margin: 0; padding: 0; font-size: 100%; }
	body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	line-height: 1.4;
	padding: 1.5em;
	}

	/* Vanhemmat selaimet eivät ymmärrä uusia HTML5-elementtejä,
	joten ne pitää muistaa erikseen määritellä block- tai inline-tyyppisiksi.
	*/
	/* Asetetaan kaikkien elementtien marginaalit perustilaan,
	nopea tapa varmistaa että millään elementillä ei ole valmiiksi marginaalia.

	*/
	* { margin: 0; padding: 0}

	/* Perustyylit taustalle ja koko asiakirjalle, näitä kannattaa olla lisää!
	mm. listat, lomakkeet, em, strong, yms yms...
	*/
	<!doctype html>

	<html lang="fi">
	<head>
	<meta charset="utf-8">
	<meta name="author" content="Tekijän Nimi">
	<meta name="description" content="Sivun kuvaus: Tämä on ensimmäinen HTML-harjoitus.">
	<title>Kaksisarakkeinen sivu</title>
	<link href="fluid.css" rel="stylesheet"> <!-- Viittaus tyylitiedostoon -->
	</head>