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.

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.