Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

In Place Editing CMS Development HTML JavaScript Tutorial

Published :
Author :
Adam Khoury

Learn the logic behind building in-place content editing systems. We allow the user to edit content directly on the front-end where it displays. A good scenario to use this is granting a privileged user the right to edit some content in-place, save it to database when they finish editing, and restore the content container to its normal state.

<script> function makeEditable(div){ div.style.border = "1px solid #000"; div.style.padding = "20px"; div.contentEditable = true; } function makeReadOnly(div){ div.style.border = "none"; div.style.padding = "0px"; div.contentEditable = false; alert("Run Ajax POST request here to save the div.innerHTML \ or div.textContent to the database."); } </script> <h2>This is a web page</h2> <div onclick="makeEditable(this)" onblur="makeReadOnly(this)"> div containing content to be managed by the user... </div>