Make An Admin Preview Pane

If you’re creating an Admin interface for a client which enables them to update content on their website, it is all too easy to produce a mind-numbing form for them and leave it at that.

Sometimes though, a client might like to have an idea of how their content will look ‘live’ before they update it.

A nice way to do this is with a simple bit of javascript and css to create a ‘preview pane’ for the client. Let’s take a look at out pretend admin page:

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show And Hide :: Javascript</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>Admin Preview</h1>
<div id="input">
<form method="post" action="#">
<ul>
<li><label for="title">Title</label><br /><input type="text" id="title"  /></li>
<li><label for="subtitle">Subtitle</label><br /><input type="text" id="subtitle"  /></li>
<li><label for="description">Description</label><br /><textarea cols="30" rows="10" id="description"></textarea></li>
<li><input type="button" id="preview" value="Preview" /></li>
<li><input type="submit" value="Submit This Product" /></li>
</ul>
</form>
</div>
<div id="output">
<h2 id="title2">Your Title</h2>
<h3 id="subtitle2">Your Subtitle</h3>
<img src="images/flower1.jpg" alt="A picture of some flowers" />
<p id="description2">This is where your description will appear in relation to the image. Go ahead and change it !</p>
</div>
</div>
</body>
</html>

In this example we have two divs, one with an id of ‘input’ and one with an id of ‘output’. The ‘input’ div contains our form for updating content by the user/client and the ‘output’ div is for displaying the preview. All very straightforward.

CSS

/******GENERAL STYLES ********/
* {
    margin:0;
    padding:0;
}
body {
    text-align:center;
    font-family:geneva,helvetica,verdana,sans serif;
    font-size:62.5%;
}
#wrapper {
    width:950px;
    margin:0 auto;
    text-align:left;
}
h1 {
    background:#c2ddf9;
    color:#fff;
    text-align:center;
}
ul {
    list-style:none;
}
#input,#output {
    margin-top:20px;
    width:45%;
    float:left;
}
/*********OUTPUT STYLES *********/
#output {
    border: 1px dashed #fff;
    background:#050601;
    color:#bbb;
    position:relative;
}
#output h3 {
    position:absolute;
    font-size:1.4em;
    font-family:Georgia;
}
#output h2 {
    font-size:1.4em;
    padding-top:5px;
    padding-left:5px;
    font-family:Georgia;
}
#output h3 {
    right:5px;
    top:5px;
}
#output p {
    font-size:1.2em;
    margin-top:10px;
    padding: 0px 5px;
    color:#ddd;
}
#output img {
    float:right;
    margin:10px 0 10px 10px;
    padding-right:5px;
}

Nothing spectacular about the CSS either. For this example, I’ve just split the page into two with the ‘input’ div on the left and the ‘output’ div on the right. The important thing to remember is that the CSS applied to the ‘output’ div should mimic the ‘live’ version of the site.
Now for the Javascript.

Javascript

<script type="text/javascript">
function copytext (input,output) {
    document.getElementById(output).innerHTML = document.getElementById(input).value;
}
window.onload = function () {
    document.getElementById('preview').onclick = function () {
        copytext('title','title2');
        copytext('subtitle','subtitle2');
        copytext('description','description2'); 
    };
}
</script>

Again, this is very simple stuff. The function copytext(input,output) does exactly that; it copies whatever is in ‘input’ and places it inside ‘output’. The ‘onclick’ event attached to the ‘preview’ button calls this function but you could easily change that to an ‘onblur’ event on each of the input fields or even an ‘onkeyup’ event so that the ‘output’ div content is generated as the user types.

You can see a quick working example here.

Admittedly, this isn’t the most elaborate demonstration in the world but hopefully it will give you some ideas on how to liven up your clients’ admin pages in the future.

Category: Javascript // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan