programming chelahmy

Users want to select a rectangular area. There are many ways to do it but we are going to use JQuery-UI . We will create a transparent JQuery-UI dialog box which users can drag and resize like a viewfinder. Around the dialog box's empty and see-through content area we will attach a rectangular frame which will resize as the dialog box resizes. We will measure the frame while a user is viewfinding a rectangular area with it. Here is the trick to make a JQuery-UI dialog box transparent. There is a dialogClass property which we can use to assign customized CSS classes to a JQuery-UI dialog box. We just need to add a class that set the background color with a transparent alpha value. Not the entire dialog box will be transparent but the content area will. That is just perfect for a viewfinder. We create a rectangular frame as a viewfinder using a div with a solid border, which we also set to resize itself whenever the dialog box resizes. We capture the current size and position of