Show div only on first load

Question

I have a div that I want to be loaded just the first time the user is on the page. The div disappears after you click on it.

So if the user clicks on it and then visits another page the div should not be loaded, or if he returns to the main page, also the div should not be shown.

But for example if he closes the page and then reopens it the div will be shown again.

To make it simple: show it just once on page load.

I made a fiddle of the div:

http://jsfiddle.net/GdS8B/1/

html:

<div onclick="move(this.children[0])" class="example_path">
    <div class="example_block"></div>
</div>

css:

.example_path {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 200px;
    position:fixed;
    top:30%;
}

.example_path .example_block {
    position: absolute;
    background: url('http://lorempixel.com/400/200');
    width: 400px;
    height: 200px;
}

js:

function move(elem) {
var bottom = 0
function frame() {
bottom++
elem.style.bottom = bottom + 'px'
if (bottom == 1000)
clearInterval(id)
}
var id = setInterval(frame, 5)
}

Thanks!

Is it possible without cookies?

Answer 1

Just set a cookie on their machine that indicates they've seen the div, then check to see if that cookie is set before showing the div. If it's set, don't show it. If it's not set, show the div and set the cookie.

Update

You could use session variables, or you could keep track of IP addresses who see the page, store it in the database and check against it when someone accesses the page.