functionality by ashrafp

VIEWS: 29 PAGES: 17

									                                            Functionality
                                         circleofsistersatlanta.org
                                                Peter McCall
Overview:
This site is in place to support a Non-Profit organization named the Circle of Sisters located in Atlanta,
GA. Most of the web pages on this site contain static content. However, there are some pages that are
dynamic and the content will change weekly, even daily in a few cases. This document is to explain
those processes and to layout the technology used to implement the entire website.

Main Menu Navigation
The decision to put the Menu on the left side of the page was made to allow for expansion. There were
nine (9) categories (or groups) that have been initially chosen. Six of these are currently singular and
have no second level; three have up to four second level menus. There is a strong possibility to that the
number of pages will grow over time as the web site causes the Circle of Sisters to pay more attention to
documenting events and their successes which can turn into individual web pages; as the Circle evolves
into more channels of fundraising which will increase the number of pages on the site.

The decision to use a flexible, configurable menu, yet professional looking one, and one that can be used
for free was found at the following website run by Alsacreations. Their XHTML and CSS drop-down
menu is at http://tutorials.alsacreations.com/deroulant/ . I have attached the detailed directions at
ATTACHMENT A.

Site Template
The pages have been developed by building a Template with Dreamweaver named
site_template_cos.php. What should be static on each page is
     the left top of the header (name and address)
     the middle top of the header will contain a picture emblem. The height of the overall header
        section should be dictated by the size of the emblem jpg file.
     a banner separating the header from the primary body of the page
     the left main menu navigation
     the left two buttons, one asking to add an email address, and the other ways to get involved
     the footer with a quick-links menu, date last modified, page hit count, and organization name
        and address contact information

The rest of the page area is available for updating.

Another standard format approach is on some static information pages, e.g. the Our History page, a box
with bullet lists or summary of a key reason for the page should be placed. The content within this box
is meant to highlight and summarize the more detailed text that is placed in the body of the primary
content area.

The overall width of the page should be planned for 900 pixels. The user makeup will mostly be people
that can afford current technology so their laptops or monitors will handle the 900 pixel width
satisfactorily

Colors and Background
The background was chosen by the Circle of Sisters to display a gentle, free flowing and not cluttered
appearance. At the top is a solid dark color for the Header and below is a double gradient with the
darker shade of the color at the top and bottom and the lighter shade in the middle. This is where the
body and main content of the pages will be. It was created with Photoshop and the .psd file is available.

                                                       1
                                               Functionality
                                         circleofsistersatlanta.org
                                                Peter McCall

        The background color of the gradient is based on the hex color code #deffef.
        The background color of the header is a dark green color code #86a896
        The BODY background uses the bottom-most color in the background to blend with it if a long
         page occurs so it appears seamless. The color is #9ec0af.
        The is also use as the background for the main menu list and the 3 buttons
        The background for the sub-menu uses slightly lighter dark green color code #9cbead.
        The menu hover state is color code #deffef
        The <hr> element uses #9cbead
        The border of the emblem uses a light terra cotta hex color code #ebb96b
        This is also the background for the List Box used on the right side of some pages, #ebb96b again.
        The forms all use the background code #ffbd00
        The H1, H2, H3, H4 and Drop-cap uses a very dark green #3e5348
        The Thank You message uses a background of ffbd00

The range of colors used throughout the site can be visibly shown on this web page:
www.circleofsistersatlanta.org/sitedesignnotes.html

Fonts:
Overall, the Circle wants straight, crisp fonts and wants to avoid any curly, fancy type fonts such as
Lucinda Caligraphy. The default body font style used is Calibri with Arial and Georgia as 1st and
2ndalternatives. Size is 12 pixels and the color is black.

The name and address in the header section should be Verdana, sized to fit the space. Any quotes used
should be Cambria.

Forms (email action, join the membership) and Validation
The site uses Spry Widgets technology to validate the information inputted to the form fields where
possible. However, some information needs further validation that requires the use of PHP scripting.
An example is when requested to enter the email address twice, the entries need to be compared and if
different, an error message must be displayed and the correction made.

The logic flow for both forms is as follows:

    1. Introduce the Form and its purpose to the visitor with standard HTML
    2. Open a PHP section
    3. Establish all the variables used in the Form with a list of HTMLSpecialChars statements
    4. Check to see if this is the first time through for this visitor to the FORM. Do this by checking if
       the SUBMIT field is set or not
    5. If it is empty, then it is the first time thru, so set any default values for fields and present the
       Form to the visitor
    6. The Form should use the POST method
    7. If the SUBMIT field is not empty, then perform any field validation that can’t be done with the
       use of the Dreamweaver Spry Widgets. An example would be comparing the two email fields
       entered. The spry widgets can check that a properly formatted email field is entered but it does
       not compare it to another field.


                                                     2
                                            Functionality
                                          circleofsistersatlanta.org
                                                 Peter McCall
    8. If the validation all passes, then execute any database or email building required and provide
        the visitor with a “Thank You” message acknowledging that the Form information has been
        successfully processed.
    9. If the validation does not pass all the validations, then output the appropriate error message
        and reasons for not passing validation. Also, re-present the Form to the visitor along with the
        data that they previously entered (or options chosen) in all the fields.
    COMMENT: Adam, ref item #9 in this list. I can re-present text, and textarea information fine, but
    I can’t figure out how to re-present the previous choices of lists or checkboxes. This is an item that
    I would ask some help from you with if convenient for you.

Donation back office process
The Circle currently has no way to accept credit card transactions though they encourage members to
set up a monthly back draft. The bank draft option will continue, however, they wanted the credit card
capability.




The JustGive.org organization, a non-profit in itself, allows this to be down. They provide buttons in 3
sizes and provide the html to insert into the webpage wherever it is wanted. They require a registration
process and are only available to other non-profits. Their fee is 3% of the fees collected which is close to
the same fees collected by credit card companies and offer multiple credit cards, paypal, and various
frequency options in addition to one-time donations. They provide the collected monies on the 10th of
the month following the collection of the monies, with details of where the donations came from. Also,
they provide an immediate email to the contributor for their records.

Password Protect the Membership Directory
The Circle wants their Membership Directory to be password protected. After discussion with the
principals, a simple password will suffice that can be controlled by the main administrator of the site.

The free script made available on the http://www.zubrag.com/scripts/ should suffice. It is shown in full
at ATTACHMENT B.

Dynamic Lists with Links to Archived Documents
The Circle will have the need to provide archived documents that can be viewed, printed, and
downloaded. These will be in PDF or WORD formats. So rather than require updating of HTML ul or ol
lists, I have implemented an approach that uses PHP scripts to list the file directory within a folder and
list those files as LINKS. An example is keeping track of newsletters that are published bi-monthly and
having a archived listing of these newsletters. So this will change frequently throughout the year.
Advocacy issues will potentially change weekly. So maintenance of the list will be even more dynamic in
this instance.

To accomplish this, the site administrator merely has to upload via FTP files into the Folders that pertain
to the group with which they should be listed. It does require that the title be descriptive. Since the
files will be sorted alphabetically, for those that you want to be date sequenced, the following format of
the file name should be adhered to:
          YYYYMMDDname of the file – the YYYY is the year, MM is the month, DD is the day.

                                                     3
                                            Functionality
                                         circleofsistersatlanta.org
                                                Peter McCall
This approach will keep the archived files in date sequence.

Deleting files from the list can be done quickly and easily by removing them from the folders on the host
site public_html folder.

Dynamic Calendar Entry and Display
The availability of calendaring information is very important to the Circle group and the success of the
website. Google calendar was chosen because it does not require a large development effort, only set
up and configuration; it will allow the key activity groups to operate independently with little
supervision and maintenance; and it will allow the complete activities of all the groups to be
consolidated and displayed on the website virtually on a real-time basis with little maintenance required
over time. Oh yes, and it’s free!!

Individual calendars needs to be set up for the groups shown below. Once set up, a consolidated
calendar ID under the name “cos” should be used for consolidated display to the website. This ID should
be configured as Public so it can be viewed by all that visit the website whether or note they are a
member. Also, the default view configured for the website should be the Agenda view which is
essentially a list of events rather than the other options which give a calendar-like view, either weekly or
monthly. The cos ID should also include all the primary religious holidays as that would be consistent
with their mission.

The individual calendar groups to build are:
     Steering Committee
     Membership
     Community Events
     Partners
     Advocacy

Rounded Corners
From a design point of view I would like to avoid sharp corners and use rounded corners wherever there
is a square or rectangle area to display. This will add to the visual appeal requested by the Circle group.

The email and involved buttons on the left should be built with Photoshop as control of their size is
important and once built, it is not anticipated that they will not change size or location. Thus, long term
maintenance should not be a problem and this is a practical approach.

However, for other components where the size and location on the page may vary because of the
content, I am using the Nifty Corners Cube technique offered by Alessandro Fulciniti. Partial details are
shown at ATTACHMENT C and the full details can be seen and downloaded along with the CSS,
Javascript, and HTML at the URL: http://www.html.it/articoli/niftycube/index.html This code is
available for free.

Bookmark
Javascript that support bookmarking the page by the user should be included in the quicklinks menu.
The javascript to use can be found at ATTACHMENT D and was obtained from The JavaScript Source ::
http://javascript.internet.com and was created by: Philip Myers:
http://virtualipod.tripod.com/bookmark.html */

                                                     4
                                           Functionality
                                        circleofsistersatlanta.org
                                               Peter McCall


Page Hit Count
Use Google Analytics to capture page hit count information. It is simple to set up, provides good
analysis and is free.

Last Modified Date
Use PHP code to display the last modified date in the footer section. This location is not one that will
distract the visitor, it provides an easy way to for the people responsible for the site to get a sense of
how current the site content is. Since the Circle group is not very technical, this non-technical approach
will allow them to have the information and use it for actions and decisions.




                                                    5
                                                              Functionality
                                                          circleofsistersatlanta.org
                                                                 Peter McCall
         Attachment A – Directions, CSS, and HTML for Vertical drop-down Menu
CSS and XHTML drop-down menu (vertical and horizontal)
How to create an drop-down menu that contains several menus that each have sub.menus. This tutorial was updated in August 2004 to be
simpler and to add functions especially concerning accessibility.

Note: This update was inspired for the Javascript part of the excellent ElMoustiko's tutorial (fr)... a young designer who will go far!
Also, read about this other approach (fr) signed Jep, very interesting and that will show you other techniques to create drop-down menus.

Why do I need to use Javascript?
A drop-down menu can very well be created only with CSS, without using any scripts languages, so why use Javascript
in this tutorial? There are two reasons for this.

          The first one is that the original function for CSS sheets is to take care of the page setting and not of the dynamic aspects of the
           document. The dynamics belongs to Javascript (or ECMAScript). The pseudo-class (:hover) is really in between these: it define a
           reaction when hovering, but it could also be used for more dynamic applications.
          The second reason for this is that the pseudo-class (:hover) used correctly would enable you to create this type of drop-down menu
           easily and without using Javascript is unfortunately not really well understood by navigators such as Internet Explorer (With IE, this
           pseudo-class is not taken in consideration unless applies to the <a>) tag.

There is no choice but to use a Javascript function to display/mask the sub-menus and we will call this function by using "onmouseover" or
"onclick" detectors. We will also use the Definition Lists (<dl>, <dt> and <dd>) for our drop-down menu's structure. <dl> will contain the menu.
<dt> will be the "title", that is "menu1", "menu2", ... and <dd> will define each sub-menu.

Definitions lists and menus?
A menu is a list of elements being displayed vertically or horizontally. Using lists (<ul> et <li>) is the best semantic choice to structure a simple
menu. Drop-down menus are a particular case since there is a hierarchy within menus and sub-menus. Lists(ul, li) on the other hand cannot
express this hierarchy structurally and clearly (unless you want to place title tags within the menu).

Definitions lists can be used to structure this kind of menu since the W3C definition is quite unclear to allow this kind of use. If there is a direct
relation between elements, definitions lists can be used this way. In this case, each menu element (dt) will be defined by its sub-menus (dd).

A few websites already have developed this structure: example of a translation on Pompage.net, example of the Microsoft menu revisited:
CSS will define the menus (dt) and sub-menus (dd and li list). It will also define that sub-menus should be hidden by default.

Vertical Drop-Down Menu

View result
Vertical drop-down menu will need three complimenting parts to work out:
           (X)HTML code to define the general structure (use of definitions lists for example)
           Javascript script to define behavior when menus are hovered onto
           CSS code to define format and elements positioning

Structure: HTML
As I explained in the introduction, the menu structure will be created with lists (ul/li) and definitions lists. DT tags will define parent menus and
DD tags will encompass sub-menus. There are four planned menus. Each one of the parent menu has sub-menus, except for the first one -this
one won't have sub-menus but a direct link to another page.

Everything can be configured according to your preferences or needs. Behavior when hovered onto is defined as follows: when clicking (onclick)
on a parent menu (dt) the sub-menu indicated in the "show" function will appear. If no sub-menu is defined there, then the behavior will be to
shut down the sub--menus that are already showing.

HTML code:
<dl id="menu">
<dt onclick="javascript:show();"><a href="#">Menu 1</a></dt>
<dt onclick="javascript:show('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">sub-menu 2.1</a></li>
<li><a href="#">sub-menu 2.2</a></li>
<li><a href="#">sub-menu 2.3</a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>


                                                                           6
                                                            Functionality
                                                        circleofsistersatlanta.org
                                                               Peter McCall
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.1</a></li>
</ul>
</dd>
</dl>

Behavior: Javascript
A Javascript script will define behavior when clicking on parent menus. When the function is called with "onclick", here is what happens: tos
tart, all sub-menus close (display:none), then the sub-menu indicated in the "onclick" will appear (display:block). If no sub-menu is specified, as
in menu 1, only the first phase occurs. All displayed sub-menus close.

Window onload?
As you can see in the Javascript code below, the script calls the function "show()" when the page is charging. When calling ("show" empty), all
sub-menus that were apparent go in hiding as soon as the document loads up. t would have been easier to mask these sub-menus by defining
their CSS with "display:none", which was the case in the first version of this tutorial.

So why use avascript to get the same effect?

The point is that it is more accessible that way, it is easier to operate: there is a lot of internet users' machines with disabled javascript.
For these users, the menu must stay accessible, which would not have been the case if the sub-menus had been hidden with CSS, because then
they would stay hidden. For our purpose, menus are hidden when the document loads up, but only if Javascript is enabled. In all other cases,
the menu stays navigable even if no behavior of hovering is started.

Javascript code - to place in HEAD tags:
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

Formating: CSS
CSS code will position the different elements, format them (color, background, border, and more) and mask sub-menus when the page will be
charging by applying a "display:none" on these sub-menus (dd).

Here is the complete CSS code to place in HEAD tags or in a separate .css file without <style type="text/css"media-"screen" and </style> tags:
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 15em;
}


                                                                         7
                                                           Functionality
                                                       circleofsistersatlanta.org
                                                              Peter McCall
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>

Now the vertical drop-down menu is working!

Horizontal Drop-Down Menu
Based on the same principle, here are the codes to create a horizontal drop-down menu. This time we will use "onmouseover" detector instead
of "onclick".

Note for accessibility: As Chantal remarked: don't forget that all functions that are triggered by an event must be independent from the tool
that was used. It is recommended to use onfocus and onblur as a complement to onmouseover and onmouseout for example.

Careful with alignment! Drop-down menus use the property "display:block" and "display:none". At first and when they are masked, sub-menus
have the value none", this means that they don't occupy any space on the page. When they appear, they occupy a space that did not exist
before, and they can "push" the rest of your site! This is why in these cases, the menu and site should always be positioned separately, each in
absolute position and they need to be given a separate z-index depth) as you can see on the sample result. In this case the menu will be placed
above the rest of the site and will appear without disturbing it.

HTML code:
<div id="menu">
<dl>
<dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">sub-menu 1.1</a></li>
<li><a href="#">sub-menu 1.2</a></li>
<li><a href="#">sub-menu 1.3</a></li>
<li><a href="#">sub-menu 1.4</a></li>
<li><a href="#">sub-menu 1.5</a></li>
<li><a href="#">sub-menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.2</a></li>
<li><a href="#">sub-menu 3.3</a></li>
<li><a href="#">sub-menu 3.4</a></li>
<li><a href="#">sub-menu 3.5</a></li>
</ul>
</dd>


                                                                       8
                                                               Functionality
                                                           circleofsistersatlanta.org
                                                                  Peter McCall
</dl>
<dl>
<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>

Javascript function is strictly the same than for vertical drop-down menu (see above).

CSS code:
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>




                                                                            9
                                                        Functionality
                                                    circleofsistersatlanta.org
                                                           Peter McCall
Variation: disappearing sub-menus:
The above version lets sub-menus appear even when they are not hovered over. If you'd rather have them disappear when the mouse is not
positioned over them any longer, you only need to add the behavior: onmouseout="javascript:show()" on the sub-menus (dd) as in the
following code:

<div id="menu">
<dl>
<dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">sub-menu 1.1</a></li>
<li><a href="#">sub-menu 1.2</a></li>
<li><a href="#">sub-menu 1.3</a></li>
<li><a href="#">sub-menu 1.4</a></li>
<li><a href="#">sub-menu 1.5</a></li>
<li><a href="#">sub-menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">sub-menu 2.1</a></li>
<li><a href="#">sub-menu 2.2</a></li>
<li><a href="#">sub-menu 2.3</a></li>
<li><a href="#">sub-menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.2</a></li>
<li><a href="#">sub-menu 3.3</a></li>
<li><a href="#">sub-menu 3.4</a></li>
<li><a href="#">sub-menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
</dl>


Raphaël GOETTER
www.alsacreations.com




                                                                  10
                                        Functionality
                                     circleofsistersatlanta.org
                                            Peter McCall
                      Attachment B – Password Protection
<?php

###############################################################
# Page Password Protect 2.13
###############################################################
# Visit http://www.zubrag.com/scripts/ for updates
###############################################################
#
# Usage:
# Set usernames / passwords below between SETTINGS START and SETTINGS END.
# Open it in browser with "help" parameter to get the code
# to add to all files being protected.
#    Example: password_protect.php?help
# Include protection string which it gave you into every file that needs to be protected
#
# Add following HTML code to your page where you want to have logout link
# <a href="http://www.example.com/path/to/protected/page.php?logout=1">Logout</a>
#
###############################################################

/*
-------------------------------------------------------------------
SAMPLE if you only want to request login and password on login form.
Each row represents different user.

$LOGIN_INFORMATION = array(
  'zubrag' => 'root',
  'test' => 'testpass',
  'admin' => 'passwd'
);

--------------------------------------------------------------------
SAMPLE if you only want to request only password on login form.
Note: only passwords are listed

$LOGIN_INFORMATION = array(
  'root',
  'testpass',
  'passwd'
);

--------------------------------------------------------------------
*/

##################################################################
# SETTINGS START
##################################################################

// Add login/password pairs below, like described above
// NOTE: all rows except last must have comma "," at the end of line
$LOGIN_INFORMATION = array(
  'zubrag' => 'root',
  'admin' => 'adminpass'
);

// request login? true - show login and password boxes, false - password box only
define('USE_USERNAME', true);

// User will be redirected to this page after logout
define('LOGOUT_URL', 'http://www.example.com/');

// time out after NN minutes of inactivity. Set to 0 to not timeout
define('TIMEOUT_MINUTES', 0);

// This parameter is only useful when TIMEOUT_MINUTES is not zero
// true - timeout time from last activity, false - timeout time from login


                                                11
                                          Functionality
                                     circleofsistersatlanta.org
                                            Peter McCall
define('TIMEOUT_CHECK_ACTIVITY', true);

##################################################################
# SETTINGS END
##################################################################


///////////////////////////////////////////////////////
// do not change code below
///////////////////////////////////////////////////////

// show usage example
if(isset($_GET['help'])) {
  die('Include following code into every page you would like to protect, at the very beginning
(first line):<br>&lt;?php include("' . str_replace('\\','\\\\',__FILE__) . '"); ?&gt;');
}

// timeout in seconds
$timeout = (TIMEOUT_MINUTES == 0 ? 0 : time() + TIMEOUT_MINUTES * 60);

// logout?
if(isset($_GET['logout'])) {
  setcookie("verify", '', $timeout, '/'); // clear password;
  header('Location: ' . LOGOUT_URL);
  exit();
}

if(!function_exists('showLoginPasswordProtect')) {

// show login form
function showLoginPasswordProtect($error_msg) {
?>
<html>
<head>
  <title>Please enter password to access this page</title>
  <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
</head>
<body>
  <style>
    input { border: 1px solid black; }
  </style>
  <div style="width:500px; margin-left:auto; margin-right:auto; text-align:center">
  <form method="post">
    <h3>Please enter password to access this page</h3>
    <font color="red"><?php echo $error_msg; ?></font><br />
<?php if (USE_USERNAME) echo 'Login:<br /><input type="input" name="access_login" /><br
/>Password:<br />'; ?>
    <input type="password" name="access_password" /><p></p><input type="submit" name="Submit"
value="Submit" />
  </form>
  <br />
  <a style="font-size:9px; color: #B0B0B0; font-family: Verdana, Arial;"
href="http://www.zubrag.com/scripts/password-protect.php" title="Download Password
Protector">Powered by Password Protect</a>
  </div>
</body>
</html>

<?php
  // stop at this point
  die();
}
}

// user provided password
if (isset($_POST['access_password'])) {

 $login = isset($_POST['access_login']) ? $_POST['access_login'] : '';
 $pass = $_POST['access_password'];


                                                12
                                            Functionality
                                         circleofsistersatlanta.org
                                                Peter McCall
  if (!USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION)
  || (USE_USERNAME && ( !array_key_exists($login, $LOGIN_INFORMATION) ||
$LOGIN_INFORMATION[$login] != $pass ) )
  ) {
    showLoginPasswordProtect("Incorrect password.");
  }
  else {
    // set cookie if password was validated
    setcookie("verify", md5($login.'%'.$pass), $timeout, '/');

        // Some programs (like Form1 Bilder) check $_POST array to see if parameters passed
        // So need to clear password protector variables
        unset($_POST['access_login']);
        unset($_POST['access_password']);
        unset($_POST['Submit']);
    }

}

else {

    // check if password cookie is set
    if (!isset($_COOKIE['verify'])) {
      showLoginPasswordProtect("");
    }

    // check if cookie is good
    $found = false;
    foreach($LOGIN_INFORMATION as $key=>$val) {
      $lp = (USE_USERNAME ? $key : '') .'%'.$val;
      if ($_COOKIE['verify'] == md5($lp)) {
        $found = true;
        // prolong timeout
        if (TIMEOUT_CHECK_ACTIVITY) {
          setcookie("verify", md5($lp), $timeout, '/');
        }
        break;
      }
    }
    if (!$found) {
      showLoginPasswordProtect("");
    }

}

?>




                                                    13
                                            Functionality
                                         circleofsistersatlanta.org
                                                Peter McCall
         Attachment C – Rounded Corners with Nifty Corners Cube




                                                                                by Alessandro Fulciniti

COMMENT: This attachment only represents a portion of the directions and examples
offered. For the full document, go to the following URL:
http://www.html.it/articoli/niftycube/index.html


More than one year has passed from the first version of Nifty Corners. While it was more of a proof of
concept, and the second version presented some big improvements, there was still something
missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous
versions. Let's start.

New features
If you're new to Nifty Corners, I suggest to look in particular at the article on the first version to
understand the concept behind them. Basically, Nifty Corners are a solution based on CSS and
Javascript to get rounded corners without images.

There are several improvements and new features introduced in Nifty Corners Cube which make it
more versatile and simpler to use than the previous versions:


       The numbers of parameters has been reduced from four of the first version and five of the
        second version to just two, of which one is optional.
       It's not necessary specify the colors anymore, since they are detected automatically.
       They're easier to integrate into the design process, since the padding (both horizontal and
        vertical) of elements to round is preserved
       It's easier to use them with other scripts
       The support of CSS selectors has been improved and expanded
       Just a single line in the head section is now needed for the whole library: even if they're still
        based on both CSS and javascript, the presentational CSS for Nifty Corners is loaded
        automatically by js
       They're now released under GPL licence.

Together with the many novelties, that we'll discover through several examples, two features of the
previous version has been abandoned. First, the support in Internet Explorer 5.0/Win has been totally
dropped. Users of this browser will simply see squared corners, just as users with javascript disabled.
The support remains very good however: the examples of the articles have all been tested
successfully in IE5.5, IE6 and IE7 beta 2 preview, Opera 8.5, Firefox 1.5 and Safari 2.0. I had to drop
even Nifty Corners with borders for compatibility issues I've had with IE and the new approach of the
script.

Nifty Corners Cube: introduction
Nifty Corners Cube are a solution to get rounded corners without images, and this third version is
build by three main components:

                                                     14
                                                    Functionality
                                                 circleofsistersatlanta.org
                                                        Peter McCall
         A javascript file, named "niftycornerscube.js"
         A CSS file, named "niftycorners.css"
         The javascript calls specific for the pages

Now we're now ready to look at the first example: it's a div with big rounded corners thanks to Nifty
Corners. As I said before, the CSS file it's added automatically by javascript. In fact, the only
reference to an external file in the example is the following:

<script type="text/javascript" src="niftycube.js"></script>

Regarding the third point, as is the javascript calls needed for the page, the code for the example is
the following:

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

In bold I've reported the part of the script that depends on the page, and that is the call for the
function Nifty. This function is the core of the whole library, and receives two parameters that are the
strength point of the script. Parameters have to be specified between quotes and separated by a
comma. The first parameter is for the CSS selector that targets the elements to round, while the
second parameter is for options for default cases could be omitted. Let's see them in depth.

The parameters
The first parameter is for the CSS selector to targets the elements on which apply Nifty Corners. The
CSS selectors accepted are: tag selector, id selector, descendant selector (with id or class) and
grouping. The following table shows some example:

                                Selector                                         Example




tag selector                                                    "p"
                                                                "h2"
id selector                                                     "div#header"
                                                                "h2#about"
class selector                                                  "div.news"
                                                                "span.date"
                                                                "p.comment"
descendant selector (with id)                                   "div#content h2"
                                                                "div#menu a"
descendant selector (with class)                                "ul.news li"
                                                                "div.entry h4"

grouping (any number and combination of the previous selectors) "h2,h3"
                                                                "div#header,div#content,div#footer"
                                                                "ul#menu li,div.entry li"




Talking about options: they're identified by keywords and they can be specified in any order and
number. Let's see them:


  keyword                                                          meaning


                                                              15
                                                        Functionality
                                                    circleofsistersatlanta.org
                                                           Peter McCall
     keyword                                                            meaning

tl              top left corner

tr              top right corner

bl              bottom left corner

br              bottom right corner

top             upper corners

bottom          lower corners

left            left corners

right           right corners

all (default)   all the four corners

none            no corners will be rounded (to use for nifty columns)

small           small corners (2px)

normal          normal size corners (5px)
(default)
big             big size corners (10px)

transparent     inner transparent, alias corners will be obtained. This option activates automatically if the element to round does not
                have a background-color specified.

fixed-height    to be applied when a fixed height is set via CSS

same-height     Parameter for nifty columns: all elements identified by the CSS selector of the first parameter will have the same
                height. If the effect is needed without rounded corners, simply use this parameter in conjuction with the keyword
                none.




                                                                   16
                                          Functionality
                                       circleofsistersatlanta.org
                                              Peter McCall
                        ATTACHMENT D – BOOKMARK JAVASCRIPT
Bookmark this page javascript example
This one is the one used….This supports both IE and Firefox. BUT I did not use the button approach
<!-- Paste this code into an external JavaScript file named: bookMark.js                             -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Philip Myers :: http://virtualipod.tripod.com/bookmark.html */

function bookmark(url,title){
  if ((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion) >= 4)) {
  window.external.AddFavorite(url,title);
  } else if (navigator.appName == "Netscape") {
    window.sidebar.addPanel(title,url,"");
  } else {
    alert("Press CTRL-D (Netscape) or CTRL-T (Opera) to bookmark");
  }
}
<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file. -->
<script type="text/javascript" src="bookMark.js"></script>

<!-- Paste this code into the BODY section of your HTML document -->
<form action="#">
<input type="button" value="Bookmark us!"
onclick="bookmark('http://javascript.internet.com/','JavaScript Source')">
</form>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>




                                                  17

								
To top