Free script ::: CSS Windows v1.0.1

Free script ::: CSS Windows v1.0.1 (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

adambrooks -> Free script ::: CSS Windows v1.0.1 (12/12/2003 11:50:15)

Here's a free goodie for you all. You CSS and ASP geeks might find it amusing. It's just a little something that I have been playing with. Have fun and feek free to post your comments or questions.

One of the beautiful things about it is that it's basically creates pop-up windows that pop-up killers apps can't kill.

<%
' 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" -->

adambrooks -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 9:45:34)
Any comments?

c1sissy -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 12:04:11)
Hi, actually, since you asked[;)] I don't particularly like pop up windows. I find them terribly annoying and a waste of time when Iam looking up information. I also don't like to find out that someone is trying to keep my pop up blocker from working. Since I don't like pop ups I have something to prevent them. I don't like the fact that there are people out there who wish to come up with something that will interefer with what I prefer to see and not to see while on the web. ANyhow, it is nice that you are sharing the code.

adambrooks -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 13:06:54)
Right... and that is a delimma faced by the industry. The rights of the site owner vs the rights of the user. Personally, I subscribe to the ideal that visitors have limited rights while on the site itself. It is your business' property. As the site owner, you are entitled to run your business and develop that business in any way that you choose provided that you follow ethical and legal guidelines. It's a two way street. A business could argue that that someone who is using a pop-up killer and thus is infringing on their ability to run their business as they see fit. This is a way around that. The Internet is not much different that the real world. In a free market, those businesses that abuse their users or misues technology eventually loose business, investors, etc. I don't, personally, see this as abuse.

Peppergal -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 15:01:27)
I do agree that sometimes a pop up window does suit a purpose (Thomas has a nice article re: them on this site somewhere.) However, I hate it when I visit a site and a window pops up and I have to close it. Something less intrusive, like a link somewhere, with an eyecatching graphic like "Special Offer" or something, that I can click if I choose would be much better. I too block pop ups and I would never return to a site that went around my pop up blocker. 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.

c1sissy -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 15:18:30)
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. Well said! If I should have something pop up, I don't read this anyhow, I click right out of it. So it is a waste of time and energy on the part of those who design them to place them there. Just my opnion.

adambrooks -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 16:27:09)
here's a little more of my 2.22 cents on the issue.... i don't completely disagree with you, however, i also do not think that it is an all-or-nothing situation. from experience, i have to disagree that they're a waste of time. i have had many sites where pop-ups and/or layered "windows" have increased sales by increasing awareness. people love to hate them, but they work. pop-ups/windows/layers, etc are signage. much like in the physical world, if used properly, they DO help increase awareness and sales. i do not doubt that some customers are turned off, but the cost-benefit is high and offsets the small percentage of those who would leave the site. i think that the real catch here is how "tastefully" signage is placed and used. cheesy flashing gif's turn me off more than a well-placed pop-up or "layered window". excessive Flash turuns me off. can they please invent a "POOR NAVIGATION KILLER" for me! a user with a pop-up blocker is the same as a customer taking down signs in a store. these signs, like it or not, are the property of the site owner. seems to me that customers and site owners should be far more concerned with proper and ethical placement and usage of signage, not the method by which it is distributed.

Peppergal -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 17:47:10)
I don't completely disagree with you either, but I agree with myself more. ROTLF[;)] I can see what you mean by "signs" but to me, on a website, the signs are the special links here and there, just waiting for you to see and respond to them. Signs in a store don't jump out and grab you. They hang in strategic eye catching locations, waiting for you to see and read them, or passively ignore them if you want. And I agree totally about cheezy animated gifs, (I hate them). What I mean by eye catching is something like my "thought for the day graphic", or the "Featured Property" on the left hand navigation....located on this page: http://www.wallenpaupacklakefronts.com Scroll down near the bottom for the "thought". That is just in a temporary location for now; owner hasn't gotten back to me on its permanent home... (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) Which of course brings to mind too much stuff on a website....I wouldn't suggest putting more than two such items like this on, or the website would become very cluttered and confusing.[:-] ) The property listing is only there until it sells. Won't be replaced by anything else.

adambrooks -> RE: Free script ::: CSS Windows v1.0.1 (12/15/2003 18:57:15)
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) you're thinking too much like a "designer" and not enough like a marketer/salesman. [;)] aesthetically, yes, the property listing is misplaced. however, as a marketer/salesman, i bet that image will vring users to the listing and thus increase exposure --- and sales.

Gotzhaus -> RE: Free script ::: CSS Windows v1.0.1 (12/16/2003 4:17:07)
I am not to terribly fond of pop up window's but I have come across a few sites, where the link has given me a pop up after I have clicked it. I deeply dislike when I am given no choice in the matter.

Page: [1]

0.125