Monthly Archives: February 2012

Absolute coordinates of element inside of IFRAME

Often there’s a need to determine absolute coordinates of an HTML element within a page, for example you need to display a popup menu on a button click at the button coordinates. Code for this is well known, here is one of the variations:

// Define class that will hold Object coordinates
function CTopLeft(i_nTop, i_nLeft) {
   this.nTop = i_nTop;
   this.nLeft = i_nLeft;
}

// Get Top, Left coordinates of a DOM element
function GetTopLeft(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;
 
   do {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;
   } while (oElem)
   
   return cTL;
}

This code is pretty straightforward: we’re looping thru all element’s ancestors, adding up each parent’s offsetTop and offsetLeft to get actual element coordinates.

This works well when your page is at the top level. But what if the page is inside of an IFRAME? Then the code above would give you coordinates of an element within the IFRAME window only. But what if you still need absolute coordinates of the element within browser window? Taking the example above – you need to display popup menu on the button clicked inside of IFRAME, but the menu can grow big and go outside of IFRAME boundaries. So the menu element need to be hosted outside of the IFRAME and coordinates need to be absolute withing browser window.

Let’s throw IFRAMEs into the mix: Continue reading →

Speed up UltraWebGrid with direct DOM access

Infragistics UltraWebGrid offers rich client-side programming model, but often it can be extremally slow. As an example consider a simple task: Given a particular Row ID hide the rest of the grid rows, keeping only this row visible.

Using UltraWebGrid’s CSOM (Client Side Object Model) JavaScript code looks like this:

var oGrid = igtbl_getGridById('xMyGrid');    // Get reference to grid object

for (var sRowID in oGrid.Rows) {   // Looping thru all rows in grid's rows collection

   if (sRowID != sSelectedRowID) {   // If current row ID is not given ID
      igtbl_getRowById(sRowID).setHidden(true) // Get reference to row and hide it
   }

}

The code works – it really does. But to loop thru 50 rows in this manner can take 10-15 seconds, not something your user will be happy about when instant action is expected. Continue reading →

ICS: Android 4 on Droid 3

Ice Cream Sandwitch on Droid 3

From the creator of ICS: Android 4 on Kindle Fire comes another great: Cyanogen Mod 9 for Droid 3. Don’t know why the call it Alpha, I installed it on my phone and it looks, feels and works great.

To flash it, your phone has to be rooted with ROM Manager installed or at least ClockworkMod Recovery flashed. Download latest version of the ROM here (Bookmark that URL and come back for fresh builds). Scroll down to Droid 3 section, download the ROM and Google Apps onto your phone’s SD card. Don’t download XT860 patch if your model is not XT860 otherwise you will lose 3G service.

Reboot your phone into Recovery, backup your current ROM, wipe System, Data and Cache, locate 2 downloaded ZIPs and flash ROM and immediately after, without reboot – GApps. Reboot your phone, sign in to your Google account and enjoy.

Thanks, Hashcode, for developing really cool things; Verizon… well it’s 2012, wake up?

Style Rounded Corner images of UltraWebTab thru external stylesheet

Infragistics UltraWebTab control offers multiple styling options, many of them can be set via external CSS classes. As a matter of fact about only element you cannot style via external stylesheet is rounded corner images. Or can you?

By default images used to give the tabs rounded-corner look are referenced directly in UltraWebTab ASPX markup:

<RoundedImage
   SelectedImage="./images/ig_tab_selected.jpg"
   NormalImage="./images/ig_tab_normal.gif"
   HoverImage="./images/ig_tab_hover.jpg"
   FillStyle="LeftMergedWithCenter">
</RoundedImage>

So, for example if SelectedImage looks like this:

Default Selected Image of UltraWebTab

It will give your tab appearance like this

Selected Image of UltraWebTab in action

Let’s examine it closer. Continue reading →

Style IFRAME scrollbars in IE

Internet Explorer offer CSS elements to style scrollbars, for example class

.FlatScrollbars
{
   scrollbar-face-color: #f0f0f0;
   scrollbar-shadow-color: silver;
   scrollbar-highlight-color: silver;
   scrollbar-3dlight-color: #f0f0f0;
   scrollbar-darkshadow-color: #f0f0f0; 
   scrollbar-track-color: #f0f0f0;
   scrollbar-arrow-color: #000000;
}

applied to a DOM element will render nice flat scrollbars:

Flat Scrollbars in Internet Explorer

Yes, it’s not standard CSS, but other browsers offer similar extensions (WebKit, I am looking at you). So, it works nice and well, but what if you want to style scrollbars of an IFRAME? Continue reading →

Correctly apply external styles to UltraWebGrid

Classic Infragistics UltraWebGrid allows you to programmaticaly specify CSS styles for its various elements. For example code like this:

xmyGrid.DisplayLayout.HeaderStyleDefault.CssClass = "HeaderStyle"
xmyGrid.DisplayLayout.RowStyleDefault.CssClass = "RowStyle"

Would set style of grid header and rows via external CSS class. You would expect that simple defining classes like this:

.HeaderStyle {  /* style definition goes here */ }
.RowStyle {  /* style definition goes here */ }

should do the trick, but you may experience some unwanted, erratic behavior: styles getting lost, styles getting mixed up (row would get a header style and vise versa).

To fix this we should let grid know that header style should apply only to header row (THEAD/TH HTML elements) and row style applies only to rows with data (TBODY/TD elements). This is done via slight adjustments of the above CSS to point it to specific elements:

THEAD.HeaderStyle TR TH{  /* style definition goes here */ }
TBODY.RowStyle TR TD {  /* style definition goes here */ }

This way there’s no confusion, styles apply exactly were they belong. Also you may need to set grids MergeStyles property to False and make each class fully define it’s element (including fonts, colors, backgrounds etc.)

D-Link DIR-655: How to make 1.35 firmware upgrade stick

If you’re trying to upgrade your D-Link DIR-655 Extreme-N Gigabit Wireless Router to the latest firmware (1.35NA US version as of this post), you may encounter a weird problem: firmware uploads without errors, router says it is being reprogrammed, but after reboot old version is displayed.

To solve it – try following these steps

  1. Save your current settings (Tools -> System -> Save Configuration) – you should do it prior any update anyway
  2. This what does the trick: On the same screen click “Restore Factory Default” – this will restore router default settings (one more reason why it’s important to do the update over wired connection)
  3. Flash your firmware
  4. Restore setting saved in Step 1 and reboot the router
  5. Profit! You’re now on the latest firmware