Tag Archives: Chrome

Copy/Paste image into an editable DOM element in Chrome

All major browsers allow to paste image directly into a DOM element with contentEditable property set to true. They automatically convert it into IMG element with source pointing to base64 encoded DataURI of the pasted image. That is all browsers, but Chrome. Chrome needs a little help.

In my particular case I need to be able to paste image into an IFRAME with editable body of the content document (for some reason Infragistics WebHtmlEditor ASP.NET control renders itself as this contraption). But the code below applies (with small changes) to any editable DOM element.

To achieve the result we need to perform 3 tasks:

1. Capture image from the clipboard
2. Convert the image to DataURI format
3. Create IMG element with the DataURI source and insert it into the DOM

Take a look at the code below: Continue reading →

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 →