Newsvine
LinkedIn
Digg
Yahoo! 360°
del.icio.us
Bloglines
technorati
MySpace
Getting Work Done Through People
Getting People Done Through Work
eac_scripts.js JavaScript Library
eac_scripts.js
Documentation (54pg/828k)
Interested in using this software in your project? Contact Kevin at KBurkholder@EarthAsylum.com
Overview
eac_scripts.js is a modular utility JavaScript library and framework used to enhance visual and functional elements of a web page or site.
eac_scripts.js provides seven primary functions along with a number of utility functions.
The primary functions are:
- Popup browser windows.
- Popup on site-exit browser windows.
- Popup on-page "floating" windows.
- Tab creation and management.
- Automatic image and element roll-overs.
- Automatic vertical or horizontal sliding block elements.
- Access to PHP functions via Ajax requests to eac_scripts.helper.php.
The utility functions include:
- Element management using visual effects.
- JavaScript library management (load/unload).
- External Style Sheet management (load/unload).
- Cookie management (create, read, delete).
- Cross-browser access to key positioning elements.
eac_scripts.js requires the open-source "prototype.js" JavaScript library (http://prototypejs.org/) and will make use of the "scriptaculous" (http://script.aculo.us/) effects library if it is loaded.
Usage
eac_scripts.js must be loaded using a script tag in the <head> section of a document.
<script type="text/javascript" src="eac_scripts.js"></script>
Upon loading, eac_scripts.js loads each of the modules to create the EAC object that contains all of the methods. The modules loaded are controlled by the EAC.defaults.loadModules parameter and include:
- eac_scripts.window.js - EAC.floatingWindow() / EAC.onThisPage() methods.
- eac_scripts.exitpop.js - EAC.exitPop() / EAC.setExitPop() methods.
- eac_scripts.helper.js - Server requests using eac_scripts.helper.php.
- eac_scripts.tabber.js - Automatic tab generation.
- eac_scripts.rollover.js - Automatic rollover generation.
- eac_scripts.scroller.js - Smooth scrolling to page anchors.
- eac_scripts.slider.js - Automatic vertical or horizontal sliding block elements.
An alternative method to loading the eac_script modules is to use the optional “eac_scripts.php” program in the script tag and to specify the modules as a parameter to the program:
<script type="text/javascript" src="eac_scripts.php?load=window,helper,tabber"></script>
The benefit to this method is that all modules are loaded via a single http request and that eac_scripts.php reduces the response size and manages caching (see “eac_scripts.php” later in this document).
Once loaded, calls to eac_scripts.js functions use the EAC object name. The EAC class is designed to be used statically (meaning there is no need to use the "new EAC" class instantiation).
EAC.newWindow(‘document.html’,500,500);
EAC.setExitPop(‘document.html’,500,500);
EAC.onThisPage(‘document.html’,500,500);
variable = EAC.getElement(‘element-id’);
Some methods are designed to be instantiated to allow for more than one simultaneous occurrence and to provide better control of the object created.
object = new EAC.exitPop(‘document.html’,500,500);
object = new EAC.floatingWindow(‘document.html’,500,500);
All element management functions return a reference to the element object so that they may be chained with other JavaScript functions that operate on an element object.
EAC.getElementSize(EAC.blockShow(element));
Methods
Index
The Browser Object
- browser.isExplorer
- browser.isGecko
- browser.isMozilla
- browser.isWebKit
- browser.isKhtml
- browser.isOpera
- browser.version()
- browser.toString()
The Mouse Observer
- mouse.get()
- mouse.stop()
- mouse.addCallback()
Window Management Functions
- newWindow()
- exitPop()
- setExitPop()
- inWindow()
- floatingWindow()
- onThisPage()
Server Requests using eac_scripts.helper.php
- Request()
- $_SERVER()
- $_SESSION()
- $GLOBALS()
- $CONSTANT()
- $DEBUG()
- SetPW()
- trigger_error()
Style Sheet Management Functions
- CSS.load()
- CSS.unload()
- CSS.get()
JavaScript library Management Function
- JS.load()
- JS.unload()
- JS.get()
Cookie Management Functions
- cookie.set()
- cookie.get()
- cookie.erase()
Element Display Management Functions
- blockHide()
- blockShow()
- blockToggle()
- blockRemove()
- inlineHide()
- inlineShow()
- inlineToggle()
- effectHide()
- effectShow()
- effectToggle()
- effectRemove()
- elementIsVisible()
- elementIsTrulyVisible()
Miscellaneous Function
- Method getDocumentSize()
- Method getWindowSize()
- Method getElementTop()
- Method getElementLeft()
- Method getElementSize()
- Method getIframeSize()
- Method getCursorPosition()
- Method getScrollPosition()
- Method getComputedStyle()
- Method backgroundLayer()
- addWindowEvent()
- addDocumentEvent()
- parseURL()
- inArray()
- isDefined()
- explode_with_keys()
- implode_with_keys()
- typeOf()
- isType()
- toHash()
- hashMerge()
Tabs
Tabber works by searching for elements within the page with a specific class name. A <div> with a class name of "eacTabber" defines the tab block. Tabs within the tab block are defined by a <div> with a class name of "eacTabber-tab".
<div id="MenuTabset" class="eacTabber" style="background: #ccc;">
<div class="eacTabber-tab" title="MENU-1|menu-1">
<span style="padding-left: 6em"> </span>
<a href='#'>Link 1-1</a>
<a href='#'>Link 1-2</a>
<a href='#'>Link 1-3</a>
Notice how this tab set uses roll-overs to select the tab
</div>
<div class="eacTabber-tab" title="MENU-2|menu-2">
<span style="padding-left: 17em"> </span>
<a href='#'>Link 2-1</a>
<a href='#'>Link 2-2</a>
<a href='#'>Link 2-3</a>
The menu/tab names alternate when active/inactive
</div>
<div class="eacTabber-tab" title="MENU-3|menu-3">
<span style="padding-left: 28em"> </span>
<a href='#'>Link 3-1</a>
<a href='#'>Link 3-2</a>
<a href='#'>Link 3-3</a>
</div>
</div>
Tabber pulls the tab names from either the "title" of the eacTabber-tab <div> or by the content of a header (<h1>, <h2>, etc.) within the tab <div>. In the example above, the pipe (|) character within the title delimits the active and inactive title for the tab. If another pipe followed by a third title is present, it will be used as the tab name when hovering.
<div class="eacTabber-tab menuLink" title="MENU-1|menu-1|Menu-1">
Alternatively, a heading element could have been used for both the active and inactive title.
<div class="eacTabber-tab menuLink">
<h1>MENU-1</h1><h1>menu-1</h1>
When using heading elements, Tabber looks for the first heading tag (h1…h6) and uses it as the tab name. If a second heading element of the same type (h1…h6) is found it will be used for the inactive tab name. If a third heading element is found, it will be used as the tab name when hovering.
If there is no setting found for the inactive or hover tab name, the active tab name is used.
You may add a class name of "eacTabber-default" to any tab to designate that as the default selected tab.
<div class="eacTabber-tab eacTabber-default" title="MENU-2|menu-2">
An "href=" attribute may be added to the <div> tag to make the tab itself a clickable link (this only makes sense when the "rollover" parameter is true).
<div class="eacTabber-tab eacTabber-default" title="MENU-2" href="/index.php">
This is all that is needed in the html to set up tabs. The content of each tab is simply placed within the eacTabber-tab <div> elements.
Tabber was originally conceived and developed by Patrick Fitzgerald (http://www.barelyfitz.com). This version has been adapted to work within the eac_scripts framework and enhanced with many new features.
Rollovers
The Rollover module of eac_scripts is used to automatically create rollovers for images and other elements in an html document.
The rollover script must be loaded either automatically by setting the loadModules variable before loading eac_scripts.js or manually by including a script tag in your html.
eac_defaults.loadModules = "window,helper,rollover";
or
<script type="text/javascript" src="eac_scripts.rollover.js"></script>
Rollovers can be created by adding a single "rollover=" attribute to a tag name
For image rollovers, include the name of the alternate image file:
<img src="images/tri1.jpg" rollover="images/tri2.jpg" border="1" />
// image rollovers pre-load the image specified in the "rollover" parameter.
For other elements, include the element id that contains the content to be substituted when the element is rolled over:
<div id="MainContent" rollover="AltContent">
<p>this is the content seen when the mouse is not over this div</p>
</div>
<div id="AltContent" style="display:none">
<p>this is the content seen when the mouse is over the "MainContent" div</p>
</div>
More advanced options may be added to the "rollover" attribute by passing an associative array of values rather than a single value:
<img src="/tri1.jpg" rollover="{src: "/tri2.jpg", cssClass: "myclass"}" />
Example:
<div style="width: 40%; float: left;">
<img src="/images/Kevin-trans.gif" rollover="/images/smc-badge.gif" border="1" alt="altRollover" />
</div>
<div id="altRollover" style="width: 40%; float: left; display: none;">
<img src="/images/eac-badge.gif" rollover="{opacity: .5}" border="1" />
</div>
Slider
Slider works by searching for elements within the page with a specific class name. A <div> with a class name of “eacSlider” defines the block. Controls are defined with class names of “eacSlider-left”, “eacSlider-right”, “eacSlider-up”, and “eacSlider-down” (only one set of controls may be used – up/down for a vertical slider, left/right for a horizontal slider). The slider container (containing each element) has an id of “eacSlider-content. Elements within the sliding block are defined with a class name of “eacSlider-element”.
<div class="eacSlider">
<div class="eacSlider-left">Slide Left</div>
<div class="eacSlider-content">
<span class="eacSlider-element">ONE</span>
<span class="eacSlider-element">TWO</span>
<span class="eacSlider-element">THREE</span>
<span class="eacSlider-element">FOUR</span>
<span class="eacSlider-element">FIVE</span>
<span class="eacSlider-element">SIX</span>
</div>
<div class="eacSlider-right">Slide Right</div>
</div>
Slider was designed specifically to allow any type of element to be used, not just images. The layout of the slider is controlled via cascading style declarations.
.eacSlider {background: white; height: 9em;}
.eacSlider-left {float: left; padding: 1em; width: 3em; height: 5em;
color: green; cursor: pointer;}
.eacSlider-right {float: left; padding: 1em; width: 3em; height: 5em;
color: green; cursor: pointer;}
.eacSlider-content {float: left; padding: .5em; width: 38em; height: 7em;
border: solid 1px red; overflow: hidden;}
.eacSlider-element {float: left; margin: 1em; width: 7em; height: 5em;
display: block; border: 1px solid black; text-align: center;}
The code example above will produce a simple slider that looks something like this:
A more advanced example...
First, set the parameters to include a second slider by adding a class name. Then add the slider parameters for this slider:
<script type="text/javascript">
EAC.defaults.slider.mainClass = 'eacSlider,eacBanner',
Banner_slider = { // Banner matches the <div> id
speed : 2,
autoSlide : 8,
transition : 'spring',
};
</script>
Then add the style declarations...
.eacBanner {}
.eacBanner-left {}
.eacBanner-right {}
.eacBanner-content {width: 50em; float: left; overflow: hidden;}
.eacBanner-element {width: 80em; float: left; padding-top: .25em;}
#Banner {background: maroon; width: 90%; height: 2em;
font-size: 1.1em; font-weight: bold; color: white;
font-variant: small-caps; margin: 0; padding: 0; }
#Banner span {color: yellow; font-style: italic; }
And, finaly, the <div> block...
<div id="Banner" class="eacBanner">
<span class="eacBanner-left"></span>
<div class="eacBanner-content">
<div class="eacBanner-element">
<span>Maximizing:</span> IT Alignment with Business Objectives
</div>
<div class="eacBanner-element">
<span>Maximizing:</span> IT Planning Processes
</div>
<div class="eacBanner-element">
<span>Maximizing:</span> Project Management Capabilities
</div>
<div class="eacBanner-element">
<span>Maximizing:</span> Leadership & Management
</div>
<div class="eacBanner-element">
<span>Maximizing:</span> Return on IT Investment
</div>
<div class="eacBanner-element">
<span>Maximizing:</span> Competitive IT Strategies
</div>
</div>
<span class="eacBanner-right"></span>
</div>
Here's what we get...
