masqita/background-via-keyword.html

## background-via-keyword.html
<!doctype html>
<head>
  <title>Achtergrond instellen ahv eerste keyword</title>
  <style type="text/css">
  body {
    height: 100%;
    background: #e0e0e0 no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
  }

  form {
    width: 80%;
    margin: 50px auto;
  }

  textarea {
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  textarea:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }

  input[type="submit"] {
    display: none;
  }
  </style>
</head>
<body>

  <form action="#no-javascript-fallback-url">
    <textarea name="weer-waarde" cols="30" rows="10" placeholder="Geef hier het huidige weer in&hellip;"></textarea>
    <input type="submit" />
  </form>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">

  // Alles mooi in een wrapper steken en jQuery beschikbaar maken
  (function($) {

    "use strict";                   // Vermijd global namespace vervuiling

    // In dit object kan je de woorden definiëren en de url naar de image die voor
    // dat woord moet geladen worden, gemakkelijker om nieuwe zaken toe te voegen
    var config = {
      "sneeuw": "http://wallpapers.leovacity.be/images/Sneeuw_bomen_wallpaper.jpg",
      "zon": "http://4.bp.blogspot.com/-61a-UQDaLjY/TscS7yhLObI/AAAAAAAAAa0/iRrh7_vwZt4/s1600/sunshine-wallpaper-10-759118.jpg",
      "regen": "http://wallpaperstate.org/wp-content/gallery/wallpaper_rain_11/wallpaper_8358.jpg",
      "bliksem": "http://people.ee.duke.edu/~zc/pic/lightning.jpg",
      "wind": "http://exploringweather.com/windstorm.jpg"
    };

    // Laat ons alle afbeeldingen in de achtergrond preloaden (non-blocking)
    // Hoeft niet, maar zal sneller achtergrond veranderen
    for(var key in config) {
      var img = new Image();
      img.src = config[key];
    }

    $(document).ready(function() {
      var body = $('body');           // Evalueer eenmalig, toch altijd hetzelfde
      var textarea = $('textarea');   // Evalueer eenmalig, toch altijd hetzelfde
      var regex = Object.keys(config).join("|"); // Regex search op de keys van config
      var previousBackground;

      // Functie om de background te veranderen, enkel als het om een nieuwe background gaat
      var setBackground = function(value) {
        var currentBackground;

        // Background string genereren
        if(value) {
          currentBackground = 'url("'+config[value[0]]+'")';
        } else {
          currentBackground = "none";
        }

        // Enkel DOM manipuleren als ie niet overeenkomt met wat er al is
        if(currentBackground !== previousBackground) {
          body.css("background-image", currentBackground);
        }

        // En voor de volgende keer de huidige waarde instellen
        previousBackground = currentBackground;
      }

      // Event handling van keyup in textarea
      textarea.on("keyup", function() {
        var val = textarea.val();        // Value nemen, textarea is al jQuery extended

        // Laat ons van de veronderstelling uitgaan dat het belangrijkste woord vooraan staat
        // Voorbeelden:
        // Regen, daarna zon
        // Smeltende sneeuw, na de middag piept de zon door de wolken
        setBackground(val.match(regex));
      });

      textarea.focus();
    });

  }(jQuery));

  </script>
</body>
	<!doctype html>
	<head>
	<title>Achtergrond instellen ahv eerste keyword</title>
	<style type="text/css">
	body {
	height: 100%;
	background: #e0e0e0 no-repeat center center fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	}

	form {
	width: 80%;
	margin: 50px auto;
	}

	textarea {
	width: 100%;
	height: 40px;
	background-color: #fff;
	border: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	-o-transition: border linear 0.2s, box-shadow linear 0.2s;
	transition: border linear 0.2s, box-shadow linear 0.2s;
	font-size: 14px;
	line-height: 20px;
	color: #555555;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}

	textarea:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0;

	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}

	input[type="submit"] {
	display: none;
	}
	</style>
	</head>
	<body>

	<form action="#no-javascript-fallback-url">
	<textarea name="weer-waarde" cols="30" rows="10" placeholder="Geef hier het huidige weer in…"></textarea>
	<input type="submit" />
	</form>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">

	// Alles mooi in een wrapper steken en jQuery beschikbaar maken
	(function($) {

	"use strict"; // Vermijd global namespace vervuiling

	// In dit object kan je de woorden definiëren en de url naar de image die voor
	// dat woord moet geladen worden, gemakkelijker om nieuwe zaken toe te voegen
	var config = {
	"sneeuw": "http://wallpapers.leovacity.be/images/Sneeuw_bomen_wallpaper.jpg",
	"zon": "http://4.bp.blogspot.com/-61a-UQDaLjY/TscS7yhLObI/AAAAAAAAAa0/iRrh7_vwZt4/s1600/sunshine-wallpaper-10-759118.jpg",
	"regen": "http://wallpaperstate.org/wp-content/gallery/wallpaper_rain_11/wallpaper_8358.jpg",
	"bliksem": "http://people.ee.duke.edu/~zc/pic/lightning.jpg",
	"wind": "http://exploringweather.com/windstorm.jpg"
	};

	// Laat ons alle afbeeldingen in de achtergrond preloaden (non-blocking)
	// Hoeft niet, maar zal sneller achtergrond veranderen
	for(var key in config) {
	var img = new Image();
	img.src = config[key];
	}

	$(document).ready(function() {
	var body = $('body'); // Evalueer eenmalig, toch altijd hetzelfde
	var textarea = $('textarea'); // Evalueer eenmalig, toch altijd hetzelfde
	var regex = Object.keys(config).join("\|"); // Regex search op de keys van config
	var previousBackground;

	// Functie om de background te veranderen, enkel als het om een nieuwe background gaat
	var setBackground = function(value) {
	var currentBackground;

	// Background string genereren
	if(value) {
	currentBackground = 'url("'+config[value[0]]+'")';
	} else {
	currentBackground = "none";
	}

	// Enkel DOM manipuleren als ie niet overeenkomt met wat er al is
	if(currentBackground !== previousBackground) {
	body.css("background-image", currentBackground);
	}

	// En voor de volgende keer de huidige waarde instellen
	previousBackground = currentBackground;
	}

	// Event handling van keyup in textarea
	textarea.on("keyup", function() {
	var val = textarea.val(); // Value nemen, textarea is al jQuery extended

	// Laat ons van de veronderstelling uitgaan dat het belangrijkste woord vooraan staat
	// Voorbeelden:
	// Regen, daarna zon
	// Smeltende sneeuw, na de middag piept de zon door de wolken
	setBackground(val.match(regex));
	});

	textarea.focus();
	});

	}(jQuery));

	</script>
	</body>