Create "Flashing" Page Title

If you wish to create a flashing page title (like the one used on Facebook Chat when you receive a new message) you can do so, by using some simple javascript.

To do this, you need to create a function which displays the alternative title, and a function which displays the original title. This gives the illusion that the alternative title is actually flashing on the page.

Each of these functions will first change the title of the page, and then set a timer to call the other function in x seconds.

var Original_Title
function FlashTitle()
{
Original_Title = document.title;
SetAlternateTitle();
}
function SetAlternateTitle()
{
document.title = "alternate title text!";
setTimeout("SetOriginalTitle();", 1000);
}
function SetOriginalTitle()
{
document.title = Original_Title;
setTimeout("SetAlternateTitle()", 1000);
}

Actioning FlashTitle()will cause your page title to change from its standard text to "alternate title text!" and then flash back, alternating every second.

Multiple controls with the same ID '_header' were found. FindControl requires that controls have unique IDs.

I was having this issue last year when I upgraded a website from ASP.NET 2.0 to 3.5, and it took me ages to figure out what was going wrong.

Since then I've had developers thanking me for the solution so I thought I'd blog about it in case others are having a similar problem :)

Basically it seems with 3.5 each AJAX Control Toolkit Accordion Pane needs its own ID and to be ran at server. Then, when rendered the header appears as 'accordionpaneid_header' and the content appears as 'accordionpaneid_content'.

As none of my accordion panes had an id, they were all rendering as '_header', which obviously can't be allowed. I would imagine that if the header wasnt causing an error, the next error would be on '_content'.

So if you simply put an ID and 'runat="server"' on each of your existing accordion panes, you should no longer get this error.

CollapsiblePanel: Multiple controls for closing panel

When using the CollapsiblePanel from the AJAX Control Toolkit, you are limited to only one control to collapse/close each panel. This can be restrictive if you wish to use the control which opens the panel (as a 'toggle' control) and have another control (which perhaps sits inside the panel) for closing.

A way round this is to assign a 'BehaviourID' to your Collapsible Panel, and use the following javascript code to action the closing of the panel:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
BehaviorId="myBehaviorID"
TargetControlID="InfoPanel"
CollapsedSize="0"
Collapsed="True"
ExpandControlID="OpenCloseControl"
CollapseControlID="OpenCloseControl"
ImageControlID="HideShowImage"
ExpandDirection="Vertical" />

Javascript:

function CloseCpe()
{
$find("myBehaviorID")._doClose();
}


Then on any other control on your page, you add 'CloseCpe'

Javascript Classes

The problem with having a lot of javascript functions on your website is that you can begin to forget what each function refers to, and which function names you have already used previously.

For example, if I was creating some javascript for my website's main navigation bar, I might have a function which opens/closes a sub navigation list called 'toggleSubNav'. If the website has a product categories section, I might also need a different javascript function, and there is a chance I could also call this 'toggleSubNav'.

Using javascript classes allows you to better organise your functions. So if the basic outline for my main navigation function was:

function toggleSubNav()
{
}

This could be changed to:

var mainNavigation =
{
toggleSubNav: function ()
{
}
}


Then I would use mainNavigation.toggleSubNav when referring to this function in my HTML or another javascript function.