The social networking site Twitter introduced a novel effect whereby the system reports actions to the visitor by displaying a message that drops down at the top of the page. We can easily replicate this behavior using the drop effect.
Add the following markup to the
<body>element of our template page:<div id="confirmation"> <p>Your request has been completed!</p> </div>
Now, at the bottom of the page add the following code:
$("#confirmation").effect("drop", { mode: "show", direction: "up" }, function() { var timer = function() { $("#confirmation").effect("drop", { mode: "hide", direction: "up"}); } setTimeout(timer, 3000); });Save the page as
drop.html. We only need a few styles for this example. Create the following very basic stylesheet:body { background-color:#3cf; } #confirmation { display:none; width:100%; height:60px; position:absolute; top:0; left:0; z-index:999; background-color...