Yearly Archives: 2009

Easy rounded corners in pure HTML/CSS

Rounded corners add nice touch to look and feel of a Web Page. User interface that employs rounded corners looks more streamlined, more ergonomic. Often to achieve that effect images are used, but this approach doesn’t allow quick style update and has other issues. Fortunately there is another way:

Compare 2 following DIVs:


First uses pretty basic CSS/HTML:

<style type="text/css">
.normal
{
    border: solid 1px blue;
    background-color:yellow;
    height:100px;
    width:200px
}
</style>

<div style="text-align:center">
    <div class="normal">
</div>

Let’s take a closer look at the second: Continue reading →

Running server-generated JavaScript from client Page Load event

Often there is a need to generate JavaScript instructions in server-side ASP.NET code and send them to the client for execution. But what if you need to run that server-generated JavaScript code within client Page Load event (here I am talking about ASP.NET AJAX pageLoad(sender, args) event, but it applies to generic body.onLoad event as well).
Continue reading →

Injecting client script into Infragistics async postback

Often there is a need to add client-side Javascript to the ASP.NET page from server-side code. To perform additional manipulation on rendered controls (hide or disable), to show user an alert message – just a couple of examples. Standard ASP.NET approach is to use page’s client script manager’s  RegisterStartupScript method:

Me.ClientScript.RegisterStartupScript (Type,  Key,  Script, AddScriptTags)

Where

type: The type of the startup script to register.
key: The key of the startup script to register.
script: The startup script literal to register.
addScriptTags: A Boolean value indicating whether to add script tags.

For example:

Me.ClientScript.RegisterStartupScript (Me.GetType(), "alert", "alert('Hello world!');", True)

But if you’re using Infragistics controls that offer async postbacks, like WARP panel or UltraWebTab – there is a problem with this approach.  Since the page doesn’t go through the full postback and doesn’t get destroyed and re-rendered from scratch – this method doesn’t work. Continue reading →

Infragistics WebDataMenu: Expanding context menu UP

Infragistics WebDataMenu is a light-weight highly responsive menu control with rich server and clinet side model. I was using it to display context menu on right mouse click.  The code is pretty simple:

function onMouseClick(oEvent) {
   if (oEvent.button == 2) { //right mouse button clicked
      var menu = $find("xwdmMyMenu");
      menu.showAt(null,null, oEvent);
   }
}

It checks whether the right mouse button was clicked (line 2) then locates the menu object and shows it using showAt method (which accepts 3 parameters, either X and Y client coordinates, or event object from which it derives coordinates of the mouse click).

 It’s all well and good, but the problem is – menu always shows down from the location of the mouse click. And if the click is at the bottom of the screen – menu gets cut off:

I needed to make menu expand UP and  couldn’t find a build-in property or method that would change this behaviour (GroupSettings.ExpandDirection property had no effect). Time for a little hack. Continue reading →

Take a friv break

Tired of all that coding? Take a well deserved break with this fine site, filled with 250+ Flash games combined into unusual one-screen interface:
Friv
So go ahead, visit http://www.friv.co.uk, but heed this warning: many of the games require non-trivial thinking (not to mention they’re highgly addictive).

Infragistics Drag and Drop: detecting element during drag

I was using Infragistics drag-and-drop framework and set an HTML table element as my drop target. Now I needed to know during drag operation over which HTML table cell I am moving. I needed that in order to dynamically change appearance of draggable markup depending on which cell I am currently over.



(Think a strategy game – you’re placing construction on the terrain – if there is enough unoccupied room – the draggable item becomes green, otherwise it remains red).

The solution is to use elemAtPoint property during DragMoveHandler event. Continue reading →

WebDialogWindow – removing IFRAME border in IE

Infragistics WebDialogWindow control is a flexible and lightweight AJAX dialog control designed to look and feel like standard Windows dialogs. One of its neat features – it allows to load the content from an external URL. In that case it renders the content inside of an IFRAME, which is all good and well, but leaves an ugly default iframe border.

Browsers like FireFox can remediate this by simple setting the “frameborder” attribute of the content pane IFRAME element:

function showDialog() {      
    var oDialog = $find('xwdwMyDialog')
    var oDialogContent = oDialog.get_contentPane();
    var oDialogIFrame = oDialogContent.get_iframe();

    // Removing IFRAME border in FireFox
    oDialogIFrame.setAttribute('frameborder', '0');

    oDialog.show();
}

but unfortunatelly this doesn’t work in IE. Continue reading →