Slide open layer on page.

I have a page that I am trying to slide open a layer onthe page. I have pulled some code and am very close, but need some help. The remaining isseues are:

1) when the layer becomes visible, I want the copy on the page to move below it. I think this is just chaning the z-index.
2) I would like the layer to open when the page loads. I can not put this in the BODY tag and tried to open another <script> tag, but could not get it to work.

Thanks for any help.

<html>
<head>
      <script language="javascript" src="../ypSlideOutMenus.js"></script>
      <script language="javascript">
            new ypSlideOutMenu("menu1", "down", 20, 20, 500, 200)

    ypSlideOutMenu.writeCSS();
   
      </script>

      <style type="text/css">
            /* just basic text formatting - nothing special */
            @import "/_common/demo.css";

            .menuActuator a {
                  color:#666666;
                  font-weight:bold;
                  font-size:12px;
                  font-family:arial;
            }

            .menu {
                  font-family:verdana;
                  color:#666666;
                  font-size:10px;
                  background-color:#cccccc;
                  layer-background-color:#cccccc;
            }
      </style>
</head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor="white">
      <table bgcolor="#CCCCCC" width="450" cellpadding="2" cellspacing="0" border="0">
      <tr>
            <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu1');">menu1</a></td>
            <td width="200" align="left" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll()">hide 'em all</a></td>
            <td width="100">&nbsp;</td>
      </tr>
      </table>

      <div id="menu1Container">
            <div id="menu1Content"><table border="0" width="500" cellspacing="1" cellpadding="2" align="center" bgcolor="#FFFF66">
      <tr>
            <td>We have some questions that you might be able ot help us with. <br>hi<br>hi<br>hi<a href="" onClick="ypSlideOutMenu.hideAll()">Close</a></td>
      </tr>
</table></div>
      </div>
Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy.

<script type="text/javascript" language="javascript">
<!--
ypSlideOutMenu.showMenu('menu1');
//-->
</script>

INCLUDED JS FIle

/*****************************************************
 * 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 = 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
      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 += '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 += '}'

            this.css = strCSS;

            this.load()
      }
}

ypSlideOutMenu.writeCSS = function() {
      document.writeln('<style type="text/css">');

      for (var id in ypSlideOutMenu.Registry) {
            document.writeln(ypSlideOutMenu.Registry[id].css);
      }

      document.writeln('</style>');
}

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 <hideDelay> 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() { }


</body>

</html>
LVL 2
td234Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nschaferCommented:
Hi td234,

1. Yes the z-index controls front-back layering.  When you say below do you mean behind or underneath?

2. try adding code like this:
    window.onload=function() { yourfunction();}

Hope this helps,
Neal.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
td234Author Commented:
I figured this out using a different script. Thanks anyway.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.