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

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.