Debugging Support
Floating Debug Menu
The “floating” Debug Menu is perhaps one of the more useful features found in the ezAJAX Framework. The “floating” Debug Menu typically appears at the top of the browser’s client window and looks as follows:
The “floating” Debug Menu will extend from the left side of the browser’s client area to the right side. You can change the appearance of the “floating” Debug Menu as well as cause it to “float” or not by modifying the styles for the element that has the id of “const_div_floating_debug_menu”. Consider the following code fragment:
var dObj = _$(const_div_floating_debug_menu);
if (!!dObj) {
dObj.style.backgroundColor = ‘lime’;
dObj.style.width = '500px';
} |
You can place this code fragment within the body of the “oAJAXEngine.createAJAXEngineCallback” function that can be placed in any ColdFusion source file as specified in the file named “cfinclude_application.cfm” using the ColdFusion variable “Request.cfincludeCFM” which is a comma delimited list of ColdFusion source files that are automatically loaded at runtime using the <cfinclude> tag, one per file name. Take a look at the following code fragment:
function adjustFloatingMenuStyles() {
var dObj = _$(const_div_floating_debug_menu);
if (!!dObj) {
dObj.style.backgroundColor = 'lime';
dObj.style.width = '500px';
}
}
oAJAXEngine.createAJAXEngineCallback = function () { adjustFloatingMenuStyles(); this.top = '400px'; }; |
As you may notice upon placing this code in the appropriate place within the Framework the “floating” Debug Menu assumes a “lime” background color rather than the default “cyan” color as shipped with the Framework out-of-the-box.
You can place this code fragment within the body of the “oAJAXEngine.showAJAXDebugMenuCallback” function. Take a look at the following code fragment:
function adjustFloatingMenuStyles() {
var dObj = _$(const_div_floating_debug_menu);
if (!!dObj) {
dObj.style.backgroundColor = 'lime';
dObj.style.width = '500px';
}
}
oAJAXEngine.showAJAXDebugMenuCallback = function () { adjustFloatingMenuStyles(); return true; }; |
You can place this code fragment within the body of the “oAJAXEngine.showAJAXScopesMenuCallback” function. Take a look at the following code fragment:
function adjustFloatingMenuStyles() {
var dObj = _$(const_div_floating_debug_menu);
if (!!dObj) {
dObj.style.backgroundColor = 'lime';
dObj.style.width = '500px';
}
}
oAJAXEngine.showAJAXScopesMenuCallback = function () { adjustFloatingMenuStyles(); return true; }; |
You can place this code fragment within the body of the “oAJAXEngine.showAJAXBrowserDebugCallback” function. Take a look at the following code fragment:
function adjustFloatingMenuStyles() {
var dObj = _$(const_div_floating_debug_menu);
if (!!dObj) {
dObj.style.backgroundColor = 'lime';
dObj.style.width = '500px';
}
}
oAJAXEngine.showAJAXBrowserDebugCallback = function () { adjustFloatingMenuStyles(); return true; }; |
As you can see there can be many ways to achieve the same effect by using the API from the ezAJAX Framework. All three of the preceding Call-Back functions are executed within the same scope and therefore all three could be used to make changes to the “floating” Debug Menu’s styles.
Replace the Floating Debug Menu
You can also replace the default “floating” Debug Menu with whatever content you may wish by using the following code fragment:
function replaceFloatingMenuContent() {
var dObj = _$(const_div_floating_debug_menu_content);
if (!!dObj) {
dObj.innerHTML = '<b>New Menu Content</b>';
}
}
oAJAXEngine.createAJAXEngineCallback = function () { replaceFloatingDebugMenu(); this.top = '400px'; }; |
As you can see you now have the ability to create your own horizontal Site Menu by writing very little code to modify some already existing elements that are part of the ezAJAX Framework.
Add to the Floating Debug Menu
You can also add content to the default “floating” Debug Menu by using the following code fragment:
function populateExtraMenuContainer() {
var dObj = _$('div_extraContainer');
if (!!dObj) {
dObj.innerHTML = ' <b>Extra Menu Content</b>';
}
}
oAJAXEngine.createAJAXEngineCallback = function () { populateExtraMenuContainer(); this.top = '400px'; }; |
Remove or Hide the Floating Debug Menu
You can also remove or hide the default “floating” Debug Menu by using the following code fragment:
var dObj = $(const_div_floating_debug_menu);
if (!!dObj) {
dObj.style.display = const_none_style;
} |
|
