/***************************************************** * ypslideoutmenu * http://ypslideoutmenus.sourceforge.net/ * 3/04/2001 * * a nice little script to create exclusive, slide-out * menus for ns4, ns6, mozilla, opera, ie4, ie5 on * mac and win32. i've got no linux or unix to test on but * it should(?) work... * * licensed under afl 2.0 * http://www.opensource.org/licenses/afl-2.0.php * * revised: * - 08/29/2002 : added .hideall() * - 04/15/2004 : added .writecss() to support more * than 30 menus. * * --youngpup-- *****************************************************/ ypslideoutmenu.registry = [] ypslideoutmenu.anilen = 250 ypslideoutmenu.hidedelay = 500 ypslideoutmenu.mincpuresolution = 10 // constructor function ypslideoutmenu(id, dir, left, top, width, height) { this.ie = document.all ? 1 : 0 this.ns4 = document.layers ? 1 : 0 this.dom = document.getelementbyid ? 1 : 0 this.css = ""; if (this.ie || this.ns4 || this.dom) { this.id = id this.dir = dir this.orientation = dir == "left" || dir == "right" ? "h" : "v" this.dirtype = dir == "right" || dir == "down" ? "-" : "+" this.dim = this.orientation == "h" ? width : height this.hidetimer = false this.anitimer = false this.open = false this.over = false this.starttime = 0 // global reference to this object this.gref = "ypslideoutmenu_"+id eval(this.gref+"=this") // add this menu object to an internal list of all menus ypslideoutmenu.registry[id] = this var d = document var strcss = ""; strcss += '#' + this.id + 'container { visibility:hidden; ' strcss += 'left:' + left + 'px; ' strcss += 'top:' + top + 'px; ' strcss += 'width:' + width + 'px; ' strcss += 'height:' + height + 'px; ' strcss += 'overflow:hidden; z-index:10000; }' strcss += '#' + this.id + 'container, #' + this.id + 'content { position:absolute; ' strcss += '}' this.css = strcss; this.load() } } ypslideoutmenu.writecss = function() { document.writeln(''); } ypslideoutmenu.prototype.load = function() { var d = document var lyrid1 = this.id + "container" var lyrid2 = this.id + "content" var obj1 = this.dom ? d.getelementbyid(lyrid1) : this.ie ? d.all[lyrid1] : d.layers[lyrid1] if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrid2] : this.ie ? d.all[lyrid2] : d.getelementbyid(lyrid2) var temp if (!obj1 || !obj2) window.settimeout(this.gref + ".load()", 100) else { this.container = obj1 this.menu = obj2 this.style = this.ns4 ? this.menu : this.menu.style this.homepos = eval("0" + this.dirtype + this.dim) this.outpos = 0 this.accelconst = (this.outpos - this.homepos) / ypslideoutmenu.anilen / ypslideoutmenu.anilen // set event handlers. if (this.ns4) this.menu.captureevents(event.mouseover | event.mouseout); this.menu.onmouseover = new function("ypslideoutmenu.showmenu('" + this.id + "')") this.menu.onmouseout = new function("ypslideoutmenu.hidemenu('" + this.id + "')") //set initial state this.endslide() } } ypslideoutmenu.showmenu = function(id) { var reg = ypslideoutmenu.registry var obj = ypslideoutmenu.registry[id] if (obj.container) { obj.over = true // close other menus. for (menu in reg) if (id != menu) ypslideoutmenu.hide(menu) // if this menu is scheduled to close, cancel it. if (obj.hidetimer) { reg[id].hidetimer = window.cleartimeout(reg[id].hidetimer) } // if this menu is closed, open it. if (!obj.open && !obj.anitimer) reg[id].startslide(true) } } ypslideoutmenu.hidemenu = function(id) { // schedules the menu to close after ms, which // gives the user time to cancel the action if they accidentally moused out var obj = ypslideoutmenu.registry[id] if (obj.container) { if (obj.hidetimer) window.cleartimeout(obj.hidetimer) obj.hidetimer = window.settimeout("ypslideoutmenu.hide('" + id + "')", ypslideoutmenu.hidedelay); } } ypslideoutmenu.hideall = function() { var reg = ypslideoutmenu.registry for (menu in reg) { ypslideoutmenu.hide(menu); if (menu.hidetimer) window.cleartimeout(menu.hidetimer); } } ypslideoutmenu.hide = function(id) { var obj = ypslideoutmenu.registry[id] obj.over = false if (obj.hidetimer) window.cleartimeout(obj.hidetimer) // flag that this scheduled event has occured. obj.hidetimer = 0 // if this menu is open, close it. if (obj.open && !obj.anitimer) obj.startslide(false) } ypslideoutmenu.prototype.startslide = function(open) { this[open ? "onactivate" : "ondeactivate"]() this.open = open if (open) this.setvisibility(true) this.starttime = (new date()).gettime() this.anitimer = window.setinterval(this.gref + ".slide()", ypslideoutmenu.mincpuresolution) } ypslideoutmenu.prototype.slide = function() { var elapsed = (new date()).gettime() - this.starttime if (elapsed > ypslideoutmenu.anilen) this.endslide() else { var d = math.round(math.pow(ypslideoutmenu.anilen-elapsed, 2) * this.accelconst) if (this.open && this.dirtype == "-") d = -d else if (this.open && this.dirtype == "+") d = -d else if (!this.open && this.dirtype == "-") d = -this.dim + d else d = this.dim + d this.moveto(d) } } ypslideoutmenu.prototype.endslide = function() { this.anitimer = window.cleartimeout(this.anitimer) this.moveto(this.open ? this.outpos : this.homepos) if (!this.open) this.setvisibility(false) if ((this.open && !this.over) || (!this.open && this.over)) { this.startslide(this.over) } } ypslideoutmenu.prototype.setvisibility = function(bshow) { var s = this.ns4 ? this.container : this.container.style s.visibility = bshow ? "visible" : "hidden" } ypslideoutmenu.prototype.moveto = function(p) { this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px" } ypslideoutmenu.prototype.getpos = function(c) { return parseint(this.style[c]) } // events ypslideoutmenu.prototype.onactivate = function() { } ypslideoutmenu.prototype.ondeactivate = function() { }