Static News Archive



   (13-Dec-09 21:58)  Simple error slider using DojoToolkit

<script>
dojo.require("dojo.fx.easing");
function ShowError(sErrorMessage) {
var oErrorContainer = dojo.create("div", { className: "floatingErrorContainer" }, dojo.body()); // Create our container
var oErrorDiv = dojo.create("div", { className: "floatingErrorLabel", innerHTML: sErrorMessage }, oErrorContainer); // Create our message label
dojo.style(oErrorContainer, "opacity", "0"); // Hide our container
var iHeight = dojo.coords(oErrorContainer).h; // Get the height of our container
dojo.style(oErrorContainer, "top", "-" iHeight "px"); // Shift our container up by its height

dojo.query(oErrorContainer).onclick(function(evt) { // when we click on it,
// ('this' is now the element clicked on)
dojo.fadeOut({ node: this, // Fade our element,
duration: 500, // over 500 ms,
onEnd: function() { // when we are done fading,
dojo.query(oErrorContainer).orphan(); // Remove the error container
}
}).play(); // commence the fade out (when the user clicks)
});


dojo.animateProperty({ node: oErrorContainer, // Animate our error container in
duration: 1000, // over 1 second,
properties: { // adjust the position, and opacity
top: { start: -iHeight, end: 0, unit: "px" },
opacity: { start: 0, end: 100, unit: "" }
},
easing: dojo.fx.easing.expoOut // Set a fancy animation
}).play();
}
</script>


<style>

.floatingErrorContainer
{
z-index: 1000;
position: absolute;
width: 100%;
top: 0px;
left: 0px;
border-bottom: 1px solid #555555;
background-color: #FFF9C1;
}

.floatingErrorLabel
{
color: #ff0000;
padding: 5px;
}
</style>
Post a comment     

<-  (9-Sep-09 18:38)  Connection limit in ... (17-Dec-09 3:33)  Netgear WG311 on Win...  ->













(sitemap)