Skip to main content

Posts

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
Recent posts

Silverlight: Access template control programmatically

If you are working on a Silverlight application, it's very imperative that you will end up wanting to assess a control from a design template. Let's say I have a template where a CheckBox control is defined and if I want to access this control in my code behind, there is no direct way to do it. ... < ControlTemplate .. > < Grid >... < CheckBox x : Name ="chkAll" ... /> </ Grid > </ ControlTemplate /> ... The following method will recursively look for this control hiding anywhere in the control template against its name and return it when found. private object GetChildControl( DependencyObject parent, string name) { Object control = null ; int count = VisualTreeHelper.GetChildrenCount(parent); for ( int counter = 0; counter < count; counter++) { control = VisualTreeHelper.GetChild(parent, counter); //name supplied then Return Control if t

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. 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: