Skip to main content


Showing posts from December, 2011

A simple jQuery slideshow

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.


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:


A jQuery modal wait dialog

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: #0c0b0b; text-align:center; position:absolute; left: 50%; top: 50%; margin-left:-150px; margin-top: -100px;      }
<scripttype="text/javascript">         $(document).ready(functio…