User:Book

3o$o2bo12bo$3o3b3o2b3o2bobo$o2bo2bobo2bobo2b2o$3o3b3o2b3o2bobo! #C [[ THUMBSIZE 2 THEME 6 GRID GRIDMAJOR 0 SUPPRESS THUMBLAUNCH ]] #C [[ THUMBSIZE 2 ]]

Lifespan 4700 (click above to open LifeViewer)

Under Construction

This is my sandbox.

Getting started

Download the LifeViewer plug-in

• Use this link: download
• The javascript code will be displayed in your browser
• Do a "Save" or "Save as..." and save lv-plugin.js where you want it
• In this tutorial, we assume the plug-in is in the same folder as your html file

Lesson 1: Hello World--web page with glider in viewer

• A simple web page with a glider in a LifeViewer
• Paste the code below in your text editor, save it and run it

<!DOCTYPE html>
<html>
<head>
<meta name="LifeViewer" content="viewer textarea"> <!--required tag-->
<script src="lv-plugin.js"></script> <!--assumes plug-in is in the same directory as html file-->
</head>
<body>
<!--viewer container-->
<div class="viewer"> <!--class=viewer is required-->
	<textarea>bo$2bo$3o!</textarea><br/> <!--textarea required in viewer container, with glider rle-->
	<canvas></canvas> <!--canvas required in viewer container-->
</div>
<!--end viewer container-->
</body>
</html>

Lesson 2: Add some style

• A simple web page with a glider in a LifeViewer
• Paste this in your text editor, save it and run it

<!DOCTYPE html>
<html>
<head>
<meta name="LifeViewer" content="viewer textarea"> <!--required tag-->
<script src="lv-plugin.js"></script> <!--assumes plug-in is in the same directory as html file-->
<style>
body{
	margin:50px;
}
.lv-rle{
	font:12pt arial;
	resize:none;
	width:594px;
	min-height:120px;
	max-height:120px;
}
</style>
</head>
<body>
<!--viewer container-->
<div class="viewer"> 
	<textarea class="lv-rle">bo$2bo$3o!</textarea><br/> <!--added classname for styling-->
	<canvas height=400 width=600></canvas> <!--added width and height attributes for viewer-->
</div>
<!--end viewer container-->
</body>
</html>