HTML and CSS Reference
In-Depth Information
<script>
var output = document.getElementsByTagName('p')[0];
function onAdServerComplete (value) {
// macro value
var welcome = "Hello " + value;
output.innerHTML = welcome;
output.removeAttribute('hidden');
}
//Example Callback with value from AdServer
onAdServerComplete("John");
</script>
</head>
<body>
<p hidden>MACRO</p>
</body>
</html>
Content Editable
This next feature is more of an attribute than an API, but it's still an important focus on user interaction, which is a
prime feature of the HTML5 specification and dynamic data. Believe it or not,
content editable
has been around since
version 5.5 of Microsoft's Internet Explorer, and now it's currently supported in all five major modern browsers. When
using the content editable feature, all you need to do is to set the
contenteditable
attribute to
true
on the element
you want to make editable. You can also combine this feature with the ability to make pushes to a server or client-side
storage and manage the changes for referencing later if the user comes back to the experience. Listing 11-7 shows the
contenteditable
attribute in action.
Listing 11-7.
Content Editable Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<body>
<header contenteditable=true>Enter Some Text Here</header>
</body>
</html>
Pretty, simple right? Now you can edit anything inside the
header
element. Really, you can add this attribute to
the
body
element and allow the whole page to be edited. Content editable in advertising has a lot of potential. Instead
of using an input field for all user entry, you can actually have the users edit the creative elements, allowing them to
creatively alter their own ad experience. For example, what if you had an ad campaign that asked the user for their
input, allowing them to customize, manipulate, and edit anything including the style of the ad itself? This may not be
the ideal situation at all times, but for specific campaigns, it could be a unique approach. Where other advertisers are
force-feeding their end users information, this could take the opposite approach and ask users for creative input. With
