Find file
Fetching contributors…
Cannot retrieve contributors at this time
220 lines (177 sloc) 5.12 KB
<style>
/* set the padding here to match with the size of the top and right
sidebars */
body {
padding-top:120px;
padding-left:100px;
padding-right:320px;
}
div#header {
background-color:#aabbcc;
position:fixed;
padding-left:10px;
top:0;
left:0;
width:500%;
height:50px; /* so padding-left:70px */
}
div#sidebar{
background-color:#bbccee;
position:fixed;
padding-left:20px;
padding-right:10px;
top:50px;
right:0;
width:250px; /* so padding-right in body:270px */
height:100%;
}
* html body{
overflow:hidden;
}
* html div.content{
height:100%;
overflow:auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var editing,c;
function toggle_edit()
{
switch(editing){
case true:
c.get(0).contentEditable = true;
c.css({background:"#eeeeee"});
$("#header").html("<h2>You can now edit this document - but you can't save the results</h2>");
editing=false;
break;
case false:
c.get(0).contentEditable = false;
c.css({background:"white"});
editing=true;
$("#header").html("<h2>This document cannot be edited</h2>");
break;
}
}
$(document).ready(function(){
editing=false;
c = $("#content");
b = $("<button>toggle edit</button>").click(toggle_edit);
$("#sidebar").append(b);
toggle_edit();
});
</script>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content">
<h2>Mini editor (Part 1)</h2>
<p>This is the first in a seven part series on how to make a
WYSIWYG structure editor using javascript, jquery, erlang and couchDB.
</p>
<ul>
<li><a href="mini1.html">Part1 - toggling content editable</a></li>
<li><a href="mini2.html">Part2 - Adding some style</a></li>
<li><a href="mini3.html">Part3 - Adding editing buttons</a></li>
<li><a href="mini4.html">Part4 - A seamless structure editor</a></li>
<li><a href="mini5.html">Part5 - All the buttons</a></li>
<li><a href="mini6.html">Part6 - Storing the results forever</a></li>
<li><a href="mini7.html">Part7 - Integration with couchdb</a></li>
</ul>
<p>This page provides a minimal example of how to set up a dynamically
editable page using jQuery and contentEditable mode.</p>
<p>The principle of making this are simple, once understood you should
easily able to make custom structure editor.</p>
<h2>Step 1 - The HTML and CSS</h2>
<p>First we need to define three regions on the page like this:</p>
<pre>
&lt;body>
&lt;div id="header">&lt;/div>
&lt;div id="sidebar">&lt;/div>
&lt;div id="content">&lt;/div>
&lt;/body>
</pre>
<p>Next we add some styling. The styling makes the header and sidebar
fixed and the content scrollable:
</p>
<pre>
body {
padding-top:120px; /* set this to some value greater than the
height of the header */
padding-left:100px;
padding-right:320px; /* set the padding right to some value greater
than the width of the sidebar */
}
div#header {
background-color:#aabbcc;
position:fixed; /* <- important */
padding-left:10px;
top:0;
left:0;
width:500%;
height:50px;
}
div#sidebar{
background-color:#bbccee;
position:fixed; /* <- important */
padding-left:20px;
padding-right:10px;
top:50px; /* set to the same at the height in the header */
right:0;
width:250px;
height:100%;
}
* html body{
overflow:hidden;
}
* html div.content{
height:100%;
overflow:auto;
}
</pre>
<h2>Adding an edit button to the sidebar</h2>
<p>When the page is loaded we want to add an edit button to the
sidebar. This button will toggle editing. The code is very simple:
</p>
<p>This <b>jquery</b> code adds a button to the sidebar</p>
<p><i>Note1: The code examples here only show the important details
of what's going on. Do <b>view source</b> to see all the
details. For your convenience everything is in one file.</i></p>
<p><i>Note2: Life is too short for me to test this in all browsers.
This works for me with the lastest version of Firefox. If you use some
other brower and it doesn't work then I don't want to know.</i></p>
<pre>
$(document).ready(function(){
editing=false;
c = $("#content");
b = $("&lt;button>toggle edit&lt;/button>").click(toggle_edit);
$("#sidebar").append(b);
toggle_edit();
});
</pre>
<p>Then we define a the fucntion <b>toggle_edit:</b></p>
<pre>
function toggle_edit()
{
switch(editing){
case true:
c.get(0).contentEditable = false;
c.css({background:"#eeeeee"});
$("#header").html("You can now edit this document");
editing=false;
break;
case false:
c.get(0).contentEditable = true;
c.css({background:"white"});
editing=true;
$("#header").html("This document is locked"};
break;
}
}
</pre>
<p>I've skipped a few of the less important details - do veiw source to
see all the details, everything is on one file so
it easy to see what's happening:</p>
<p>In part 2 I'll add styling to the editor</p>
<div>
</body>