HTML and CSS Reference
In-Depth Information
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%,
rgba(57,130,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-
stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1)
44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1)
44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1)
44%,rgba(57,130,53,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(138,182,107,1)
44%,rgba(57,130,53,1) 100%); /* W3C */
}
</style>
<body>
<div id='ad'>
<div id='name'>Hello!<span id='usersName'></span></div>
<a id='cta'>Click Here</a>
<div id='background'></div>
</div>
</body>
</html>
<script>
function adInit () {
if(localStorage) {
if (localStorage.getItem('userName') === '' || localStorage.getItem('userName') === null) {
var uname = prompt('Enter Your Name');
localStorage.setItem('userName', uname);
document.getElementById('usersName').innerHTML = uname;
} else {
document.getElementById('usersName').innerHTML = '<br>' + localStorage.getItem('userName');
}
} else {
alert('Browser not supported!');
}
}
window.addEventListener('load', adInit, false);
</script>
Let's review the code and feel free to follow along in your favorite text editor. By adding an event listener for the
document to load and attaching a handler function called
adInit
, which kicks things off. That function detects first
if the browser supports
localStorage
. If it does, the function proceeds to detect if a value's been entered for the item
called
username
. If not, a prompt appears for the user to enter his or her name and render it into the ad unit. Now if
