Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 988397ba993ab65c7aae9e6ddcd23e5db74b2807 @jplarson committed Jan 7, 2012
@@ -0,0 +1,287 @@
+/**************************************************************
+/* public.css
+/* jpl 11/06/09
+/*
+/* Front end styles
+/*************************************************************/
+
+
+/*------------------------------------------------------------------------------*/
+/* SECTION::Global HTML Resets */
+
+html {
+ padding: 0;
+ margin: 0;
+}
+
+body {
+ text-align: center;
+ padding: 0;
+ margin: 20px 20px 20px 100px;
+ background: #000;
+ font-family: Tahoma, Verdana, Arial, Sans-Serif;
+ font-size: 15px;
+ color: #FFF79F;
+}
+
+/* End SECTION::Global HTML Resets
+/*------------------------------------------------------------------------------*/
+
+
+
+
+/*------------------------------------------------------------------------------*/
+/* SECTION::Main window and pages within */
+
+.mainWindow {
+ height: 450px;
+ width: 400px;
+ background: #fff;
+ padding: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ margin: auto;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+}
+
+.mainWindow #viewPort {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ background: #000;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+}
+
+.mainWindow #viewPort .page {
+ position: relative;
+ height: 450px;
+ width: 400px;
+ background: #A00;
+ background: -moz-linear-gradient(top, #900, #C00 30%, #400 90%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #900000), color-stop(0.3, #c00000), color-stop(0.9, #400000));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#A00000, endColorstr=#400000);
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#A00000, endColorstr=#400000)";
+ font-size: 16px;
+ float: left;
+ border-radius: 15px;
+ text-align: left;
+}
+
+.mainWindow .page .inner {
+ padding: 20px 40px;
+}
+
+.page .pageContent {
+ margin-top: 30px;
+ background: #400;
+ background: -moz-linear-gradient(top, #300, #500 30%, #200 90%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #300000), color-stop(0.3, #500000), color-stop(0.9, #200000));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#600000, endColorstr=#200000);
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#600000, endColorstr=#200000)";
+ border-radius: 15px;
+ padding: 10px 10px 10px 20px;
+ height: 300px;
+}
+
+/* End SECTION::Main window and pages within
+/*------------------------------------------------------------------------------*/
+
+/*------------------------------------------------------------------------------*/
+/* SECTION::Pop Up Windows */
+.popUpWindow {
+ margin-bottom: 0px;
+ border: 2px solid #000000;
+ border-radius: 10px;
+ background: -moz-linear-gradient(top, #900, #C00 30%, #400 90%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #900000), color-stop(0.9, #400000), color-stop(0.3, #c00000));
+ box-shadow: 4px 4px 3px #888;
+ text-align: left;
+}
+.popUpWindow .titleBar {
+ position: relative;
+ padding: 1px 10px 7px 10px;
+ height: 20px;
+ font-size: 20px;
+ background: #000;
+ border-radius: 8px 8px 0 0;
+}
+.popUpWindow .titleBar span.theTitle {
+ display: block;
+ margin-left: 7px;
+ padding-right: 9px;
+ font-weight: 900;
+ padding-bottom: 4px;
+}
+
+.popUpWindow .titleBar span.closeIcon {
+ position: absolute;
+ top: 5px;
+ right: 7px;
+ background: url(../images/iconWhiteBigX.png) no-repeat;
+ height: 23px;
+ width: 23px;
+ cursor: pointer;
+}
+
+
+
+.popUpWindow div.content {
+ padding: 5px 10px;
+ position: relative;
+ margin: 0;
+ padding: 8px;
+ overflow: auto;
+}
+ .popUpWindow div.content span.resizeIcon {
+ position: absolute;
+ right: 1px;
+ bottom: 1px;
+ height: 16px;
+ width: 16px;
+ background: transparent url(../images/iconResize.png) no-repeat;
+ cursor: se-resize;
+ }
+
+/* End SECTION::Pop Up Windows
+/*------------------------------------------------------------------------------*/
+
+/*------------------------------------------------------------------------------*/
+/* SECTION::Zen Pop Up Windows */
+.zenPopUpWindow {
+ margin-bottom: 0px;
+ border: 1px solid #b9b3af;
+ background: #eef8fb url(../images/popUpBodyBG.jpg) no-repeat bottom right;
+ box-shadow: 4px 4px 3px rgba(180, 180, 250, 0.7);
+ text-align: left;
+}
+.zenPopUpWindow .titleBar {
+ position: relative;
+ font-size: 16px;
+ padding: 5px 0 0 9px;
+ cursor: move;
+}
+.zenPopUpWindow .titleBar span {
+ color: #3c6b98;
+}
+
+.zenPopUpWindow .titleBar span.closeIcon {
+ position: absolute;
+ top: 5px;
+ right: 7px;
+ background: url(../images/icon18ClosePopUp.gif) no-repeat;
+ height: 18px;
+ width: 18px;
+ cursor: pointer;
+}
+
+
+.zenPopUpWindow .content {
+ position: relative;
+ margin: 0;
+ padding: 8px 10px 70px 10px;
+ font-size: 12px;
+ color: #278622;
+}
+
+/* End SECTION::Pop Up Windows
+/*------------------------------------------------------------------------------*/
+
+/*------------------------------------------------------------------------------*/
+/* SECTION::Buttons */
+a.button, input[type=submit], input[type=button] {
+ font-size: 14px;
+ margin-right: 10px;
+ display: inline-block;
+ background:#fff;
+ border:1px solid #757575;
+ text-align:center;
+ white-space: nowrap;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ line-height: 14px !important;
+ text-decoration:none;
+ color:#000;
+ padding:3px 10px;
+ cursor: pointer;
+ border-radius:11px;-webkit-border-radius:11px;-moz-border-radius:11px;
+ -moz-box-sizing: content-box;
+ -moz-box-shadow:
+ 2px 2px 3px rgba(0, 0, 0, .2),
+ 0px 0px 3px rgba(0, 0, 0, .1),
+ inset 2px -9px 5px #fff,
+ inset 0px -10px 6px #aaa,
+ inset 0px 0px 2px #444
+}
+input[type=submit], input[type=button] {
+ padding: 0 5px 1px 5px;
+}
+a.button:hover, input[type=submit]:hover, input[type=button]:hover {
+ -moz-box-shadow:
+ inset 2px -9px 5px #fff,
+ inset 0px -10px 6px #aaa,
+ inset 0px 0px 2px #444,
+ 2px 2px 3px rgba(0, 0, 0, .2),
+ 0px 0px 5px #669DDD;
+ -webkit-box-shadow:
+ inset 2px -9px 5px #fff,
+ inset 0px -10px 6px #aaa,
+ inset 0px 0px 2px #444,
+ 2px 2px 3px rgba(0, 0, 0, .2),
+ 0px 0px 5px #669DDD;
+}
+a.button:active, input[type=submit]:active, input[type=button]:active {
+ background:#fff;
+ -moz-box-shadow:
+ inset 0px -3px 5px #b1e5f1,
+ inset 0px -10px 6px #4182c3,
+ inset 0px 0px 2px #444,
+ 2px 2px 3px rgba(0, 0, 0, .2),
+ 0px 0px 5px #669DDD;
+ -webkit-box-shadow:
+ inset 0px -3px 5px #b1e5f1,
+ inset 0px -10px 6px #4182c3,
+ inset 0px 0px 2px #444,
+ 2px 2px 3px rgba(0, 0, 0, .2),
+ 0px 0px 5px #669DDD;
+}
+
+/* End SECTION::Buttons
+/*------------------------------------------------------------------------------*/
+
+
+/*------------------------------------------------------------------------------*/
+/* SECTION::Universal Utility */
+
+ .left { float: left; } td.left { text-align: left; float: none; }
+ .right { float: right;} td.right { text-align: right; float: none; }
+ .clear { clear: both; }
+
+ .inline { display: inline; }
+ .block { display: block; }
+ .inlineBlock{ display: inline-block; }
+
+ .justify { text-align: justify; }
+ .bold { font-weight: 900; }
+ .relative { position: relative; }
+ .absolute { position: absolute; }
+ .clickable { cursor: pointer; }
+
+ .center { text-align: center; } /* CENTER elements contained by me */
+ .centered { display: block; margin: 0 auto; } /* make me CENTERED in my container */
+
+ .verticalMiddle td, td.verticalMiddle { vertical-align: middle; }
+ div.verticalMiddle { vertical-align: middle; }
+ .verticalMiddle>* { vertical-align: middle; }
+
+ .hidden { display: none; }
+ .truncatedText { overflow: hidden; }
+ .hideOverflow { overflow: hidden; }
+
+ .nextElement { margin-top: 6px; }
+ .nextSection { margin-top: 16px; }
+
+/* End SECTION::Universal Utility
+/*------------------------------------------------------------------------------*/
+
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,85 @@
+<?
+
+ switch($_REQUEST['a']) {
+ case 'time': DisplayTime(); break;
+ default: DisplayDemoPage();
+ }
+ exit();
+
+
+function DisplayTime() {
+ echo "It is now " . date('m/d/y, g:i:sa') . ".";
+}
+
+function DisplayDemoPage() {
+?>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <link rel="SHORTCUT ICON" HREF="images/favicon.gif" type="image/ico">
+ <title>MooTools PopUpWindow Demo</title>
+ <meta name="description" content="">
+ <meta name="keywords" content="">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link href="css/public.css" media="screen" rel="Stylesheet" type="text/css" />
+
+ <script type="text/javascript" src="scripts/mootools-core-1.4.2.js"></script>
+ <script type="text/javascript" src="scripts/mootools-more-1.4.0.1.js"></script>
+ <script type="text/javascript" src="scripts/PopUpWindow.js"></script>
+</head>
+<body>
+ <h2>PopUpWindow Demo</h2>
+ <p style="width: 450px; margin: 0 auto 20px auto;">
+ Widget for pop up windows. Can feature content loaded from a DOM element or the result of an AJAX call.
+ </p>
+<div class="mainWindow">
+ <div class="viewPort" id="viewPort">
+ <div class="page"><div class="inner">
+ <?=JSLink('Open pop up window', 'App.popUp1.open(); App.popUp1.positionTo(this, 200, 0);')?>
+ <br />
+ <br />
+ <?=JSLink('AJAX load pop up.', "App.popUp2.openURL('?a=time'); App.popUp2.positionTo(this, 220, 0);")?>
+ <br />
+ <br />
+ <?=JSLink('Differently styled pop up', 'App.popUp3.open(); App.popUp3.positionTo(this, 240, 0);')?>
+ <br />
+ <br />
+ <?=JSLink('Resizable pop up', 'App.popUp4.open(); App.popUp4.positionTo(this, 260, 0);')?>
+ </div></div>
+ </div><!--viewPort-->
+</div><!--mainWindow-->
+
+ <div id="staticDiv">
+ <p>In the HTML of this page, this div is here, just chillin'. But on the domready function our code to create a PopUpWindow
+ effectively snatches that content out of the div, and into the pop-up window you see now.</p>
+ </div><!--staticDiv-->
+
+ <div id="zenDiv">
+ <p>The CSS model of PopUpWindow is pretty comprehensive, so you can style to your heart's content.</p>
+ <p>With the option to set the className for windows in the contructor you can even have multiple stylings of pop up windows
+ at the same time (all though the only use case I've encountered for this is this demo!).</p>
+ </div><!--zenDiv-->
+
+ <div id="resizeDiv">
+ <p>This window is resizable using the icon in the lower-right corner.</p>
+ <p>'Nuff said.</p>
+ </div><!--resizeDiv-->
+
+<script type="text/javascript">
+ App = {};
+ window.addEvent('domready', function() {
+ App.popUp1 = new PopUpWindow('Static Content', { contentDiv: 'staticDiv', width: 200 });
+ App.popUp2 = new PopUpWindow('AJAX Loding');
+ App.popUp3 = new PopUpWindow('CSS Styling', { contentDiv: 'zenDiv', className: 'zenPopUpWindow', onClose: function() { console.log('closed!'); } });
+ App.popUp4 = new PopUpWindow('Resizable', { contentDiv: 'resizeDiv', isResizable: true, onResize: function(d, e) { console.log(d); } });
+ });
+</script>
+</body>
+</html>
+<?
+}
+
+function JSLink($text, $onclick, $class = "button") {
+ return "<a href=\"JavaScript:void(0);\" onclick=\"$onclick\" class=\"$class\">$text</a>";
+}
+?>
Oops, something went wrong. Retry.

0 comments on commit 988397b

Please sign in to comment.