(long) possibly a challenge for the cf gurus...

[subhailc]

the following code is by aaron boodman, the source .js is available on his site http://www.youngpup.net. it's a fantastic script, agile-adaptable and graceful.

the dilly i'm working on atm has about 75 of these little bastards (bastards=ypSlideOutMenus) - and when i finally turned txt to html i found that most didn't work, despite the fact that i filled in the constant info from an mdb - so no human error. rewrote, rethought, etc. ad nauseum - finally emailed mr. boodman - he knew of the error and mentioned an irregular ie bug that caused the script to fail after roughly 30 menu instances.

anybody got a fix?

/*****************************************************
* ypSlideOutMenu
* 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... 
*
* Revised:
* - 08/29/2002 : added .hideAll()
*
* --youngpup--
*****************************************************/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 1000
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
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
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = '<style type="text/css">';
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
strCSS += '</style>'
d.write(strCSS)
this.load()
}
}
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
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
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)
obj.hideTimer = 0
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])
}
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }

[subhailc]

still haven't resolved this, if anyone would care to take a shot at it i'd appreciate it

[Willy Duitt]

Oh this was a question.
I thought you were posting a challenge.
And that's like daring your mechanic that he can't fix your car. (for free)

Why don't you post a link to your dilly of a page and maybe someone could possibly see what errors are being thrown after the 30 slideout menu's.

Why would you need 75 slideout menu's anyway?

.......Willy

[skycast]

Hi guys, I am having immense difficulty trying to align my drop down menu in accordance to what resolution my browser is. You can see an example of my site which utilises this @ www.skycast.co.uk. When viewed at 1280x1024 I have aligned the menus to align perfectly, however when I switch resolution to anything lower they are all over the place. Do you know how to fix this?

Cheers,

Tom

[skycast]

Hi I am having extreme difficulties getting my drop down menu to work in alignment with my main root menu in various window sizes and resolutions. Could you possibly have a look at my code and suggest a way of keeping the drop down menu aligned relative to the root menu regardless of window size/res.?

Thanks in advance.

Tom

<HTML>
<SCRIPT language=javascript src="skycast_files/ypSlideOutMenus.js"></SCRIPT>
<body>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</SCRIPT>
<SCRIPT language=javascript>
new ypSlideOutMenu("menu1", "down", 502, 147, 171, 100)
new ypSlideOutMenu("menu2", "down", 602, 147, 171, 100)
new ypSlideOutMenu("menu3", "down", 692, 147, 171, 96)
new ypSlideOutMenu("menu4", "down", 782, 147, 171, 96)
new ypSlideOutMenu("menu5", "down", 872, 147, 171, 96)
</SCRIPT>
<CENTER>
<TABLE height=157 cellSpacing=0 cellPadding=0 width=770 border=0>
  <TBODY>
  <TR>
      <TR>
    <TD colSpan=14><IMG height=60 alt="" 
      src="/WebHostV1-hd_01.gif" width=770></TD></TR>
  <TR>
    <TD colSpan=9 rowSpan=2><IMG height=60 alt="" 
      src="/WebHostV1-hd_02.gif" width=563></TD>
    <TD colSpan=4><IMG height=21 alt="" 
      src="/WebHostV1-hd_dom.gif" width=191></TD>
    <TD rowSpan=4><IMG height=96 alt="" 
      src="/WebHostV1-hd_04.gif" width=16></TD></TR>
  <TR>
    <TD colSpan=4><IMG height=39 alt="" 
      src="/WebHostV1-hd_05.gif" width=191></TD></TR>
  <TR>
    <TD colSpan=3><IMG height=19 alt="" 
      src="/WebHostV1-hd_06.gif" width=289></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('home','','themes/WebHost-V1/images/WebHostV1-hd_b1.gif',1);ypSlideOutMenu.showMenu('menu1')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu1');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index.php"><IMG id=home height=19 alt=Home 
      src="/WebHostV1-hd_b1.gif" width=72 border=0 
name=home></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_08.gif" width=20></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('radio','','themes/WebHost-V1/images/WebHostV1-hd_b2.gif',1);ypSlideOutMenu.showMenu('menu2')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu2');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index2.php"><IMG id=radio height=19 alt=Radio 
      src="/WebHostV1-hd_b2.gif" width=72 border=0 
    name=radio></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_10.gif" width=19></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('interact','','themes/WebHost-V1/images/WebHostV1-hd_b3.gif',1);ypSlideOutMenu.showMenu('menu3')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu3');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index3.php"><IMG id=interact height=19 
      alt=Interact src="/WebHostV1-hd_b3.gif" width=72 border=0 
      name=interact></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_12.gif" width=19></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('members','','themes/WebHost-V1/images/WebHostV1-hd_b4.gif',1);ypSlideOutMenu.showMenu('menu4')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu4');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index4.php"><IMG id=members height=19 
      alt=Members src="/WebHostV1-hd_b4.gif" width=72 border=0 
      name=members></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_14.gif" width=18></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('links','','themes/WebHost-V1/images/WebHostV1-hd_b5.gif',1);ypSlideOutMenu.showMenu('menu5')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu5');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index5.php"><IMG id=links height=19 alt=Links 
      src="/WebHostV1-hd_b5.gif" width=72 border=0 
    name=links></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_16.gif" width=29></TD></TR>
  <TR>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_17.gif" 
    width=25></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_user.gif" 
      width=229></TD>
    <TD colSpan=2><IMG height=17 alt="" 
      src="/WebHostV1-hd_19.gif" width=107></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_20.gif" 
    width=72></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_21.gif" 
    width=72></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_22.gif" 
    width=72></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_23.gif" 
    width=72></TD></TR></TBODY></TABLE>
<DIV id=menu1Container>
<DIV id=menu1Content 
style="FILTER: alpha(opacity=90); LEFT: 0px; POSITION: relative; TEXT-ALIGN: left">
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('news12','','themes/WebHost-V1/images/news_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=News">
    <IMG id=news12 alt=News 
      src="/news.png" border=0 name=news12 width="88" height="19"></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('about7','','themes/WebHost-V1/images/about_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=About">
    <IMG id=about7 
      alt=About src="/about.png" border=0 
name=about7 width="88" height="19"></A></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('contact7','','themes/WebHost-V1/images/contact_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Contact">
    <IMG id=contact7 
      alt=contact src="/contact.png" border=0 name=news7 width="88" height="19"></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('link7','','themes/WebHost-V1/images/link_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Link">
    <IMG id=link7 alt=about 
      src="/link.png" border=0 name=link7 width="88" height="19"></A></TD></TR>
  </TBODY></TABLE></div></div>
<DIV id=menu2Container>
<DIV id=menu2Content 
style="FILTER: alpha(opacity=90); LEFT: 0px; POSITION: relative; TEXT-ALIGN: left">
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('listen7','','themes/WebHost-V1/images/listen_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Listen">
    <IMG id=listen7 
      alt=listen7 src="/listen.png" border=0 name=Listen width="88" height="19"></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('schedule7','','themes/WebHost-V1/images/schedule_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Schedule">
    <IMG id=schedule7 
      alt=About src="/schedule.png" border=0 
    name=schedule7 width="88" height="19"></A></A></TD></TR></div></div>
   </TBODY></TABLE></DIV></DIV>
</DIV></DIV>

[DHTML Kitchen]

The problem is that the script writes a style tag for each menu.

 

<style>
selector {property: value;property2: value;}
</style>

So when you write 30+ menus, you run into problems with the browser ignoring the extra stylesheets (which aren't even necessary). It's a design flaw. Aaron could fix it if he wanted to. I can give you a solution that will allow you to have as many menus as you want, if you want.

I also have a script that functions just a little better than Aaron's, I think. Here are some demos:
http://dhtmlkitchen.com/scripts/glidemenus/demo/

It's a little more effort to get it working, but not too difficult. Comes with tech support, which you should really take advantage of.

There are a few people using it right now. Only one site is public (A rochester weather site (forgot the URL)).

If you're interested in a quick fix, shoot me an email @ dhtmlkitchen.com.

[boogs]

A design flaw in the script or the browser? I'd say it's a browser bug in IE to ignore the 31st stylesheet. I don't see anything in the spec which says it's cool to do that. And no other browser does.

In any case, thanks for identifying the problem. You're right, it's easy to fix.

Ah yes, there is it.

[DHTML Kitchen]

Aaron,

thanks for linking me up.

It's a browser limitation, granted, but I think the way you have it now is better design.

The only reason to write a style tag for each menu (the way it was before) was convenience, and the convenience lost by making a writeCSS function is negligible.

Could've also been wrapped:

ypSlideOutMenus.initMenus = function( ypSlideOutMenuArray ) {

};

I would've done it that way. A param constraint over a procedural constraint.


But there was already a patch for the problem on Aveda.com. Did you know?

From aveda.com src:

// The following code originally invoked "document.write" but it caused
// a crash in IE (but not NS) when there were
// more than 31 menus total.  What crashed is that the styles that were
// declared in the css disappeared with 31 menus, where 32 menus caused
// the d.write call to fail entirely.  When I changed
// it so that the style changes were accumulated into one string
// (then at the end that string was written into the document,
// so that document.write was only called once) this solved the problem.

I didn't discover something new, maybe I brought it to the forefront of your attention. Thanks for linking me up (even though you spelled my name wrong).