Database Floating Divs - Revision history

Philip Lacey at 21:03, 9 November 2014

2014-11-09T21:03:22Z

Philip Lacey at 01:09, 22 March 2014

2014-03-22T01:09:46Z

Philip Lacey at 14:53, 17 April 2012

2012-04-17T14:53:33Z

Philip Lacey at 14:52, 17 April 2012

2012-04-17T14:52:14Z

Philip Lacey at 14:50, 17 April 2012

2012-04-17T14:50:02Z

Philip Lacey at 14:49, 17 April 2012

2012-04-17T14:49:01Z

Philip Lacey at 14:48, 17 April 2012

2012-04-17T14:48:25Z

Philip Lacey: Created page with "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 simil..."

2012-04-17T14:47:05Z

Created page with "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 simil..."

New page

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.

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

← Older revision		Revision as of 21:03, 9 November 2014
Line 44:		Line 44:

	[[Category:Topic:JavaScript]]		[[Category:Topic:JavaScript]]
−	[[Category:~~Keywords~~]]	+	[[Category:Topic:Key Concept]]

← Older revision		Revision as of 01:09, 22 March 2014
Line 42:		Line 42:
	</syntaxhighlight>		</syntaxhighlight>

−	[[Category:JavaScript]]	+
		+	[[Category:Topic:JavaScript]]
		+	[[Category:Keywords]]

@@ Line 33: / Line 33: @@
 </syntaxhighlight>
-You can also modify the style of the floating div, in the JavaScript "Opening code execution" box.
+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.
 <syntaxhighlight lang="javascript">
-document.getElementById('bottomLeft').style.width = "955px";
+document.getElementById('bottomLeft').style.width = "100%";
 document.getElementById('bottomLeft').style.border = "solid 1px #e1e1e1";
 document.getElementById('bottomLeft').style.background = "#ffdab9";

@@ Line 30: / Line 30: @@
 <syntaxhighlight lang="javascript">
-<div id='bottomLeft'><img src=http://NameAndLocationOfYourFile.image /></</div>
+<div id='bottomLeft'><img src='http://NameAndLocationOfYourFile.image' /></</div>
 </syntaxhighlight>

@@ Line 36: / Line 36: @@
 <syntaxhighlight lang="javascript">
-document.getElementById('bottomLeft').style.width = 955 px;
+document.getElementById('bottomLeft').style.width = "955px";
-document.getElementById('bottomLeft').style.border = solid 1px #e1e1e1;
+document.getElementById('bottomLeft').style.border = "solid 1px #e1e1e1";
-document.getElementById('bottomLeft').style.background = #ffdab9;
+document.getElementById('bottomLeft').style.background = "#ffdab9";
 </syntaxhighlight>
 [[Category:JavaScript]]

@@ Line 26: / Line 26: @@
 * bottomLeft
 * bottomRight
 To put an image in