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.

Web 2.0 Box Generator

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

Ashutosh

2009-12-03 22:32:00

too good example but can we add a video in the slide

Nathfla

2009-05-10 15:18:25

hi how are you i love this tutorial i was wondering if you had an idea on how to hide the boxes and call them to open through a link, i was successful opening it with a link but i don't want the boxes to appear on the page till i have clicked on the link, thanks a million for your help.

LDB

2009-03-17 16:30:35

Unable to close or minimize with ie6.

Webster

2008-12-26 03:42:07

Heelo, please can some one tell me how to open a window when clicking a text. ex: Click here to open window (when clicking this a window will be opened). Thank you very much

CodeLover

2008-12-16 11:13:22

i found the answer... in the link onclick needs RETURN FALSE. Example: < A href= ' # ' onclick = ' alert ( ' testing ' ); return false; ' > click < / a >. This way, the browser wont follow.

CodeLover

2008-12-16 10:51:18

by the way.. #container with no background !

CodeLover

2008-12-16 10:48:46

click = < / body > THE TAG < A href= ' # ' onclick = ' alert ( ' testing ' ) ' > click < / a >

CodeLover

2008-12-16 10:41:25

I having a problem. In this code above, i put before click simulating a problem as i´m having in my code.. the page goes to the root. how can i resolve this?

Fess

2008-11-08 10:01:45

Amazing!

Ivan

2008-10-03 11:55:09

Ahora si te luciste pero bueno aun asi con unos cuantos errores en el uso

RudiRatlos

2008-09-28 04:07:31

it's what I was searching for. Great, thanx a lot!

Coderbari

2008-05-08 12:31:18

This example will help me

Alex

2008-05-01 07:39:25

Very good ! That's very great !

Kousha

2008-04-22 15:34:48

Is there a way to have actual pages inside those windows? How can I include another page in one of those windows?

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.