a Programmer's journal

I have used jQuery animate() method to create a simple slideshow. I am toggling the opacity of the image from 0 to 1 and also changing the URL of the image. Script: function AnimateImg() { var imgUrls = new Array("picture1.png", "picture2.png", " picture3.png "); var opacVal = 0; var currentImage = imgUrls[0]; var index = 0; var DELAY = 1000; setInterval(function() { $("#animate-img").animate({ opacity: opacVal }, DELAY, function() { if (opacVal == 0) { opacVal = 1; } else { opacVal = 0; } if (index == imgUrls.length) { index = 0; } if (opacVal == 0) { currentImage = imgUrls[index++]; $("#animate-img").attr("src", currentImage); } }); }, DELAY ); } HTML:

The jQuery UI modal dialogs are great add-ons but they don’t necessary fit well when you just have to show a wait message. There are issues with removing the title bar and styling the dialog. BlockUI is another alternative but I find it little hard to style using css. This is how I came up with a wait dialog. I am using two divs here. First div will cover the page content in such a way that the content is still visible but user cannot perform any action. For this, I need a div with near transparent background (opacity of 0.8).        #loading-div-background       {         display : none ;         position : fixed ;         top : 0 ;         left : 0 ;         background : black ;         width : 100% ;         height : 100% ;      } The second div will contain an animated image and it can be positioned centrally in the page.        #loading-div     {           width : 300px ;          height : 200px ;          background-color