<%
' CSS Windows v1.0.1 
' by Adam Brooks @ Advanced Technology in Media
' http://www.ATonline.com
' support@atonline.com
' 704-841-4909
'
' This code is intended to demonstrate the use of CSS, layers, ASP and JavaScript to 
' create window-like interfaces for use on web sites. This code is currently being
' provided as a beta and is presented "as-is". It has not been thoroughly tested for
' performance or security. No warranty is provided or implied.
'
' Additional scripts, updates, and related options will be posted to our site as they
' are released at http://spftware.atonline.com. If you utilize this script, please 
' notify us so that we may link to it or include it in our list of online users.
%>



<style>
/* -------------------------------------------------------------------- */
body
		{ 
			background: transparent 
			background-color: #FFFFFF; 
			color: #000000;
			font-family: Verdana, Helvetica, Arial, sans-serif; 
			font-size: 10pt; 
			margin-top: 0px; 
			margin-left: 0px; 
			margin-right: 0px 
		}

A:link			{color: #006600; text-decoration: none;}
A:active		{color: #009900; text-decoration: none;}
A:visited		{color: #006600; text-decoration: none;}
A:hover			{color: #009900; text-decoration: none;}


/* -------------------------------------------------------------------- */
/* WINDOW LAYERS */

.window1
		{
			position: absolute;
			top: 20px;
			left: 20px;
			right: 20px;
			float: right;
			width: 400px;
			height: 300px;
			background-color:#EEEEEE;
			border-collapse: collapse;
			border-top:2px solid #000000; 
			border-bottom:2px solid #000000; 
			border-left:2px solid #000000; 
			border-right:1px solid #000000; 
			filter:alpha(Opacity=90);
			overflow: auto;
			padding-top:0; 
			padding-bottom:0;
			padding-left:0; 
			padding-right:0;
			text-align: left;
			vertical-align: middle;
			z-index: 100;
		}

.window2
		{
			position: absolute;
			top: 20px;
			left: 20px;
			right: 20px;
			float: right;
			width: 90%;
			height: 300px;
			background-color:#EEEEEE;
			border-collapse: collapse;
			border-top:2px solid #000000; 
			border-bottom:2px solid #000000; 
			border-left:2px solid #000000; 
			border-right:1px solid #000000; 
			overflow: auto;
			padding-top:0; 
			padding-bottom:0;
			padding-left:0; 
			padding-right:0;
			text-align: left;
			vertical-align: middle;
			z-index: 200;
		}

/* -------------------------------------------------------------------- */
/* ABILITY TO DRAG WINDOW */
	.drag{position:relative;cursor:hand;z-index:1000;}
</style>



<!-- "Begin Movable Layer Script" -->
<script language="JavaScript1.2">
<!--
var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
<!-- "End Movable Layer Script" -->



<ul>
	<li>DEMO: <a href="?display=on&window">Layer-Based Window</a></li>
	<li>DEMO: <a href="?display=on&window=&drag=on">Layer-Based Window (movable)</a></li>
	<li>DEMO: <a href="?display=on&window=frame">Layer-Based Window w/ Frame</a></li>
	<li>DEMO: <a href="?display=on&window=frame&drag=on">Layer-Based Window w/ Frame (movable)</a></li>
	<li>DEMO: <a href="?display=on&window=frame&target=/file.htm">Layer-Based Window w/ Frame and Target URL</a></li>
	<li>DEMO: <a href="?display=on&window=frame&drag=on&target=/file.htm">Layer-Based Window w/ Frame and Target URL (movable)</a></li>
</ul>
	
	
	
<!-- "Begin Window Scripting" -->
<%if trim(request("display")) = "on" then%>
<!-- "Begin Movable Option" -->
<%
'------------
dim strdrag
	if trim(request("drag")) = "on" then
		strdrag = "drag"
	else
		strdrag = ""
	end if
'------------
%>
<div class="<%=strdrag%>">
<%if trim(request("window"))="frame" then%>
<!-- "Begin Frame-Based Window Layer" -->
	<div class="window2">
		<%
		dim strtarget
		if trim(request("target"))="" then
			strtarget="http://www.yourwebsite.com"
		else
			strtarget=trim(request("target"))
		end if
		%>
		<p><a href="?">[X] Close Window</a></p>
		<iframe id="forum" height="100%" width="100%" src="<%=strtarget%>"></iframe>
	</div>
<!-- "End Frame-Based Window Layer" -->
<%Else%>
<!-- "Begin Standard Window Layer" -->
	<div class="window1">
		<p><a href="?">[X] Close Window</a></p>
		<p>testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing</p>
	</div>
<!-- "End Standard Window Layer" -->
<%End If%>
</div>
<!-- "End Movable Option" -->
<%End If%><<!-- "End Window Scripting" -->

quote:

In real life, a pop up would be some salesperson popping out of the clothing rack asking me if I want to sign up for their mailing list when in actuality, I'm just looking for a red size 12 sweater...I'd like the clerk to be easy to find if I need help, but I don't want someone following me around and jumping out at me when I'm not expecting it. I want to be left alone when I shop. I want to be left alone when I surf.

quote:

(personally I don't like the other property listing on that main page, but the owner wanted this placed in a very prominent location and she wanted it to blink....I still need to experiment with it)