Database Floating Divs

From All n One's bxp software Wixi

Jump to: navigation, search

A floating DIV is a web page element that allows you to place a text box anywhere on the page and not be restricted by where in the HTML code it was placed. The idea is similar to using a text box in Microsoft Word, rather than typing in the body of the document. If the text is in the Text Box you can move the text anywhere in the document.


These DIVs can be very useful for strategic positioning of information. You can see them on websites like http://www.skysports.com which keeps a menu bar on the bottom of the page, no matter where you are in the document. This static / fixed DIV can be used as a helpful item to ensure an agent can always access a menu of items, like instant eCourse items, access to Conference chat room, or even access to other support camaigns or realtime information.


A DIV can contain ANYTHING, including text, images, multimedia and JavaScript.


To implement a fixed item on your page, BE has made available four areas of potential use, top left, top right, bottom left and bottom right. This ensures that the item is easy to reduce the accidental blocking of script content.

A sample way of using the code is to go:

Main Menu > Database Management > Primary Details > Campaign - Edit > Choose the campaign > Instructions > and in the Dial Out Instructions box

<div id='bottomLeft'>whatever you like</div>


The words "whatever you like" will now float on that page when in a record. This does not appear unless entering a record or looking at an existing record.

The key word areas are:

  • topLeft
  • topRight
  • bottomLeft
  • bottomRight


To put an image in

<div id='bottomLeft'><img src='http://NameAndLocationOfYourFile.image' /></</div>

You can also modify the style of the floating div, in the JavaScript "Opening code execution" box. The following changes will make the bar stretch the entire width of the page, set a 1 pixel border aroudn the box and change the background colour to a peach colour.

document.getElementById('bottomLeft').style.width = "100%";
document.getElementById('bottomLeft').style.border = "solid 1px #e1e1e1";
document.getElementById('bottomLeft').style.background = "#ffdab9";