• Home
  • About
  • Resume

Posts tagged: html

SSRS and HTML rendering of ordered list

By , 11/14/2016 2:02 PM

Microsoft’s SQL Server Reporting Services supports rendering of HTML tags, but for some reason that support stuck in 1990s – only very limited set is supported. And even using that set is problematic.

Case in point – ordered list. While officially supported – the way it is rendered is the stuff nightmares are made off. Jumble of original tags generously intermixed with DIVs and SPANs – it’s a wonder it renders at all.

And sometimes it doesn’t. If you try to view a report in Internet Explorer (especially from older, but still actively used versions of SSRS like 2008) numbering get screwed.
Continue reading 'SSRS and HTML rendering of ordered list'»

Flicker-Free IFRAME refresh

By , 05/05/2016 3:05 PM

One of our projects consists of single parent page and “widgets” that display secondary (classic ASPX webform) pages. A recent feature request was to auto-refresh widget information at given intervals. On the surface it was pretty straghtforward:

<iframe id="xIfrWidget0"></iframe>
var ifr = document.getElementById('xIfrWidget');

setInterval(function () {
   ifr.src = 'widget.aspx';
}, 2000)

The problem with this approach – there’s an ugly flicker of white between page refresh and the goal was to keep displaying current IFRAME content up until refreshed content is ready. Yes, there’re various AJAX-ified methods (including ASP.NET UpdatePanel) – but they add unnecessary overhead and may cause other issues.

The solution was suggested by this Stack Overflow post. The idea is to have secondary, hidden IFRAME into which perform actual load. Once load complete – switch IFRAMES – currently visible with old content becomes hidden, and hidden one with new content becomes visible. It goes something like this: Continue reading 'Flicker-Free IFRAME refresh'»

Detect IFRAME click from parent page

By , 12/22/2015 3:04 PM

If you need to detect a click on a Web Page, that’s trivial: just catch Document or Body onclick event and any element on the page you click will bubble the event to your handler.

But if one of those elements is an IFRAME – that won’t work. IFRAMEs contain other pages and their events a contained within their content and don’t bubble up. Luckily there’s a way. Take a look this snippet of jQuery code:

$('IFRAME').on('load', function () {
   $(this).contents().on('click', function () {
      alert('Click Detected!');
   })
})

It attaches handler to IFRAME’s content’s onclick event, but only after IFRAME has already been loaded. Place this code in parent page that contains IFRAMEs and it will work universally across all browsers to detect when IFRAME was clicked.

NOTE: As usual in these scenarios, this works only if parent page and children pages comply with Same Origin Policy.

Infragistics WebDataMenu: Enable client-side resize with scrolling

By , 12/10/2012 11:32 AM

Infragistics WebDataMenu control for ASP.NET has a neat feature: if items for horizontal menu don’t fit in allocated width – it automatically adds scroll buttons:

Scrolling in WebDataMenu

Unfortunately this works only if you set menu width in ASPX markup or server-side code. But what if menu is built dynamically and you don’t know in advance how many items there will be. Or if user resizes browser window and available width changes?

We need to be able to set menu width in client-side JavaScript code. Also we need to check whether all items fit into menu width and if not – enable scroll buttons – on demand. The code below does just that. Continue reading 'Infragistics WebDataMenu: Enable client-side resize with scrolling'»

HTML Table RowSpan: Autofit spanned cells to content

By , 06/13/2012 2:58 PM

Let’s say you have created an HTML table with following markup:

<table id="xMyTable" style="width:100%;">
   <tr >
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:red; height: 100px;">
         </div>
      </td>
      <td style="vertical-align:top" rowspan="3">
         <div style="border: 2px solid black; background-color:orange; height: 600px">
         </div>
      </td>
   </tr>
   <tr>
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:green; height: 100px">
         </div>
      </td>
   </tr>
   <tr>
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:blue; height: 100px">
         </div>
      </td>
   </tr>
</table>

It’s very basic, one rowspanned cell that holds a content with large height on the right and 3 corresponding cells with content of smaller height on the left. You’d expect it to look like this:

Desired layout of rowspanned HTML table

Unfortunately as is it works only in Google Chrome. In the rest of the browsers, including Interned Explorer and famed FireFox it looks like this:

Current layout of rowspanned HTML table

What happens is browsers automatically spread spanned cells height to evenly fit height of the cell with rowspan. To rectify this situation we need a little help from JavaScript. Continue reading 'HTML Table RowSpan: Autofit spanned cells to content'»

Partially hide external content with CSS overflow

By , 03/21/2012 4:48 PM

If you ever hosted a content from external website in an IFRAME on your own site and wanted, for no reason whatsoever, to hide either top, bottom, left or right portion of that content – there’s an easy way.

Imaginge you have HTML markup like this:

<iframe frameborder="no" width="275" height="95" src="https://www.google.com/images/srpr/logo3w.png" />

It will display a pretty logo of some 3rd party company:

Now you got an idea to improve it a bit, by removing unneeded characters. Take a look at following markup:

<div style="width:275px;overflow:hidden">
   <div style="margin:0px 0px 0px -120px">
      <iframe frameborder="no" width="275" height="95"
      src="https://www.google.com/images/srpr/logo3w.png" />
   </div>
</div>

Our IFRAME is now enclosed into 2 DIVs. Internal one shifts left margin of its content 120px into the content, and external one effectively hides everything outside the margins via hidden overflow. The result:

Of course the content doesn’t have to be IFRAME with external content, but if it’s internal to your site that means you have full control over it and don’t need to use this hack.

Absolute coordinates of element inside of IFRAME

By , 02/26/2012 11:36 PM

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 'Absolute coordinates of element inside of IFRAME'»

Speed up UltraWebGrid with direct DOM access

By , 02/21/2012 1:04 AM

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 'Speed up UltraWebGrid with direct DOM access'»

WebHierarchicalDataGrid: Extra Row after Update

By , 10/12/2011 3:40 PM

If after upgrading to a new version of Infragistics NetAdvantage you suddenly found your WHDG sprouting an extra blank row on top:

Extra Row in Aikido WHDG

most likely it’s because grid’s ItemCssClass property is used. In theory (at least according to ever so verbose documentation) it should define what grid’s cells look like. In practice it have no effect whatsoever. Or rather had no effect until upgrade (verified in version 2011.1, perhaps even earlier). Now if your CSS class used in this property contains HEIGHT attribute – a blank row of that height will be inserted on top of the grid.

Solution? Remove ItemCssClass property. It’s useless anyway.

Infragistics WebDataMenu CSOM addItem/removeItem workaround

By , 02/24/2011 2:01 PM

Infragistics Aikido WebDataMenu control has extensive (albeit poorly documented) client-side library of classes, method and properties. 2 methods addItem and removeItem supposedly allow you to add/remove menu items in JavaScript. These methods have been public since 9.2 release probably even earlier, but have a lot of drawbacks, one of the major ones – for every method call an AJAX call to server is made, which slows performance dramatically, breaks code flow and won’t let you set properties of newly added item.

Method described below is a bit of a hack, but it works purely client-side, no slow round trips, no waiting for AJAX call to return and you have full control of all menu items. Continue reading 'Infragistics WebDataMenu CSOM addItem/removeItem workaround'»

Panorama Theme by Themocracy