Next Prev

Prototype window

Read more and download "Prototype window"

With this demo you can add an window in a HTML code.
The code uses Prototype and is inspired by script.aculo.us library.
It has been tested successfully on all browsers.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html>
  <head>
<base href="http://www.ajaxdaddy.com/web20/prototype/windows/samples/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
  <link href="../themes/default.css" rel="stylesheet" type="text/css"/>	
  <link href="../themes/alphacube.css" rel="stylesheet" type="text/css"/>

  <script type="text/javascript" src="../javascripts/prototype.js"> </script>
  <script type="text/javascript" src="../javascripts/effects.js"> </script>
  <script type="text/javascript" src="../javascripts/window.js"> </script>
  <script type="text/javascript" src="../javascripts/window_effects.js"> </script>
  <script type="text/javascript" src="../javascripts/debug.js"> </script>

<style>
body {
  background: #363636;
}
#border {
  position:absolute;
  top:10px;
  left:10px;
  width:500px;
  height:500px;
  border: 1px solid #000;
  overflow:hidden;
}  
#container {
  position:absolute;
  top:0px;
  left:0px;
  width:500px;
  height:500px;
  overflow:hidden;
  background:#DAEE9B;
  z-index:0;
}  
</style>
</head>
<body>

<script type="text/javascript"> 
function win1()
{
  var win = new Window({id: "win1", className: "alphacube", title: "Sample", width:250, height:150, top:0, left: 1, parent:$('container')}); 
  win.getContent().innerHTML = "<h1>Constraint inside  a div !!</h1>constraint: {left:10, right:20}<br><a href='#' onclick='Windows.getWindow(\"win1\").maximize()'>Maximize me</a>"; 

  win.setDestroyOnClose(); 
  win.show();
  win.setConstraint(true, {left:10, right:20})
  win.toFront();
}

function win2()
{
  var win = new Window({id: "win2", className: "alphacube", title: "Sample", width:200, height:150}); 
  win.getContent().innerHTML = "<h1>Constraint inside page !!</h1>constraint: {top: 30, bottom:10}<br><a href='#' onclick='Windows.getWindow(\"win2\").maximize()'>Maximize me</a>"; 

  win.setDestroyOnClose(); 
  win.showCenter();
  win.setConstraint(true, {left:0, right:0, top: 30, bottom:10})
  win.toFront();
}

function win3()
{
  var win = new Window({id: "win3", className: "alphacube", title: "Sample", width:250, height:150, wiredDrag: true}); 
  win.getContent().innerHTML = "<h1>No Constraint</h1>Wired mode<br><a href='#' onclick='Windows.getWindow(\"win3\").maximize()'>Maximize me</a>"; 
  win.setDestroyOnClose(); 
  win.setLocation(10, 500);
  win.show();
  win.toFront();
}

</script>

<div id="border">
  <div id="container"></div>
</div>

<script>
  win1();
  win2();
  win3();
</script>
</body></html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Alex

2008-05-01 07:39:25

Very good ! That's very great !

Henry K

2008-04-07 12:46:51

The link is dead... Can someone please post the source code for me? Thanks!

Aravind

2007-12-15 04:36:13

is this all open source??

Hups

2007-11-19 10:04:10

how can i load another html in the window ???

Dave

2007-10-03 16:29:43

dear TL..this is a gud ajax coding

Way

2007-09-25 01:35:47

i just want this auto complete comment system js code

Physche

2007-09-22 07:52:58

How would you go about making these windows pop open? I think this would be a fantastic way to open up additional info boxes on a website... embed video etc.

Cyclops

2007-09-09 13:54:47

This script is fantastic! Thanks for sharing!

Test

2007-06-25 19:32:44

this is the comment

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Prototype window

With this demo you can add an window in a HTML code.
The code uses Prototype and is inspired by script.aculo.us library.
It has been tested successfully on all browsers.

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Prototype window

With this demo you can add an window in a HTML code. The code uses Prototype and is inspired by script.aculo.us library. It has been tested successfully on all browsers.

Comment on this example

With this demo you can add an window in a HTML code.
The code uses Prototype and is inspired by script.aculo.us library.
It has been tested successfully on all browsers.