Download floating window

Download

You can download the entire script from this zip file.

Configuration

Create windows

You create a window with the following HTML code in your <BODY> section:

<div class="dhtmlgoodies_window">
  <div class="dhtmlgoodies_window_top">
    <img src="images/top_left.gif" align="left">
    <img src="images/top_center.gif" class="topCenterImage">
    <div class="top_buttons">
      <img class="minimizeButton" src="images/minimize.gif">
      <img class="closeButton" src="images/close.gif">
      <img src="images/top_right.gif">
    </div>
  </div>
  <div class="dhtmlgoodies_windowMiddle">
    <div class="dhtmlgoodies_windowContent">
    
    This script have been tested in Internet Explorer, Firefox and Opera
    
    </div>
  </div>
  <div class="dhtmlgoodies_window_bottom">
    <img class="resizeImage" src="images/bottom_right.gif">
  </div>
</div>

This is perhaps a lot of code. However, the only thing you have to do is to copy this code and then put the textual content of your window between the two HTML comments

and

Javascript variables

You have some Javascript variables available which you can use to customize position, size and state of your windows. Example:

var readSizeFromCookie = true; // Setting initial size of windows
// These values could be overridden by cookies.
windowSizeArray[1] = [200,400]; // Size of first window
windowPositionArray[1] = [200,200]; // X and Y position of first window
windowSizeArray[2] = [150,250]; // Size of second window
windowPositionArray[2] = [500,300]; // X and Y position of first window
windowSizeArray[3] = [130,100]; // Size of second window
windowPositionArray[3] = [50,500]; // X and Y position of first window

initWindowStateArray = [false,true,true]; // False = minimized, True = maximized. This is the default values which cookies could override.

readSizeFromCookie = Cookies are used to remember size, position and state of your windows if this value is set to true
windowSizeArray = An array indicating size of your windows windowSizeArray[1] = [200,400] indicates that the first window should be 200 x 400 pixel
windowPositionArray = An array indicating position of window. windowPositionArray[1] = [200,200] means that the first window will appear 200 pixel from the left edge and 200 pixel from the top edge of the browser

Note! If readSizeFromCookie is set to true, the values of your arrays(windowSizeArray, windowPositionArray and initWindowStateArray) will only indicate initial size, position and state of your windows.

Create new window dynamically

You can create a new window dynamically. Example:

/* This function illustrates how you can create a new custom window dynamically */

function customFunctionCreateWindow()
{
  var divId = createNewWindow(200,200,300,300);
  document.getElementById('windowContent' + divId).innerHTML = 'Content of new window';
}

First, we call the createNewWindow() function with the following parameters: width, height, left position and top position. This function returns the index of the new window. We use this index to write content to the window.

Comments

good

kd at 06:14AM, 2011/05/21.

Excellent!Thank You

Marco De la Mora at 09:02PM, 2011/07/21.

Hi,I like this very much. But now I have try to add a dynamic windows title in the float windows. It there any idea? I think that need to add a new <span></span> for the title. But I still not able to implement it. =(

Yeoh at 09:27AM, 2012/01/19.

Problem with Google Chrome.You cannot highlight and select text either on the host page or within the floating window itself.Any chance of a quick fix for this, because otherwise this is an excellent tool.ThanksMatt

Matt Simpson at 03:15PM, 2014/06/13.