Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post

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

    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?

    Code:
    /*****************************************************
    * 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() { }

  2. #2
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post

    shameless bump

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

  3. #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  4. #4
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems aligning ypslideoutmenu according to resolution

    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

  5. #5
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ypslideoutmenu relative positioning/resolution conflict

    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

    Code:
    <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>

  6. #6
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I Can Fix It

    The problem is that the script writes a style tag for each menu.
    Code:
     
    
    <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.

  7. #7
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  8. #8
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Better design

    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:
    Code:
    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:
    Code:
    // 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).


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •