Photogallery - Java - CSS - xhtml [Archive]

View Full Version : Photogallery - Java - CSS - xhtml

csanders984

13th July 10, 03:29 PM

For the life of me I can't figure out how to get this photo gallery to work It's supposed to look like this:
http://www.robertnyman.com/jas/Vanilla/index.htm

But I get this, after following the instructions AND POSTING IN MY SITE:
http://www.littlehouseontheperry.net/media.html

Here's my HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>

<script type="text/javascript" src="js/jas.js"></script>
<style type="text/css">
@import url("css/jas.css");
</style>

<link rel="stylesheet" href="css/ie.css" type="text/css">
<title>Little House on the Perry Curriculm</title>
</head>

<div class= "wrap">
<body>
<div class="logo"> <img src="images/logo_perry.gif" /></div>

<div id="navibar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="media.html">Curriculm</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="Contact.html">Contact</a></li>

</ul>

</div>
<div id="new">
<h1> Curriculum:</h1>
<p>The curriculum I offer is a creative curriculum which involves: Social / Emotional Development Physical Development Cognitive Development Language Development Integration of the ISBE, technology, fine and performing arts All of this while making love and safety my number one priority!</p>
</div>

<div id="container">

<h1>Photo Gallery</h1>

<div id="jas-frame">
<div id="jas-tags">
<h3>Tags:</h3>
<p>
<input type="checkbox" id="jas-select-all-tags" checked="checked">
<label for="jas-select-all-tags">Select all</label>
</p>
</div>

<div id="jas-container">
<img src="images/gallery/Links & Blocks/scan0010.jpg" width="600" height="500" id="jas-image" />
<h2 id="jas-image-text">Cirriculum Gallery</h2>
</div>
</div>

<ul id="navigation-controls">
<li><a id="previous-image" href="index.htm">Previous</a></li>
<li id="image-counter">1 / 12</li>

<li><a id="next-image" href="index.htm">Next</a></li>
<li class="slideshow-item">
<a id="start-slideshow" href="index.htm">Start slideshow</a>
<a id="stop-slideshow" href="index.htm">Stop slideshow</a>
</li>
</ul>

<div id="jas-thumbnails">

</div>

<div id="navibar2">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="media.html">Curriculm</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="Contact.html">Contact</a></li>

</ul> </div>

</body>
</div>
</html>

csanders984

13th July 10, 03:38 PM

The CSS for the Gallery.. I think.

/* Importing other styles */
@import url("fonts.css");

/* Tag-specific */
html, body, form, fieldset, li, h1, h2, h3, h4, h5, h6, p, ul, dl, dt, dd, input{
margin: 0;
padding: 0;
}

dl, p, ul, ol{
margin: 0 0 1em;
padding: 0;
}

a{
color: #3a5483;
}

dt{
font-weight: bold;
}

body{
background: #fff;
}

form label{
cursor: pointer;
}

img{
border: none;
}

input{
vertical-align: middle;
}

/* General */
div#container{
width: 450px;
margin: 2em auto;
}

div#jas-container{
/* Width HAS to be here for IE to render the filter */
width: 320px;
}

div#jas-frame{
float: left;
width: 430px;
margin: 10px 0;
padding: 10px;
border: 1px solid #666;
}

div#jas-tags{
float: right;
width: 100px;
}

div#jas-tags h3{
margin-bottom: 1em;
}

div#jas-tags ul{
list-style: none;
}

div#jas-tags ul li{
margin-bottom: 0.3em;
}

div#jas-tags ul li input{
margin-right: 3px;
}

div#jas-thumbnails{
float: left;
clear: left;
width: 448px;
margin-top: 1em;
border: 1px solid #666;
}

div#jas-thumbnails ul{
list-style: none;
width: 440px;
margin: 10px 0 10px 10px;
overflow: hidden;
}

div#jas-thumbnails ul li{
float: left;
width: 100px;
height: 75px;
margin: 0 10px 10px 0;
}

div#jas-thumbnails ul li img{
width: 100px;
height: 75px;
cursor: pointer;
}

div#jas-thumbnails ul li.selected-parent{
width: 96px;
height: 71px;
padding: 1px;
border: 1px solid #f60;
}

div#jas-thumbnails ul li img.selected{
width: 96px;
height: 71px;
}

h2#jas-image-text{
text-align: center;
}

img#jas-image{
margin-bottom: 1em;
}

ul#links{
display: block;
clear: left;
padding: 2em 0 1em 4em;
}

ul#links li{
line-height: 2em
}

ul#navigation-controls{
width: 260px;
list-style: none;
margin: 0 auto;
}

ul#navigation-controls li{
float: left;
line-height: 1.5em;
margin-right: 0.5em;
}

ul#navigation-controls li#image-counter{
margin: 0 0.75em 0 0.5em;
}

li.slideshow-item{
margin-left: 3em;
}

csanders984

13th July 10, 03:41 PM

The JAVA part 1 (of 3)

// ---
/*
JaS is developed by Robert Nyman, http://www.robertnyman.com
For more information, please see http://www.robertnyman.com/jas
*/
var JaS = {
// Customization parameters
imagePath : "images/gallery/",
images : [
["scan0010.jpg", "Links&Blocks", "Links&Blocks"],
["scan0010.jpg", "Links&Blocks", "Links&Blocks"],
["scan0010.jpg", "Links&Blocks", "Links&Blocks"],
["scan0010.jpg", "Links&Blocks", "Links&Blocks"],
["scan0010.jpg", "Health", "Health"],
["scan0010.jpg", "Health", "Health"],
["scan0010.jpg", "Enviorment", "Enviorment"], // Separate multiple tags by a comma
["scan0010.jpg", "Enviorment", "Enviorment"],
["scan0010.jpg", "Meeting room", "kids"],
["scan0010.jpg", "Computers", "Computers"],
["scan0010.jpg", "Computers", "Computers"],
["scan0010.jpg", "Arts&Crafts", "Arts&Crafts"]
["scan0010.jpg", "Arts&Crafts", "Arts&Crafts"]
["scan0010.jpg", "Career", "Career"]
["scan0010.jpg", "Career", "Career"]
["scan0010.jpg", "Career", "Career"]
["scan0010.jpg", "Career", "Career"]
],
fadeContainerId : "jas-container",
imageContainerId : "jas-image",
imageTextContainerId : "jas-image-text",
previousLinkId : "previous-image",
nextLinkId : "next-image",
imageCounterId : "image-counter",
startSlideShowId : "start-slideshow",
stopSlideShowId : "stop-slideshow",
dimBackgroundOverlayId : "jas-dim-overlay",
dimBackgroundId : "dim-background",
noDimBackgroundId : "no-dim-background",
thumbnailContainerId: "jas-thumbnails",
tagsContainerId: "jas-tags",
tagsSelectAllId: "jas-select-all-tags",
useImageText : true,
useThumbnails : true,
allowDimmedBackground : true,
automaticallyDimBackgroundWhenSlideShow : true,
useTags : true,
useKeyboardShortcuts : true,
useFadingIn : true,
useFadingOut : true,
useFadeWhenNotSlideshow : false,
useFadeForSlideshow : true,
useFadeAtInitialLoad : false,
fadeIncrement : 0.1,
fadeInterval : 100, // Milliseconds
timeForSlideInSlideshow : 1500, // Milliseconds

// JaS function parameters
allImages : null,
currentImages : null,
fadeContainer : null,
imageContainer : null,
imageTextContainer : null,
previousLink : null,
nextLink : null,
dimBackgroundOverlay : null,
dimBackgroundLink : null,
noDimBackgroundLink : null,
dimmingActivated : false,
imageCounter : null,
startSlideShowLink : null,
stopSlideShowLink : null,
thumbnailContainer : null,
thumbnailCollection : [],
currentThumbnailSelected : null,
tagsContainer : null,
tagsSelectAll : null,
tagsList : null,
tags : [],
tagsCheckboxes : [],
selectAllTags : true,
imageText : null,
imageText : "",
imageSource : "",
imageIndex : 0,
fadingIn : true,
fadeLevel : 0,
fadeEndLevel : 1,
fadeTimer : null,
hasOpacitySupport : false,
useMSFilter : false,
useMSCurrentStyle : false,
slideshowIsSupported : false,
slideshowIsPlaying : false,
functionAfterFade : null,
isInitialLoad : false,

init : function (){
if($){
this.fadeContainer = $(this.fadeContainerId);
this.imageContainer = $(this.imageContainerId);
this.slideshowIsSupported = this.fadeContainer && this.imageContainer;
if(this.slideshowIsSupported){
this.allImages = this.images;
this.currentImages = this.images;
if(this.useImageText){
this.imageTextContainer = $(this.imageTextContainerId);
if(!this.imageTextContainer){
this.useImageText = false;
}
}
this.hasOpacitySupport = typeof this.fadeContainer.style.filter != "undefined" || typeof this.fadeContainer.style.opacity != "undefined";
this.useMSFilter = typeof this.fadeContainer.style.filter != "undefined";
this.useMSCurrentStyle = typeof this.fadeContainer.currentStyle != "undefined";

this.previousLink = $(this.previousLinkId);
this.previousLink.onclick = JaS.previousLinkClick;
this.nextLink = $(this.nextLinkId);
this.nextLink.onclick = JaS.nextLinkClick;
this.imageCounter = $(this.imageCounterId);
this.startSlideShowLink = $(this.startSlideShowId);
if(this.startSlideShowLink){
this.startSlideShowLink.style.display = "inline";
}
this.startSlideShowLink.onclick = JaS.startSlideShowClick;
this.stopSlideShowLink = $(this.stopSlideShowId);
if(this.stopSlideShowLink){
this.stopSlideShowLink.style.display = "none";
}
this.stopSlideShowLink.onclick = JaS.stopSlideshowClick;

if(this.allowDimmedBackground){
this.dimBackgroundOverlay = $(this.dimBackgroundOverlayId);
this.dimBackgroundLink = $(this.dimBackgroundId);
this.noDimBackgroundLink = $(this.noDimBackgroundId);
if(this.dimBackgroundOverlay && this.dimBackgroundLink && this.noDimBackgroundLink){
this.dimBackgroundLink.onclick = JaS.dimBackgroundClick;
this.noDimBackgroundLink.onclick = JaS.noDimackgroundClick;
this.noDimBackgroundLink.style.display = "none";
this.dimmingActivated = true;
}
}

if(this.useKeyboardShortcuts){
document.onkeydown = JaS.documentKeyDown;
}

this.thumbnailContainer = $(this.thumbnailContainerId);
if(this.useThumbnails && this.thumbnailContainer){
this.createThumbnails();
}

this.tagsContainer = $(this.tagsContainerId);
if(this.useTags && this.tagsContainer){
this.tagsSelectAll = $(this.tagsSelectAllId);
if(this.tagsSelectAll){
this.tagsSelectAll.onclick = JaS.tagsSelectAllClick;
this.createTagList();
}
}

this.isInitialLoad = true;
this.setImage();
this.isInitialLoad = false;
}
}
},

previousLinkClick : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.preventDefaultEventBehavior(oEvent);
JaS.previousImage();
},

nextLinkClick : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.preventDefaultEventBehavior(oEvent);
JaS.nextImage();
},

startSlideShowClick : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.preventDefaultEventBehavior(oEvent);
JaS.startSlideshow();
},

stopSlideshowClick : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.preventDefaultEventBehavior(oEvent);
JaS.stopSlideshow();
},

dimBackgroundClick : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.preventDefaultEventBehavior(oEvent);
JaS.dimBackground();
},

documentKeyDown : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.applyKeyboardNavigation(oEvent);
},

tagsSelectAllClick : function (oEvent){
JaS.tagsSelectAll = this.checked;
JaS.markAllTags();
},

noDimackgroundClick : function(oEvent){
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
JaS.preventDefaultEventBehavior(oEvent);
JaS.noDimBackground();
},

setImage : function (){
if(this.currentImages.length > 0){
this.imageContainer.style.visibility = "visible";
this.imageSource = this.currentImages[this.imageIndex][0];
this.imageText = this.currentImages[this.imageIndex][1];
if(this.useFadingOut && (this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow) && (this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad)){
this.fadeOut();
}
else{
this.displayImageCount();
this.imageContainer.setAttribute("src", (this.imagePath + this.imageSource));
this.setImageText();
this.previousLink.style.visibility = (this.imageIndex > 0)? "visible" : "hidden";
this.nextLink.style.visibility = (this.imageIndex < (this.currentImages.length - 1))? "visible" : "hidden";
if((this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad) && ((this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow))){
this.fadeIn();
}
}
if(this.useThumbnails){
this.markCurrentThumbnail();
}
}
else{
this.imageSource = "";
this.imageText = "";
this.displayImageCount();
this.imageContainer.style.visibility = "hidden";
this.setImageText();
}

csanders984

13th July 10, 03:43 PM

The JAVA part 2

},

displayImageCount : function (){
if(this.imageCounter){
this.imageCounter.innerHTML = (((this.currentImages.length > 0)? this.imageIndex : -1) + 1) + " / " + this.currentImages.length;
}
},

nextImage : function (){
if(this.imageIndex < (this.currentImages.length - 1)){
++this.imageIndex;
this.setImage();
}
else if(this.slideshowIsPlaying){
this.stopSlideshow();
this.imageIndex = 0;
this.setImage();
}
},

previousImage : function (){
if(this.imageIndex > 0){
--this.imageIndex;
this.setImage();
}
},

setImageText : function (){
this.imageTextContainer.setAttribute("alt", this.imageText);
if(this.useImageText && typeof this.imageText == "string"){
this.imageTextContainer.innerHTML = this.imageText;
}
},

setDimBackgroundSize : function(){
var oDimBackground = this.dimBackgroundOverlay.style;
var intWidth = document.body.offsetWidth;
var intXScroll = (typeof window.pageXOffset != "undefined")? window.pageXOffset : document.body.scrollLeft;
var intHeight = (typeof window.innerHeight != "undefined")? window.innerHeight : (document.documentElement)? document.documentElement.clientHeight : document.body.clientHeight;
var intYScroll = (typeof window.window.pageYOffset != "undefined")? window.window.pageYOffset : (document.documentElement)? document.documentElement.scrollTop : document.documentElement.scrollTop;
oDimBackground.width = intWidth + intXScroll + "px";
oDimBackground.height = intHeight + intYScroll + "px";
},

dimBackground : function (){
this.setDimBackgroundSize();
this.dimBackgroundOverlay.style.display = "block";
this.noDimBackgroundLink.style.display = "inline";
},

noDimBackground : function (fromStopSlideshow){
this.dimBackgroundOverlay.style.display = "none";
this.noDimBackgroundLink.style.display = "none";
if(!fromStopSlideshow){
this.stopSlideshow();
}
},

startSlideshow : function (){
if(this.currentImages.length > 0){
this.startSlideShowLink.style.display = "none";
this.stopSlideShowLink.style.display = "inline";
this.slideshowIsPlaying = true;
this.fadeTimer = setTimeout("JaS.nextImage()", JaS.timeForSlideInSlideshow);
if(this.dimmingActivated && this.automaticallyDimBackgroundWhenSlideShow){
this.dimBackground();
}
}
},

stopSlideshow : function (){
if(this.currentImages.length > 0){
this.startSlideShowLink.style.display = "inline";
this.stopSlideShowLink.style.display = "none";
this.slideshowIsPlaying = false;
this.setFadeParams(false, 1, 0);
this.setFade();
clearTimeout(this.fadeTimer);
if(this.dimmingActivated && this.automaticallyDimBackgroundWhenSlideShow){
this.noDimBackground(true);
}
}
},

fadeIn : function (){
this.setFadeParams(true, 0, 1);
this.functionAfterFade = null;
this.fade();
if(this.slideshowIsPlaying){
this.functionAfterFade = "this.startSlideshow()";
}

csanders984

13th July 10, 03:43 PM

Java PART 3

},

fadeOut : function (){
this.setFadeParams(false, 1, 0);
this.functionAfterFade = "this.fadeOutDone()";
this.fade();
},

fadeOutDone : function (){
this.displayImageCount();
this.imageContainer.setAttribute("src", (this.imagePath + this.imageSource));
this.setImageText();
if(this.useFadingIn){
this.fadeIn();
}
else{
this.fadeLevel = 1;
this.setFade();
}
},

fade : function (){
if((this.fadingIn && this.fadeLevel < this.fadeEndLevel) || !this.fadingIn && this.fadeLevel > this.fadeEndLevel){
this.fadeLevel = (this.fadingIn)? this.fadeLevel + this.fadeIncrement : this.fadeLevel - this.fadeIncrement;
// This line is b/c of a floating point bug in JavaScript
this.fadeLevel = Math.round(this.fadeLevel * 10) / 10;
this.setFade();
this.fadeTimer = setTimeout("JaS.fade()", this.fadeInterval);
}
else{
clearTimeout(this.fadeTimer);
if(this.functionAfterFade){
eval(this.functionAfterFade);
}
}
},

setFade : function (){
if(this.useMSFilter){
this.fadeContainer.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this.fadeLevel * 100) + ")";
}
else{
this.fadeContainer.style.opacity = this.fadeLevel;
}
},

setFadeParams : function (bFadingIn, intStartLevel, intEndLevel){
this.fadingIn = bFadingIn;
this.fadeLevel = intStartLevel;
this.fadeEndLevel = intEndLevel;
},

createThumbnails : function (){
this.thumbnailContainer.innerHTML = "";
this.thumbnailCollection = [];
var oThumbnailsList = document.createElement("ul");
var oListItem;
var oThumbnail;
var oCurrentImage;
for(var i=0; i<this.currentImages.length; i++){
oCurrentImage = this.currentImages[i];
oListItem = document.createElement("li");
oThumbnail = document.createElement("img");
oThumbnail.setAttribute("id", ("jas-thumbnail-" + i));
oThumbnail.setAttribute("src", (this.imagePath + oCurrentImage[0]));
oThumbnail.setAttribute("alt", oCurrentImage[1]);
oThumbnail.setAttribute("title", oCurrentImage[1]);
oThumbnail.onclick = JaS.thumbnailClick;
this.thumbnailCollection.push(oThumbnail);
oListItem.appendChild(oThumbnail);
oThumbnailsList.appendChild(oListItem);
}
this.thumbnailContainer.appendChild(oThumbnailsLis t);
if(this.thumbnailCollection.length > 0){
this.markCurrentThumbnail();
}
if(this.slideshowIsPlaying){
this.stopSlideshow();
}
},

thumbnailClick : function (oEvent){
JaS.imageIndex = parseInt(this.getAttribute("id").replace(/\D*(\d+)$/, "$1"), 10);
JaS.setImage();
},

markCurrentThumbnail : function (){
if(this.currentThumbnailSelected){
this.currentThumbnailSelected.className = "";
// Sometimes, in IE, the image loses its reference to its parent
if(this.currentThumbnailSelected.parentNode){
this.currentThumbnailSelected.parentNode.className = "";
}
}
this.currentThumbnailSelected = this.thumbnailCollection[this.imageIndex];
this.currentThumbnailSelected.className = "selected";
this.currentThumbnailSelected.parentNode.className = "selected-parent";
},

createTagList : function (){
var strCurrentTag;
var arrCurrentTag;
var oRegExp;
for(var i=0; i<this.images.length; i++){
arrCurrentTag = this.images[i][2].replace(/\s*(,)\s*/, "$1").split(",");
for(var j=0; j<arrCurrentTag.length; j++){
strCurrentTag = arrCurrentTag[j];
oRegExp = new RegExp(strCurrentTag, "i");
if(this.tags.toString().search(oRegExp) == -1){
this.tags.push(strCurrentTag);
}
}
}
this.tagsList = document.createElement("ul");
var oListItem;
var oTagCheckbox;
var oLabel;
for(var k=0; k<this.tags.length; k++){
oTag = this.tags[k];
oListItem = document.createElement("li");
oTagCheckbox = document.createElement("input");
oTagCheckbox.setAttribute("type", "checkbox");
oTagCheckbox.setAttribute("id", ("jas-" + oTag));
oTagCheckbox.setAttribute("value", oTag);
oTagCheckbox.checked = true;
oTagCheckbox.onclick = JaS.tagCheckboxClick;
oLabel = document.createElement("label");
oLabel.setAttribute("for", ("jas-" + oTag));
oLabel.innerHTML = oTag;
this.tagsCheckboxes.push(oTagCheckbox);
oListItem.appendChild(oTagCheckbox);
oListItem.appendChild(oLabel);
this.tagsList.appendChild(oListItem);
}
this.tagsContainer.appendChild(this.tagsList);
// This loop is necessary since IE can only mark checkboxes as checked after they've been added to the document
for(var l=0; l<this.tagsCheckboxes.length; l++){
this.tagsCheckboxes[l].checked = true;
}
},

tagCheckboxClick : function (oEvent){
JaS.applyTagFilter();
},

applyTagFilter : function (){
this.currentImages = [];
var arrCurrentTags = [];
var oCheckbox;
for(var i=0; i<this.tagsCheckboxes.length; i++){
oCheckbox = this.tagsCheckboxes[i];
if(oCheckbox.checked){
arrCurrentTags.push(oCheckbox.value);
}
}
var oRegExp;
var oImage;
for(var j=0; j<this.images.length; j++){
oImage = this.images[j];
for(var k=0; k<arrCurrentTags.length; k++){
oRegExp = new RegExp(arrCurrentTags[k], "i");
if(oImage[2].search(oRegExp) != -1){
this.currentImages.push(oImage);
break;
}
}
}

if(this.useThumbnails){
this.createThumbnails();
}
this.imageIndex = 0;
this.setImage();
},

markAllTags : function (){
for(var i=0; i<this.tagsCheckboxes.length; i++){
this.tagsCheckboxes[i].checked = this.tagsSelectAll;
}
this.applyTagFilter();
},

closeSession : function (oEvent){
JaS = null;
delete JaS;
},

applyKeyboardNavigation : function (oEvent){
var intKeyCode = oEvent.keyCode;
if(!oEvent.altKey){
switch(intKeyCode){
case 32:
this.slideshowIsPlaying = (this.slideshowIsPlaying)? false : true;
if(this.slideshowIsPlaying){
this.startSlideshow();
}
else{
this.stopSlideshow();
}
this.preventDefaultEventBehavior(oEvent);
break;
case 37:
case 38:
this.previousImage();
this.preventDefaultEventBehavior(oEvent);
break;
case 39:
case 40:
this.nextImage();
this.preventDefaultEventBehavior(oEvent);
break;
}
}
},

preventDefaultEventBehavior : function (oEvent){
if(oEvent){
oEvent.returnValue = false;
if(oEvent.preventDefault){
oEvent.preventDefault();
}
}
}
};
// ---
addEvent(window, "load", function(){JaS.init();}, false);
addEvent(window, "unload", function(){JaS.closeSession();}, false);
// ---
// Utility functions
function addEvent(oObject, strEvent, oFunction, bCapture){
if(oObject){
if(oObject.addEventListener){
oObject.addEventListener(strEvent, oFunction, bCapture);
}
else if(window.attachEvent){
oObject.attachEvent(("on" + strEvent), oFunction)
}
}
}
// ---
function $(strId){
return document.getElementById(strId);
}
// ---
if(typeof Array.prototype.push != "function"){
Array.prototype.push = ArrayPush;
function ArrayPush(value){
this[this.length] = value;
}
}
// ---