Life, the Universe and the Internet

When I first started using AJAX I soon came across a problem that had me stumped for a while. The problem was that some of the AJAX tools like hover menus, popup windows, calendars etc were appearing behind other controls on the page so that they would either be only partially displayed or not even displayed at all.

Now a lot of you reading probably already know the simple fix for this, but just in case there are some out there like me who got stuck at this point I hope this little tip can help.

There is a little property in CSS called Z-Index and to use the official description the z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

What this means is that the higher the Z-Index number of an element on the page the higher it will appear in the stack, so if you think of your page as a three dimensional element, the item with the highest Z-Index will be on the top of the pile of elements.

By default if you don’t specify your Z-Index for any css element then they all have a default of 0 and they will be stacked in the default order. So if you have a relatively simple requirement where you only need to ensure one item is always on top, all you need is this in the elements CSS properties:

.myelement
{
Z-Index: 1;
}

As long as no other elements have the same or higher Z-Index your element should appear at the top of the stack. Conversely you can also set a negative Z-Index number if you want to ensure an element is pushed lower down the stack.

For the official page on Z-Index go here.

If you’re familiar with the ASP.Net repeater control then you will know that when laying out the repeater contents you can have individual style for alternating rows so far example every other row could have a different background. But what if you wanted more sophisticated options, say for example you wanted to do a news style repeater with the first item having a photo and an in depth story, then next five having a picture and summary and the remaining items having just a headline.

Well I found a great tip on how you can do this with a single repeater. The way to do it is to set up panels inside your repeaters item template, as the example below:

<asp:Repeater id="myRepeater" runat="server">

<ItemTemplate>

<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='<%# (Container.ItemIndex  = 0) %>' >
<div>

My First Item Controls

</div>
</asp:PlaceHolder>

<asp:PlaceHolder ID="PlaceHolder2" runat="server" Visible='<%# (Container.ItemIndex >=1) and (Container.ItemIndex <5) %>' >
<div class="underlined">

My Next Five Item Controls

</div>
</asp:PlaceHolder>

<asp:PlaceHolder ID="PlaceHolder3" runat="server" Visible='<%# (Container.ItemIndex >= 5) %>' >
<div

The Reminder Of My Items Controls

</div>
</asp:PlaceHolder>

</ItemTemplate>

</asp:Repeater>

So you set up a panel for each of the individual styles that you require and then the Visible property of the panel is derived from where we are currently in the list of items. Nice and easy, requires no complex code behind tricks and works like a charm.

Hope this will be of help to someone out there, it certainly was to me.