New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download floating window

Demo

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 is where you put the content -->
    This script have been tested in Internet Explorer, Firefox and Opera
    <!-- End of where you put the content -->
    </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
<!-- This is where you put the content -->
and
<!-- End of where you put the content -->

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

kd
good
kd at 06:14AM, 2011/05/21.
Marco De la Mora
Excellent!Thank You
Marco De la Mora at 09:02PM, 2011/07/21.
rahaf nezar
<a href="#comment512">kd wrote:</a>good
good
rahaf nezar at 09:12AM, 2011/08/24.
Yeoh
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.
Matt Simpson
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.
Paul Denham
Same situation as Matt above.Would be fantastic if it can be solved.ThanksPaul
Paul Denham at 03:43PM, 2014/12/08.
adham
wow thank.
adham at 09:32AM, 2015/01/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com