Category Archives: HTML/CSS

Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+

You know you shouldn’t use showModalDialog to open modal windows – it’s bad taste and prone to cause issues. Unfortunately many applications (especially Enterprise ones) rely on the method ability to halt code execution until the window closed (e.g. user answers a YES/NO question).

Tough luck, starting version 37 Google Chrome removed support for showModalDialog. Your code suddenly began to act in weird and unpredictable way. You definitely should rework it to use a different approach to dialogs. Fortunately Google gives you a bit more time. You can re-enable showModalDialog support, but only temporarily – until May of 2015. Continue reading →

Infragistics WebDataMenu delayed resizing in Chrome

I encountered weird issue using Infragistics ASP.NET WebDataMenu control. If total width of top-level items was bigger than menu’s width and scrolling kicked in – Google Chrome browser produces unexpected results.

Consider following basic markup for Infragistics WebDataMenu:

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px">
   <ClientEvents Initialize="myInit" />
   <GroupSettings Orientation="Horizontal" />
   <Items>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
   </Items>
</ig:WebDataMenu>

It’s a pretty basic markup that defines 10-item horizontal menu with a limited width, so scrolling is enabled. Code in the Initialize event handler would handle some calculation based on menu dimensions and other items on the page would be affected by these calculations. Continue reading →

Display “Lose It!” data on Pebble watchface

Original Lose It!Lose It! on Pebble

Lose It! is an excellent service that helps people lose weight by monitoring calories intake. It integrates with variety of devices so I was curious if I can display my user data on Pebble smartwatch (to make sure I can have another piece of cake or not).

Unfortunately LoseIt doesn’t have a public API. There had to be another way. Continue reading →

How to make “scrollIntoView” apply to IFRAME only

Let’s say you have a really long HTML page with scrollbars, for the sake of argument something like this:

<div>aaaa</div>
<div>aaaa</div>
<div>aaaa</div>
...more content...
<div id="xB">bbbb</div>
<div>aaaa</div>
<div>aaaa</div>
<div>aaaa</div>
...much more content...

And somewhere, perhaps on pageload, you want to make sure that highlighted element is visible to the user, so to scroll it into view you execute

document.getElementById("xB").scrollIntoView();

And it works fine and well – the needed element is automatically displayed on top of the page. But what if this page is in an IFRAME and the parent page has a large scrollable content of it’s own:
Continue reading →

Infragistics WebSplitter: Set SplitterBar’s CSS class in clinet-side JavaScript

Hello there. Haven’t written in a while, been busy participating in Stack Overflow community, but this little bit I found interesting.

Infragistics has a cool versatile Web Splitter control in their ASP.NET suite, but recently I encountered a shortcoming – there’s no way to set a CSS class for splitter bar on client-side via JavaScript. On server-side you can do something like

xMySplitter.SplitterBar.CssClass = "hiddenElement";

On client-side – you can get the CSS class via

var sCss = $find('xMySplitter').get_splitterBarCss()

but there’s no counterpart set_splitterBarCss() method. Continue reading →

WebHierarchicalDataGrid: get_scrollTop() returns incorrect value

Infragistics WebHierarchicalDataGrid has a neat client-side built-in function get_scrollTop() – it is used if at any point you need to retrieve current vertical scroll position of the grid (e.g. to use it in your own calculations to display something at a specific position on the grid – tooltip, help, additional info etc.)

Unfortunately the function has a bug: its value only set if user actually manually scrolls the grid: using mouse and scrollbar on the right, keyboard etc. If no scrolling user-interaction is involved and scroll position changes due to other means (e.g. displayed data size changes) – the function retains original value, throwing all your calculation out of whack. Continue reading →

WebDataMenu: Use your own hover

Infragistics WebDataMenu comes with variety of styles and lets you specify your own. At a very basic it allows you to specify styles for normal menu items and hovered menu items:

<ig:WebDataMenu ID="xwdmMyMenu" runat="server">
   <ItemSettings CssClass="MenuItem" HoverCssClass="MenuItemHover"/>
</ig:WebDataMenu>

This markup can correspond to CSS classes, for example:

.MenuItem {
   background-image:none;
   background-color:white;
}

.MenuItemHover{
   background-color:rgb(213,224,198);
}

This works fine in most cases, but since the hover/unhover is done via JavaScript sometimes there’re issues. Continue reading →

FusionCharts: Invalid Data when using javascript renderer (solved)

If you’re using FusionCharts you may encounter a strange issue – chart renders correctly when Flash renderer is in use and displays “Invalid Data” error message when falling back (or forced) to JavaScript renderer.

In most cases culprit is invalid XML data passed to the engine. And while Flash is more forgiving, JavaScript requires strict valid XML. Most often the cause for the issue are characters invalid in XML. Check your data and if they contain following characters – replace them with their encoded values:

" (quote) --> &quot;
' (apostrophe) --> &apos;
< (less sign) --> &lt;
> (greater sign) --> &gt;
& (ampersand)  --> &amp;

And the error will disappear.

Happy charting!

Implement “onVisible” event for HTML DOM element in JavaScript

Well, not exactly, but method described in this particular scenario can be expanded to other cases. Imagine you have a clickable element, let’s say a SPAN and when user clicks this element – it is covered by an absolutely positioned DIV with a higher z-index. In other words a dialog is displayed:

<span onclick="showDialogDiv()">Click here</span>

When user closes the dialog – your SPAN needs to detect this event, to perform some functions (refresh data on the page etc.) but you have no control over function that closes the DIV, so you can’t hook into it. All you know is that DIV’s display style is set to “none” when this happens. It would be cool if there was an “onvisible” event so you could do something like

<span onclick="showDialogDiv()" onvisible="performAction()">Click here</span>

but there’s no such event, so we need to simulate it. Which is surprisingly easy:

<span onclick="showDialogDiv(); var i=setInterval(function(){if ($('xdivDialog').style.display=="none") {clearInterval(i);performAction()}},1000)">Click here</span>

Basically when user clicks the SPAN to show the dialog – at the same time a timer is started that regularly checks visibility of the dialog DIV (whether it’s style display became “none” again). Once this is detected, that means opener SPAN is visible again – timer is stopped and function to handle event is called.

Infragistics WebDataMenu last item disappears

While using Infragistics WebDataMenu control from their NetAdvantage for ASP.NET Suite (version 2012.2, current as of this post) I noticed that last menu item in horizontal menu disappears. To me this only happened in Firefox.

Disappearing Act

This post suggested to set EnableScrolling menu property to False as a solution. Which is fine and well, but did not work for me since I need my menu to scroll (it has limited width available and menu items are added programmatically in code-behind so total items width can be wider than width available for the menu).

Continue reading →